Skip to content

Commit 5aecff0

Browse files
committed
fix(ui): remove redundant breadcrumb and add New Project button on projects page
The breadcrumb showed "Projects" directly above the h1 "Projects", creating a visual stutter. Removed it since this is the top-level page with no parent navigation. Added a "New Project" button (visible to logged-in users) consistent with the owner profile and dashboard pages. Updated tests accordingly.
1 parent 4c91e36 commit 5aecff0

2 files changed

Lines changed: 20 additions & 6 deletions

File tree

src/entrypoints/app/routes/projects.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Context } from 'hono'
2-
import { Breadcrumb } from '../../../design-system/components/flex-breadcrumb/index'
32
import { Layout } from '../../../design-system/components/flex-layout/index'
43
import type { ProjectService } from '../../../services/projects'
54
import { resolveUrl } from '../../../shared/base-path'
@@ -12,9 +11,15 @@ export function projectsDirectoryHandler(projectService: ProjectService) {
1211
.filter((p) => p.status === 'ready')
1312
return c.html(
1413
<Layout user={user} title="Projects" currentSection="projects">
15-
<Breadcrumb items={[{ label: 'Projects' }]} />
1614
<div class="flex-form" data-size="large">
17-
<h1>Projects</h1>
15+
<div class="l-cluster justify-between" style="align-items: baseline;">
16+
<h1>Projects</h1>
17+
{user && (
18+
<a href={resolveUrl('/new')} class="flex-button">
19+
New Project
20+
</a>
21+
)}
22+
</div>
1823
{projects.length === 0 ? (
1924
<p>No projects yet.</p>
2025
) : (

test/projects/directory-route.test.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -180,13 +180,22 @@ describe('GET /projects — projects directory route', () => {
180180
expect(html).toContain('Projects | Forms Lab')
181181
})
182182

183-
it('renders breadcrumb with "Projects" label', async () => {
183+
it('shows New Project button for logged-in users', async () => {
184184
const { service } = makeService()
185185
const app = createTestApp(service)
186186

187187
const res = await app.request('/projects')
188188
const html = await res.text()
189-
expect(html).toContain('flex-breadcrumb')
190-
expect(html).toContain('Projects')
189+
expect(html).toContain('New Project')
190+
expect(html).toContain('/new')
191+
})
192+
193+
it('hides New Project button for anonymous users', async () => {
194+
const { service } = makeService()
195+
const app = createTestApp(service, null)
196+
197+
const res = await app.request('/projects')
198+
const html = await res.text()
199+
expect(html).not.toContain('New Project')
191200
})
192201
})

0 commit comments

Comments
 (0)