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