From d70a5a2ab2a9986ac8cf7cb1560f2300f9ebc53b Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Tue, 16 Jun 2026 10:21:04 -0700
Subject: [PATCH] Mobile: condense the workspace header to 2 rows (project
 selector + view bar)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The phone header was three bands (hamburger/logo, title+selector, view tabs).
Collapse to two: the global mobile top bar now carries the project selector on
the workspace route (row 1 = ☰ + selector), and the workspace's own left
section (the "Graph Viewer / version / team" + selector block) is desktop-only,
leaving just the view bar as row 2.

- Layout.tsx: mobile top bar shows the GraphSelector on / and /workspace
  (hamburger + selector); other routes keep the GraphDone wordmark.
- Workspace.tsx: the top-bar left section is `hidden lg:block` (desktop keeps
  the full three-section bar; the mobile selector lives in the global bar).

Mobile spec still green; web typecheck clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web/src/components/Layout.tsx | 32 ++++++++++++++++----------
 packages/web/src/pages/Workspace.tsx   |  5 ++--
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/components/Layout.tsx b/packages/web/src/components/Layout.tsx
index 03dc498e..63f193a0 100644
--- a/packages/web/src/components/Layout.tsx
+++ b/packages/web/src/components/Layout.tsx
@@ -19,6 +19,9 @@ export function Layout({ children }: LayoutProps) {
   const [showFloatingConsole, setShowFloatingConsole] = React.useState(false);
   const desktopSidebarCollapsed = true; // Zen mode permanently on
   const { currentTeam, currentUser } = useAuth();
+  // On the workspace, the mobile top bar carries the project selector (row 1 of a
+  // 2-row mobile header: project selection, then the view bar in the page below).
+  const isWorkspaceRoute = location.pathname === '/' || location.pathname === '/workspace';
 
   const navigation = [
     { name: 'Workspace', href: '/', icon: Globe, description: 'Main work' },
@@ -44,21 +47,26 @@ export function Layout({ children }: LayoutProps) {
       {/* Static gradient background - optimized for all browsers */}
       <div className="lagoon-caustics"></div>
       
-      {/* Mobile menu button */}
+      {/* Mobile top bar: hamburger + (on the workspace) the project selector, so the
+          mobile header is just two rows — project selection here, view bar below. */}
       <div className="lg:hidden relative z-30 pt-safe">
-        <div className="flex items-center justify-between bg-gray-800/90 backdrop-blur-sm px-4 py-2 border-b border-gray-700/50">
-          <div className="flex items-center">
-            <button
-              type="button"
-              className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-300 hover:bg-gray-700"
-              onClick={() => setSidebarOpen(!sidebarOpen)}
-            >
-              <Menu className="h-6 w-6" aria-hidden="true" />
-            </button>
-            <Link to="/" className="ml-3 text-xl font-bold text-green-400 hover:text-green-300 transition-colors">
+        <div className="flex items-center gap-2 bg-gray-800/90 backdrop-blur-sm px-3 py-2 border-b border-gray-700/50">
+          <button
+            type="button"
+            className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-300 hover:bg-gray-700 flex-shrink-0"
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+          >
+            <Menu className="h-6 w-6" aria-hidden="true" />
+          </button>
+          {isWorkspaceRoute ? (
+            <div className="flex-1 min-w-0">
+              <GraphSelector />
+            </div>
+          ) : (
+            <Link to="/" className="text-lg font-bold text-green-400 hover:text-green-300 transition-colors">
               GraphDone
             </Link>
-          </div>
+          )}
         </div>
       </div>
 
diff --git a/packages/web/src/pages/Workspace.tsx b/packages/web/src/pages/Workspace.tsx
index dcf463db..b06f5bf4 100644
--- a/packages/web/src/pages/Workspace.tsx
+++ b/packages/web/src/pages/Workspace.tsx
@@ -90,8 +90,9 @@ export function Workspace() {
         {/* Responsive Layout Container */}
         <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 sm:gap-4">
           
-          {/* Left Section: Graph Selector */}
-          <div className="flex-1 min-w-0 lg:order-1 max-w-lg">
+          {/* Left Section: Graph Selector — desktop only; on mobile the project
+              selector lives in the global top bar (Layout) to keep the header to 2 rows. */}
+          <div className="hidden lg:block flex-1 min-w-0 lg:order-1 max-w-lg">
             <div className="flex items-center space-x-4 h-full">
               {/* Title & Version - Compact */}
               <div className="flex flex-col justify-center">