Lucas Berger
fdcb4dc442
- Reverse-gate the /setup route: setupComplete===true → SetupPage alreadyLocked (Surface 8 'Setup already complete'); loading → no-flash placeholder; else wizard - Add App.test.tsx reverse-gate tests (already-complete surface + active wizard on /setup) - SetupPage mock now respects the alreadyLocked prop
243 lines
11 KiB
TypeScript
243 lines
11 KiB
TypeScript
/**
|
|
* App — BrowserRouter shell with react-router declarative routing.
|
|
*
|
|
* Routes:
|
|
* / → redirect to /calendar
|
|
* /calendar → CalendarShell
|
|
* /lists → ListsIndex
|
|
* /lists/:listId → ListDetail
|
|
* /setup → SetupPage (standalone wizard — no AppNav/BottomTabBar)
|
|
*
|
|
* Setup gate (Phase 12):
|
|
* On app load, GET /api/setup/status is fetched with staleTime 0 (always fresh).
|
|
* While loading: render nothing (prevent flash — mirrors the isAdmin loading gate).
|
|
* When setupComplete === false: redirect all non-/setup routes to /setup via Navigate.
|
|
* When setupComplete === true: normal app boot proceeds.
|
|
* The /setup route renders standalone — AppNav/BottomTabBar are NOT rendered on wizard.
|
|
*
|
|
* Layout:
|
|
* AppNav is rendered as a PERSISTENT sibling of <Routes> (outside any Route),
|
|
* so it survives route transitions (FIX 3). AppNav provides:
|
|
* - Phone (≤767px): 48px top bar (the header above the main content area)
|
|
* - Desktop (≥768px): 240px left sidebar with nav links + colour legend
|
|
*
|
|
* BottomTabBar is also a sibling of <Routes> so the tab state remains consistent.
|
|
* On desktop (≥768px) BottomTabBar is hidden via CSS (FIX 4).
|
|
*
|
|
* Auth flow:
|
|
* /api/me is fetched once at the App level. While loading or on error the
|
|
* full-screen AuthSplash overlay is shown (CalendarShell's AuthSplash is
|
|
* positioned fixed with z-index so it covers AppNav too). AppNav renders
|
|
* with empty / partial data until auth resolves — this is fine because the
|
|
* AuthSplash overlay hides the AppNav during that window.
|
|
*
|
|
* navigateFallback ('/index.html') in vite.config.ts covers SPA deep-links to
|
|
* /lists/* — the SW denylist only excludes /callback, /api/, and /health, so
|
|
* /lists/* is served from cache correctly.
|
|
*
|
|
* Phase 5 additions:
|
|
* - PermissionDeniedBanner: shown below AppNav when OS permission revoked (D-10)
|
|
* - SettingsSheet: avatar-triggered bottom sheet with master notifications toggle (D-09)
|
|
*
|
|
* Phase 6 fix (FIX 3):
|
|
* - AppNav lifted from CalendarShell to this level so /lists keeps the nav chrome.
|
|
* - /api/me query shared so AppNav has user data on all routes.
|
|
*/
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { CalendarShell } from './components/CalendarShell.js';
|
|
import { ListsIndex } from './routes/ListsIndex.js';
|
|
import { ListDetail } from './routes/ListDetail.js';
|
|
import { AdminPage } from './routes/AdminPage.js';
|
|
import { SetupPage } from './routes/SetupPage.js';
|
|
import { BottomTabBar } from './components/BottomTabBar.js';
|
|
import { AppNav } from './components/AppNav.js';
|
|
import { PushPermissionPrompt } from './components/PushPermissionPrompt.js';
|
|
import { PermissionDeniedBanner } from './components/PermissionDeniedBanner.js';
|
|
import { SetupBanner } from './components/SetupBanner.js';
|
|
import { SettingsSheet } from './components/SettingsSheet.js';
|
|
import { fetchMe, fetchSetupStatus } from './api/client.js';
|
|
|
|
function isPhone(): boolean {
|
|
return typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches;
|
|
}
|
|
|
|
export default function App() {
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
const phone = isPhone();
|
|
|
|
// Setup status query — staleTime 0 so the wizard gate is always fresh (D-10 spirit).
|
|
// Must be fetched before rendering any authenticated route to gate the app on /setup.
|
|
// Uses the pre-auth /api/setup/status endpoint — no OIDC session required.
|
|
const setupQuery = useQuery({
|
|
queryKey: ['setupStatus'],
|
|
queryFn: fetchSetupStatus,
|
|
retry: false,
|
|
staleTime: 0,
|
|
});
|
|
|
|
// Fetch current user once at the app shell level so AppNav has member data on
|
|
// ALL routes. This is the same query key (['me']) used by CalendarShell, so
|
|
// TanStack Query deduplicates the request — no double fetch.
|
|
//
|
|
// gap 6 (mechanism (ii) — ['me'] staleness, NOT a linking gap; see SUMMARY):
|
|
// the first-login claim in upsertUser (auth/user.ts) preserves the same users.id,
|
|
// so the wizard-stored CalDAV credential stays linked → needsProviderSetup is
|
|
// correctly FALSE in the DB after the operator authenticates post-wizard. The bug
|
|
// was purely client-cache: a ['me'] entry populated BEFORE the claim (e.g. an
|
|
// earlier pre-auth visit) served a stale needsProviderSetup=true for up to 5
|
|
// minutes, so the "Set up your calendar" banner kept showing. Set staleTime 0 on
|
|
// the boot ['me'] query so the authenticated app shell always refetches member
|
|
// status on entry — needsProviderSetup then reflects the just-claimed credential.
|
|
const meQuery = useQuery({
|
|
queryKey: ['me'],
|
|
queryFn: fetchMe,
|
|
retry: false,
|
|
staleTime: 0,
|
|
});
|
|
|
|
// isAdmin from /api/me — used for UX gating only (D-03). Server enforces 403.
|
|
// While meQuery is loading, isAdmin is false/undefined → admin route redirects
|
|
// (loading gate: no flash of admin content for non-admins).
|
|
const isAdmin = meQuery.data?.user.isAdmin ?? false;
|
|
|
|
// Derive members for AppNav from the shared /api/me response
|
|
const members = useMemo(() => {
|
|
if (!meQuery.data?.user) return [];
|
|
return [
|
|
{
|
|
id: String(meQuery.data.user.id),
|
|
name: meQuery.data.user.displayName ?? 'Member',
|
|
color: meQuery.data.user.color,
|
|
},
|
|
];
|
|
}, [meQuery.data]);
|
|
|
|
// Outer layout: phone = column, desktop = row (AppNav sidebar + content)
|
|
const outerStyle: React.CSSProperties = {
|
|
height: '100dvh',
|
|
display: 'flex',
|
|
flexDirection: phone ? 'column' : 'row',
|
|
background: 'var(--color-surface)',
|
|
color: 'var(--color-text-primary)',
|
|
fontFamily: 'var(--font-family-base)',
|
|
overflow: 'hidden',
|
|
};
|
|
|
|
// Content area: fills remaining space next to / below AppNav
|
|
const contentStyle: React.CSSProperties = {
|
|
flex: 1,
|
|
minWidth: 0,
|
|
minHeight: 0,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
};
|
|
|
|
// Setup gate: while setup status is loading, render nothing (prevent flash).
|
|
// Mirrors the isAdmin loading-gate pattern for the admin route.
|
|
const setupComplete = setupQuery.data?.setupComplete;
|
|
const setupLoading = setupQuery.isLoading;
|
|
|
|
return (
|
|
<BrowserRouter>
|
|
<Routes>
|
|
{/* /setup route — standalone wizard, no AppNav/BottomTabBar shell (UI-SPEC §Routing).
|
|
Reverse gate (gap 5, T-12-04): once setup is complete the wizard must NOT re-mount.
|
|
- While setupQuery is loading → render the no-flash placeholder (no wizard before
|
|
status resolves), mirroring the `*`-route loading gate below.
|
|
- setupComplete === true → render SetupPage with alreadyLocked → Surface 8
|
|
("Setup already complete"), keeping the operator on /setup with a terminal surface.
|
|
- setupComplete === false (or undefined post-load) → active wizard, as before.
|
|
The backend already 423s setup mutations; this is the matching frontend reverse-gate. */}
|
|
<Route
|
|
path="/setup"
|
|
element={
|
|
setupLoading ? (
|
|
<div aria-hidden="true" />
|
|
) : setupComplete === true ? (
|
|
<SetupPage alreadyLocked={true} />
|
|
) : (
|
|
<SetupPage />
|
|
)
|
|
}
|
|
/>
|
|
|
|
{/* All other routes are gated on setup completion */}
|
|
<Route
|
|
path="*"
|
|
element={
|
|
// While setupQuery is loading: render nothing (no flash before redirect)
|
|
setupLoading ? (
|
|
<div aria-hidden="true" />
|
|
) : setupComplete === false ? (
|
|
// Not configured: full-app redirect to /setup (no nav shell rendered)
|
|
<Navigate to="/setup" replace />
|
|
) : (
|
|
// Setup complete: render the normal authenticated app shell
|
|
<>
|
|
{/* Permission-denied banner: shown when OS revoked and user had notifications on (D-10) */}
|
|
<PermissionDeniedBanner />
|
|
|
|
<div style={outerStyle}>
|
|
{/* Persistent AppNav — phone: top bar; desktop: left sidebar.
|
|
Renders on ALL routes so nav chrome survives route transitions (FIX 3). */}
|
|
<AppNav
|
|
members={members}
|
|
currentUserColor={meQuery.data?.user.color}
|
|
currentUserName={meQuery.data?.user.displayName ?? undefined}
|
|
onOpenSettings={() => setSettingsOpen(true)}
|
|
isAdmin={isAdmin}
|
|
/>
|
|
|
|
{/* Main content area — all routes render here */}
|
|
<div style={contentStyle}>
|
|
{/* SetupBanner: shown above content when needsProviderSetup=true (D-07).
|
|
Reads from the shared ['me'] query — no additional fetch. */}
|
|
<SetupBanner />
|
|
|
|
<Routes>
|
|
<Route path="/" element={<Navigate to="/calendar" replace />} />
|
|
<Route path="/calendar" element={<CalendarShell />} />
|
|
<Route path="/lists" element={<ListsIndex />} />
|
|
<Route path="/lists/:listId" element={<ListDetail />} />
|
|
{/* /admin route: gated by isAdmin (UX, D-03). Server enforces 403 on all /api/admin/* */}
|
|
{/* Loading gate: show nothing while meQuery is fetching (prevents flash).
|
|
Once resolved: isAdmin → AdminPage; else → redirect to /calendar. */}
|
|
<Route
|
|
path="/admin"
|
|
element={
|
|
meQuery.isLoading ? (
|
|
<div aria-hidden="true" />
|
|
) : isAdmin ? (
|
|
<AdminPage />
|
|
) : (
|
|
<Navigate to="/calendar" replace />
|
|
)
|
|
}
|
|
/>
|
|
</Routes>
|
|
</div>
|
|
</div>
|
|
|
|
{/* BottomTabBar — phone-only (hidden ≥768px via CSS, FIX 4) */}
|
|
<BottomTabBar isAdmin={isAdmin} />
|
|
|
|
{/* Post-install permission prompt (D-08): renders only when isInstalled() is true
|
|
and Notification.permission === 'default' and not dismissed */}
|
|
<PushPermissionPrompt />
|
|
|
|
{/* Settings sheet — master notifications toggle (D-09), opened from avatar */}
|
|
<SettingsSheet isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} />
|
|
</>
|
|
)
|
|
}
|
|
/>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
}
|