Commit graph

519 commits

Author SHA1 Message Date
senke
ef00e165e9 feat(profile): add profile banner (B1) 2026-02-20 14:56:25 +01:00
senke
134b8979c0 chore(v0.102): consolidate remaining changes — docs, frontend, backend
- docs: SCOPE_CONTROL, CONTRIBUTING, README, .github templates
- frontend: DeveloperDashboardView, Player components, MSW handlers, auth, reactQuerySync
- backend: playback_analytics, playlist_service, testutils, integration README

Excluded (artifacts): .auth, playwright-report, test-results, storybook_audit_detailed.json
2026-02-20 13:02:12 +01:00
senke
c20990d7df feat(queue): migrate QueueView drag & drop to @dnd-kit (B3) 2026-02-20 13:00:57 +01:00
senke
ef016a07ed docs(live): document Go Live limitation (A6) 2026-02-20 12:56:29 +01:00
senke
870c899925 feat(developer): connect API keys to real backend (Lot C frontend)
- developerApi: listKeys, createKey, deleteKey
- developerService: use real API instead of localStorage
- DeveloperDashboardView: list keys, Create API Key button, revoke with confirmation
- CreateAPIKeyModal: scopes read/write/admin
- MSW handlers for GET/POST/DELETE developer/api-keys
2026-02-20 00:19:58 +01:00
senke
753322b8ed feat(queue): sync playerStore with backend API, migrate QueueView to usePlayerStore
- Add useQueueSync hook: restore queue on login, sync add/remove/reorder/clear
- Extend queueApi.getQueue to return queueItemIds for backend sync
- Migrate QueueView from useAudio to usePlayerStore + usePlayer
- Add ConfirmationDialog for Clear Queue button
- Add MSW handlers for GET/PUT/POST/DELETE queue endpoints
- Wire useQueueSync in DashboardLayout
2026-02-20 00:13:33 +01:00
senke
58461a278a chore(web): remove console.log in prod, address TODO/FIXME for v0.101 2026-02-19 19:01:42 +01:00
senke
bf2f09b4cb docs: update Welcome.mdx and deprecate Kodo references in docs
- Welcome.mdx: Kodo → Sumi design tokens
- EMPTY_ERROR_PATTERNS: KodoEmptyState → EmptyState
- all_components/covered_components: remove KodoEmptyState (renamed to EmptyState)
- COLOR_USAGE.md: add deprecation notice, point to DESIGN_TOKENS
- COMPONENT_USAGE.md: add note to prefer Sumi tokens
2026-02-17 17:05:33 +01:00
senke
ceeab72459 refactor(ui): migrate arbitrary values to layout tokens
- AstralBackground: w-[60%] h-[60%] → w-3/5 h-3/5
- ChatInput/ChatMessage: h-[28rem]/h-[25rem] → h-96 max-h-layout-list
- ChatMessage: max-w-[80%] → max-w-4/5
2026-02-17 17:05:08 +01:00
senke
2116909be6 refactor(ui): replace gray colors with Sumi tokens
- placeholder-gray-500 → placeholder:text-muted-foreground (textarea, SharePostModal, SearchBar)
- text-gray-400 → text-muted-foreground (Card.stories, DashboardLayout.stories)
- TrackInfo: add data-testid for separator, update test selector
- bg-gray-900/bg-gray-100 → bg-background in player stories
2026-02-17 17:03:57 +01:00
senke
5ddef0ac70 refactor(ui): replace glass-hud with sumi-glass in PWAInstallBanner and CreateAPIKeyModal 2026-02-17 17:03:17 +01:00
senke
e11984898d chore: consolidate CI, E2E, backend and frontend updates
- CI: workflows updates (cd, ci), remove playwright.yml
- E2E: global-setup, auth/playlists/profile specs
- Remove playwright-report and test-results artifacts from tracking
- Backend: auth, handlers, services, workers, migrations
- Frontend: components, features, vite config
- Add e2e-results.json to gitignore
- Docs: REMEDIATION_PROGRESS, audit archive
- Rust: chat-server, stream-server updates
2026-02-17 16:43:21 +01:00
senke
3ad91e7708 chore: remove dead code (Education, Studio, Gamification) (P2) 2026-02-16 11:03:27 +01:00
senke
0630dc5617 refactor(frontend): simplify TokenStorage usage for httpOnly cookie auth 2026-02-15 16:04:42 +01:00
senke
8ddc790847 chore(frontend): remove or simplify ghost features (Developer Dashboard, Education/Gamification/Studio) 2026-02-15 16:03:43 +01:00
senke
4d213a5be9 chore(audit 2.4, 2.5): supprimer code mort Education et cmd/modern-server
- Supprimer routes/handlers/core Education (backend)
- Supprimer handler MSW education, refs Sidebar/locales
- Basculer Makefile, make/dev.mk, scripts vers cmd/api/main.go
- Supprimer veza-backend-api/cmd/modern-server/
2026-02-15 14:39:40 +01:00
senke
cfe1d04b86 refactor(audit-2.1,2.6): unify views and pages to features/*/pages pattern
- Migrate LiveView, GearView, PurchasesView, SocialView, AnalyticsView into features
- Create features: admin, developer, seller; add QueuePage, WishlistPage
- Migrate pages/marketplace to features/marketplace
- Remove components/views/ and pages/ legacy directories
- Update lazyExports, docs (ARCHITECTURE)
- Mark audit 2.1, 2.6 as done

Refs: AUDIT_TECHNIQUE_INTEGRAL_2026_02_15.md items 2.1, 2.6
2026-02-15 14:30:40 +01:00
senke
cf81fc12f3 fix(auth): correct 2FA login flow and documentation
- Fix misleading comment in TwoFactorVerify (authApi.verify2FA is for setup, not login)
- Add MSW handler for POST /auth/login/2fa
- Improve error display in AuthViewContent when 2FA verification fails
- Add integration test for 2FA login flow
- Update AUDIT_TECHNIQUE_INTEGRAL

Refs: AUDIT_TECHNIQUE_INTEGRAL_2026_02_15.md item 1.2 (P0)
2026-02-15 12:42:48 +01:00
senke
44bcaa5b8e feat(web): propagate AbortSignal in TanStack Query hooks
- Add useAbortSignal hook for component lifecycle cancellation
- Pass signal to apiClient in useLibraryItems, useUser, useDashboard,
  useMyTracks, useNotificationMenu
- Prevents memory leaks when navigating away during fetch
2026-02-14 22:41:46 +01:00
senke
0c7afc55ff chore(web): remove ghost features Education, Gamification, Studio
- Remove LazyEducation, education-view, components/education
- Delete educationService, handlers-ghost
- Remove EDUCATION, GAMIFICATION, STUDIO flags from features.ts
- Update FEATURE_STATUS.md
2026-02-14 22:40:12 +01:00
senke
7f7b6547bc chore: consolidate pending changes (Hyperswitch, PostCard, dashboard, stream server, etc.) 2026-02-14 21:45:15 +01:00
senke
04c25aa24f Phase 2 stabilisation: code mort, Modal→Dialog, feature flags, tests, router split, Rust legacy
Bloc A - Code mort:
- Suppression Studio (components, views, features)
- Suppression gamification + services mock (projectService, storageService, gamificationService)
- Mise à jour Sidebar, Navbar, locales

Bloc B - Frontend:
- Suppression modal.tsx deprecated, Modal.stories (doublon Dialog)
- Feature flags: PLAYLIST_SEARCH, PLAYLIST_RECOMMENDATIONS, ROLE_MANAGEMENT = true
- Suppression 19 tests orphelins, retrait exclusions vitest.config

Bloc C - Backend:
- Extraction routes_auth.go depuis router.go

Bloc D - Rust:
- Suppression security_legacy.rs (code mort, patterns déjà dans security/)
2026-02-14 17:23:32 +01:00
senke
670282989b chore(refactor/sumi-migration): commit pending changes — tests, stream server, dist_verification
- apps/web: test updates (Vitest/setup), playbackAnalyticsService, TrackGrid, serviceErrorHandler
- veza-common: logging, metrics, traits, validation, random
- veza-stream-server: audio pipeline, codecs, cache, monitoring, routes
- apps/web/dist_verification: refresh build assets (content-hashed filenames)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 19:39:18 +01:00
senke
0a29c544af fix(web): resolve all 568 TypeScript errors — tsc --noEmit now passes with zero errors
Major categories fixed:
- TS6133 (188): Remove unused imports (React, icons, types) and variables
- TS2322 (222): Fix type mismatches in stories (satisfies Meta -> const meta: Meta),
  add nullish coalescing for optional values, fix component prop types
- TS2345 (43): Fix argument type mismatches with proper null checks and type narrowing
- TS2741 (21): Add missing required properties to mock/story data
- TS2339 (19): Fix property access on incorrect types, add type guards
- TS2353 (13): Remove extra properties from object literals or extend interfaces
- TS2352 (11): Fix type conversion chains
- TS2307 (9): Fix import paths and module references
- Other (42): Fix implicit any, possibly undefined, export declarations

Vite build and tsc --noEmit both pass cleanly.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-13 00:32:08 +01:00
senke
caa23312fe chore: enable noUncheckedIndexedAccess, isolate ghost MSW handlers, document go-clamd tech debt
- Enable TypeScript noUncheckedIndexedAccess and fix 133 resulting errors
  across 46 files with proper null guards, optional chaining, and fallbacks
- Extract education/gamification ghost feature MSW handlers into handlers-ghost.ts
- Add Storybook test plugin documentation in vitest.config.ts
- Document abandoned go-clamd dependency (2017) as tech debt in upload_validator.go

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 23:12:35 +01:00
senke
b97c2757ca fix(tests): add missing component tests and fix failing tests
- Fix setTimeout memory leak in ChatRoom.tsx by storing timeout in
  useRef and cleaning up on unmount
- Add tests for Accordion, Collapsible, FloatingInput, AnimatedNumber,
  and FAB components (5 new test files, all passing)
- Fix socialService methods (deleteComment, markRead, markAllRead) to
  return values matching test expectations
- Fix MSW handlers for chat/token and notification endpoints to use
  proper { success: true, data: ... } envelope format
- Fix invalid CSS selector in TrackList.test.tsx that caused JSDOM crash
- Document excluded test files with TODO tickets in vitest.config.ts

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:59:09 +01:00
senke
a7ccd06042 refactor: LoadingState delegates all spinner rendering to LoadingSpinner
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:23:16 +01:00
senke
c74ed8ae8a test: add tests for ErrorDisplay, LoadingState, ComingSoon
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:19:54 +01:00
senke
d493050dd3 fix: remove as any casts from application components
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:17:55 +01:00
senke
e0a4fb979c fix: type authService.login, replace remaining console.error with logger
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:15:10 +01:00
senke
9898d0438c refactor: unify loading components -- consolidate Spinner into LoadingSpinner
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:04:45 +01:00
senke
d7562ba51f refactor: complete Modal to Dialog migration for 6 modals
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 22:01:05 +01:00
senke
03aad8eefa refactor: replace console.log with logger, fix TrackCard type, memoize DashboardPage
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 21:57:02 +01:00
senke
8dfebb9dd0 a11y: skip link exists in App, ChatInput aria-label, sidebar focus trap, MiniPlayer aria-live
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 21:55:25 +01:00
senke
960e0d255e fix: memory leaks -- add setTimeout cleanup in ChatInput, SocialViewFeedItem, PostCard
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 21:54:06 +01:00
senke
db0489d322 fix(a11y): Sprint 7 — semantic HTML and accessibility deep-dive
S7.1: Replace div onClick with semantic button in DialogTrigger.tsx
S7.2: Replace role="button" divs with native <button> elements in 12 files
      (PlaylistCard, TrackCard, ConversationItem, NotificationMenuItem,
       AudioPlayerTrackInfo, SearchPageResults, ProjectsManagerAddCard,
       ProjectsManagerCard, GearInventoryGrid, UploadModal, dropdown.tsx,
       LibraryPageGrid)
S7.3: Add focus-visible:ring-2 to 14 form inputs with outline-none across
      9 modal files (CreateGroupModal, DataExportModal, EditPlaylistModal,
      AddToPlaylistModal, BanUserModal, RefundRequestModal, FlashSaleModal,
      TipStreamerModal, CreatePostModal)
S7.4: Add semantic landmarks — <section> in DashboardPage, <article> in
      PostCard and CourseCard

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 10:34:39 +01:00
senke
038b637a3f fix: UI remediation Phase 1 (S0-S5) + Phase 2 Sprint 6 shadow system
Phase 1:
- S0: Fix open redirect (safeNavigate), delete AuthContext/legacy auth, encrypt API keys, gitignore .env files
- S1: Split client.ts god object into 5 modules, unify toast system, delete unused Sidebar
- S2: Add glass button variant, migrate 32 z-index to SUMI tokens, fix card dark mode
- S3: Skip nav link, aria-hidden on icons, focus-visible ring fixes, alt attrs, aria-live regions
- S4: React.memo on list items, fix key={index}, loading=lazy on images
- S5: Branded loading screen, page transitions respect reduced-motion, LikeButton micro-interaction, i18n sidebar/header

Phase 2 Sprint 6:
- Wire Tailwind shadow utilities to SUMI tokens in @theme block (fixes 50+ files)
- Define shadow-card/shadow-card-hover tokens
- Remove dark:shadow-none workarounds from card.tsx (SUMI handles per-theme shadows)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 10:13:44 +01:00
senke
8cbd4f7558 refactor: Phase 7 — Clean up legacy components and remove dead tokens
- Bulk replace text-white → text-foreground across 116 component files
  (preserving text-white/ opacity variants)
- Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow
  classes from all components
- Replace --duration-normal/--duration-immersive/--duration-slow with
  --sumi-duration-normal/--sumi-duration-slow across 130+ files
- Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out
- Replace focus:ring-blue-500 → focus:ring-primary (4 files)
- Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms
  (SUMI anti-pattern: no scale on hover)
- Clean up stale kodo- references in comments

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 02:09:29 +01:00
senke
60225ed5ec refactor: Phase 5 — Migrate layout shell to SUMI tokens
- Sidebar: bg-raised, border-faint tokens
- Header: glass bg + backdrop-blur-12px, z-200 sticky, SUMI durations
- PlayerBarGlass: glass-bg + blur-16px, accent colors, remove glow
- PlayerBarProgress: solid accent fill, SUMI border tokens
- PlayerBarRight/TrackInfo: text-foreground, SUMI border tokens
- MiniPlayer: glass-bg, border-faint, z-200, SUMI shadows
- GlobalPlayer: SUMI z-index and duration tokens
- DashboardLayout: SUMI z-raised, duration tokens

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 02:01:39 +01:00
senke
0dcc9a4f14 refactor: Phase 4 — Update UI primitives to SUMI design system
- button.tsx: Remove gaming/terminal/nature/glass variants, add link variant,
  add focus-visible glow, remove scale transforms and neon shadows
- card.tsx: Remove glass/glow/glowMagenta variants, update radius to rounded-lg,
  remove hover translate transforms
- modal.tsx: Update backdrop to bg-black/60 + blur(4px), bg-popover,
  SUMI easing curves and durations
- badge.tsx: Terminal variant aliased to success, doc updates
- avatar.tsx: Already migrated, doc updates
- progress.tsx: Fix gradient colors to SUMI semantics
- input.tsx: bg-background, border-border, SUMI focus glow
- textarea.tsx: Add SUMI focus glow

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 01:58:15 +01:00
senke
dce0654720 refactor: Phase 3 — Semantic color + hex + z-index migration
Phase 3b: Replace hardcoded hex colors with SUMI palette values
- #66FCF1 (neon cyan) → #7c9dd6 (sumi-accent) across all files
- #3b82f6 (blue-500) → #7c9dd6 in chart components
- #36E5D1 → #7a9e6c (sage), #E4B314 → #c9a84c (gold)
- #E63946 → #d4634a (vermillion)
- Update ThemeSwitcher, AppearanceSettings, SwaggerUI, chart components

Phase 3c: Normalize z-index to SUMI scale
- z-[100] (modals) → z-[400] (--sumi-z-modal)
- z-[110] (player expanded, search) → z-[500] (--sumi-z-popover)
- z-[200] (image viewer) → z-[500]
- z-[35] (navbar overlay) → z-[300] (--sumi-z-overlay)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 01:54:47 +01:00
senke
5cc720be8f refactor: Phase 3a — Global color class migration to SUMI semantics
- Replace all kodo-* color classes across ~100 TSX files:
  kodo-void → background, kodo-ink → card, kodo-graphite → muted,
  kodo-steel → muted-foreground, kodo-cyan → primary, kodo-magenta → destructive,
  kodo-lime → success, kodo-red → destructive, kodo-gold → warning
- Replace cyan-500, magenta-500, lime-500 default Tailwind colors with
  semantic equivalents (primary, destructive, success)
- Fix WaveformVisualizer hardcoded hex colors to SUMI values
- Delete global-effects.css (conflicting, redundant with index.css)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 01:51:49 +01:00
senke
309ba5bc8a refactor: Phase 2 — Font migration to SUMI stack
- Update Google Fonts: Inter + Space Grotesk + JetBrains Mono + Noto Serif JP
- Remove: Orbitron, Barlow, Source Serif 4, IBM Plex Mono, Noto Sans JP
- Replace all font-display (Orbitron) references with font-heading (Space Grotesk)
  across ~70 TSX files

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 01:49:07 +01:00
senke
230286e073 refactor: Phase 1 — SUMI token foundation
- Rewrite index.css with complete SUMI token system (dark + light themes)
- All --sumi-* variables: backgrounds, surfaces, borders, text, pigments,
  spacing, radius, shadows, glass, scrollbar, motion, z-index, layout
- shadcn/Radix semantic mapping (--background, --foreground, etc.)
- Tailwind @theme mapping with new fonts (Inter, Space Grotesk, JetBrains Mono)
- SUMI keyframe animations (sumi-fade-in, sumi-slide-up, sumi-scale-in, etc.)
- Delete 11 redundant CSS files (design-system.css, design-tokens.css,
  button.css, card.css, input.css, badge-avatar.css, header.css,
  fix-input-focus.css, fix-login-form.css, visual-enhancements.css,
  premium-utilities.css)
- Update main.tsx: single CSS import (index.css only)
- Update ThemeProvider: data-theme attribute instead of .dark class toggle
- Update index.html FOUC script: data-theme attribute

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 01:48:01 +01:00
senke
ecc9362c47 fix(web): gate ghost routes behind ComingSoon placeholder component
- Create ComingSoon.tsx: simple placeholder showing feature name and
  "under development" message with proper Tailwind styling
- Replace LazyGear, LazyLive, LazyEducation, LazyQueue, LazyDeveloper
  route elements with <ComingSoon feature="..." />
- Remove unused lazy imports for ghost components

Users navigating to /gear, /live, /education, /queue, /developer will
now see a clear "Coming Soon" message instead of broken components
that depend on non-existent backend APIs.

Addresses audit finding D5: 5 ghost routes without backend.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-11 23:23:26 +01:00
senke
124b20d670 refactor(web): consolidate duplicate services into feature modules
- Migrate 5 files from legacy services/trackService to feature-based
  tracks/services/trackService
- Migrate 1 file from legacy services/playlistService to feature-based
  playlists/services/playlistService
- Add missing functions to feature trackService: search, like, unlike,
  recordPlay, download, upload, getStatus
- Add backward-compatible `trackService` and `playlistService` object
  exports that match legacy API signatures (no call-site changes needed)
- Delete legacy apps/web/src/services/trackService.ts
- Delete legacy apps/web/src/services/playlistService.ts

Addresses audit finding: debt item 6 (duplicate services).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-11 22:52:09 +01:00
senke
b4d7ad9c4c fix(tests): cycles 12–18 – corrections services, mocks et design tokens
- chatService: getChannels → getServers
- commerceService: getOrders/getOrderDetails/getSalesStats → getPurchases/getSellerStats
- marketplaceService: mock réponse, params API, getDownloadLink → listOrders
- config/env.test: vi.stubEnv, import dynamique
- useAuth.test: mock useAuthStore
- TrackStatsDisplay, UploadQuota: mock du bon service (analyticsService, uploadService)
- TrackListEmpty, TrackListRow, TrackSearch: design tokens, assertions
- trackDownloadService, chunkedUploadService: MSW/server.use
- trackListService, trackSearchService, trackShareService: assertions
- ErrorBoundary, LoginForm, PlaylistErrorBoundary, PlaylistRecommendations
- RAPPORT_RESOLUTION_TESTS_CYCLE1.md

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-11 09:43:55 +01:00
senke
7b315df86c style(ui): pixel-perfect alignment for Sidebar, Header, Player via Spotify/Discord standard
- PlayerBarGlass: use semantic tokens (--player-glass-bg, --player-glass-border)
- Replace arbitrary OKLCH with CSS vars; backdrop-blur-md; rounded-xl
- Transitions: duration-[var(--duration-*)], ease-[var(--ease-out)]
- Sidebar: add border-r border-[var(--sidebar-border)] for depth
- Header: border-[var(--glass-border)] for subtle separation
- index.css: add --player-glass-bg, --player-glass-border (light + dark)
- visual baselines updated (0% diff Playwright)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 23:09:24 +01:00
senke
a42d9e0d1d feat(ui): DeveloperDashboard skeleton, EmptyState, ErrorDisplay, Header transitions
- DeveloperDashboardViewSkeleton: premium skeleton for loading state
- EmptyState for API keys when none exist (variant card, Create action)
- ErrorDisplay with retry on fetch failure
- Header: duration-[var(--duration-fast)] on all interactive elements
- DeveloperDashboardView: table row hover, copy button transitions

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 22:59:51 +01:00
senke
85a40aeed1 refactor(ui): Design tokens - gradients, duration, textarea
- Replace cyan/magenta/purple gradients with primary/secondary
- duration-200/300 → duration-[var(--duration-normal)]
- Textarea: min-h-[100px] → min-h-24
- SearchPageHeader, DashboardPage, PlaylistHeader
- UserProfilePageHeader/Hero, PlaylistDetailPageHero
- SocialViewFeedItem, WishlistView, PostCard, ProductCard, CourseCard
- SearchPageResults, MarketplaceHome

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 22:56:30 +01:00
senke
087e18ab77 feat(ui): Header search navigates to /search on Enter
- Press Enter in header search → navigate to /search?q=query
- Add role=search, aria-label, focus-visible ring
- Use duration token for transition

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 22:52:31 +01:00
senke
13476dda6e feat(ui): Sidebar refactor, premium skeletons, ContentFadeIn transitions
- Sidebar: useSidebarNavigation hook, ARIA, token-based layout
- Layout: lg:ml-main-expanded/collapsed (replace arbitrary ml-64)
- TrackCardSkeleton + PlaylistCardSkeleton: KŌDŌ tokens, min-heights for CLS
- ContentFadeIn: 200ms fade-in with --ease-out
- TrackGrid, PlaylistList, LibraryPage: integrate skeletons + fade-in
- Player: player-bar subcomponents, useAudioAnalyser
- Tests: TrackGrid wrapper (QueryClient, ToastProvider)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 22:51:51 +01:00
senke
52f767cef9 fix(web): close Create API Key modal after successful key creation
- handleCreateKey now returns the new key so the modal receives result
- Modal handles undefined result and api_key shape; no more TypeError on result.key
- On error, parent still shows toast and rethrows so modal stays on step 1

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 19:46:32 +01:00
senke
e67b861da4 fix(web): reduce developer portal console errors
- CSRF: hint uses VITE_BACKEND_PORT instead of hardcoded 8080
- Proxy: add /swagger to Vite dev server for Swagger doc.json (fixes YAMLException)
- playerService: validate media URL before load to avoid Invalid URI errors
- usePlayer: log invalid URL/network audio errors at DEBUG level
- SwaggerUI: log HTML-instead-of-JSON parse errors at DEBUG
- webhookService: log 5xx backend errors at DEBUG
- api client: log 5xx /webhooks errors at DEBUG (reduces duplicate noise)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 19:38:13 +01:00
senke
9f40182ad1 ui(design): Phase 3 - rounded tokens, min-w/min-h, stories, NavigationProgress
- rounded-[var(--radius-xl/md/lg/sm)] → rounded-xl, rounded-md, rounded-lg, rounded-sm
- Timeline: min-w-[200px] → min-w-50
- AddEquipmentView, MetadataForm: min-h-[100px] → min-h-25
- NavigationProgress: shadow-[...] → shadow-button-primary-glow
- Stories: ActivityGraph, StatCard, NotificationBell, LoadingState, ScrollArea, Skeleton, FileUploadZone
- Reduced arbitrary values from ~60+ to 11 (5 files, exceptions documented)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 19:24:07 +01:00
senke
c25448e284 ui(design): migrate ImageCropper, PlaybackSummary to layout tokens
- ImageCropper: h-[80vh] → h-layout-modal-sm (80vh)
- PlaybackSummary: h-[200px] → min-h-50 (scale Tailwind)
- Add h-layout-modal-sm utility class

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 14:07:19 +01:00
senke
186e4b47e6 ui(design): migrate layout arbitrary values to tokens - Phase 1
- Add layout tokens: h-layout-chat, h-layout-chat-main, h-layout-stream, h-layout-modal-full
- ChatPage: use h-layout-chat and h-layout-chat-main instead of calc(100vh-6.25rem/6rem)
- LiveStreamDetailView: use h-layout-stream
- Modal full size: use h-layout-modal-full
- ChatRoom empty state: use h-layout-lyrics-sm (50vh)
- ChatInput attachment: min-w-36 instead of min-w-[150px]
- Update DESIGN_TOKENS.md and add AUDIT_UI_SPOTIFY_DISCORD_20260210.md

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 14:06:30 +01:00
senke
401c022844 feat(ui): semantic tokens on library, chat, dashboard, search
PlaylistDetailView: hero border, overlay, sort buttons, table header, row hover → border-border, bg-background/50, hover:bg-muted/50
ChatMessage: action buttons hover, own/other bubbles, attachment preview, context menu, modal → muted/border/foreground
ChatRoom: header bar, channel item hover, input pill → bg-card/90 border-border, hover:bg-muted/50, bg-muted/30
TrackList: play icon and title when not current → text-foreground
SearchPageHeader: title, search container, input, clear button → text-foreground, bg-card/80 border-border, hover:bg-muted/50
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 09:53:17 +01:00
senke
69577e9980 feat(ui): semantic tokens in RolesPage, SettingsPage, Toast, QueueView
- SecuritySettings: row bg-white/5 → bg-muted/30
- Toast: close button hover:bg-black/10 → hover:bg-muted/50
- QueueView: autoplay toggle thumb bg-white → bg-background
- RolesPage: cards/headers border-white/5, bg-black/40 → border-border, bg-card/80; headings text-white → text-foreground; row hover, inputs, badge → semantic
- SettingsPage: wrapper and tabs border/bg → border-border, bg-card/80, bg-muted/20; section cards; System Config title text-foreground

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 09:45:30 +01:00
senke
f936b7e07f feat(ui): semantic tokens in settings views + XPBar
Gamification:
- XPBar: track bg-kodo-void → bg-muted (gold gradient and pattern kept)

Settings:
- CloudIntegrationView, BackupsView: toggle thumb bg-white → bg-background
- AccessibilitySettingsView: hover:bg-white/5 → hover:bg-muted/50
- AppearanceSettingsView: density option hover + kodo-magenta → primary
- IntegrationsView: icon container bg-white → bg-muted/50
- DeleteAccount*: labels/titles text-white → text-foreground, destructive btn → text-destructive-foreground, disabled → bg-muted
- ChangeEmailModal, DataExportModal: titles, labels, text → text-foreground; DataExport input bg-kodo-void → bg-muted
- SessionManagement, LoginHistory, SecuritySettings: headings text-white → text-foreground, row hover → hover:bg-muted/50
- TwoFactorSetupStep2: QR container bg-white → bg-card
- LoginHistory: table cell text-white → text-foreground

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 09:43:22 +01:00
senke
d3115d5823 feat(ui): semantic tokens in admin views (audit logs, users, dashboard)
- AdminAuditLogsView: border/divide/bg white/5 → border-border, bg-muted/*
- AdminSettingsView: toggle indicators bg-white → bg-background
- AdminUsersView: glass cards, table, pagination → border-border, bg-muted/*
- UserTableRow: text-white → text-foreground, hover states → muted/50
- AdminDashboardHeader: text-white, divider, button → foreground/border/muted
- AdminDashboardTabs: tabs list, cards, table → semantic tokens
- AdminDashboardTabs: remove unused React import

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 09:37:16 +01:00
senke
99581d2058 feat(ui): semantic tokens in modal, button, card, alert
- Modal: title text-white → text-foreground
- Button: secondary/ghost/glass use bg-muted/30, border-border
- Card: spotlight bg-black/40 → bg-card/80; surface border-white/* → border-border
- Alert: AlertTitle text-white → text-foreground

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 09:29:48 +01:00
senke
77ab0e16fc feat(ui): semantic tokens in loading states, header, sidebar, navbar
- LoadingState: bg-kodo-slate → bg-muted for skeleton variant
- PlayerLoading: fullScreen overlay bg-black/50 → bg-background/80 backdrop-blur-sm
- Header: bg-white/5 → bg-muted/30, border-white/* → border-border, focus:ring-ring
- Sidebar: overlay bg-black/60 → bg-background/80, hover:text-white → hover:text-foreground
- Navbar: text-white → text-foreground, ring-white/5 → ring-border

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 09:28:43 +01:00
senke
be1d6e1bd5 fix: resolve TypeScript errors from UI polish subagents
- Remove 12 unused imports (React, Activity, Upload, useRef, isSubmitting)
- Fix framer-motion Variants type with satisfies + as const on ease arrays
- Fix AchievementCard: variant="gaming" → variant="elevated"
- Fix NotificationMenuDropdown: error ?? null for type narrowing

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:52:48 +01:00
senke
4dd60fc867 fix: add override modifier to ErrorBoundary.render()
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:49:59 +01:00
senke
cc0c8523a2 feat(ui): education, gamification, developer, admin views polish
Education:
- CourseCard: lessons count badge, progress bar, backdrop-blur on badges
- EducationView: framer-motion stagger on grid
- Filters: interactive color-coded pills (Beginner/Intermediate/Advanced)
- MyCoursesView: stagger animation, semantic token migration

Gamification:
- LeaderboardView: gold/silver/bronze podium styling with glow + accents
- AchievementCard: shine sweep animation on hover, lift effect
- AchievementsView: stagger animation with filter re-animation
- XPBar: semantic token fix

Developer dashboard:
- API key copy-to-clipboard with icon toggle
- Status indicator badges with animated pulse dot

Commerce/Admin:
- WishlistView: stagger animation, hover lift
- PurchasesView: stagger on list items
- Admin views: consistent headers, semantic tokens (text-white → text-foreground)

18 files modified, all text-white → text-foreground migrations

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:48:45 +01:00
senke
11b5a83136 feat(ui): marketplace premium polish
ProductCard (both versions):
- "NEW" badge for recent products, "Hot" with Zap icon
- Prominent price (text-lg), star rating with fill-warning
- Hover-reveal "Add to Cart" button with slide animation
- Cover image hover zoom

Categories: pill shape, smooth scroll, active shadow
Grid: responsive 2/3/4 columns, stagger pop-in animation
Cart: slide-out AnimatePresence on remove, icon quantity controls
MarketplaceHome: active filter badges, search focus glow, stagger grid
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:39:26 +01:00
senke
3ba11ed7be feat(ui): social feed premium polish
PostCard:
- Hover lift + shadow + border glow
- Avatar with online status, clickable author name
- Relative timestamps (2h ago, 1d ago)
- Media: rounded corners + hover zoom
- Like bounce animation, share "Shared!" confirmation

Feed:
- "New posts available" banner with AnimatePresence
- Load More button with icon + spinner
- Per-post stagger animation on feed load

CreatePost:
- Avatar with status, character counter (red at 90%)
- Post button loading state, colored action buttons

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:39:11 +01:00
senke
0391fa4817 feat(ui): error boundary with premium fallback + scroll-to-top button
ErrorBoundary:
- Class-based React error boundary with animated destructive icon
- Collapsible technical details, Try again + Go home actions
- Supports custom fallback and onReset callback
- Replaces old ErrorBoundary with premium version

ScrollToTop:
- Floating button appears after 400px scroll
- framer-motion entry/exit animation
- Responsive positioning (above mobile nav on small screens)

Layout:
- Auto scroll-to-top on route change
- ScrollToTop button integrated

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:33:21 +01:00
senke
5fe81b9333 feat(ui): animated number counters + navigation progress bar
Animated numbers:
- New useAnimatedCounter hook (requestAnimationFrame, ease-out cubic)
- New AnimatedNumber component with tabular-nums
- Applied to: DashboardPage (4 stats), UserProfilePageHeader (3 stats),
  StatCard, AdminDashboardStatCard (numeric values auto-animate)

Navigation progress bar:
- YouTube/GitHub-style thin bar at top of page
- Simulated progress on route changes (framer-motion)
- Primary color with glow shadow
- Integrated into Layout as first child

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:19:18 +01:00
senke
d829e228a8 feat(ui): profile page premium polish + keyboard shortcuts panel
Profile page:
- Hero: gradient upgrade, animated shimmer sweep, pulsing glow orb, bottom fade
- Header card: avatar ring glow, stats with icons (data-driven), tabular-nums
- Tabs: stagger animation on grid items, tab trigger transitions
- Skeleton: consistent with loaded state styling
- Page entry animation (fade-in)

Keyboard shortcuts panel (Discord-style):
- New KeyboardShortcutsPanel component with framer-motion animations
- Groups: General, Playback, Navigation
- Styled kbd badges with semantic tokens
- ARIA: role=dialog, aria-modal, aria-label
- Replaces old KeyboardShortcutsHelp component
- Fix: ? key handler no longer blocked by !e.shiftKey guard

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:15:50 +01:00
senke
6093f8c34c feat(ui): sidebar premium polish + player bar enhancements
Sidebar:
- Discord-style active indicator pill (left edge, primary color)
- Hover micro-animations: icon scale-110, bg transition
- Section dividers between nav groups
- Notification badge pill (primary/15 bg, font-semibold)
- Footer items (Settings, Sign Out) consistent with main nav

Player bar:
- Progress bar: time preview tooltip on hover, scale-y on drag
- Volume: Spotify-style hover-reveal slider, 3-level icon states
- Now playing: ambient glow behind album art on hover
- Track info: clickable artist name with hover underline
- Keyboard shortcuts: N/P (next/prev), Arrow Up/Down (volume), M (mute)
- Shortcut hints in control tooltips (<kbd> badges)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:11:11 +01:00
senke
279b2bc937 feat(ui): chat status indicators, notification grouping, feature discovery
Chat status indicators:
- ChatMessage: Avatar with online status on incoming messages
- VirtualizedChatMessageItem: proper Avatar component with status
- ChatInterfaceMessages: added status="online" to existing avatars
- ConversationItem: Avatar with status for DM conversations

Notification polish:
- AnimatePresence + motion.div on dropdown (scale+fade, 150ms)
- Date grouping: Today, Yesterday, This Week, Earlier
- Sticky section headers with backdrop-blur

Feature discovery (new FeatureHighlight component):
- One-time spotlight tooltip with localStorage persistence
- Applied to: search bar (Ctrl+K), keyboard shortcuts (?), track context menu
- framer-motion animation with 0.5s delay

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:04:23 +01:00
senke
154bca0a22 feat(ui): contextual skeleton loading + list stagger animations
Skeleton loading (5 pages migrated from spinner):
- SettingsPage: tabs + profile + settings cards skeleton
- RolesPage: table header + 6 data rows + assign role skeleton
- MarketplaceHome: filter bar + category pills + 8 product cards
- TrackSearchResults: results count + 8 track card grid
- PlaybackSummary: 3-column stats skeleton

List stagger animations (5 lists):
- New stagger-fade-in CSS keyframe (translateY 8px, 250ms, ease-out)
- 50ms per item delay, capped at 500ms (10+ items render together)
- Applied to: NotificationsPage, PlaylistList, PlaylistTrackList (static),
  dashboard TrackList, NotificationMenuList
- Respects prefers-reduced-motion

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:59:54 +01:00
senke
447389fc95 feat(ui): remaining polish — DnD feedback, typography headings, lightbox, share dialog
Includes changes from previous session that weren't fully staged:
- PlaylistDetailView + QueueView: drag-over visual feedback
- PlaylistTrackListSortableItem: DnD opacity + shadow + insertion line
- ImageViewerModal: zoom toggle, keyboard nav, image counter, loading skeleton
- Badge: dismissible, pulse, dot-only enhancements
- ShareDialog: useCopyToClipboard integration
- SessionsPage, NotificationsPage, SettingsPage, DashboardPage: typography utility classes
- index.css: like-bounce, shake, empty-state-in, marquee, typography utilities

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:54:39 +01:00
senke
1473d04249 feat(ui): badge polish, DnD feedback, typography system, image lightbox
Badge component:
- Dismissible variant with X button (onDismiss prop)
- Pulse animation variant (pulse prop)
- Enhanced dot-only mode for standalone colored circles

Drag-and-drop visual feedback:
- PlaylistTrackListSortableItem: opacity + shadow + ring on drag, border insertion line
- QueueView: dragOverIndex tracking, bg-primary/5 drop zone highlight
- PlaylistDetailView: same DnD feedback pattern

Typography standardization:
- 9 utility classes: text-display, text-heading-1..4, text-body-lg, text-body, text-caption, text-label
- Applied to 8 page headings (Dashboard, Settings, Library, Search, etc.)
- DESIGN_TOKENS.md updated with typography reference

Image lightbox:
- Keyboard navigation: ArrowLeft/Right for gallery, Escape to close
- Image counter pill: "2 / 5" with backdrop-blur
- Zoom toggle: click to zoom in/out with scale transition
- Loading skeleton: pulse placeholder while image loads

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:52:33 +01:00
senke
3a86f853ab feat(ui): avatar polish, smooth accordion, modal animation consistency
Avatar improvements:
- Image loading skeleton with animate-pulse overlay
- Fade-in transition on image load (opacity 0→1, 200ms)
- Error fallback shows initials when image fails
- Click animation: active:scale-95
- Badge overlay prop: count/dot/color at top-right corner

Accordion/Collapsible smooth animation:
- Replaced max-h-[5000px] hack with CSS grid-template-rows trick
- grid-rows-[0fr] → grid-rows-[1fr] for content-aware smooth collapse
- 200ms ease-out transition on both Collapsible and AccordionContent

Modal animation consistency (5 modals migrated):
- CreatePlaylistModal → base Modal (focus trap, AnimatePresence, portal)
- AutoMetadataDetectionModal → base Modal
- ReviewProductModal → base Modal
- ChangeUsernameModal → base Modal
- TagSuggestionsModal → base Modal
- Skipped: SharePostModal (multi-view pattern, would lose layout flexibility)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:46:46 +01:00
senke
1a013ed829 feat(ui): table polish + mobile bottom navigation
Table improvements (8 files):
- Sticky headers: bg-background/95 backdrop-blur-sm on all thead elements
- Sort indicators: SortableTableHead with ChevronsUpDown/ChevronUp/ChevronDown
- Row hover: hover:bg-muted/50 duration-150 with active state
- Borders softened: border-border/50, last row no border
- Header typography: text-xs font-medium uppercase tracking-wider
- Consistent cell padding: px-4 py-3 for body, px-4 py-2.5 for headers
- Applied to: ui/table, data/table, TrackList, TrackListRow, FileManager, studio files

Mobile bottom navigation:
- New MobileBottomNav component (5 items: Home, Search, Library, Chat, Profile)
- Only visible on mobile (lg:hidden), z-40 below player
- 48px touch targets, safe-area-inset-bottom for iPhone
- Active state with primary color + top indicator bar
- Integrated into Layout with pb-20 lg:pb-0 main padding
- Header touch target fix: theme toggle min-h-10 min-w-10

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:37:25 +01:00
senke
e197ba8734 feat(ui): form polish + micro-interactions for premium feel
Forms quality:
- Password visibility toggle (Eye/EyeOff) on FloatingInput, AuthInput
- Applied to LoginForm and RegisterForm password fields
- Focus glow effect on all inputs (primary color shadow ring)
- Error shake animation (0.4s spring shake on validation errors)

Micro-interactions:
- Like button bounce animation (scale 1→1.3→0.9→1.1→1)
- useCopyToClipboard hook — reusable copy with visual feedback
- Applied to CreateAPIKeyModal, ShareDialog, SharePostModal (Check icon swap)
- Universal button press effect: active:scale-[0.98] on all variants

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:31:52 +01:00
senke
93b2eb8980 feat(ui): header glassmorphism, card hover effects, content transitions, badge animations
Header polish:
- Glassmorphism: bg-background/80 backdrop-blur-lg + subtle border
- Search bar focus-within ring on container
- Avatar hover: ring-primary/50 + scale-105
- Notification badge animate-pulse

Card hover effects:
- Interactive Card variant: hover border-primary/20 tint
- ProductCard: lift (-translate-y-1) + shadow-lg + cover scale-105
- PlaylistCard: lift + shadow-lg + cover scale-105
- CourseCard: lift + shadow-xl + cover scale-105

ContentTransition component (new):
- Reusable skeleton-to-content crossfade with AnimatePresence
- Applied to DashboardPage as proof-of-concept

Notification badge pulse:
- Sidebar collapsed badges: radar-ping effect (animate-ping behind solid dot)
- Header notification bell: matching ping animation on unread count

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:25:52 +01:00
senke
e95075d92c feat(ui): premium empty states + focus ring consistency
Empty states enhanced:
- EmptyState component gains variant prop (default/centered/card)
- Soft entry animation (fade + scale) via new CSS keyframe
- Icon wrapped in muted background circle
- Library: "Your library is empty" + "Upload Track" action
- Search: "No results found" + improved description
- Wishlist: "Explore the marketplace" + Browse button
- Queue: "Nothing in your queue" with autoplay context
- Chat: improved no-conversation and no-messages states

Focus ring consistency (6 files fixed):
- input.tsx: ring-primary/30 → ring-ring + ring-offset
- checkbox.tsx: peer-focus → peer-focus-visible + ring-ring
- textarea.tsx: focus:ring-1 → focus-visible:ring-2 + ring-ring
- List.tsx: added ring-offset-background
- TrackListRow.tsx: full focus-visible on rows + action buttons
- PlaylistCard.tsx: focus-visible on checkbox button

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:23:09 +01:00
senke
bcf07f1e16 feat(ui): hover cards, Spotify player layout, scrollbar tokens, context menu integration
HoverCard component (new):
- Rich preview cards on hover with framer-motion animation
- Viewport-aware positioning, portal rendering, open/close delays
- UserHoverContent: Discord-style user preview (avatar, bio, stats, follow)
- TrackHoverContent: Spotify-style track preview (cover, stats, play)

Audio player — Spotify-like 3-column layout:
- grid-cols-3 layout: track info | controls | volume+queue
- Progress bar moved to top edge (minimal variant)
- Glassmorphism (bg-background/95 backdrop-blur-md)
- Prominent centered play button (h-10 w-10 rounded-full, active:scale-95)
- Title marquee animation for long track names
- Reduced padding for tighter premium feel

Scrollbar styling:
- Migrated hardcoded rgba() to semantic tokens via color-mix(in oklch)
- Added transition on thumb hover for smooth visual feedback

ContextMenu integration:
- TrackListRow wrapped with ContextMenu (play, like, more actions)
- Dynamic items based on available callbacks

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:18:46 +01:00
senke
27fc9d6bd7 feat(ui): tooltip adoption + search highlighting & skeleton loading
Tooltip adoption (18 conversions across 11 files):
- Player controls: shuffle, repeat, mute, expand, close, lyrics, auto-scroll
- Navbar: theme toggle
- File browser: download, add tag, AI auto-tag, watermark, process with AI
- Notifications: mark as read
- Share links: open link, revoke link
- Chat: scroll to bottom

Search polish:
- New highlightMatch utility — wraps matching text in <mark> with primary color
- Applied to track titles, artist names, playlist names in SearchPageResults
- Applied to suggestion dropdown titles and subtitles
- Replaced spinner loading state with content-aware SearchPageSkeleton
- Skeleton matches actual results layout (tab bar, track cards, artist circles)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:14:00 +01:00
senke
06654bb84c feat(ui): premium polish — route transitions, context menu, slider, sidebar tooltips
Route transitions:
- New PageTransition component with framer-motion fade+slide (0.2s)
- Layout wraps children in AnimatePresence mode="wait" for smooth page changes

Context menu (new component):
- Right-click menu with portal rendering and viewport clamping
- Keyboard navigation (arrows, Home/End, Enter/Space, Escape)
- framer-motion scale+fade animation matching dropdown aesthetic
- ARIA compliant (role=menu/menuitem), destructive/disabled item support

Sidebar polish:
- Replaced browser-native title tooltips with custom Tooltip component
- position="right" tooltips on collapsed nav items, Settings, Sign Out
- Tooltips auto-disabled when sidebar is expanded

Slider — Spotify-style hover:
- Track thins to h-1 by default, expands to h-1.5 on hover
- Thumb hidden by default, scales in on hover (group-hover)
- Filled portion gains subtle primary glow on hover

Toast enhancements:
- New ToastAction interface with label + onClick
- Action button renders below message, auto-dismisses on click
- Enables "Undo" / "View" patterns

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:10:10 +01:00
senke
0fe87de8bf feat(ui): polish, animations & performance optimizations
Sprint 4.1 — Exit animations with framer-motion AnimatePresence:
- modal.tsx: overlay fade + panel scale/fade entry/exit
- dropdown.tsx: slide/fade entry/exit

Sprint 4.2 — Missing hover transitions on PostCard:
- Added transition-colors to author name + tags hover states

Sprint 4.3 — Button loading prop:
- Added loading?: boolean with Loader2 spinner + auto-disable

Sprint 4.4 — OptimizedImage replacement:
- PostCard, ProductCard, CourseCard, PlaylistDetailView content images

Sprint 4.5 — React.memo on list components:
- ProductCard, PlaylistCard, TrackCard, CourseCard, PostCard

Sprint 4.6 — Consolidate duplicates:
- Deleted KodoEmptyState (redundant with EmptyState)
- Documented Spinner vs LoadingSpinner distinction (complementary)
- Confirmed Dialog delegates to Modal (correct architecture)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:05:26 +01:00
senke
77758bc51a refactor(tokens): complete design token migration to semantic system
Sprint 3.1 — Default colors → semantic (~15 files, ~99 replacements):
- lime-500 → success, red-500 → destructive, cyan-500 → primary

Sprint 3.2 — Hardcoded colors → semantic (~13 files, ~99 replacements):
- text-white → text-foreground, bg-black → bg-background, bg-white → bg-card

Sprint 3.3 — Legacy kodo-* → semantic (~27 files, ~122 replacements):
- bg-kodo-ink → bg-card, bg-kodo-void → bg-background, text-kodo-steel → text-muted-foreground
- Preserved kodo-cyan/magenta/lime/gold palette accents and gradients

Sprint 3.4 — Arbitrary values → Tailwind scale (5 replacements):
- min-h-[600px] → min-h-layout-page, min-h-[400px] → min-h-layout-page-sm
- left-[50%] → left-1/2, min-h-[80px] → min-h-20, min-h-[40px] → min-h-10

Sprint 3.5 — Border-radius standardization (4 replacements):
- Modal/dialog skeletons: rounded-lg → rounded-xl (convention)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:05:09 +01:00
senke
128a160196 feat(a11y): comprehensive accessibility & view states improvements
Sprint 1 — Quick A11y wins:
- progress.tsx: role=progressbar + aria-value* + aria-label
- switch.tsx: role=switch + aria-checked
- skeleton.tsx: aria-hidden=true
- alert.tsx, Toast.tsx, SelectTrigger.tsx: aria-labels on close buttons
- PostCard.tsx: alt on images + aria-labels on icon buttons
- ProductCard.tsx: aria-labels on play/view buttons
- modal.tsx: role=dialog + aria-modal + aria-labelledby
- input.tsx: error state + aria-invalid + aria-describedby
- FAB.tsx: forward aria-label from label prop

Sprint 2 — Structural A11y + View States:
- tabs/: full ARIA tablist/tab/tabpanel + arrow key navigation
- radio-group.tsx: role=radio + arrow key navigation
- select/: aria-activedescendant + full keyboard navigation
- List.tsx + card.tsx: focus-visible states on interactive elements
- DashboardPage, LibraryPage, LiveView, QueueView: error states
- WishlistView, AdminDashboard, AnalyticsView, SellerDashboard: loading/empty states

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:04:35 +01:00
senke
956582bf29 ui(tokens): migrate text-white to text-foreground in settings and content headings (10 files)
Replace hardcoded text-white with theme-aware text-foreground on page
titles, section headings, and primary content text in settings views,
playlist views, and social components.

These elements use card/transparent backgrounds where text-foreground
adapts correctly to both light and dark themes.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:23:00 +01:00
senke
e48f8889e0 ui(tokens): migrate kodo-gold to warning (43 files, 84 instances)
Replace legacy text-kodo-gold/border-kodo-gold/bg-kodo-gold with semantic
text-warning/border-warning/bg-warning across 43 components.

Warning states now use the design system token for theme adaptability.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:20:32 +01:00
senke
1e897c95a0 ui(tokens): migrate kodo-cyan to primary (51 files, 88 instances)
Replace legacy text-kodo-cyan/border-kodo-cyan/bg-kodo-cyan with semantic
text-primary/border-primary/bg-primary across 51 components.

The brand primary color now uses the design system token, enabling proper
theme adaptation. Covers UI primitives, search, dashboard, chat, playlists,
settings, social, marketplace, and auth components.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:19:12 +01:00
senke
9ff30146a6 ui(tokens): migrate bg/border-kodo-red → destructive, bg/border-kodo-lime → success (25 files)
Complete semantic color token migration for background and border variants:
- bg-kodo-red → bg-destructive
- border-kodo-red → border-destructive
- bg-kodo-lime → bg-success
- border-kodo-lime → border-success

Covers UI primitives (badge, alert), forms, settings, social, playlists,
admin, education, and marketplace components.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:17:14 +01:00
senke
f9ed6915fc ui(tokens): migrate text-kodo-red → text-destructive, text-kodo-lime → text-success (56 files)
Replace remaining legacy semantic color tokens:
- text-kodo-red → text-destructive (36 files, 50 instances): errors,
  deletions, validation, destructive actions
- text-kodo-lime → text-success (36 files, 48 instances): success states,
  confirmations, positive indicators

These tokens now adapt to theme changes instead of being hardcoded.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:14:40 +01:00
senke
68a4aba534 ui(tokens): migrate text-kodo-secondary to text-muted-foreground (11 files)
Replace legacy text-kodo-secondary with semantic text-muted-foreground
across chat, notifications, developer tools, and PWA components.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:13:27 +01:00
senke
1eb9baa881 ui(tokens): migrate Toast component to semantic design system tokens
Replace legacy color tokens in Toast component:
- border-kodo-lime → border-success
- border-kodo-red → border-destructive
- text-kodo-lime → text-success
- text-kodo-red → text-destructive
- text-kodo-steel → text-muted-foreground
- text-white → text-foreground
- bg-kodo-ink/90 → bg-card/90
- hover:text-white → hover:text-foreground

Toast now adapts correctly to light/dark theme.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:12:29 +01:00
senke
00d2f7c2c2 ui(motion): add scaleIn animation to Dropdown menu, fix Collapsible tokens
Dropdown: add animate-scaleIn entrance animation with origin based on
alignment (top-left, top-right, or top-center). Menu now fades+scales
instead of popping instantly.

Collapsible: migrate focus ring from kodo-cyan/kodo-void to ring/background
tokens. Migrate chevron text from kodo-secondary to muted-foreground.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:11:25 +01:00
senke
ffc092621e ui(components): migrate 4 inline empty states to EmptyState in profile and marketplace
UserProfilePageTabs: replace 3 inline empty divs (tracks, playlists, posts)
with EmptyState component using Music, Library, MessageSquare icons.

ProductDetailViewReviews: replace inline "No reviews yet" text with
EmptyState using Star icon and call-to-action description.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:10:09 +01:00
senke
71b4f6b9cc ui(tokens): migrate bg-kodo-steel to bg-muted (46 files, 76 instances)
Replace legacy hardcoded bg-kodo-steel (RGB 59,69,84, theme-unaware)
with semantic bg-muted token across 46 user-facing components.

This completes the kodo-steel elimination from source files: text, border,
and background variants are now all on semantic design system tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:08:42 +01:00
senke
8c3e7c1a36 ui(tokens): migrate border-kodo-steel to border-border (86 files, 269 instances)
Replace legacy hardcoded border-kodo-steel (RGB 59,69,84, theme-unaware)
with semantic border-border token across 86 user-facing components.

Covers UI primitives (checkbox, badge, modal, table, textarea, alert,
radio-group, avatar), all modals, settings views, social features,
playlist views, inventory, chat, commerce, and cloud file browser.

Only story/test files retain the legacy token.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:07:00 +01:00
senke
47f325182a ui(tokens): complete text-kodo-content-dim → text-muted-foreground migration (52 files)
Eliminate all remaining text-kodo-content-dim from user-facing source files.
This legacy token (hardcoded Gray-400) is now fully replaced by the
theme-aware text-muted-foreground token across UI primitives, settings,
social features, playlists, modals, inventory, and admin views.

Only story files (.stories.tsx) retain the old token for reference.
Total migration: ~345 instances across 87 files (this + previous commit).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:04:51 +01:00
senke
4f58f19856 ui(tokens): migrate text-kodo-content-dim to text-muted-foreground (35 files, 160 instances)
Replace legacy hardcoded `text-kodo-content-dim` (Gray-400, theme-unaware)
with semantic `text-muted-foreground` across 35 user-facing components.

This ensures all secondary/muted text adapts correctly to light/dark theme
changes instead of staying fixed at a single gray value.

Covers: SearchBar, PlaylistsView, NotificationBell, TrackAnalyticsView,
LiveStreamDetailView, LicenceCard, FilePreviewCard, PasswordStrengthIndicator,
NotificationItem, TrackList, CourseCard, GroupCard, AchievementCard, XPBar,
EquipmentCard, SellerDashboardView, APIPlaygroundView, DeveloperDashboardView,
CreatorModal, AddToPlaylistModal, LicenceDetailsModal, QuizModal,
CertificateModal, FlashSaleModal, CreateAPIKeyModal, LyricsEditorModal,
WatermarkSettingsModal, ProfileXPView, LeaderboardView, PostCard,
ExploreView, FeedView, MessageSearch, TypingIndicator, PlaylistTrackItem.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 00:03:33 +01:00