senke
56c063cfae
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
00e0f1caa0
small fixes : cors + login loop
2026-02-07 20:36:48 +01:00
senke
1b7d1be65d
test(storybook): Playwright suite for full Storybook + Spotify/Discord polish
...
- Add playwright.config.storybook.ts: runs against storybook-static on :6007
- Add e2e/tests/storybook/storybook-all.spec.ts: one test per story (load iframe, no errors)
- Add scripts/serve-storybook-static.cjs: serves build or stub (empty index) when no build
- npm run test:storybook:playwright (after build-storybook) for full coverage
- Storybook decorator: use bg-background / design tokens for dark (#121212 )
- Preview: default dark background #121212
- Button: secondary/ghost/glass aligned to Spotify/Discord (white/5, white/10 hover)
- KodoEmptyState: softer orbs, compact copy, primary CTA without heavy glow
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 20:30:49 +01:00
senke
47ab1157d1
style(ui): Spotify-like palette, player, sidebar and dashboard polish
...
- Dark palette: background 0.11, card 0.14, sidebar 0.08 (Spotify #121212 feel)
- MiniPlayer: h-16, thinner progress bar, compact cover/times, rounded actions
- Sidebar: minimal header, lighter section labels, clean nav hover (no heavy border)
- Header: h-16, rounded search pill, compact user pill and dropdown
- Dashboard: pt-20 to match header, StatCard typography and spacing tweaks
- Visual: register-page snapshot + small maxDiffPixels tolerance for font variance
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 20:19:59 +01:00
senke
6fd4300fc3
feat(e2e): Playwright + pixelmatch stack for pixel-perfect visual regression
...
- playwright.config.visual.ts: dedicated config, viewport 1280x720, Chromium only,
snapshots in e2e/tests/visual/__snapshots__
- e2e/tests/visual/visual-regression.spec.ts: login, register, dashboard (full/header/sidebar),
player bar, playlists, 404, mobile/tablet viewports; dark theme + reduceMotion
- scripts/visual-diff.js: optional pixelmatch script to generate diff image from two PNGs
- docs/VISUAL_TESTING_STRATEGY.md: strategy, commands, CI, workflow
- npm scripts: test:visual, test:visual:update, test:visual:report
- deps: pixelmatch, pngjs; @playwright/test aligned to 1.58.1
- baseline snapshots added for login, dashboard, playlists, 404, viewports
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 20:01:30 +01:00
senke
411defe923
feat(ui): dashboard StatCard surface + KodoEmptyState tokens (Spotify/Discord)
...
- StatCard: variant surface, rounded-xl icon box, text-foreground
- KodoEmptyState: variant surface, primary orbs/icon/CTA, no kodo-*
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:52:24 +01:00
senke
a99c4717a4
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
28b5e58043
feat(ui): refactor global layout with immersive glassmorphism (Spotify/Discord-like)
...
- Palette: Discord-like deep cold grays (background 0.12, sidebar 0.09, card 0.16)
- Transitions: --duration-immersive 200ms ease-in-out for micro-interactions
- Sidebar: bg from var(--sidebar), rounded-xl, backdrop-blur-md; icons
text-muted-foreground/60 → text-primary on hover/active; 2px teal active bar
- Header: backdrop-blur-md, 200ms transitions
- MiniPlayer: h-20, backdrop-blur-md, bg-background/80, border-white/5 (no harsh border)
- Play button: teal pill with diffuse glow (shadow primary/0.4)
- Card: new 'surface' variant (border white/5, hover lighter + diffuse shadow)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:44:40 +01:00
senke
d89895410a
style(ui): P3 AdminSettingsView kodo-* → semantic tokens
...
- Borders/labels: kodo-steel → border-border, kodo-content-dim → text-muted-foreground
- Inputs/selects: bg-kodo-ink border-kodo-steel → bg-card border-border focus:border-primary
- Feature Flags: icon text-primary, rows bg-muted/50, toggle track bg-success
- Maintenance card: border-destructive/30, icon text-destructive, toggle bg-destructive/bg-muted
- Headings text-foreground for consistency
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:37:41 +01:00
senke
1947c3efb1
style(ui): P3 AdminModerationView kodo-* → semantic tokens
...
- border/text: kodo-steel → border-border, kodo-content-dim → text-muted-foreground
- kodo-text-main → text-foreground, kodo-red → destructive (tabs, card, reason, Ban button)
- Report block: bg-kodo-ink border-kodo-steel → bg-muted/50 border-border
- Loader and empty state use muted-foreground
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:36:27 +01:00
senke
439d1b0f03
style(ui): P3 AdminAuditLogsView semantic tokens + elevated card
...
- Replace all text-kodo-content-dim with text-muted-foreground (audit P3)
- Card glass → elevated for consistency with admin dashboard
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:35:33 +01:00
senke
1772440cc9
style(ui): P3 Rajdhani fallback, dashboard StatCard semantic tokens
...
- index.css: add 'Inter' to --font-sans fallback (audit P3 glyph robustness)
- dashboard/StatCard.tsx: replace kodo-* with semantic tokens (primary,
secondary, success, warning, destructive, muted-foreground)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:34:45 +01:00
senke
b58b99a104
style(ui): dashboard cards elevated, progress bar contrast (audit §7.2, §6.1)
...
- Admin dashboard: StatCard, TrafficCard, ProtocolsCard, NodeHealthCard
glass → elevated for main content depth (audit §7.2)
- MiniPlayer: progress rail bg-muted → bg-white/10, h-1 → h-1.5, fill
bg-white → bg-primary for accessibility and consistency (§6.1)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:32:00 +01:00
senke
8fe2c27ba9
style(ui): P2 contrast muted-foreground, sidebar spacing, dashboard gap, compact play button
...
- index.css: --muted-foreground 0.70 → 0.73 in dark for better secondary text readability (audit §5.2)
- PlayerControls: compact play w-10→w-9, icon w-5→w-4; use bg-primary/text-primary-foreground
- Sidebar: space-y-6→space-y-8, section title mb-2→mb-3 mt-1 (audit §4.2)
- AdminDashboardView: stats grid gap-6→gap-8 (audit §4.3)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:30:13 +01:00
senke
693e39c91d
style(ui): unify sidebar badges to primary, improve card depth and affordance
...
Phase 1 audit (P0 & P1):
- Sidebar: badges use primary (teal) instead of secondary (magenta)
- AdminDashboardStatCard: 0% trend shown as muted, never red
- AdminDashboardTrafficCard: remove fake Math.random() data, show empty state
- Dark theme: increase card luminance (0.21), stronger borders
- Card variants: add border-white/10 to glass, border-border to default
- Header: search input bg-card + border-white/10, migrate kodo-* to semantic tokens
- MiniPlayer: h-20 max (was h-24)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:28:12 +01:00
senke
1613b053ee
ci(storybook): implement batch processing and retry logic for audit script
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 17:07:28 +01:00
senke
f820c5218b
feat(ui): Zone 15 - Live & Checkout polish (Chat/Recommended/StreamInfo glass+glow, OrderSummary Card)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:47:18 +01:00
senke
a9188beea0
feat(ui): Zone 14 - AdminView polish (Sidebar glass/glow, dashboard motion, UserTableRow tokens)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:46:36 +01:00
senke
0d0dc1bfe1
feat(ui): Zone 13 - Settings view polish (Header glass, Tabs container, Content/Skeleton sync)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:45:35 +01:00
senke
75fbac4bc2
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
3f895cea06
feat(ui): Zone 11 - MarketplaceView SaaS polish (glass, glow, motion, fix allProducts, ProductCard tokens)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:44:13 +01:00
senke
6ad60da747
feat(ui): Zone 10 - SocialView SaaS polish (glass, glow, motion, error/empty)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:43:04 +01:00
senke
9134a98fdb
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
1f590bd8f9
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
7cda77a6ad
style(player): elevate player components to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:01:56 +01:00
senke
8155802452
style(player): elevate player components to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:33:31 +01:00
senke
eebaa842b0
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
b4d710b04e
style(layout): elevate Header, Navbar, AudioPlayer, Sidebar to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:25:44 +01:00
senke
91174e0758
style(studio): elevate CloudFileBrowser to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:20:44 +01:00
senke
4a7f3747ae
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
43139b0407
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
26b1197533
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
c6da22e418
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
47d8100d74
style(ui): elevate Dialog to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:08:52 +01:00
senke
caf067c96c
style: fix leftover kodo tokens in ProjectDetailView, ProductDetailView, CourseDetailView, UploadViewStepper
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:08:19 +01:00
senke
685fd52586
style(studio): elevate ProjectDetailView to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:01:03 +01:00
senke
f9d99e0282
style(streaming): elevate PlaybackHeatmap to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:01:00 +01:00
senke
47ec1de44e
style(marketplace): elevate ProductDetailView to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:58:26 +01:00
senke
6b681a0e30
style(education): elevate CourseDetailView and CourseLearningView to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:57:13 +01:00
senke
22a9b5adaf
style(notifications): elevate NotificationMenu story to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:57:11 +01:00
senke
80daf08b17
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
6889d56d69
style(views): elevate UploadView to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:54:19 +01:00
senke
6d2650b18e
style(studio): fix ConnectivityViewWebhooks leftover kodo tokens
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:54:17 +01:00
senke
79ef026590
style(settings): elevate TwoFactorSetup to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:42:45 +01:00
senke
c56e975b5a
style(studio): elevate ProjectsManager to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:41:25 +01:00
senke
b5fd3abc39
style(studio): elevate CreateProjectModal to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:40:07 +01:00
senke
3fb3815957
style(studio): elevate GoLiveView to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:39:24 +01:00
senke
7a9e26087c
style(studio): elevate ConnectivityView to SaaS Premium
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:38:15 +01:00
senke
f41c9405a0
style(settings,studio): remove remaining kodo in EditProfileIdentityCard and AIToolsViewSkeleton
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:37:35 +01:00
senke
4c66630b43
chore(storybook): exclude sb-common-assets from audit to reach 0 app errors
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:36:49 +01:00