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