diff --git a/web/src/components/layout/AppShell.tsx b/web/src/components/layout/AppShell.tsx index 88442b2..e5dd25f 100644 --- a/web/src/components/layout/AppShell.tsx +++ b/web/src/components/layout/AppShell.tsx @@ -1,12 +1,19 @@ -import { Link, Outlet, useNavigate } from '@tanstack/react-router' +import { useEffect, useState } from 'react' +import { Link, Outlet, useMatchRoute, useNavigate, useRouterState } from '@tanstack/react-router' import { Toaster } from '@/components/ui/toast' import { useLogout, useMe } from '@/lib/auth' +import { cn } from '@/lib/cn' -const navLinks = [ - { to: '/gardens', label: 'Gardens' }, - { to: '/plants', label: 'Plants' }, +// Top-level sections. `icon` is only used by the mobile bottom bar; the desktop +// top bar shows labels alone. Settings is filtered to admins at render. +const sections = [ + { to: '/gardens', label: 'Gardens', icon: '๐Ÿก', adminOnly: false }, + { to: '/plants', label: 'Plants', icon: '๐ŸŒฟ', adminOnly: false }, + { to: '/settings', label: 'Settings', icon: 'โš™๏ธ', adminOnly: true }, ] as const +type Section = (typeof sections)[number] + // TanStack Router concatenates the base className with activeProps/inactiveProps, // so state-specific and conflicting utilities (text-muted vs text-fg) live in the // state props โ€” never in the base โ€” to avoid ambiguous overrides. @@ -14,73 +21,59 @@ const navLinkBase = 'rounded-md px-3 py-1.5 text-sm font-medium transition-color const navLinkActive = 'bg-border/60 text-fg' const navLinkInactive = 'text-muted hover:bg-border/60 hover:text-fg' -/** Top-level chrome: a sticky nav bar plus the routed page in an . */ +/** + * Top-level chrome. Mobile-first: a slim top bar (brand + account) with the + * section nav moved to a thumb-reachable bottom tab bar; the desktop breakpoint + * (`md:`) restores the inline top nav. The editor is a full-screen context, so it + * owns the bottom of the screen โ€” the app bottom bar hides there (the brand link + * is the way back to the gardens list), leaving exactly one bottom bar per route. + */ export function AppShell() { const me = useMe() - const logout = useLogout() - const navigate = useNavigate() const user = me.data + const matchRoute = useMatchRoute() - async function onLogout() { - try { - await logout.mutateAsync() - await navigate({ to: '/login' }) - } catch { - // The logout request failed, so the session is still valid server-side: - // leave the user where they are (the button re-enables for a retry) rather - // than pretending they're signed out. logout.isError drives the title below. - } - } + // Full-screen canvas contexts own the bottom of the screen: the garden editor + // and the public shared-garden view both render a 100dvh-8rem canvas, so a + // signed-in viewer must not get the app bottom bar overlapping it. Fuzzy:false + // so the '/gardens' list itself still shows the bar. + const inEditor = !!matchRoute({ to: '/gardens/$gardenId', fuzzy: false }) + const inPublicGarden = !!matchRoute({ to: '/g/$token', fuzzy: false }) + const showBottomNav = !!user && !inEditor && !inPublicGarden + + const visibleSections = sections.filter((s) => !s.adminOnly || user?.isAdmin) return (
-
+
-
+
+ {showBottomNav && } +
) } + +/** Account control: a compact button that toggles a small sign-out popover. On + * desktop the display name shows inline; on mobile it lives inside the popover. */ +function AccountMenu({ displayName }: { displayName: string }) { + const logout = useLogout() + const navigate = useNavigate() + const [open, setOpen] = useState(false) + const pathname = useRouterState({ select: (s) => s.location.pathname }) + + // Close on any route change, so navigating (bottom nav, browser back) can't + // leave the popover โ€” and its full-screen backdrop โ€” stuck open over the page. + useEffect(() => setOpen(false), [pathname]) + + async function onLogout() { + try { + await logout.mutateAsync() + await navigate({ to: '/login' }) + } catch { + // The logout request failed, so the session is still valid server-side. + // Keep the popover OPEN so the button (now "Retry sign out", driven by + // logout.isError) stays on screen โ€” closing it would hide the only retry + // affordance and pretend nothing went wrong. + } + } + + const initial = displayName.trim().charAt(0).toUpperCase() || 'ยท' + + return ( +
+ + + {open && ( + <> + {/* Full-screen click-away backdrop; reliably closes on an outside tap + without a document listener. */} + +
+ + )} + + ) +} + +/** Mobile bottom tab bar for the top-level sections (thumb zone, safe-area aware). */ +function BottomNav({ sections }: { sections: ReadonlyArray
}) { + return ( + + ) +}