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 16:15:58 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Visual regression report</title>
|
|
|
|
|
<style>
|
|
|
|
|
body { font-family: system-ui, sans-serif; margin: 1rem 2rem; }
|
|
|
|
|
table { border-collapse: collapse; }
|
|
|
|
|
th, td { border: 1px solid #333; padding: 0.5rem 0.75rem; text-align: left; }
|
|
|
|
|
th { background: #1a1a1a; color: #eee; }
|
|
|
|
|
.pass { background: #0d2b0d; }
|
|
|
|
|
.fail { background: #2b0d0d; }
|
|
|
|
|
code { font-size: 0.9em; }
|
|
|
|
|
.meta { color: #888; font-size: 0.9rem; margin-bottom: 1rem; }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Visual regression report</h1>
|
2026-02-11 21:19:34 +00:00
|
|
|
<p class="meta">Threshold: 0.1 | Max diff pixels (pass): 0 | Generated: 2026-02-10T22:08:03.242Z</p>
|
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 16:15:58 +00:00
|
|
|
<table>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Screen</th>
|
|
|
|
|
<th>Diff pixels</th>
|
|
|
|
|
<th>Total pixels</th>
|
|
|
|
|
<th>Result</th>
|
|
|
|
|
<th>Error</th>
|
|
|
|
|
<th>Links</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>404-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/404-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/404-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/404-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>404-desktop.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/404-desktop.png">diff</a>
|
|
|
|
|
<a href="../baselines/404-desktop.png">baseline</a>
|
|
|
|
|
<a href="../current/404-desktop.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>dashboard-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
2026-02-11 21:19:34 +00:00
|
|
|
<td>1173760</td>
|
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 16:15:58 +00:00
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/dashboard-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/dashboard-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/dashboard-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>dashboard-desktop.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/dashboard-desktop.png">diff</a>
|
|
|
|
|
<a href="../baselines/dashboard-desktop.png">baseline</a>
|
|
|
|
|
<a href="../current/dashboard-desktop.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>header-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>169024</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/header-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/header-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/header-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>library-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
2026-02-11 21:19:34 +00:00
|
|
|
<td>1173760</td>
|
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 16:15:58 +00:00
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/library-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/library-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/library-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>library-desktop.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/library-desktop.png">diff</a>
|
|
|
|
|
<a href="../baselines/library-desktop.png">baseline</a>
|
|
|
|
|
<a href="../current/library-desktop.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>login-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
2026-02-11 21:19:34 +00:00
|
|
|
<td>1173760</td>
|
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 16:15:58 +00:00
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/login-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/login-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/login-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>login-desktop.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/login-desktop.png">diff</a>
|
|
|
|
|
<a href="../baselines/login-desktop.png">baseline</a>
|
|
|
|
|
<a href="../current/login-desktop.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>playlists-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
2026-02-11 21:19:34 +00:00
|
|
|
<td>921600</td>
|
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 16:15:58 +00:00
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/playlists-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/playlists-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/playlists-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>playlists-desktop.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/playlists-desktop.png">diff</a>
|
|
|
|
|
<a href="../baselines/playlists-desktop.png">baseline</a>
|
|
|
|
|
<a href="../current/playlists-desktop.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>register-desktop-dark.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/register-desktop-dark.png">diff</a>
|
|
|
|
|
<a href="../baselines/register-desktop-dark.png">baseline</a>
|
|
|
|
|
<a href="../current/register-desktop-dark.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr class="pass">
|
|
|
|
|
<td><code>register-desktop.png</code></td>
|
|
|
|
|
<td>0</td>
|
|
|
|
|
<td>921600</td>
|
|
|
|
|
<td>Pass</td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td>
|
|
|
|
|
<a href="../diffs/register-desktop.png">diff</a>
|
|
|
|
|
<a href="../baselines/register-desktop.png">baseline</a>
|
|
|
|
|
<a href="../current/register-desktop.png">current</a>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|