From 5aecff03049665ecbe9000cb05a777b236a1a358 Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Fri, 8 May 2026 14:32:40 +0000
Subject: [PATCH] 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.
---
 src/entrypoints/app/routes/projects.tsx | 11 ++++++++---
 test/projects/directory-route.test.ts   | 15 ++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/entrypoints/app/routes/projects.tsx b/src/entrypoints/app/routes/projects.tsx
index 76b1e3f8..30381a38 100644
--- a/src/entrypoints/app/routes/projects.tsx
+++ b/src/entrypoints/app/routes/projects.tsx
@@ -1,5 +1,4 @@
 import type { Context } from 'hono'
-import { Breadcrumb } from '../../../design-system/components/flex-breadcrumb/index'
 import { Layout } from '../../../design-system/components/flex-layout/index'
 import type { ProjectService } from '../../../services/projects'
 import { resolveUrl } from '../../../shared/base-path'
@@ -12,9 +11,15 @@ export function projectsDirectoryHandler(projectService: ProjectService) {
       .filter((p) => p.status === 'ready')
     return c.html(
       <Layout user={user} title="Projects" currentSection="projects">
-        <Breadcrumb items={[{ label: 'Projects' }]} />
         <div class="flex-form" data-size="large">
-          <h1>Projects</h1>
+          <div class="l-cluster justify-between" style="align-items: baseline;">
+            <h1>Projects</h1>
+            {user && (
+              <a href={resolveUrl('/new')} class="flex-button">
+                New Project
+              </a>
+            )}
+          </div>
           {projects.length === 0 ? (
             <p>No projects yet.</p>
           ) : (
diff --git a/test/projects/directory-route.test.ts b/test/projects/directory-route.test.ts
index 0210dfdc..5413d863 100644
--- a/test/projects/directory-route.test.ts
+++ b/test/projects/directory-route.test.ts
@@ -180,13 +180,22 @@ describe('GET /projects — projects directory route', () => {
     expect(html).toContain('Projects | Forms Lab')
   })
 
-  it('renders breadcrumb with "Projects" label', async () => {
+  it('shows New Project button for logged-in users', async () => {
     const { service } = makeService()
     const app = createTestApp(service)
 
     const res = await app.request('/projects')
     const html = await res.text()
-    expect(html).toContain('flex-breadcrumb')
-    expect(html).toContain('Projects')
+    expect(html).toContain('New Project')
+    expect(html).toContain('/new')
+  })
+
+  it('hides New Project button for anonymous users', async () => {
+    const { service } = makeService()
+    const app = createTestApp(service, null)
+
+    const res = await app.request('/projects')
+    const html = await res.text()
+    expect(html).not.toContain('New Project')
   })
 })