Commit graph

319 commits

Author SHA1 Message Date
senke
333aeee226 ui(components): migrate 16 skeleton files from animate-pulse to Skeleton shimmer
Replace raw `animate-pulse bg-muted` divs with the `<Skeleton>` component
across all major page and section skeletons. Every loading state now uses
the premium sweeping shimmer animation instead of the basic pulse.

Files: TrackDetailPageSkeleton, LibraryPageSkeleton, PlaylistDetailPageSkeleton,
DiscoverViewSkeleton, PlaybackDashboardSkeleton, StudioViewSkeleton,
MonitoringDashboardSkeleton, LibraryManagerSkeleton, UploadViewSkeleton,
FileManagerViewSkeleton, TrackSearchFiltersSkeleton, TrackListPaginationSkeleton,
TrackFiltersSkeleton, TrackHistorySkeleton, PlaylistActionsSkeleton, TrackGrid.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 23:12:58 +01:00
senke
9f102c14bf ui(components): fix PlaylistCard hover transition and add focus-visible
- Remove transition-opacity that was overriding Card's shadow/color
  transitions (hover:shadow-xl was not animating)
- Add focus-visible ring to selectable wrapper and Link wrapper
- Replace ring-blue-500 (arbitrary color) with ring-primary (design system)
  for selected state

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:55:23 +01:00
senke
6d24bd9941 ui(tokens): migrate remaining arbitrary min-w values to Tailwind scale
- min-w-[140px] → min-w-36 (AdminModerationView)
- min-w-[100px] → min-w-24 (PlaylistFollowButton, FollowButton)
- min-w-[80px] → min-w-20 (PasswordStrengthIndicator)
- collapsible.tsx: eslint-disable comment for max-h-[5000px] animation
  technique (documented exception)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:48:37 +01:00
senke
83edd463c6 ui(a11y): add focus-visible ring to 16 interactive components
Add consistent focus-visible:ring-2 focus-visible:ring-ring pattern to
elements using role="button" / tabIndex={0} that lacked visible focus
indicators.

Affected: TrackCard, 2FA setup steps, ProjectsManager cards,
NotificationMenuItem, SelectOptionItem, DropdownMenuItem,
ConversationItem, VirtualizedChatMessageItem, GearInventoryGrid,
UploadModal, SearchPageResults, SocialViewFeedItem, SocialViewSidebar,
FileManagerViewTable.

Improves keyboard navigation across the application.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:48:24 +01:00
senke
2b383b8d3c ui(components): sidebar-aware player bar, synced lyrics, queue positioning
GlobalPlayer: sidebar-aware floating bar (lg:left-main-expanded/collapsed),
centered controls in flex flow, always-visible progress track, entrance
animation (slide-in-from-bottom-4 + fade-in), compact responsive layout.

PlayerExpanded: new synced lyrics panel with toggle, auto-scroll,
click-to-seek. Album art shrinks when lyrics are displayed.

PlayerQueue: sidebar-aware positioning matching GlobalPlayer pattern.

types.ts: add lyrics field (time/text pairs) to Track interface.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:48:08 +01:00
senke
320c8e3435 ui(tokens): replace arbitrary max-h/h viewport values with layout tokens
Migrate all max-h-[XXvh] and h-[XXvh] to design system tokens:
- max-h-[85vh] → max-h-layout-modal (9 modals)
- max-h-[80vh] → max-h-layout-modal-sm (4 modals + notification bell)
- max-h-[70vh] → max-h-layout-modal-xs (AddToPlaylistModal)
- max-h-[90vh] → max-h-layout-modal-lg (CreatorModal)
- max-h-[400px] → max-h-layout-list (QueuePanel, OfflineQueueManager)
- max-h-[500px] → max-h-layout-drawer (APIPlaygroundView)
- h-[60vh] → h-layout-lyrics (FullPlayer, TrackDetailPageHero/Skeleton)
- max-w-[400px] → max-w-lg (FullPlayer)

Zero arbitrary viewport heights remain in modals and panels.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:47:41 +01:00
senke
7ac7b84fe9 ui(tokens): migrate text-[10px] to text-xs across 23 components
Replace all arbitrary text-[10px] / text-[9px] with the standard Tailwind
text-xs token. Also migrates nearby arbitrary width values where applicable
(max-w-[200px] → max-w-48, max-w-[120px] → max-w-32, h-[1px] → h-px).

Only documented exceptions remain: avatar xs (text-[10px] for w-6 h-6
initials) and badge JSDoc reference.

Affected areas: admin views, marketplace, player, settings, chat, upload,
education, commerce, library, PWA, search, navbar, user card.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:47:19 +01:00
senke
66a56409ad 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
senke
875df12d8b small fixes : cors + login loop 2026-02-07 20:36:48 +01:00
senke
01bfea96c2 feat(ui): login immersive — tokens, rounded-xl, surface card, primary CTA
- AuthInput: bg-card border-border focus:border-primary rounded-xl, 200ms transition
- AuthLayout: Card variant surface, logo bg-primary + glow
- AuthButton: rounded-xl, primary glow shadow, 200ms ease-in-out
- fix-login-form: inputs/button/checkbox rounded-xl, checkbox accent primary

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:52:12 +01:00
senke
2a0878bee8 feat(ui): Zone 12 - Library & Analytics polish (min-h-layout-page, motion, glass/glow, skeleton sync)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:45:06 +01:00
senke
6695f06a7d style(commerce,upload,error): elevate Commerce, Upload, Error to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:07:09 +01:00
senke
ebf40ab134 style(settings,auth): elevate Security and Auth to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:02:52 +01:00
senke
81f1dbf33a style(player): elevate player components to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:01:56 +01:00
senke
bd6908f6bf style(player): elevate player components to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:33:31 +01:00
senke
96d6c9dc9e style(playlists,ui): elevate PlaylistListToolbar, DataList, Select to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:26:55 +01:00
senke
991bfcedb8 style(studio): elevate CloudFileBrowser to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:20:44 +01:00
senke
4a0f7eae92 style(chat): elevate ChatSidebar and related stories to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:18:31 +01:00
senke
9044b9f1d7 style: fix leftover kodo in ProfileView, FileTableRow.stories, FocusTrap.stories
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:17:47 +01:00
senke
db5ee629da style(stories): replace kodo decorators with design tokens in all story files
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:10:32 +01:00
senke
eaf2e38f65 style(settings,views): elevate AccountSettings and ProfileView to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:09:53 +01:00
senke
5d9355f5ce style(streaming): elevate PlaybackHeatmap to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:01:00 +01:00
senke
7d6c18cc94 style(playlists): elevate playlist batch/track-list to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:54:46 +01:00
senke
16ce8290c8 style(social): elevate Profile + GroupDetailView to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:15:35 +01:00
senke
ea036d060f style(player): remove remaining kodo in AudioPlayerFull
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:14:17 +01:00
senke
5657c30e9d style(player): elevate AudioPlayer to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:04:13 +01:00
senke
daa64dcc0a style(library): elevate Library to SaaS Premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:39:18 +01:00
senke
9ae3e1d5a3 style(tracks): align story decorators with KŌDŌ tokens
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:17:00 +01:00
senke
c7ffd271f8 style(track-detail-page): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:16:07 +01:00
senke
2ae565a360 style(TrackCard): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:14:35 +01:00
senke
3eb5ee7dbb style(TrackListRow): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:13:34 +01:00
senke
a60e35f02a style(track-search): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:12:01 +01:00
senke
6cbcda455e style(TrackListContainer): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:11:47 +01:00
senke
6463ffb6cf style(UploadQuota): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:10:05 +01:00
senke
4433ec8c9c style(track-grid): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:08:39 +01:00
senke
40a9fa6e56 style(TrackStatsDisplay): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:07:10 +01:00
senke
df26e35623 style(TrackSort): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:05:27 +01:00
senke
cc6dff94fe style(ShareDialog): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:04:19 +01:00
senke
636ccb06d4 style(LikeButton): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:03:10 +01:00
senke
0757e0eb2e style(TrackListSelectionActions): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:01:35 +01:00
senke
e862516c1b style(ViewToggle): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:59:38 +01:00
senke
26a497464e style(track-search-filters): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:58:24 +01:00
senke
a9d13be10f style(track-list-pagination): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:56:06 +01:00
senke
8db8c5e6ca style(track-filters): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:54:49 +01:00
senke
ac863c31de style(comment-thread): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:52:35 +01:00
senke
58d47f3e38 style(track-history): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:49:21 +01:00
senke
c9cef0f36d style(tracks): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:35:52 +01:00
senke
4b2d86414b style(comments): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:13:59 +01:00
senke
e3dbbbb032 style(ui): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:03:28 +01:00
senke
276229a0e4 feat(tracks): use TrackListSkeleton for loading state and add Error story
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 07:40:16 +01:00