fix(06): make AppNav persistent across routes so Lists keeps the nav

- Lift AppNav from CalendarShell to App.tsx as a sibling of <Routes>
- App.tsx fetches /api/me (same query key as CalendarShell — deduplicated by TanStack Query)
- App.tsx provides the outer layout (phone: column, desktop: row) with AppNav always rendered
- CalendarShell simplified: no longer manages AppNav, outer flex layout stays in App.tsx
- AuthSplash gains overlay prop (position:fixed inset:0 z-index:999) so it covers AppNav when needed
- CalendarShell uses AuthSplash with overlay=true so auth splashes cover full viewport
- Remove onOpenSettings prop from CalendarShell (wired directly in App.tsx to SettingsSheet)
- Desktop sidebar nav (FamilySync brand, Calendar/Lists links) now persists on /lists route

apps/pwa/src/components/AuthSplash.tsx

@@ -38,12 +38,20 @@ export interface AuthSplashProps {
    * Defaults to "Taking you to the sign-in page…" (cold-load copy per UI-SPEC §Surface 1).
    */
   body?: string
+  /**
+   * When true, renders with position:fixed inset:0 z-index:999 so the splash
+   * covers the entire viewport including the persistent AppNav (FIX 3).
+   * Use this when CalendarShell (a child of the app shell) needs to show an
+   * auth interstitial that hides the nav chrome.
+   */
+  overlay?: boolean
 }
 
 export function AuthSplash({
   state,
   heading = 'Signing you in',
   body = 'Taking you to the sign-in page…',
+  overlay = false,
 }: AuthSplashProps) {
   const isDeadEnd = state === 'dead-end'
   const showSpinner = !isDeadEnd
@@ -53,7 +61,9 @@ export function AuthSplash({
       role="status"
       aria-label="Signing you in"
       style={{
-        height: '100dvh',
+        ...(overlay
+          ? { position: 'fixed', inset: 0, zIndex: 999 }
+          : { height: '100dvh' }),
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',

apps/pwa/src/components/CalendarShell.tsx

@@ -17,9 +17,10 @@
  *   - Navigation: Schedule-X's built-in header is the sole navigation bar (Today/‹›/view switcher
  *     + weekday-name row). The custom ViewToolbar and calendar-controls plugin have been removed.
  *
- * Layout:
- *   - Phone (≤767px): AppNav top bar → Schedule-X (header + grid)
- *   - Tablet/Desktop (≥768px): AppNav left sidebar (240px) + main area (Schedule-X header + grid)
+ * Layout (FIX 3):
+ *   AppNav has been lifted to App.tsx and is no longer rendered here. CalendarShell fills
+ *   its parent container (a flex:1 area in App.tsx). Auth splashes use position:fixed to
+ *   overlay everything including AppNav.
  *
  * State branches:
  *   isLoading (initial) → SkeletonCalendar
@@ -51,7 +52,6 @@ import { EventDetailPopover } from './EventDetailPopover.js'
 import { EventForm } from './EventForm.js'
 import { DeleteConfirmationDialog } from './DeleteConfirmationDialog.js'
 import { SyncStateToast } from './SyncStateToast.js'
-import { AppNav } from './AppNav.js'
 import { ColorLegend } from './ColorLegend.js'
 import { SkeletonCalendar } from './SkeletonCalendar.js'
 import { InstallPrompt } from './InstallPrompt.js'
@@ -73,7 +73,7 @@ function isPhone(): boolean {
 
 // ── Component ──────────────────────────────────────────────────────────────
 
-export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void } = {}) {
+export function CalendarShell() {
   // Use per-field selectors so CalendarShell does NOT subscribe to openEventId.
   // Without selectors, any popover open/close triggers a full re-render here,
   // which rebuilds the Schedule-X config and causes a visible calendar flash (Bug B).
@@ -93,7 +93,8 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
   // AuthSplash shows the tap-to-retry recovery instead of spinning forever (D-11).
   const [loginRedirectExhausted, setLoginRedirectExhausted] = useState(false)
 
-  // Fetch current user to build per-member color config
+  // Fetch current user to build per-member color config.
+  // Same query key (['me']) as App.tsx — TanStack Query deduplicates, no double fetch.
   const meQuery = useQuery({
     queryKey: ['me'],
     queryFn: fetchMe,
@@ -124,7 +125,7 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
   // Create plugins once (stable across renders)
   const eventsService = useState(() => createEventsServicePlugin())[0]
 
-  // Build members list from /api/me for AppNav + ColorLegend
+  // Build members list from /api/me for ColorLegend (AppNav uses the same data from App.tsx)
   const members = useMemo(() => {
     if (!meQuery.data?.user) return []
     return [
@@ -255,6 +256,9 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
   // Gate the calendar render on auth state so no calendar shell, skeleton, or
   // "Sign-in required" alert paints before Authelia (D-10 success criterion 5).
   //
+  // Auth splashes use position:fixed (inset:0, z-index:999) to overlay the entire
+  // viewport including the persistent AppNav in App.tsx (FIX 3).
+  //
   // loading: meQuery is still pending — show the neutral "Signing you in" splash.
   //          No skeleton, no CalendarContent — nothing app-specific until authed.
   // isError: meQuery failed — the maybeRedirectToLogin() useEffect fires immediately
@@ -263,18 +267,18 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
   //          returns false and this splash stays — the dead-end "Tap to try again" is
   //          rendered by AuthSplash's dead-end state (wired in Task 3 via sessionExpired).
   if (meQuery.isLoading) {
-    return <AuthSplash state="loading" />
+    return <AuthSplash state="loading" overlay />
   }
 
   if (meQuery.isError) {
     // loginRedirectExhausted: the one-shot guard was already set (prior navigation),
     // so maybeRedirectToLogin() returned false — show dead-end tap-to-retry (D-11).
-    // Otherwise the useEffect at line 196 already fired maybeRedirectToLogin() and
+    // Otherwise the useEffect above already fired maybeRedirectToLogin() and
     // the browser is navigating — show the redirecting splash while it does.
     if (loginRedirectExhausted) {
-      return <AuthSplash state="dead-end" />
+      return <AuthSplash state="dead-end" overlay />
     }
-    return <AuthSplash state="redirecting" />
+    return <AuthSplash state="redirecting" overlay />
   }
 
   // ── Session-expiry interstitial (D-11) ─────────────────────────────────────
@@ -287,13 +291,14 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
         state="redirecting"
         heading="Session expired"
         body="Signing you back in…"
+        overlay
       />
     )
   }
 
   // ── Calendar content ───────────────────────────────────────────────────────
 
-  // The content panel (right of sidebar on desktop, full-width on phone).
+  // The content panel fills its parent container (a flex:1 area set by App.tsx).
   //
   // This is a plain JSX value, NOT a nested `function CalendarContent()` rendered
   // as `<CalendarContent />`. A component defined inside render has a new identity
@@ -395,98 +400,28 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
       </div>
   )
 
-  // ── Full layout ────────────────────────────────────────────────────────────
+  // ── Layout ─────────────────────────────────────────────────────────────────
+  // CalendarShell fills its container (App.tsx provides the outer layout with AppNav).
+  // Both phone and desktop use the same flex column structure here since AppNav is
+  // now outside this component.
 
-  if (phone) {
-    // Phone: stacked layout — AppNav top bar + content below + FAB
-    return (
-      <div
-        style={{
-          height: '100dvh',
-          display: 'flex',
-          flexDirection: 'column',
-          background: 'var(--color-surface)',
-          color: 'var(--color-text-primary)',
-          fontFamily: 'var(--font-family-base)',
-          overflow: 'hidden',
-        }}
-      >
-        <AppNav
-          members={members}
-          currentUserColor={meQuery.data?.user.color}
-          currentUserName={meQuery.data?.user.displayName ?? undefined}
-          onOpenSettings={onOpenSettings}
-        />
-        <InstallPrompt />
-        {calendarContent}
-        <EventDetailPopover />
-
-        {/* New Event FAB — phone: bottom-right floating action button (UI-SPEC §Interaction Contract) */}
-        <button
-          aria-label="New Event"
-          onClick={() => setEventForm(true, 'create')}
-          style={{
-            position: 'fixed',
-            bottom: 'var(--space-6)',
-            right: 'var(--space-6)',
-            width: '56px',
-            height: '56px',
-            minWidth: '56px',
-            minHeight: '56px',
-            borderRadius: '50%',
-            background: 'var(--color-text-primary)',
-            color: '#ffffff',
-            border: 'none',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
-            zIndex: 100,
-            fontFamily: 'var(--font-family-base)',
-          }}
-        >
-          <Plus size={24} aria-hidden="true" />
-        </button>
-
-        {/* EventForm modal — conditionally rendered while eventFormOpen */}
-        {eventFormOpen && <EventForm />}
-
-        {/* DeleteConfirmationDialog — always mounted; renders nothing when deleteDialogOpen is false */}
-        <DeleteConfirmationDialog />
-
-        {/* SyncStateToast — always mounted; renders nothing when lastSyncedUid is null */}
-        <SyncStateToast />
-      </div>
-    )
-  }
-
-  // Tablet/Desktop: sidebar + main area
   return (
     <div
       style={{
-        height: '100dvh',
+        flex: 1,
         display: 'flex',
-        flexDirection: 'row',
+        flexDirection: 'column',
         background: 'var(--color-surface)',
         color: 'var(--color-text-primary)',
         fontFamily: 'var(--font-family-base)',
         overflow: 'hidden',
+        height: '100%',
       }}
     >
-      {/* Left sidebar: AppNav (includes ColorLegend on desktop) */}
-      <AppNav
-        members={members}
-        currentUserColor={meQuery.data?.user.color}
-        currentUserName={meQuery.data?.user.displayName ?? undefined}
-        onOpenSettings={onOpenSettings}
-      />
+      <InstallPrompt />
 
-      {/* Main content area */}
-      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-        <InstallPrompt />
-
-        {/* New Event toolbar button — tablet/desktop (UI-SPEC §Interaction Contract) */}
+      {/* New Event toolbar button — desktop only (phone uses FAB below) */}
+      {!phone && (
         <div
           style={{
             display: 'flex',
@@ -520,9 +455,39 @@ export function CalendarShell({ onOpenSettings }: { onOpenSettings?: () => void
             New Event
           </button>
         </div>
+      )}
 
-        {calendarContent}
-      </div>
+      {calendarContent}
+
+      {/* Phone: New Event FAB — bottom-right floating action button (UI-SPEC §Interaction Contract) */}
+      {phone && (
+        <button
+          aria-label="New Event"
+          onClick={() => setEventForm(true, 'create')}
+          style={{
+            position: 'fixed',
+            bottom: 'var(--space-6)',
+            right: 'var(--space-6)',
+            width: '56px',
+            height: '56px',
+            minWidth: '56px',
+            minHeight: '56px',
+            borderRadius: '50%',
+            background: 'var(--color-text-primary)',
+            color: '#ffffff',
+            border: 'none',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: '0 4px 16px rgba(0,0,0,0.18)',
+            zIndex: 100,
+            fontFamily: 'var(--font-family-base)',
+          }}
+        >
+          <Plus size={24} aria-hidden="true" />
+        </button>
+      )}
 
       {/* EventDetailPopover — standalone mode driven by Zustand openEventId */}
       <EventDetailPopover />