Admin
5fa901c2e6
PlayerExtras is merged into PlayerBar, which now renders volume and the queue button inline and uses the new Slider (a real range input with thumb thickness controlled via CSS variables) for both the progress bar and volume, replacing SeekBar and VolumeControl (grep confirmed SeekBar's `compact` mode was dead code). Sidebar and TabsBar migrate to appNavLinks(user, counts?), removing the duplicated nav links between the two. Decision made without blocking: Sidebar gains the gradient Logo mark it didn't have before, for visual consistency with MobileHeader and the login screen. PlayerDock and MobileHeader's z-index is fixed to z-(--z-sticky) (they're fixed bars, not menus), and SegmentedControl's to z-(--z-raised), per the plan's note B.1.5. glass-bar and theme-transition are applied to PlayerBar (both variants), TabsBar, Queue and Home (hero/spotlight), replacing duplicated blur/transition styles. Verified with npm run check (0 errors) and npm run build; smoke-tested /login with no console errors. No authenticated visual QA (Docker unavailable this session).
web-player
Musify's web client: SvelteKit 2 (adapter-node), Svelte 5 runes, Tailwind 4,
TypeScript. Authentication is server-side OIDC against Zitadel (openid-client
and jose) with an encrypted session cookie; the backend is called from load
functions and form actions through a typed openapi-fetch client.
Development
npm install
npm run dev # :5173
Configuration lives in .env (template in .env.example). Bring the
infrastructure stack up first (see ../deploy/README.md)
and copy the WEB_CLIENT_ID / WEB_CLIENT_SECRET it writes to deploy/.env
into this .env once, then run the dev server.
npm run check # svelte-check — must be clean before closing a change
npm run lint # prettier --check . && eslint .
npm run format # prettier --write .
npm run build # production build into build/
npm run gen:api # regenerate src/lib/api/schema.d.ts from the running API
Production
Built and run as a container by the production stack — see
../deploy/README.md. There the same variables come from
deploy/.env.prod through compose instead of from .env.
Conventions and the design system are documented in CLAUDE.md and
in the musify-web skill.