senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
1583 commits 37 branches 94 tags 1.5 GiB
Commit graph

157 commits

Author SHA1 Message Date
senke
c65da4fea6 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
95e31646cb 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
64fbb81ddf 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
4b9d0a341d 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
298a90c763 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
3abac7b6a1 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
fa8cef26f0 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
b5006fe38f 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
186301d4ba fix: add override modifier to ErrorBoundary.render() 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-10 00:49:59 +01:00
senke
cfe1fce255 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
8f26a2b3e9 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
6ef9089905 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
45e350a292 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
2fd7935957 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
8f69e0ab0a 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
a08a0081f8 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
18e94ce6f0 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
cb9a8a85f7 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
2131da1a9a 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
cd764d32cb 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
b1f5fbf0bf 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
c8d88e7f44 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
592cc94b63 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
bfdc785ccc 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
503e6f00b6 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
50f41beec5 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
dd6333d540 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
fc4259a827 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
7e4bcbdb65 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
db4883e0a7 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
06313c5d72 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
6d9a4b0a5a 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
68417c667c 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
7113d35a4a 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
47164e5f3c ui(components): migrate remaining 27 skeleton files to Skeleton shimmer 
Complete the migration of all inline `animate-pulse bg-muted` patterns
to the shared `<Skeleton>` component with premium shimmer animation.

Covers: UserProfilePage, SearchPage, CourseDetailView, ProductDetailView,
NotificationsPage, ChatMessages, SessionsPage, RegisterPage, AudioPlayer,
DataList, AccountSettings, Dialog, CourseLearningView, TwoFactorSetup,
ProjectsManager, GoLiveView, ConnectivityView, AIToolsView,
CloudSettingsView, EquipmentDetailView, NotificationMenu, PlaybackHeatmap,
ProjectDetailView, AvatarUpload, ShareLinkManager, OptimizedImage, BlurPlaceholder.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 23:21:33 +01:00
senke
bdf7466082 ui(components): migrate inline empty states to EmptyState component 
Replace bare text "No X found" messages with the shared EmptyState
component (icon + title + description + optional action). This gives
empty moments a designed, intentional feel instead of a raw fallback.

- EmptyState: use design system tokens (text-foreground, text-muted-foreground)
- MarketplaceHome: EmptyState with ShoppingBag icon
- MarketplaceViewGrid: EmptyState with clear filters action
- ProfileViewTracksTab: EmptyState with Music icon
- ProfileViewPlaylistsTab: EmptyState with ListMusic icon
- PurchasesViewList: EmptyState with ShoppingCart icon
- SessionManagement: centered empty text with padding

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 23:15:53 +01:00
senke
b80b06f073 ui(components): add shimmer animation to Skeleton component 
Replace static animate-pulse with a sweeping gradient shimmer overlay
for a premium loading experience (Spotify/Discord-like).

Skeleton: bg-kodo-steel/50 → bg-muted/50 (design system token), adds
a child div with .skeleton-shimmer class for the gradient sweep.

index.css: add .skeleton-shimmer utility class with linear-gradient
animation (1.8s ease-in-out infinite). Respects prefers-reduced-motion
by disabling animation.

Existing inline skeletons using animate-pulse are unaffected.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 23:01:31 +01:00
senke
27107245a6 ui(components): migrate Switch, Toast, LoadingSpinner to design system 
Switch:
- w-[44px] h-[24px] → w-11 h-6 (exact Tailwind equivalents)
- bg-kodo-cyan/kodo-steel → bg-primary/bg-muted (design system tokens)
- ring-kodo-cyan/kodo-void → ring-ring/ring-offset-background

Toast:
- min-w-[300px] → min-w-72 (288px, closest Tailwind value)

LoadingSpinner:
- min-h-[200px] → min-h-48 (192px)
- border-t-blue-600 → border-t-primary (design system token)
- border-kodo-steel → border-muted

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 22:56:36 +01:00
senke
a0bf68535f ui(tokens): migrate remaining arbitrary min-w values to Tailwind scale 
- min-w-[140px] → min-w-36 (AdminModerationView)
- min-w-[100px] → min-w-24 (PlaylistFollowButton, FollowButton)
- min-w-[80px] → min-w-20 (PasswordStrengthIndicator)
- collapsible.tsx: eslint-disable comment for max-h-[5000px] animation
  technique (documented exception)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 22:48:37 +01:00
senke
034a2769c5 ui(a11y): add focus-visible ring to 16 interactive components 
Add consistent focus-visible:ring-2 focus-visible:ring-ring pattern to
elements using role="button" / tabIndex={0} that lacked visible focus
indicators.

Affected: TrackCard, 2FA setup steps, ProjectsManager cards,
NotificationMenuItem, SelectOptionItem, DropdownMenuItem,
ConversationItem, VirtualizedChatMessageItem, GearInventoryGrid,
UploadModal, SearchPageResults, SocialViewFeedItem, SocialViewSidebar,
FileManagerViewTable.

Improves keyboard navigation across the application.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 22:48:24 +01:00
senke
39b2b642d2 feat(web): UI premium Discord/Spotify-like — tokens, shadows, focus, layout 
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y):

- Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source
  for layout/shell (index.css), shadows (design-system.css), durations/easing.
- Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height
  (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500
  replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes.
- Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls,
  AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item,
  TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable.
- ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary.
- Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts.
- Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories.
- .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification.
- apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual).

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 17:15:58 +01:00
senke
1efafe0cc5 test(storybook): Playwright suite for full Storybook + Spotify/Discord polish 
- Add playwright.config.storybook.ts: runs against storybook-static on :6007
- Add e2e/tests/storybook/storybook-all.spec.ts: one test per story (load iframe, no errors)
- Add scripts/serve-storybook-static.cjs: serves build or stub (empty index) when no build
- npm run test:storybook:playwright (after build-storybook) for full coverage
- Storybook decorator: use bg-background / design tokens for dark (#121212)
- Preview: default dark background #121212
- Button: secondary/ghost/glass aligned to Spotify/Discord (white/5, white/10 hover)
- KodoEmptyState: softer orbs, compact copy, primary CTA without heavy glow

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 20:30:49 +01:00
senke
f31d204f6c feat(ui): dashboard StatCard surface + KodoEmptyState tokens (Spotify/Discord) 
- StatCard: variant surface, rounded-xl icon box, text-foreground
- KodoEmptyState: variant surface, primary orbs/icon/CTA, no kodo-*

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:52:24 +01:00
senke
1360199bed feat(ui): refactor global layout with immersive glassmorphism (Spotify/Discord-like) 
- Palette: Discord-like deep cold grays (background 0.12, sidebar 0.09, card 0.16)
- Transitions: --duration-immersive 200ms ease-in-out for micro-interactions
- Sidebar: bg from var(--sidebar), rounded-xl, backdrop-blur-md; icons
  text-muted-foreground/60 → text-primary on hover/active; 2px teal active bar
- Header: backdrop-blur-md, 200ms transitions
- MiniPlayer: h-20, backdrop-blur-md, bg-background/80, border-white/5 (no harsh border)
- Play button: teal pill with diffuse glow (shadow primary/0.4)
- Card: new 'surface' variant (border white/5, hover lighter + diffuse shadow)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:44:40 +01:00
senke
3ddff494dc style(ui): unify sidebar badges to primary, improve card depth and affordance 
Phase 1 audit (P0 & P1):
- Sidebar: badges use primary (teal) instead of secondary (magenta)
- AdminDashboardStatCard: 0% trend shown as muted, never red
- AdminDashboardTrafficCard: remove fake Math.random() data, show empty state
- Dark theme: increase card luminance (0.21), stronger borders
- Card variants: add border-white/10 to glass, border-border to default
- Header: search input bg-card + border-white/10, migrate kodo-* to semantic tokens
- MiniPlayer: h-20 max (was h-24)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:28:12 +01:00
senke
e8864fdb25 style(playlists,ui): elevate PlaylistListToolbar, DataList, Select to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:26:55 +01:00
senke
a69f9d1c89 style: fix leftover kodo in ProfileView, FileTableRow.stories, FocusTrap.stories 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:17:47 +01:00
senke
e293cc9366 style(stories): replace kodo decorators with design tokens in all story files 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:10:32 +01:00
senke
8a3da49fbd style(ui): elevate Dialog to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:08:52 +01:00
senke
c25b0e957f style(ui): elevate Dropdown, DropdownMenu, Tooltip to SaaS Premium; update test 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:23:04 +01:00