Commit graph

63 commits

Author SHA1 Message Date
senke
4305d66aa2 ui(storybook): add allowedHosts config and update DESIGN_TOKENS docs
- .storybook/main.ts: add viteFinal with allowedHosts for veza.fr/com
  domains
- DESIGN_TOKENS.md: document modal max-height tokens and typography
  exceptions (avatar xs text-[10px])
- capture-visual-baseline.mjs: fix locator selectors for sidebar and
  player captures

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:49:24 +01:00
senke
39b2b642d2 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
d2ae91ac25 chore(storybook): improve configuration and cleanup 2026-02-04 00:44:40 +01:00
senke
ef4bae8e8b cleanup: audit TODO comments (Cleanup 13)
- Created TODO_COMMENTS_AUDIT.md documenting findings
- Found 26 TODO/FIXME/XXX/HACK comments total (excluding generated files)
- Categorized: Backend dependencies (preserve), Implementation needed (action), Bugs (fix), Refactor/migration (improve)
- High priority: Fix TwoFactorVerify.tsx authentication bug
- Medium priority: Implement play functionality, fix test issues
- Low priority: Backend-dependent features, architectural improvements
- Cleanup 13: Audit complete - Ready for Cleanup 14
2026-01-16 12:17:10 +01:00
senke
b79fde6513 cleanup: audit and replace console statements with logger (Cleanup 10-12)
- Created CONSOLE_STATEMENTS_AUDIT.md documenting findings
- Found 33 console statements total (excluding generated files)
- Replaced production console.error with logger.error:
  - main.tsx: Initialization error logging
  - config/env.ts: Environment validation error logging
  - OfflineQueueManager.tsx: Queue operation error logging (2 instances)
  - toast.ts: Toast module loading error logging
- Preserved: Logger implementation, test mocks, JSDoc examples, dev-only utilities
- Cleanup 10: Audit complete
- Cleanup 11-12: Replace console.log/error/warn - COMPLETE (production code only)
2026-01-16 12:15:20 +01:00
senke
128e80f9c4 cleanup: audit commented-out code (Cleanup 8)
- Created COMMENTED_CODE_AUDIT.md documenting findings
- Found ~4,329 commented lines total (mostly documentation)
- Actual commented-out code blocks are minimal
- Excluded generated files and documentation comments
- Ready for manual review in Cleanup 9
- Cleanup 8: Complete
2026-01-16 12:12:38 +01:00
senke
479701896b aesthetic-improvements: enhance design direction checklist
- Expanded basic checklist into comprehensive implementation guide
- Added detailed sections: Color (80/20 rule), Spacing (8px grid), Interactions, Visual Elements
- Added component-specific checks: Buttons, Cards, Navigation, Forms, Pages
- Included specific Tailwind classes and values for each check
- Added 'keep vs remove' guidance for hover effects and visual elements
- Added final validation section for overall assessment
- Provides actionable, step-by-step guidance for applying Surgical Minimalism
- Action 11.5.1.2 complete
2026-01-16 10:48:00 +01:00
senke
c34a3d0170 aesthetic-improvements: document Surgical Minimalism design direction
- Created comprehensive design direction document
- Defined 6 core principles: 80/20 color rule, increased whitespace, subtle interactions, gradients used sparingly, 8px grid system, text color hierarchy
- Documented design tokens and color usage guidelines
- Added implementation checklist for applying principles
- Included good vs avoid examples with code snippets
- Documented migration path and references to audit documents
- Aligns with all completed aesthetic improvement actions
- Serves as foundation for future design work
- Action 11.5.1.1 complete
2026-01-16 10:46:34 +01:00
senke
bf56c66190 aesthetic-improvements: audit section spacing across all pages
- Created comprehensive audit document documenting all section spacing values
- Audited 12+ pages: DashboardPage, EducationPage, SettingsPage, QueuePage, GearPage, LivePage, DeveloperPage, SearchPage, ProfilePage, AnalyticsPage, AdminDashboardPage, DesignSystemDemoPage
- Documented spacing patterns: space-y-4 (16px), space-y-6 (24px), space-y-8 (32px), space-y-12 (48px)
- Documented grid gaps: gap-4 (16px), gap-6 (24px), gap-8 (32px)
- Documented page padding: p-6 (24px), p-8 (32px), px-4 py-8 (16px/32px)
- Verified all values align to 8px grid system
- Provided recommendations for increasing whitespace in next action
- Most common spacing: space-y-6 (24px) used in 7+ pages
- Action 11.4.3.2 complete
2026-01-16 10:41:53 +01:00
senke
a32c488378 aesthetic-improvements: verify gradients are only in hero sections
- Created verification document documenting all remaining gradients
- Verified 12 remaining gradients are appropriate:
  - 6 in hero/featured sections (DiscoverView, ProfileView, SocialView, LiveView)
  - 1 functional overlay for text readability
  - 5 decorative elements (icon containers, visualizations)
- Confirmed no gradients on card backgrounds
- All gradients used sparingly and appropriately, aligning with Surgical Minimalism
- Action 11.4.2.2 complete
2026-01-16 10:38:05 +01:00
senke
b2aa689a37 aesthetic-improvements: categorize hover effects as necessary vs excessive
- Enhanced audit document with detailed file-by-file categorization
- Identified 6 high-priority files with multiple excessive effects
- Identified 6 medium-priority files with single excessive effects
- Identified 3 files with mixed effects requiring selective removal
- Categorized ~400 instances as necessary (keep)
- Categorized ~200 instances as excessive (remove)
- Categorized ~150 instances as review (context-dependent)
- Specific patterns identified for removal: scale transforms, decorative shadows, image zooms
- Action 11.4.1.2 complete
2026-01-16 10:31:38 +01:00
senke
2b4383dd6e aesthetic-improvements: audit hover effects across codebase
- Found 887 instances across 239 files
- Categorized into 5 usage types (necessary, excessive, group hover, transitions, opacity)
- Identified excessive patterns: scale transforms, shadow/glow, multiple simultaneous effects
- Documented high-impact files requiring changes
- Current: ~887 effects, Target: reduce by 30-40% (remove decorative, keep interactive)
- Action 11.4.1.1 complete
2026-01-16 10:28:21 +01:00
senke
1ac3ca1f55 aesthetic-improvements: test WCAG AA compliance for all text colors
- Created comprehensive contrast test report
- Tested all text color combinations (white, dim, opacity variants)
- Tested on all 5 background colors (void, ink, graphite, slate, steel)
- All combinations exceed 4.5:1 ratio requirement
- Primary text: 15.9:1 to 20.6:1 (excellent)
- Secondary text: 6.1:1 to 7.8:1 (good)
- Text with opacity: 11.8:1 to 16.2:1 (excellent)
- No violations found - all text meets WCAG AA
- Action 11.1.1.3 complete
2026-01-16 10:18:46 +01:00
senke
e77e71c65a aesthetic-improvements: audit cyan usage across codebase
- Found 965 instances across 217 files
- Categorized into 6 usage types (primary, secondary, decorative, informational, focus, text)
- Created comprehensive audit document with recommendations
- Identified high-impact files for replacement
- Current: ~40% cyan usage, Target: ~20% (80/20 rule)
- Action 11.3.1.1 complete
2026-01-16 10:16:08 +01:00
senke
5558288809 consistency: fix final Tailwind default color instances 2026-01-16 01:59:56 +01:00
senke
de79895e5d consistency: fix remaining Tailwind default colors in auth and features components 2026-01-16 01:59:31 +01:00
senke
00f5712230 consistency: fix remaining Tailwind default color edge cases 2026-01-16 01:58:12 +01:00
senke
01f2acc718 docs: generate comprehensive list of all remaining Tailwind default color instances 2026-01-16 01:51:32 +01:00
senke
24a3141d90 cognitive-load: audit list view usage (Action 10.2.1.1)
- Audited all files with view mode toggle (6 files total)
- Found list view is actively used and is default in 3 contexts:
  - SearchPageView: List is default for search results
  - FileManagerView: List is default for file browsing
  - CloudFileBrowser: List is default for cloud files
- Grid view is default in track browsing contexts (LibraryPage, LibraryManager, ProfileView)
- Recommendation: Keep list view - serves different purposes than grid view
- Created comprehensive audit report: apps/web/docs/LIST_VIEW_USAGE_AUDIT.md
- Includes context-specific analysis and recommendations
2026-01-16 01:38:00 +01:00
senke
7463138b64 consistency: audit button variant usage (Action 9.3.1.1)
- Audited all 9 button variants in design system Button
- Found 5 variants in use (128 total uses):
  - ghost: 71 uses (54.2% - most popular)
  - outline: 36 uses (27.5%)
  - secondary: 13 uses (9.9%)
  - default: 4 uses (3.1%)
  - destructive: 4 uses (3.1%)
- Found 4 unused variants (zero usage):
  - neon, glass, premium, link
- Identified 28 legacy Button uses with variant="primary"
- Created comprehensive audit report: apps/web/docs/BUTTON_VARIANT_USAGE_AUDIT.md
- Includes usage statistics, analysis, and migration strategy
2026-01-16 01:32:40 +01:00
senke
d16f9ed1c5 consistency: audit custom components (Card, Input, Select) (Action 9.2.1.5)
- Audited Card, Input, and Select component implementations
- Identified design system, legacy, and custom components
- Found 4 high-priority issues:
  - UserCard and LicenceCard using invalid variant prop
  - FormField Input using Tailwind default colors
  - FormField Select using native HTML select
- Documented ~8 custom card-like components
- Created comprehensive audit report: apps/web/docs/CUSTOM_COMPONENTS_AUDIT.md
- Includes migration priorities and specific files requiring changes
2026-01-16 01:30:54 +01:00
senke
62e28b8557 consistency: audit custom button implementations (Action 9.2.1.1)
- Scanned 166 files with button elements
- Identified 30+ high-priority custom button implementations
- Documented locations, line numbers, and recommended Button variants
- Created comprehensive audit report: apps/web/docs/CUSTOM_BUTTONS_AUDIT.md
- High priority: Live stream, Dashboard, Social, Admin, Studio, File Manager, Modals
- Includes migration strategy and next steps
2026-01-16 01:28:37 +01:00
senke
39de3542b5 consistency: audit Input component styling (Action 9.5.1.1)
- Created comprehensive INPUT_COMPONENT_STYLING_AUDIT.md
- Documented all 25+ styling classes with categorization
- Identified 5 key issues:
  - Complex focus state (ring + border redundant)
  - Unnecessary backdrop-blur-sm decoration
  - Overly broad transition-all
  - Subtle hover effect
  - Complex border radius
- Analyzed usage: 100+ files import Input component
- Provided Priority 1-3 recommendations for simplification
- Created proposed simplified version with Kodo colors
- Ready for Action 9.5.1.2 (remove unnecessary decorations)
2026-01-16 01:20:06 +01:00
senke
efe961abd1 consistency: audit Tailwind default color usage (Action 9.1.1.2)
- Created comprehensive TAILWIND_COLORS_AUDIT.md documenting all Tailwind default colors
- Found 1,492 instances across 235 files
- Most common: text-gray-* (992), bg-gray-* (146), border-gray-* (107)
- Documented color distribution, top 20 classes, and mapping guide
- Identified top 20 files requiring migration
- Created migration priority guide (High/Medium/Low)
- Documented special cases (test files, component libraries)
- Ready for Action 9.1.1.3 (migration to Kodo colors)
2026-01-16 01:10:57 +01:00
senke
eae943158e docs: audit all mutation buttons (Action 8.3.1.2)
- Created comprehensive audit document: MUTATION_BUTTONS_AUDIT.md
- Identified 28 mutation buttons across 9 categories
- 5 buttons already have loading states (18%)
- 23 buttons missing loading states (82%)
- Categorized by priority: High (8), Medium (11), Low (4)
- Documented existing patterns and recommendations
- Task 8.3.1.2 complete
2026-01-16 00:42:49 +01:00
senke
5c1835186f ui: add hover states and cursor-pointer to high-priority clickable elements (Action 8.2.1.3)
- Added cursor-pointer to view mode toggles (LibraryPage)
- Added cursor-pointer and transition-colors to FeedView buttons
- Added cursor-pointer to logout buttons (Sidebar, Header)
- Added cursor-pointer to Dashboard time period buttons
- Added cursor-pointer to Collapsible trigger button
- Button component already has cursor-pointer built-in
- Navigation links already have hover states
- Updated audit document with progress
- High-priority areas complete, remaining elements can be addressed incrementally
- Task 8.2.1.3 complete
2026-01-16 00:36:35 +01:00
senke
e415bfb8dc docs: audit all interactive elements (Action 8.2.1.2)
- Created comprehensive audit document: apps/web/docs/INTERACTIVE_ELEMENTS_AUDIT.md
- Identified 10 categories of interactive elements
- Found 500+ interactive elements across codebase
- Documented patterns: good, needs improvement, missing
- Prioritized areas for hover/focus state improvements
- Task 8.2.1.2 complete
2026-01-16 00:35:01 +01:00
senke
49152ae70b docs: determine primary upload button location (Action 8.1.1.2)
- Primary: Dashboard FAB (global, always accessible, most prominent)
- Secondary: LibraryPage header button (contextual, always visible)
- To remove: LibraryPage empty state buttons (redundant)
- To remove: LibraryManager buttons (component unused - legacy code)
- Updated audit document with decision rationale
- Task 8.1.1.2 complete
2026-01-16 00:32:05 +01:00
senke
cc88a34035 docs: audit all upload buttons (Action 8.1.1.1)
- Found 6 upload button instances across 3 components
- Created comprehensive audit document: apps/web/docs/UPLOAD_BUTTONS_AUDIT.md
- Identified duplicates: empty state buttons redundant with header buttons
- Primary candidates: Dashboard FAB and LibraryPage header button
- Recommendations for removal documented
- Task 8.1.1.1 complete
2026-01-16 00:31:34 +01:00
senke
c89c1a0e46 spacing: create comprehensive SPACING_GUIDE.md
- Created complete spacing system guide in apps/web/docs/SPACING_GUIDE.md
- Documented numeric and semantic spacing scales with full value tables
- Included usage guidelines, best practices, and common patterns
- Added migration guide for replacing arbitrary values
- Documented ESLint enforcement and related documentation
- Task 7.2.1.7 complete
2026-01-16 00:22:30 +01:00
senke
dd28c1e79b spacing: audit all spacing classes usage
- Audited 2,761 spacing class instances across 366 files
- Categorized by type: gap (1,314), padding (1,041), padding x/y (784), space-between (611), margin (217)
- Identified inconsistencies: all numeric values, no semantic classes, arbitrary values
- Created comprehensive audit report with recommendations
- Task 7.2.1.2 complete
2026-01-15 23:57:33 +01:00
senke
9c91714127 typography: standardize paragraph text sizes
- Standardized 9 paragraphs without explicit sizes
- Added text-sm to secondary/description text (7 instances)
- Added text-base to body text (2 instances)
- Established standard: text-base for body, text-sm for secondary
- Verified 490 paragraphs across 207 files follow type scale
- Created standardization plan document
- Task 7.1.2.4 complete
2026-01-15 23:55:35 +01:00
senke
8d5db4cd34 typography: standardize h2-h6 heading elements
- Standardized h2 elements: 19 instances from text-3xl/text-xl to text-2xl
- Standardized h3 elements: 4 instances from text-2xl to text-xl
- Established consistent hierarchy: h1(text-3xl), h2(text-2xl), h3(text-xl)
- Preserved special cases: demo pages, responsive patterns, stat value displays
- Created standardization plan document
- Task 7.1.2.3 complete
2026-01-15 23:54:05 +01:00
senke
f0a170717f visual-hierarchy: complete audit of all h1 elements
- Audited 55 h1 elements across 52 files
- Documented size distribution: text-3xl (26), text-2xl (16), text-4xl (10), etc.
- Identified inconsistencies: 6 different sizes used for h1 elements
- Found 11+ files with text-2xl h1 that should be text-3xl for consistency
- Documented responsive patterns and special cases
- Provided recommendations for standardization
- Created comprehensive audit report in apps/web/docs/H1_ELEMENTS_AUDIT_REPORT.md
- Action 7.1.2.1 complete
2026-01-15 21:26:39 +01:00
senke
2325f3f800 visual-hierarchy: update typography replacement guide with complete analysis
- Documented all remaining arbitrary text sizes (9px, 10px, 11px instances)
- Noted that 99.8% of text already uses scale correctly
- Documented edge cases for design review
- Guide now complete with full inventory
2026-01-15 21:20:51 +01:00
senke
8c56aed60c visual-hierarchy: replace arbitrary text sizes with scale classes
- Replaced text-[9px] with text-xs in WishlistView.tsx
- Replaced font-size: 11px with var(--text-xs) in badge-avatar.css
- Analyzed all text sizing: 1,891 usages already use scale correctly
- Documented edge cases: SVG chart text and intentional 10px sizes kept as-is
- Created TYPOGRAPHY_REPLACEMENT_GUIDE.md with full analysis
- 99.8% of text already uses scale - only 2 safe replacements made
- Action 7.1.1.4 complete
2026-01-15 21:20:06 +01:00
senke
937c92e980 visual-hierarchy: complete typography audit of all text size classes
- Audited 1,891 text size class usages across 342 files
- Documented usage distribution: text-sm (870), text-xs (596), text-2xl (130), etc.
- Identified top 10 files with highest usage
- Analyzed usage patterns by component type (pages, forms, cards, navigation)
- Identified inconsistencies in heading hierarchies and body text sizes
- Provided recommendations for standardization
- Created comprehensive audit report in apps/web/docs/TYPOGRAPHY_AUDIT_REPORT.md
- Action 7.1.1.3 complete
2026-01-15 21:17:59 +01:00
senke
6aaf6ed264 scalability: confirm bundle optimization not needed
- Verified all bundle size metrics exceed industry standards
- Initial bundle: ~246KB (excellent, < 300KB standard)
- Total JS: 764KB (good, < 1MB standard)
- Page chunks: 4.5-8.5KB (excellent, < 50KB standard)
- Code splitting: Excellent (55 chunks, proper vendor isolation)
- All routes lazy-loaded with small chunks
- Vendor chunks properly isolated
- CSS properly split
- Conclusion: Bundle sizes are already optimal, no optimization required
- Action 6.2.1.8 complete (no changes needed)
2026-01-15 21:00:04 +01:00
senke
0b361243c9 scalability: measure and document bundle sizes after code splitting
- Created comprehensive bundle size report (BUNDLE_SIZE_REPORT.md)
- Total JavaScript: 764KB across 55 chunks
- Total CSS: 66KB
- Initial load: ~246KB (excellent)
- Average page chunk: 4.5-8.5KB (excellent lazy loading)
- Vendor chunks properly isolated (React core: 209KB)
- All routes lazy-loaded with small chunks
- Bundle sizes meet industry standards
- Action 6.2.1.7 complete
2026-01-15 20:58:52 +01:00
senke
f7072595f2 scalability: audit heavy components for code splitting
- Created HEAVY_COMPONENTS_AUDIT.md documenting all heavy components
- Identified already lazy-loaded components: EmojiPicker, ImageCropper, Toaster
- Verified chart components are lightweight (custom SVG, no heavy libraries)
- Confirmed heavy libraries already in vendor chunks
- Documented feature chunks already configured
- Identified potential optimizations (@dnd-kit, dompurify) - low priority
- Conclusion: Most heavy components already optimized
- Action 6.2.1.3 complete
2026-01-15 20:50:51 +01:00
senke
8721555b76 state-ownership: categorize state utilities as needed, redundant, or obsolete (Action 4.6.1.2) 2026-01-11 18:03:13 +01:00
senke
e07ac90c2a state-ownership: audit cartStore for domain data (Action 4.5.1.6) 2026-01-11 18:00:11 +01:00
senke
f7870354cc state-ownership: list all state utility files (Action 4.6.1.1) 2026-01-11 17:58:05 +01:00
senke
e67e206130 state-ownership: verify stores/auth.ts is removed (Action 4.5.1.3) 2026-01-11 17:57:19 +01:00
senke
08e9faacd4 state-ownership: list all Zustand stores (Action 4.5.1.1) 2026-01-11 17:56:31 +01:00
senke
eb6dce73ef state-ownership: audit all mutations for optimistic updates (Action 4.4.1.4) 2026-01-11 17:55:39 +01:00
senke
4c9bb1ac8f state-ownership: audit custom optimistic updates (Action 4.4.1.1) 2026-01-11 17:43:51 +01:00
senke
cb1412a90c error-propagation: audit all mutation error handlers 2026-01-11 17:33:30 +01:00
senke
8ccaa2116a error-propagation: audit existing ErrorBoundary usage 2026-01-11 17:31:41 +01:00
senke
b54d0acae5 error-propagation: audit all error display patterns across codebase 2026-01-11 17:00:58 +01:00