---
phase: 01-tournament-engine
plan: 13
subsystem: ui
tags: [sveltekit, svelte5, catppuccin, responsive, mobile-first, touch-targets, toast, datatable, fab]

# Dependency graph
requires:
  - phase: 01-tournament-engine
    provides: SvelteKit SPA scaffold, Catppuccin theme, WS/API clients, auth/tournament state stores
provides:
  - Persistent header with live clock, level, blinds, player count
  - Mobile bottom tab bar with 5 navigation tabs (48px touch targets)
  - Desktop sidebar navigation (>=768px breakpoint)
  - Floating action button (FAB) with context-aware quick actions
  - Toast notification system (success/info/warning/error with auto-dismiss)
  - Reusable DataTable component (sort, search, swipe actions, skeleton loading)
  - Multi-tournament tab selector for 2+ active tournaments
  - Loading components (spinner, skeleton, full-page)
  - Root layout shell with auth guard and responsive structure
affects: [01-14]

# Tech tracking
tech-stack:
  added: []
  patterns: [responsive-layout-shell, mobile-bottom-tabs-desktop-sidebar, fab-pattern, toast-runes-store, datatable-generic, multi-tournament-routing]

key-files:
  created:
    - frontend/src/lib/components/Header.svelte
    - frontend/src/lib/components/BottomTabs.svelte
    - frontend/src/lib/components/Sidebar.svelte
    - frontend/src/lib/components/FAB.svelte
    - frontend/src/lib/components/Toast.svelte
    - frontend/src/lib/components/DataTable.svelte
    - frontend/src/lib/components/TournamentTabs.svelte
    - frontend/src/lib/components/Loading.svelte
    - frontend/src/lib/stores/toast.svelte.ts
    - frontend/src/lib/stores/multi-tournament.svelte.ts
    - frontend/src/routes/overview/+page.svelte
    - frontend/src/routes/players/+page.svelte
    - frontend/src/routes/tables/+page.svelte
    - frontend/src/routes/financials/+page.svelte
    - frontend/src/routes/more/+page.svelte
  modified:
    - frontend/src/routes/+layout.svelte
    - frontend/src/routes/+page.svelte

key-decisions:
  - "Svelte 5 div with role=tablist instead of nav element to avoid a11y conflict with interactive role on non-interactive element"
  - "FAB actions dispatched via callback prop (onaction) to parent layout for centralized action handling"
  - "Multi-tournament state as separate store (not merged into tournament store) for clean separation of concerns"
  - "DataTable uses generic Record<string,unknown> with column render functions rather than generics for Svelte component compatibility"

patterns-established:
  - "Layout shell: fixed header + fixed bottom tabs (mobile) / sidebar (desktop) + scrollable content area"
  - "Toast store: Svelte 5 runes class with auto-dismiss timers and type-based durations"
  - "DataTable: column config driven with hideMobile flag for responsive column visibility"
  - "FAB: backdrop overlay + ESC dismiss + context-aware action filtering"

requirements-completed: [UI-01, UI-02, UI-03, UI-04, UI-07, UI-08]

# Metrics
duration: 5min
completed: 2026-03-01
---

# Plan 13: Layout Shell -- Header, Tabs, FAB, Toast, Data Table Summary

**Mobile-first layout shell with persistent clock header, bottom tabs/desktop sidebar, expandable FAB, toast notifications, and generic sortable DataTable**

## Performance

- **Duration:** 5 min
- **Started:** 2026-03-01T03:07:29Z
- **Completed:** 2026-03-01T03:13:27Z
- **Tasks:** 1 (compound task with 9 sub-items)
- **Files modified:** 74

## Accomplishments
- Persistent header fixed at top showing clock countdown (MM:SS), level number, blinds (SB/BB), ante, player count with red pulse animation in final 10s and PAUSED/BREAK badges
- Mobile bottom tab bar (5 tabs: Overview, Players, Tables, Financials, More) with 48px touch targets, hidden on desktop
- Desktop sidebar (>=768px) with vertical navigation replacing bottom tabs, active item highlight with accent border
- Floating Action Button expanding to Bust/Buy In/Rebuy/Add-On/Pause-Resume with backdrop dismiss and ESC key support
- Toast notification system using Svelte 5 runes: success (3s), info (4s), warning (5s), error (8s) with auto-dismiss, color-coded using Catppuccin palette
- Reusable DataTable component: sortable columns (asc/desc), sticky header, search/filter across all columns, mobile swipe actions, skeleton loading, empty state, responsive column hiding
- Multi-tournament tab selector: horizontal scrollable tabs with status dot indicators, fast switching without re-fetch
- Loading components: spinner (sm/md/lg), skeleton placeholder rows, full-page loading overlay
- Root layout shell with auth guard (redirect to /login if unauthenticated), responsive structure

## Task Commits

Each task was committed atomically:

1. **Task M1: Implement layout shell** - `7f91301` (feat)

## Files Created/Modified
- `frontend/src/lib/components/Header.svelte` - Persistent header with clock, level, blinds, player count
- `frontend/src/lib/components/BottomTabs.svelte` - Mobile bottom tab bar (5 tabs)
- `frontend/src/lib/components/Sidebar.svelte` - Desktop sidebar navigation
- `frontend/src/lib/components/FAB.svelte` - Floating action button with expandable actions
- `frontend/src/lib/components/Toast.svelte` - Toast notification renderer
- `frontend/src/lib/components/DataTable.svelte` - Generic sortable/searchable data table
- `frontend/src/lib/components/TournamentTabs.svelte` - Multi-tournament tab selector
- `frontend/src/lib/components/Loading.svelte` - Spinner, skeleton, full-page loading
- `frontend/src/lib/stores/toast.svelte.ts` - Toast state store (Svelte 5 runes)
- `frontend/src/lib/stores/multi-tournament.svelte.ts` - Multi-tournament routing state
- `frontend/src/routes/+layout.svelte` - Root layout with auth guard and full shell
- `frontend/src/routes/+page.svelte` - Redirect to /overview
- `frontend/src/routes/overview/+page.svelte` - Overview page with stats grid
- `frontend/src/routes/players/+page.svelte` - Players page with DataTable
- `frontend/src/routes/tables/+page.svelte` - Tables page with DataTable
- `frontend/src/routes/financials/+page.svelte` - Financials page with finance cards
- `frontend/src/routes/more/+page.svelte` - Settings/logout page

## Decisions Made
- Used `div` with `role="tablist"` instead of `nav` element for bottom tabs to avoid Svelte a11y warning about non-interactive elements with interactive roles
- FAB actions dispatched via callback prop (`onaction`) to parent layout for centralized action routing (placeholder handlers until Plan N)
- Multi-tournament state kept as a separate store from the singleton tournament state for clean separation of concerns
- DataTable uses `Record<string, unknown>` with column render functions rather than TypeScript generics due to Svelte component prop constraints
- Root page (`/`) redirects to `/overview` with `replaceState` to avoid back-button issues

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Fixed Svelte 5 event modifier syntax in DataTable**
- **Found during:** Task M1 (build verification)
- **Issue:** Used Svelte 4 syntax `onclick|stopPropagation` which is invalid in Svelte 5
- **Fix:** Changed to `onclick={(e) => { e.stopPropagation(); ... }}` inline handler
- **Files modified:** frontend/src/lib/components/DataTable.svelte
- **Verification:** Build succeeds
- **Committed in:** 7f91301

**2. [Rule 1 - Bug] Fixed a11y violation: nav with role=tablist**
- **Found during:** Task M1 (build verification)
- **Issue:** Svelte a11y check rejects interactive role on non-interactive `nav` element
- **Fix:** Changed `nav` to `div` with `role="tablist"` for BottomTabs
- **Files modified:** frontend/src/lib/components/BottomTabs.svelte
- **Verification:** Build succeeds without a11y warnings
- **Committed in:** 7f91301

---

**Total deviations:** 2 auto-fixed (2 bugs)
**Impact on plan:** Both fixes necessary for build to succeed. No scope creep.

## Issues Encountered
None beyond the auto-fixed build errors above.

## User Setup Required

None - no external service configuration required.

## Next Phase Readiness
- Layout shell complete and ready for Plan N (Feature Views: Overview, Players, Tables, Financials)
- All navigation routes exist with placeholder content
- DataTable component ready for use in player lists, table views, payout tables
- Toast system ready for action feedback (bust confirmation, rebuy success, etc.)
- FAB wired with placeholder handlers ready for Plan N to implement actual flows

## Self-Check: PASSED

All 17 key files verified present. Commit 7f91301 verified in git log.

---
*Phase: 01-tournament-engine*
*Completed: 2026-03-01*