veza/apps/web/src/features/player/components
senke 39b2b642d2 feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y):

- Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source
  for layout/shell (index.css), shadows (design-system.css), durations/easing.
- Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height
  (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500
  replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes.
- Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls,
  AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item,
  TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable.
- ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary.
- Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts.
- Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories.
- .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification.
- apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 17:15:58 +01:00
..
audio-player style(player): remove remaining kodo in AudioPlayerFull 2026-02-07 14:14:17 +01:00
AudioPlayer.stories.tsx style(player): elevate AudioPlayer to SaaS Premium 2026-02-07 14:04:13 +01:00
AudioPlayer.test.tsx [FE-TEST-008] test: Add component tests for player components 2025-12-25 17:23:39 +01:00
AudioPlayer.tsx refactor(player): decompose AudioPlayer into audio-player module 2026-02-06 13:37:04 +01:00
GlobalPlayer.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
GlobalPlayer.tsx feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 2026-02-08 17:15:58 +01:00
MiniPlayer.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
MiniPlayer.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
MiniPlayer.tsx feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 2026-02-08 17:15:58 +01:00
NextPreviousButtons.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
NextPreviousButtons.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
NextPreviousButtons.tsx style(player): elevate player components to SaaS Premium 2026-02-07 16:01:56 +01:00
PlaybackSpeedControl.stories.tsx style(stories): replace kodo decorators with design tokens in all story files 2026-02-07 15:10:32 +01:00
PlaybackSpeedControl.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
PlaybackSpeedControl.tsx style(player): elevate player components to SaaS Premium 2026-02-07 16:01:56 +01:00
PlayerControls.stories.tsx style(stories): replace kodo decorators with design tokens in all story files 2026-02-07 15:10:32 +01:00
PlayerControls.tsx feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 2026-02-08 17:15:58 +01:00
PlayerError.stories.tsx style(stories): replace kodo decorators with design tokens in all story files 2026-02-07 15:10:32 +01:00
PlayerError.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
PlayerError.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
PlayerExpanded.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
PlayerExpanded.tsx feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 2026-02-08 17:15:58 +01:00
PlayerLoading.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
PlayerLoading.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
PlayerLoading.tsx style(player): elevate player components to SaaS Premium 2026-02-07 15:33:31 +01:00
PlayerQueue.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
PlayerQueue.tsx feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 2026-02-08 17:15:58 +01:00
PlayPauseButton.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
PlayPauseButton.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
PlayPauseButton.tsx style(player): elevate player components to SaaS Premium 2026-02-07 16:01:56 +01:00
ProgressBar.stories.tsx style(player): elevate player components to SaaS Premium 2026-02-07 15:33:31 +01:00
ProgressBar.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
ProgressBar.tsx style(player): elevate player components to SaaS Premium 2026-02-07 16:01:56 +01:00
QualitySelector.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
QualitySelector.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
QualitySelector.tsx style(player): elevate player components to SaaS Premium 2026-02-07 16:01:56 +01:00
RepeatShuffleButtons.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
RepeatShuffleButtons.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
RepeatShuffleButtons.tsx style(player): elevate player components to SaaS Premium 2026-02-07 15:33:31 +01:00
TimeDisplay.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
TimeDisplay.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
TimeDisplay.tsx style(player): elevate player components to SaaS Premium 2026-02-07 15:33:31 +01:00
TrackInfo.stories.tsx chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
TrackInfo.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
TrackInfo.tsx style(player): elevate player components to SaaS Premium 2026-02-07 16:01:56 +01:00
VolumeControl.stories.tsx style(player): elevate player components to SaaS Premium 2026-02-07 15:33:31 +01:00
VolumeControl.test.tsx refonte: backend-api go first; phase 1 2025-12-12 21:34:34 -05:00
VolumeControl.tsx feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 2026-02-08 17:15:58 +01:00