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
|
|
|
{
|
|
|
|
|
"threshold": 0.1,
|
|
|
|
|
"maxDiffPixels": 0,
|
|
|
|
|
"results": [
|
|
|
|
|
{
|
|
|
|
|
"name": "404-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/404-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/404-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/404-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "404-desktop.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/404-desktop.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/404-desktop.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/404-desktop.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "dashboard-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/dashboard-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/dashboard-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/dashboard-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
2026-02-11 21:19:34 +00:00
|
|
|
"totalPixels": 1173760,
|
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
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "dashboard-desktop.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/dashboard-desktop.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/dashboard-desktop.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/dashboard-desktop.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "header-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/header-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/header-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/header-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 169024,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "library-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/library-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/library-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/library-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
2026-02-11 21:19:34 +00:00
|
|
|
"totalPixels": 1173760,
|
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
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "library-desktop.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/library-desktop.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/library-desktop.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/library-desktop.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "login-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/login-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/login-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/login-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
2026-02-11 21:19:34 +00:00
|
|
|
"totalPixels": 1173760,
|
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
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "login-desktop.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/login-desktop.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/login-desktop.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/login-desktop.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "playlists-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/playlists-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/playlists-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/playlists-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
2026-02-11 21:19:34 +00:00
|
|
|
"totalPixels": 921600,
|
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
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "playlists-desktop.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/playlists-desktop.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/playlists-desktop.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/playlists-desktop.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "register-desktop-dark.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/register-desktop-dark.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/register-desktop-dark.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/register-desktop-dark.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "register-desktop.png",
|
|
|
|
|
"baselinePath": "/home/senke/git/talas/veza/apps/web/visual-tests/baselines/register-desktop.png",
|
|
|
|
|
"currentPath": "/home/senke/git/talas/veza/apps/web/visual-tests/current/register-desktop.png",
|
|
|
|
|
"diffPath": "/home/senke/git/talas/veza/apps/web/visual-tests/diffs/register-desktop.png",
|
|
|
|
|
"diffPixels": 0,
|
|
|
|
|
"totalPixels": 921600,
|
|
|
|
|
"error": null,
|
|
|
|
|
"pass": true
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|