music on atproto
plyr.fm
zzstoatzz.io
1# frontend
2
3SvelteKit with bun (not npm/pnpm).
4
5key patterns:
6- **state**: global managers in `lib/*.svelte.ts` using `$state` runes (player, queue, uploader, tracks cache)
7- **components**: reusable ui in `lib/components/` (LikeButton, Toast, Player, etc)
8- **routes**: pages in `routes/` with `+page.svelte` and `+page.ts` for data loading
9- **design tokens**: use CSS variables from `+layout.svelte` - never hardcode colors, radii, or font sizes (see `docs/frontend/design-tokens.md`)
10
11gotchas:
12- **svelte 5 runes mode**: component-local state MUST use `$state()` - plain `let` has no reactivity (see `docs/frontend/state-management.md`)
13- toast positioning: bottom-left above player footer (not top-right)
14- queue sync: uses BroadcastChannel for cross-tab, not SSE
15- preferences: managed in UserMenu (desktop) and ProfileMenu (mobile) components, not dedicated state file
16- keyboard shortcuts: handled in root layout (+layout.svelte), with context-aware filtering