- webhookService: treat parsed error.code (500) as 5xx and log at DEBUG
- csrf: log 'backend may not be running' at DEBUG instead of WARN
Co-authored-by: Cursor <cursoragent@cursor.com>
- 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>
- 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>
- Skip retry for ERR_BAD_RESPONSE / HTML instead of JSON (wrong server)
- Log only first API retry attempt instead of all 3
- CSRF: friendly warn when wrong server, avoid duplicate logs
- App init: skip CSRF warn when wrong server (already shown)
- API client: skip CSRF refresh error log when wrong server
- ReactQuerySync: INFO → DEBUG for enable/disable messages
Co-authored-by: Cursor <cursoragent@cursor.com>
- Detect when API returns HTML (e.g. another app on port 8080): show clear
toast and reject so callers get an error instead of broken state
- Gate verbose API request/response/slow/error logs on VITE_DEBUG so
console is quiet by default in dev; set VITE_DEBUG=true for full logs
- Avoid double toast and HTML dump in logs for wrong-server errors
- .env.example: clarify VITE_DEBUG enables API request/response logging
Co-authored-by: Cursor <cursoragent@cursor.com>
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>
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>
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>
Unsaved changes:
- New useUnsavedChanges hook: browser beforeunload warning
- New useFormDirtyState hook: isDirty/markDirty/markClean tracking
- SettingsPage: wired up dirty tracking with markClean on save
Chat date separators:
- DateSeparator component with centered date label and hr lines
- Inserted between messages from different days
- Formats: Today, Yesterday, or full date (e.g. "Monday, February 10")
Co-authored-by: Cursor <cursoragent@cursor.com>
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>
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>
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>
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>
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>
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>
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>
