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

197 commits

Author SHA1 Message Date
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
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
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
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
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
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
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
b04336129a 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
b3e00b4ff3 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
8620b9847e 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
c42142584a 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
6d24bd9941 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
83edd463c6 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
66a56409ad 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
82628b6043 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
b156864ad4 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
654ce7fac3 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
f1e48a21e3 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
96d6c9dc9e 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
9044b9f1d7 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
db5ee629da 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
265938a838 style(ui): elevate Dialog to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:08:52 +01:00
senke
1e2b2177fa 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
senke
07f5dc993f style(ui): elevate Tabs and Accordion to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:17:49 +01:00
senke
698a2c0a9d style(ui): elevate OptimizedImage to SaaS Premium and update test 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:05:38 +01:00
senke
2530198fb7 style(ui): elevate Button to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:38:52 +01:00
senke
e3dbbbb032 style(ui): elevate visual fidelity to premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 08:03:28 +01:00
senke
0ddbe99652 refactor(web): split VirtualizedList into virtualized-list module 
- virtualized-list/types.ts: VirtualizedListProps
- virtualized-list/useInfiniteScroll.ts: useInfiniteScroll hook
- virtualized-list/useScrollPosition.ts: useScrollPosition hook
- virtualized-list/VirtualizedList.tsx: main component
- Re-export from virtualized-list.tsx via ./virtualized-list/index
- Test mock extended with getTotalSize, measureElement, key on virtual items
- 4 tests pass

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 13:55:06 +01:00
senke
30bc6476d4 refactor(ui): tooltip module, useTooltip, re-export, tests 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 10:32:14 +01:00
senke
28c9cb7601 refactor(ui): tabs module, re-export 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 10:12:33 +01:00
senke
4aea06d333 refactor(ui): accordion module, re-export 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:33:10 +01:00
senke
a4085f3db4 refactor(ui): dropdown-menu module, dropdown controlled open, re-export 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:27:29 +01:00
senke
6677bde6fe refactor(ui): extract Dialog into dialog module 
- Add dialog/ with types, Dialog, DialogHeader, DialogBody, DialogFooter,
  DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogSkeleton
- Re-export from dialog.tsx via dialog/index for backward compatibility
- Stories: Default, Alert, Composition (max-w-md), Loading (DialogSkeleton)
- Test: assert Kodo destructive classes (text-kodo-red) for alert variant

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:59:48 +01:00
senke
97f00097cc refactor(ui): extract DataList into data-list module 
- types, DataListSkeleton, DataListEmpty, DataListError, DataList
- Remove duplicate Modal/Dropdown from DataList.tsx (exist in modal.tsx/dropdown.tsx)
- Stories: Default, Loading, Empty, Error, Skeleton (min-h-layout-story)
- Re-export from DataList.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:35:53 +01:00
senke
345597bcda refactor(ui): extract OptimizedImage into optimized-image module 
- types, generateImageSources, BlurPlaceholder, useImageFormatSupport
- OptimizedImage, OptimizedImageSkeleton, useImagePreloader, ResponsiveImage
- Stories: Default, WithPlaceholder, ErrorState, Loading (skeleton)
- Re-export from optimized-image.tsx; tests adapted to loading state

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:31:35 +01:00
senke
91a6ff290a fix(ui): call onAvatarUpdated('') after successful avatar delete 
Ensures parents that rely on onAvatarUpdated get the empty URL when
avatar is removed. Aligns with profile feature test contract.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:24:50 +01:00
senke
9efb239b39 refactor(ui): extract AvatarUpload into avatar-upload module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:21:02 +01:00
senke
2fff1eb488 refactor(ui): extract DatePicker into date-picker module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:15:11 +01:00
senke
8cb0072163 test(ui): add Select stories (Default, Empty, Disabled, Grouped, MultiSelect), fix tests for listbox/option 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 21:16:30 +01:00
senke
1ca1130dcf refactor(ui): decompose Select into select module 
- Add select/ with useSelect, types, SelectTrigger, SelectDropdownContent,
  SelectOptionItem; min-w-48 max-h-72 (no arbitrary values)
- Remove monolithic select.tsx; entry point is select/index.ts
- Backward compatible: imports from './select' resolve to module

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 21:16:19 +01:00
senke
13b3812167 test(ui): add FileUpload stories (Default, Empty, Error, Disabled, etc.) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 21:09:21 +01:00
senke
bfe3d17927 refactor(ui): decompose FileUpload into file-upload module 
- Add file-upload/ with useFileUpload, types, utils, and presentational
  components: FileUploadDropzone, FileUploadErrorList, FileUploadFileList
- Remove monolithic file-upload.tsx; entry point is file-upload/index.ts
- Backward compatible: imports from './file-upload' resolve to module

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 21:09:08 +01:00
senke
2c0cf88077 test(ui): add LazyErrorFallback and LazyComponent stories; fix LazyComponent tests for fallback text 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 20:49:17 +01:00
senke
b4eb640b1d refactor(ui): decompose LazyComponent into lazy-component module with LazyErrorFallback, LazyErrorBoundary, createLazyComponent 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 20:48:36 +01:00
senke
2964cec09a chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
senke
9b4e66cd43 chore(storybook): improve configuration and cleanup 2026-02-04 00:44:40 +01:00
senke
2c9c39a8a1 feat(storybook): complete UI component coverage (batches 6-9) 
- Batch 6: FAB, FormField, FloatingInput, AvatarUpload
- Batch 7: Modal, ConfirmationDialog, ImageViewerModal, ErrorDisplay, LoadingState
- Batch 8: DataList, WaveformVisualizer, OptimizedImage, VirtualizedList
- Batch 9: ImageCropper, LoadingSpinner, FocusTrap
- Achieved total coverage for src/components/ui
 2026-02-02 19:50:45 +01:00
senke
7587253741 feat(storybook): expanded coverage for visual and feedback components (batch 5) 
- Added stories for: Spinner, KodoEmptyState, HelpText, AstralBackground
- Increased coverage for utility and visual components
 2026-02-02 19:46:27 +01:00
senke
b6079ff7e8 feat(storybook): expanded coverage for structural components (batch 4) 
- Added stories for: Label, Skeleton, ScrollArea, Toast, Collapsible, Sidebar
- Covered layout and feedback components
 2026-02-02 19:44:58 +01:00
senke
f5fca6557a feat(storybook): expanded coverage for complex form & data components (batch 3) 
- Added stories for: DatePicker, Select, RadioGroup, FileUpload, Table
- Achieved high coverage for core UI components
 2026-02-02 19:41:12 +01:00
senke
4322f26fbb feat(storybook): expanded coverage for complex UI components (batch 2) 
- Added stories for: Accordion, Tabs, Textarea, Tooltip, Dialog, DropdownMenu
- Covered various interactive states and sub-components
 2026-02-02 19:39:50 +01:00
senke
f597e8792a feat(storybook): expanded coverage for core UI components (batch 1) 
- Added stories for: Button, Avatar, Switch, Slider, Alert, Progress
- Consolidated Button component to src/components/ui/button.tsx
- Removed legacy src/components/Button.tsx
 2026-02-02 19:37:52 +01:00
senke
31c9f2af0c feat: global update including storybook setup and backend fixes 
- Web: Setup Storybook, added addons, configured Tailwind, added stories for UI components.
- Backend: Updated API router, database, workers, and auth in common.
- Stream Server: Removed SQLx queries and updated auth.
- Docs & Scripts: Updated documentation and recovery scripts.
 2026-02-02 19:34:14 +01:00
senke
f56e81361e improving UI: improve audio player phase 1 2026-01-26 19:18:52 +01:00
senke
d0c270314e improving UI: adding API doc to Developer Page 2026-01-26 14:12:17 +01:00
senke
fee6904e7e feat(frontend): complete design system migration and cleanup old pages 2026-01-25 12:33:46 +01:00
senke
ebf293a4c0 refactor of veza frontend ui- batch 1 2026-01-22 17:23:11 +01:00
senke
eccc4e5e89 refactor(frontend): improve ui using design system 
- Refactor Navbar, ChatInput, RegisterPage, and CreatePlaylistDialog to use @veza/design-system components
- Shim local UI components (Button, Input, Card) to align with Design System API and styles
- Fix hundreds of type errors by exporting missing components (SearchInput, FileUpload) and adding missing props (icon, variant)
 2026-01-18 22:27:53 +01:00
senke
5dedc2ce4e fix: Corriger URL Swagger et finaliser implémentation DeveloperPage 
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
 2026-01-18 13:55:28 +01:00
senke
e52fe57230 fix: Corriger affichage de la page de recherche 
- Ajouter z-index relatif pour éviter que les overlays masquent le contenu
- Assurer que les Cards et le contenu de recherche sont au-dessus des overlays
- Corriger problème d'affichage où le champ de recherche et les messages étaient masqués
 2026-01-18 13:30:34 +01:00
senke
229327973e cleanup: remove remaining commented code in ImageCropper 
- Removed commented alternative import statement
- Cleanup 9: Complete (8 files cleaned)
 2026-01-16 12:14:00 +01:00
senke
aa0c462a79 cleanup: remove obsolete commented-out code (Cleanup 9) 
- AuthView: Removed commented imports and JSX for non-existent EmailVerification/ResetPasswordForm components (functionality handled by separate pages)
- SettingsView: Removed commented useTheme hook
- CheckoutView: Removed commented total calculation
- LazyComponent: Removed commented ErrorBoundary import
- ImageCropper: Removed commented alternative import (already using correct import)
- EditPlaylistModal: Removed commented isCollaborative state
- ExploreView: Removed commented GENRES array
- Preserved: Documentation comments, explanatory comments, TODO comments
- Cleanup 9: Complete (7 files cleaned)
 2026-01-16 12:13:39 +01:00
senke
4b047d160a aesthetic-improvements: fix spacing in components batch 2 (Action 11.5.1.6) 
- Modals: CreatorModal (p-6 → p-8, space-y-6 → space-y-8)
- Seller: CreateProductView (space-y-6 → space-y-8, 2 instances)
- Social: ExploreView, GroupCard (space-y-6 → space-y-8, p-6 → p-8)
- Studio: ProjectsManager, CloudFileBrowser (space-y-6 → space-y-8, gap-6 → gap-8)
- Theme: ThemeSwitcher (space-y-6 → space-y-8, p-6 → p-8)
- Settings: AppearanceSettingsView (p-6 → p-8, space-y-6 → space-y-8)
- Library: PlaylistsView (space-y-6 → space-y-8)
- Upload: TagSuggestionsModal, LyricsEditorModal, BulkUploadModal (p-6 → p-8, space-y-6 → space-y-8)
- UI: modal, dialog, ImageCropper (p-6 → p-8)
- All spacing now aligned to 8px grid (32px standard padding)
- Action 11.5.1.6: Apply direction to all components - Batch 2 complete (spacing fixes)
 2026-01-16 12:06:56 +01:00
senke
51c38a95db aesthetic-improvements: apply design direction to components batch 1 (Action 11.5.1.6) 
- UI components: FAB (removed scale transforms), tabs (removed decorative shadow)
- Upload components: FileUploadZone, MetadataEditor, BulkUploadModal (removed scale transforms and decorative gradient)
- Search: SearchBar (removed decorative shadow)
- PWA: PWAInstallBanner (removed decorative shadow)
- Social: ExploreView (removed decorative shadow and image zoom)
- Live: LiveStreamDetailView (removed decorative shadow)
- Player: VisualizerSettingsModal (removed scale transform)
- Marketplace: ReviewProductModal, ProductDetailView (removed scale transforms)
- Library: PlaylistsView (removed scale transform)
- Settings: AppearanceSettingsView (removed scale transform)
- Theme: ThemeSwitcher (removed scale transform)
- Studio: ProjectsManager, CloudFileBrowser (removed scale transforms)
- Social: GroupCard (removed image zoom)
- Seller: CreateProductView (removed scale transform)
- Modals: CreatorModal (removed scale transform)
- Replaced decorative scale transforms with subtle opacity changes or removed entirely
- Action 11.5.1.6: Apply direction to all components - Batch 1 complete (17 components)
 2026-01-16 12:06:00 +01:00
senke
7c69474cf9 aesthetic-improvements: align spacing to 8px grid (Action 11.2.1.3) 
- Created automated script (scripts/align-8px-grid.py) to align all spacing to 8px grid
- Replaced non-8px-aligned spacing: gap-3/p-3/m-3 (12px) → gap-4/p-4/m-4 (16px), gap-5/p-5/m-5 (20px) → gap-6/p-6/m-6 (24px), gap-10/p-10/m-10 (40px) → gap-12/p-12/m-12 (48px), gap-20/p-20/m-20 (80px) → gap-24/p-24/m-24 (96px)
- Preserved: 4px values (gap-1, p-1, m-1) as they may be intentional fine-tuning, responsive breakpoints (sm:, md:, lg:), test files, documentation
- Modified files across all components to ensure consistent 8px grid alignment
- Action 11.2.1.3: Align all elements to 8px grid - COMPLETE
 2026-01-16 11:50:46 +01:00
senke
41b1cfaedd aesthetic-improvements: automated replacement of decorative cyan with steel (80/20 rule, Action 11.3.1.3) 
- Created automated script (scripts/replace-decorative-cyan.py) to systematically replace decorative/informational kodo-cyan instances with kodo-steel variants
- Script intelligently preserves active/functional states, design system variants, semantic indicators, and interactive states
- Modified 85 files, replaced 145 decorative instances, preserved 47 functional instances
- No linter errors, type safety maintained
- Action 11.3.1.3 significantly advanced (total: ~302 instances replaced across ~229 files including previous batches)
 2026-01-16 11:40:13 +01:00
senke
3814eefc11 aesthetic-improvements: reduce decorative cyan in UI components (80/20 rule, batch 9) 
- LiveView: decorative chat message username color (text-kodo-cyan → text-kodo-steel)
- Sidebar: decorative section header icon (text-kodo-cyan → text-kodo-steel)
- CartView: decorative promo code link (text-kodo-cyan → text-kodo-steel)
- Total: ~3 files, ~3 instances replaced
- Preserved: Functional links (LoginPage register link, RegisterPage login link, LiveView streamer profile link, LiveView wallet link), design system variants (Spinner default variant, alert.tsx info variant, badge.tsx cyan variant, ErrorDisplay.tsx info variant, Toast.tsx info variant, Alert.tsx info variant - intentional design system options), semantic status indicators (PasswordStrengthIndicator strong password - semantic color), interactive states (radio-group.tsx focus/interaction, select.tsx selected option, dropdown-menu.tsx checked state), primary actions
- Action 11.3.1.3 in progress (ninth batch: UI components decorative elements)
 2026-01-16 11:21:33 +01:00
senke
73d7bbf3d7 aesthetic-improvements: reduce decorative cyan backgrounds (80/20 rule) 
- KodoEmptyState: decorative background blur and border (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel)
- PWAInstallBanner: decorative icon background and blur effect (2 instances)
- Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances) - decorative header icons
- DashboardPage: activity item icon gradient background (decorative)
- FileManagerView: selection banner background (decorative)
- Total: ~8 files, ~9 instances replaced
- Preserved: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session), primary actions, informational alerts
- Action 11.3.1.3 in progress (first batch: decorative backgrounds)
 2026-01-16 11:03:48 +01:00
senke
a2c93145bb aesthetic-improvements: replace secondary cyan hover states with steel (batch 3) 
- UI components: accordion hover text (1 file)
- Player components: AudioPlayer, MiniPlayer icon button hovers (2 files, 3 instances)
- Social components: CreatePostModal, SharePostModal, ProductDetailView (3 files, 3 instances)
- Settings: AccessibilitySettingsView hover text (1 file)
- Analytics: TrackAnalyticsView, AnalyticsView chart bar hovers (2 files, 2 instances)
- Gamification: LeaderboardView hover text (1 file)
- Upload: FileUploadZone hover border (1 file)
- Banner: BulkModeBanner close button hover (1 file)
- Total: ~12 files, ~15 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan), primary actions (cyan)
- Note: ChatSidebar selected state hover kept cyan (primary state)
- Note: VirtualizedChatMessages scroll button kept cyan (primary action)
- Action 11.3.1.2 in progress (third batch complete)
 2026-01-16 10:55:42 +01:00
senke
af75d62a63 aesthetic-improvements: replace secondary cyan hover states with steel 
- Button outline variant: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- Header secondary nav: hover:text-kodo-cyan → hover:text-white, hover:bg-kodo-cyan/5 → hover:bg-white/5
- FileManagerView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProjectsManager: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- GroupDetailView: hover:border-kodo-cyan/30 → hover:border-kodo-steel/50
- AIToolsView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CloudFileBrowser: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProfileView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CourseCard: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- TwoFactorSetup: hover:border-kodo-cyan → hover:border-kodo-steel/50
- GearView: hover:text-kodo-cyan → hover:text-white, hover:border-kodo-cyan → hover:border-kodo-steel/50
- ChatInput: hover:text-kodo-cyan → hover:text-white (3 instances)
- ChatMessage: hover:text-kodo-cyan → hover:text-white (2 instances)
- ChatRoom: hover:text-kodo-cyan → hover:text-white
- AddToPlaylistModal: hover:border-kodo-cyan → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- Preserved focus rings (cyan) and active/selected states (cyan) as per audit
- Action 11.3.1.2 in progress (first batch of ~15 files)
 2026-01-16 10:51:30 +01:00
senke
56cd45aeb8 aesthetic-improvements: increase card padding for more whitespace 
- Increased CardHeader padding from p-6 (24px) to p-8 (32px)
- Increased CardContent padding from p-6 (24px) to p-8 (32px)
- Increased CardFooter padding from p-6 (24px) to p-8 (32px)
- All values align to 8px grid system (32px = 4× base)
- Provides more breathing room and improves visual hierarchy
- Aligns with Surgical Minimalism principle of increased whitespace
- Action 11.4.3.1 complete
 2026-01-16 10:39:37 +01:00
senke
af96f59c88 aesthetic-improvements: remove excessive hover effects from high-priority files 
- Removed scale transforms (hover:scale-[1.02], hover:scale-110, group-hover:scale-110/105) from cards and images
- Removed decorative shadow/glow effects (hover:shadow-neon-cyan/20, hover:shadow-lg) from cards
- Removed hover-lift class (translateY + shadow) from base Card and Button components
- Replaced excessive effects with subtle hover:bg-white/5 or hover:opacity-90
- Preserved functional hover states (group-hover:opacity-100 for play overlays, hover:bg-accent/50 for interactive feedback)
- Updated 14 files: ProductCard, TrackCard, CourseCard, EquipmentCard, PostCard, ProfileView, card.tsx, SearchPage, PlayerControls, OrderSummary, DiscoverView, PlaylistCard, Sidebar, button.tsx
- Effects are now subtle and purposeful, aligning with Surgical Minimalism
- Action 11.4.1.3 complete
 2026-01-16 10:34:41 +01:00
senke
1a82329622 aesthetic-improvements: use dim text sparingly for better contrast 
- Updated button variants (outline, ghost) to use text-white
- Updated empty state descriptions to use text-white with opacity
- Updated page subtitles to use text-white opacity-80
- Updated Navbar interactive elements to use text-white
- Preserved text-kodo-secondary for truly secondary info (metadata, timestamps, helper text)
- Action 11.1.1.2 complete
 2026-01-16 10:14:17 +01:00
senke
e30acf15cf consistency: add JSDoc documentation for button variants 
- Added comprehensive JSDoc comments for buttonVariants
- Documented all 5 variants (default, destructive, outline, secondary, ghost) with use cases
- Documented all 4 sizes (default, sm, lg, icon) with descriptions
- Added ButtonProps interface documentation with examples
- Added Button component documentation with usage examples
- Action 9.3.1.5 complete
 2026-01-16 02:15:30 +01:00
senke
2152224fdf consistency: simplify button glow effects 
- Removed excessive glows from button variants
- default: removed base glow, reduced hover glow (30px→15px, opacity 0.5→0.3)
- destructive: removed hover glow
- outline: removed hover glow
- Buttons now have minimal, subtle glows for better visual hierarchy
- Action 9.3.1.4 complete
 2026-01-16 02:14:52 +01:00
senke
216c4c6f52 consistency: remove unused button variants (neon, glass, premium, link) 
- Removed neon, glass, premium, and link variants from Button component
- Replaced variant="link" in PostCard with variant="ghost" (with underline)
- Replaced variant="premium" in LibraryPage and FAB with variant="default"
- Updated COMPONENT_USAGE.md to reflect removed variants
- Remaining variants: default, destructive, outline, secondary, ghost
- Action 9.3.1.2 complete
 2026-01-16 02:13:51 +01:00
senke
31c5b1aef2 consistency: replace custom components with design system components 
- Fixed UserCard: removed invalid Card variant prop, fixed Button variants
- Fixed LicenceCard: removed invalid Card variant prop, fixed Button variants
- Replaced FormField Input with design system Input (removed Tailwind defaults)
- Replaced FormField Textarea with design system Textarea (removed Tailwind defaults)
- Replaced FormField Select with design system Select (maintained backward compatibility)
- All components now use design system components with proper error handling
- Action 9.2.1.6 complete
 2026-01-16 02:11:40 +01:00
senke
bd9d971c26 consistency: replace custom buttons with Button component (partial) 
- Replaced custom button implementations with Button component in 14 files
- Files updated: LiveStreamDetailView, DashboardPage, CommentItem, PostCard, SocialPage, SocialView, AdminUsersView, UserTableRow, ProjectsManager, CloudFileBrowser, FileManagerView, CreatorModal, ImageCropper, BulkUploadModal
- ~31 buttons replaced across high-priority files
- Used appropriate Button variants: ghost, outline, default, secondary, link
- Preserved visual appearance with className overrides where needed
- Action 9.2.1.2 in progress (partial completion)
 2026-01-16 02:06:14 +01:00
senke
13cf143407 consistency: fix remaining Tailwind default color edge cases 2026-01-16 01:58:12 +01:00
senke
804327d816 consistency: auto-migrate Tailwind default colors (Batch 6, 21 instances) 2026-01-16 01:56:41 +01:00
senke
cbc19077f7 consistency: auto-migrate Tailwind default colors (Batch 5, 50 instances) 2026-01-16 01:56:37 +01:00
senke
fb83ad79fa consistency: auto-migrate Tailwind default colors (Batch 4, 114 instances) 2026-01-16 01:56:34 +01:00
senke
fe3902967e cognitive-load: mark Tabs as complete and create Accordion component (Actions 10.1.1.2, 10.1.1.4) 
- Action 10.1.1.2: Tabs component already exists at apps/web/src/components/ui/tabs.tsx
- Action 10.1.1.4: Created Accordion component at apps/web/src/components/ui/accordion.tsx
  - Components: Accordion, AccordionItem, AccordionTrigger, AccordionContent
  - Features: Single/multiple modes, controlled/uncontrolled, smooth animations
  - Design: Kodo design system styling, accessible, follows Tabs pattern
  - Ready for use in Dashboard and other pages for collapsible sections
 2026-01-16 01:36:19 +01:00