feat(04-01): wire BrowserRouter + BottomTabBar + empty Lists surface

- App.tsx: BrowserRouter with /calendar, /lists, /lists/:listId routes; / redirects to /calendar
- BottomTabBar.tsx: fixed-bottom 56px tab bar with Calendar + Lists NavLinks, active accent
- AppNav.tsx: add Calendar/Lists NavLinks to desktop sidebar (≥768px)
- ListsIndex.tsx: full-height surface with isLoading/isError/empty state branches; "+ New List" FAB placeholder
- ListDetail.tsx: placeholder stub for /lists/:listId (Plan 04-04 fills in)
- listsStore.ts: Zustand UI-only store (activeTab, createListSheetOpen)
- listsClient.ts: fetchLists + List/ListItem types (initial; Plans 04-02/03 expand)
- Fix Wave-0 RED stubs: add vitest imports so stubs execute (todo) not error on import
- Fix CalendarShell.test.tsx: wrap renderWithClient in MemoryRouter (AppNav uses NavLink)
This commit is contained in:
Lucas Berger
2026-06-09 12:03:52 -04:00
parent 2f25b15949
commit c0088edf44
10 changed files with 563 additions and 3 deletions
+46
View File
@@ -0,0 +1,46 @@
/**
* ListDetail — Single list view (/lists/:listId).
*
* PLACEHOLDER: This is a stub route component for Plan 04-01.
* The full implementation (items, SSE, drag-to-reorder, etc.) is built in Plan 04-04.
*
* Purpose: allows react-router's /lists/:listId route to resolve without error
* so the BottomTabBar NavLink and any deep-link won't 404.
*/
export function ListDetail() {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
gap: '12px',
fontFamily: 'var(--font-family-base)',
padding: '0 var(--space-4, 16px)',
textAlign: 'center',
paddingBottom: 'calc(56px + env(safe-area-inset-bottom, 0px))',
}}
>
<div
style={{
fontSize: 'var(--text-heading-size, 18px)',
fontWeight: 600,
color: 'var(--color-text-primary)',
}}
>
List view coming soon
</div>
<div
style={{
fontSize: 'var(--text-body-size, 15px)',
color: 'var(--color-text-muted)',
}}
>
Full list detail with live sync is being built in Phase 4 Plan 4.
</div>
</div>
)
}