Skip to content

Mobile: condense workspace header to 2 rows (project selector + view bar) #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mvalancy merged 1 commit into from
Jun 16, 2026
Merged

Mobile: condense workspace header to 2 rows (project selector + view bar) #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 20 additions & 12 deletions packages/web/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
Expand All @@ -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>

Expand Down
5 changes: 3 additions & 2 deletions packages/web/src/pages/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading