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

494 commits

Author SHA1 Message Date
senke
1473d04249 feat(ui): badge polish, DnD feedback, typography system, image lightbox 
Badge component:
- Dismissible variant with X button (onDismiss prop)
- Pulse animation variant (pulse prop)
- Enhanced dot-only mode for standalone colored circles

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Toast now adapts correctly to light/dark theme.

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

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

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

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

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

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

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

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

Only story/test files retain the legacy token.

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

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

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

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-09 00:03:33 +01:00
senke
6f24b97cc5 ui(motion): add transition-colors to QueuePanel items and Header mobile toggle 
Ensure smooth hover background transitions on interactive elements that
were snapping instead of transitioning:

- QueuePanel: queue list items now smooth-transition on hover
- Header: mobile sidebar toggle button smooth-transitions on hover

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-09 00:01:36 +01:00
senke
8267985824 ui(components): migrate 5 more inline empty states to EmptyState component 
Replace inline "no items" fallbacks with the shared EmptyState component
in high-visibility views:

- PlayerQueue: ListMusic icon + "Your queue is empty"
- WishlistView: Heart icon + "Your wishlist is empty"
- WebhooksView: Activity icon + "No endpoints registered"
- AdminModerationView: ShieldAlert icon + "All caught up!"
- RolesPage: improved empty message text

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-09 00:00:21 +01:00
senke
dec0359dcb ui(a11y): add focus-visible and keyboard support to SearchPageResults and UserCard 
SearchPageResults: add tabIndex, role="button", focus-visible ring, and
onKeyDown (Enter/Space) to all interactive Card elements across all tabs.

UserCard: convert clickable div/h3 to semantic <button> elements with
focus-visible ring. Migrate hardcoded text-white/text-kodo-content-dim
to design system tokens (text-foreground/text-muted-foreground).

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 23:57:26 +01:00
senke
3afc7e7762 ui(tokens): migrate text-red-500 to text-destructive across 11 components 
Replace hardcoded red-500/red-400 color references with the semantic
`destructive` design token. This ensures error and danger states adapt
correctly to theme changes and maintain consistency across the UI.

Files: PlayerExpanded, PlayerQueue, WebhooksView, RolesPage, ChatPage,
AdminDashboardStatCard, NotificationsViewItem/Header, AnalyticsViewTopTracks,
AdminDashboardTabs, AdminDashboardHeader.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 23:26:34 +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
333aeee226 ui(components): migrate 16 skeleton files from animate-pulse to Skeleton shimmer 
Replace raw `animate-pulse bg-muted` divs with the `<Skeleton>` component
across all major page and section skeletons. Every loading state now uses
the premium sweeping shimmer animation instead of the basic pulse.

Files: TrackDetailPageSkeleton, LibraryPageSkeleton, PlaylistDetailPageSkeleton,
DiscoverViewSkeleton, PlaybackDashboardSkeleton, StudioViewSkeleton,
MonitoringDashboardSkeleton, LibraryManagerSkeleton, UploadViewSkeleton,
FileManagerViewSkeleton, TrackSearchFiltersSkeleton, TrackListPaginationSkeleton,
TrackFiltersSkeleton, TrackHistorySkeleton, PlaylistActionsSkeleton, TrackGrid.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 23:12:58 +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
49241df85c ui(shell): refine DashboardLayout scroll architecture and Header transparency 
DashboardLayout: add min-w-0 to flex child (prevents overflow), use
max-lg:ml-0 for responsive specificity, absolute-positioned player at
bottom of content area.

Header: bg-background/80 → bg-transparent with backdrop-blur-md for a
seamless Spotify-like header that blends with the page content below.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 22:47:53 +01:00
senke
320c8e3435 ui(tokens): replace arbitrary max-h/h viewport values with layout tokens 
Migrate all max-h-[XXvh] and h-[XXvh] to design system tokens:
- max-h-[85vh] → max-h-layout-modal (9 modals)
- max-h-[80vh] → max-h-layout-modal-sm (4 modals + notification bell)
- max-h-[70vh] → max-h-layout-modal-xs (AddToPlaylistModal)
- max-h-[90vh] → max-h-layout-modal-lg (CreatorModal)
- max-h-[400px] → max-h-layout-list (QueuePanel, OfflineQueueManager)
- max-h-[500px] → max-h-layout-drawer (APIPlaygroundView)
- h-[60vh] → h-layout-lyrics (FullPlayer, TrackDetailPageHero/Skeleton)
- max-w-[400px] → max-w-lg (FullPlayer)

Zero arbitrary viewport heights remain in modals and panels.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 22:47:41 +01:00
senke
7ac7b84fe9 ui(tokens): migrate text-[10px] to text-xs across 23 components 
Replace all arbitrary text-[10px] / text-[9px] with the standard Tailwind
text-xs token. Also migrates nearby arbitrary width values where applicable
(max-w-[200px] → max-w-48, max-w-[120px] → max-w-32, h-[1px] → h-px).

Only documented exceptions remain: avatar xs (text-[10px] for w-6 h-6
initials) and badge JSDoc reference.

Affected areas: admin views, marketplace, player, settings, chat, upload,
education, commerce, library, PWA, search, navbar, user card.

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-08 22:47:19 +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
d21462aa0b style(ui): Spotify-like palette, player, sidebar and dashboard polish 
- Dark palette: background 0.11, card 0.14, sidebar 0.08 (Spotify #121212 feel)
- MiniPlayer: h-16, thinner progress bar, compact cover/times, rounded actions
- Sidebar: minimal header, lighter section labels, clean nav hover (no heavy border)
- Header: h-16, rounded search pill, compact user pill and dropdown
- Dashboard: pt-20 to match header, StatCard typography and spacing tweaks
- Visual: register-page snapshot + small maxDiffPixels tolerance for font variance

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 20:19:59 +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
a1e4972e50 style(ui): P3 AdminSettingsView kodo-* → semantic tokens 
- Borders/labels: kodo-steel → border-border, kodo-content-dim → text-muted-foreground
- Inputs/selects: bg-kodo-ink border-kodo-steel → bg-card border-border focus:border-primary
- Feature Flags: icon text-primary, rows bg-muted/50, toggle track bg-success
- Maintenance card: border-destructive/30, icon text-destructive, toggle bg-destructive/bg-muted
- Headings text-foreground for consistency

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:37:41 +01:00
senke
4abdce05db style(ui): P3 AdminModerationView kodo-* → semantic tokens 
- border/text: kodo-steel → border-border, kodo-content-dim → text-muted-foreground
- kodo-text-main → text-foreground, kodo-red → destructive (tabs, card, reason, Ban button)
- Report block: bg-kodo-ink border-kodo-steel → bg-muted/50 border-border
- Loader and empty state use muted-foreground

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:36:27 +01:00
senke
54828ba555 style(ui): P3 AdminAuditLogsView semantic tokens + elevated card 
- Replace all text-kodo-content-dim with text-muted-foreground (audit P3)
- Card glass → elevated for consistency with admin dashboard

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:35:33 +01:00
senke
633c4065cf style(ui): P3 Rajdhani fallback, dashboard StatCard semantic tokens 
- index.css: add 'Inter' to --font-sans fallback (audit P3 glyph robustness)
- dashboard/StatCard.tsx: replace kodo-* with semantic tokens (primary,
  secondary, success, warning, destructive, muted-foreground)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:34:45 +01:00
senke
356fff3c2f style(ui): dashboard cards elevated, progress bar contrast (audit §7.2, §6.1) 
- Admin dashboard: StatCard, TrafficCard, ProtocolsCard, NodeHealthCard
  glass → elevated for main content depth (audit §7.2)
- MiniPlayer: progress rail bg-muted → bg-white/10, h-1 → h-1.5, fill
  bg-white → bg-primary for accessibility and consistency (§6.1)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:32:00 +01:00
senke
df418a226d style(ui): P2 contrast muted-foreground, sidebar spacing, dashboard gap, compact play button 
- index.css: --muted-foreground 0.70 → 0.73 in dark for better secondary text readability (audit §5.2)
- PlayerControls: compact play w-10→w-9, icon w-5→w-4; use bg-primary/text-primary-foreground
- Sidebar: space-y-6→space-y-8, section title mb-2→mb-3 mt-1 (audit §4.2)
- AdminDashboardView: stats grid gap-6→gap-8 (audit §4.3)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 19:30:13 +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
d0f76c06e1 feat(ui): Zone 15 - Live & Checkout polish (Chat/Recommended/StreamInfo glass+glow, OrderSummary Card) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:47:18 +01:00
senke
7b026c0cd7 feat(ui): Zone 14 - AdminView polish (Sidebar glass/glow, dashboard motion, UserTableRow tokens) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:46:36 +01:00
senke
cd08b4a648 feat(ui): Zone 13 - Settings view polish (Header glass, Tabs container, Content/Skeleton sync) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:45:35 +01:00
senke
2a0878bee8 feat(ui): Zone 12 - Library & Analytics polish (min-h-layout-page, motion, glass/glow, skeleton sync) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:45:06 +01:00
senke
02cabc0837 feat(ui): Zone 11 - MarketplaceView SaaS polish (glass, glow, motion, fix allProducts, ProductCard tokens) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:44:13 +01:00
senke
6f7df5d6ba feat(ui): Zone 10 - SocialView SaaS polish (glass, glow, motion, error/empty) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:43:04 +01:00
senke
6695f06a7d style(commerce,upload,error): elevate Commerce, Upload, Error to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:07:09 +01:00
senke
ebf40ab134 style(settings,auth): elevate Security and Auth to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:02:52 +01:00
senke
81f1dbf33a style(player): elevate player components to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 16:01:56 +01:00
senke
bd6908f6bf style(player): elevate player components to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:33:31 +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
c4057212e8 style(layout): elevate Header, Navbar, AudioPlayer, Sidebar to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:25:44 +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
eaf2e38f65 style(settings,views): elevate AccountSettings and ProfileView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:09:53 +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
a2f4fb228c style: fix leftover kodo tokens in ProjectDetailView, ProductDetailView, CourseDetailView, UploadViewStepper 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:08:19 +01:00
senke
66b2fb2cfb style(studio): elevate ProjectDetailView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:01:03 +01:00
senke
86211ff8cf style(marketplace): elevate ProductDetailView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:58:26 +01:00
senke
603f88f656 style(education): elevate CourseDetailView and CourseLearningView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:57:13 +01:00
senke
90296081a8 style(notifications): elevate NotificationMenu story to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:57:11 +01:00
senke
39dfe109cc style(views): elevate UploadView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:54:19 +01:00
senke
c087ecc597 style(studio): fix ConnectivityViewWebhooks leftover kodo tokens 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:54:17 +01:00
senke
613f6bab7e style(settings): elevate TwoFactorSetup to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:42:45 +01:00
senke
0ca12c33bf style(studio): elevate ProjectsManager to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:41:25 +01:00
senke
94b840b996 style(studio): elevate CreateProjectModal to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:40:07 +01:00
senke
bbe16acb6a style(studio): elevate GoLiveView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:39:24 +01:00
senke
f08573e97f style(studio): elevate ConnectivityView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:38:15 +01:00
senke
11ef2affb9 style(settings,studio): remove remaining kodo in EditProfileIdentityCard and AIToolsViewSkeleton 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:37:35 +01:00
senke
8d9b897641 style(studio): elevate AIToolsView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:25:23 +01:00
senke
abaf72f2ab style(studio): elevate CloudSettingsView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:25:20 +01:00
senke
8384080c34 style(views): elevate StudioView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:23:54 +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
6537086bd5 style(settings): elevate EditProfile to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:17:10 +01:00
senke
16ce8290c8 style(social): elevate Profile + GroupDetailView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:15:35 +01:00
senke
9f593582d7 style(discover): remove remaining kodo in DiscoverView Trending, Genres, types 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:13:58 +01:00
senke
6b2a41d18e fix(settings): AccountSettingsPreferencesCard syntax and remaining kodo 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:12:39 +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
63919ce983 style(discover): elevate DiscoverView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:05:04 +01:00
senke
168ef7abf3 style(file-details): elevate FileDetailsView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:03:36 +01:00
senke
ddc568222b style(seller): elevate CreateProductView to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:03:00 +01:00
senke
9e5f280010 style(settings): elevate AccountSettings cards to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:02:15 +01:00
senke
0c0593cfff style(admin): elevate AdminDashboardView stories to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:01:29 +01:00
senke
550f7dbc5b style(checkout): elevate CheckoutView BillingCard and Header to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:01:11 +01:00
senke
c4366b9e74 fix(views): remove remaining kodo in Purchases/Cart/Live/Marketplace/Social 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 14:00:55 +01:00
senke
84cdcf395c style(views): elevate CheckoutView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:46:39 +01:00
senke
39cea43cc1 style(views): elevate LiveView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:45:38 +01:00
senke
7eacfb0e7f style(views): elevate AnalyticsView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:44:52 +01:00
senke
3da74c6012 style(views): elevate MarketplaceView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:44:12 +01:00
senke
c01f3bbf11 style(views): elevate SocialView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:43:31 +01:00
senke
4f6a2e0999 style(views): elevate PurchasesView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:42:37 +01:00
senke
822751fb6e style(views): elevate CartView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:41:56 +01:00
senke
e7ed774d34 style(views): elevate SettingsView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:41:19 +01:00
senke
1a0c93d35a style(views): elevate EducationView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:40:54 +01:00
senke
d00d08b6dc style(views): elevate NotificationsView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:40:29 +01:00
senke
991371e461 style(views): elevate AdminView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:40:12 +01:00
senke
80cff54be4 style(views): elevate AuthView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:39:51 +01:00
senke
51b5498f89 style(views): elevate ChatView to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:39: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
6f7156f035 refactor(web): split EquipmentDetailView into module (nav, gallery, specs, header, warranty, docs, service, skeleton) 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 05:46:16 +01:00
senke
d11aa1d3a2 refactor(web): split ChatView into chat-view module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 03:59:32 +01:00
senke
de3e704373 refactor(web): split AuthView into auth-view module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 03:53:59 +01:00
senke
86450a93ab refactor(web): split AdminView into admin-view module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 22:31:24 +01:00
senke
b4cca23ec9 refactor(web): split NotificationsView into notifications-view module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 22:22:47 +01:00
senke
abc4386495 refactor(web): split EducationView into education-view module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 22:11:13 +01:00
senke
6ccf3db0e1 refactor(web): split SettingsView into settings-view module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 21:59:42 +01:00
senke
dcf89cb2da refactor(web): split CartView into cart-view module 
- types: CartViewProps, CartDiscount
- useCartView: useCartStore, showPromo, discount, tax/finalTotal, handleApplyPromo
- CartViewEmpty, CartViewHeader, CartViewSummary, CartViewSecure, CartViewSkeleton
- PromoCodeModal in orchestrator; min-h-[60vh] -> min-h-layout-page-sm
- Stories: Default, Empty, Loading (Skeleton); decorator min-h-layout-page
- Re-export from CartView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 21:49:55 +01:00
senke
de2144f34f refactor(web): split PurchasesView into purchases-view module 
- types: PurchasesViewProps, Purchase
- usePurchasesView: commerceService.getPurchases, search, refund, download
- PurchasesViewHeader, PurchasesViewItem, PurchasesViewList, PurchasesViewSkeleton
- RefundRequestModal in orchestrator; Loading renders Skeleton
- Stories: Default, Empty (initialPurchases []), Loading (Skeleton)
- Re-export from PurchasesView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 21:42:35 +01:00
senke
b6b2791b76 refactor(web): split SocialView into social-view module 
- types: SocialViewProps, SocialTabKey
- useSocialView: feedTracks (trackService.list), activeTab, playTrack
- SocialViewSidebar, SocialViewFeed, SocialViewFeedItem, SocialViewTrending, SocialViewSkeleton
- Loading renders Skeleton; decorator min-h-layout-page
- Re-export from SocialView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 21:34:18 +01:00
senke
9a8af12b6b refactor(web): split MarketplaceView into marketplace-view module 
- types: MarketplaceViewProps, MarketplaceCategory; useMarketplaceView with marketplaceService/fallback
- MarketplaceViewHeader, MarketplaceViewCategories, MarketplaceViewSidebar, MarketplaceViewGrid, MarketplaceViewSkeleton
- allProducts for ProductDetailView similarProducts; min-h-screen -> min-h-layout-page
- Stories: Default, Loading (Skeleton); decorator min-h-layout-page
- Re-export from MarketplaceView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 18:42:16 +01:00
senke
461fd9cf6a refactor(web): split AnalyticsView into analytics-view module 
- types: AnalyticsViewProps, DateRangeKey, GlobalStats, TopTrackRow, TrafficSource, DeviceStats, ChartHoverData
- useAnalyticsView: dateRange, stats, topTracks, trafficSources, deviceStats, loading, hoveredData, handleExport
- AnalyticsViewHeader, AnalyticsViewKpiGrid, AnalyticsViewChart, AnalyticsViewOrigins, AnalyticsViewPlatforms, AnalyticsViewTopTracks, AnalyticsViewSkeleton
- Data via analyticsService; loading renders Skeleton
- text-[10px] -> text-xs, tracking-[0.2em] -> tracking-wide
- Stories: Default, Loading (Skeleton); decorator min-h-layout-page
- Re-export from AnalyticsView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 18:33:42 +01:00
senke
30df8c99ea refactor(web): split LiveView into live-view module 
- types.ts: LiveViewProps, LiveViewChatMessage; mockData: FEATURED_STREAM, CHAT_MESSAGES
- useLiveView: stream, chatMessages, msgInput, handleSend, addToast
- LiveViewPlayer, LiveViewStreamInfo, LiveViewRecommended, LiveViewChat, LiveViewSkeleton
- Layout h-[calc(100vh-120px)] -> min-h-layout-main; text-[10px] -> text-xs
- Stories: Default, Loading (Skeleton); decorator min-h-layout-page
- Re-export from LiveView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 18:15:41 +01:00
senke
0a56cb5fe0 refactor(web): split CheckoutView into checkout-view module 
- types.ts: CheckoutViewProps, CheckoutFormState, INITIAL_CHECKOUT_FORM
- useCheckoutView: form state, cart/tax, handlePurchase, onComplete
- CheckoutViewHeader, CheckoutViewBillingCard, CheckoutViewPaymentCard,
  CheckoutViewOrderSummary, CheckoutViewSkeleton
- CheckoutView orchestrator; re-export from CheckoutView.tsx
- Stories: Loading (Skeleton), Default, Processing, Success
- Decorator min-h-screen -> min-h-layout-page

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 18:04:13 +01:00
senke
0226b55ef4 refactor(web): split AdminDashboardView into admin-dashboard-view module 
- types: DashboardStats, UploadItem, AuditLogItem, StatCardProps, Report
- useAdminDashboardView: fetchData, handleAction, triggerProtocol
- Header, StatCard, TrafficCard, ProtocolsCard, NodeHealthCard, Tabs
- AdminDashboardSkeleton for Loading state
- max-w-layout-content, text-xs, gap-0.5 (no arbitrary values)
- Stories: Default, Loading (Skeleton). Decorator min-h-layout-page
- Re-export from AdminDashboardView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 17:54:02 +01:00
senke
4c8211c449 refactor(web): split AccountSettings (components/settings/account) into module 
- account-settings/types: AccountSettingsUserMock, AccountSettingsToggles
- useAccountSettingsPage: view, modals, user, toggles, theme, setThemeOption
- IdentityCard, PreferencesCard, NotificationsCard, PrivacyCard, DangerCard
- AccountSettingsSkeleton for Loading state
- Privacy labels text-xs (no text-[10px])
- Theme selection: isOptionSelected(theme, variant)
- Stories: Default, Loading (Skeleton). Decorator min-h-layout-page
- Re-export from AccountSettings.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 17:42:57 +01:00
senke
f61067e685 refactor(web): split CreateProductView into create-product-view module 
- types.ts: LicenseConfig
- useCreateProductView: form state, updateLicense, handlePublish, handleSaveDraft
- CreateProductViewHeader, CoverCard, FilesCard, DetailsCard, PricingCard
- CreateProductViewSkeleton for Loading state
- Textarea min-h-24 (no arbitrary value)
- MSW: POST marketplace/products for Storybook
- Stories: Default, Loading (Skeleton)
- Re-export from CreateProductView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 14:16:38 +01:00
senke
ef520fba53 refactor(web): split FileDetailsView into file-details-view module 
- types.ts: FileDetailsViewProps, ActivityItem, VersionItem
- mockData.ts: MOCK_ACTIVITY, MOCK_VERSIONS, getMockFile
- useFileDetailsView.ts: hook returning file, activity, versions
- FileDetailsViewHeader, Preview, Metadata, Activity, Versions, Storage
- FileDetailsViewSkeleton for Loading state
- Layout: min-h-layout-page-sm, badge text-xs
- Imports use @/ for Storybook resolution
- Stories: Default, Loading (Skeleton)
- Re-export from FileDetailsView.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 14:05:44 +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
5c54de2ced refactor(views): decompose DiscoverView into discover-view module 
- Add discover-view/ with useDiscoverView, Hero, Trending, NewReleases, Genres, Skeleton, Error
- Re-export DiscoverView from DiscoverView.tsx
- Loading: Skeleton instead of h-[50vh] spinner; Error: min-h-layout-page-sm
- Conformity: UPDATED badge text-[10px] -> text-xs
- Stories: Default, Loading (Skeleton), Error

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 13:19:25 +01:00
senke
7091b9f97e refactor(social): GroupDetailView module, useGroupDetailView, Header, Members, Events, Sidebar, Skeleton, stories 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 12:34:57 +01:00
senke
abdd4fbc3e refactor(settings): EditProfile module, useEditProfile, ImagesCard, IdentityCard, Sidebar, Skeleton, cropUtils, stories 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 11:45:16 +01:00
senke
5ebb5d3894 refactor(forms): FormBuilder module, useFormBuilder, FormBuilderFieldWidget, re-export, stories, a11y id 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 11:36:20 +01:00
senke
10e9e4fe43 refactor(monitoring): MonitoringDashboardContent split into Header, Stats, ValidationCard, ErrorsCard, PerformanceCard 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 11:27:54 +01:00
senke
32c421483b refactor(data): Table module, useTable, TableHeadRow, TableBodyRows, re-export, stories, tests 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 11:22:47 +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
266f2619c9 refactor(views): StudioView module, re-export, stories 
- Module studio-view: types, useStudioView, Header, Sidebar, NavButton,
  Content, ProjectsSwitch, Skeleton, orchestrator StudioView
- Re-export from StudioView.tsx
- Stories: Default, Projects, Loading (Skeleton); decorator min-h-layout-main
- Fix: h-[calc(100vh-140px)] -> min-h-layout-main, w-[65%] -> w-2/3

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:17:36 +01:00
senke
225149dc17 refactor(studio): CloudSettingsView module, re-export, stories 
- Module cloud-settings-view: types, useCloudSettingsView, Quota,
  Preferences, Skeleton, orchestrator CloudSettingsView
- Re-export from CloudSettingsView.tsx
- Stories: Default, Loading (Skeleton); decorator min-h-layout-page

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:11:33 +01:00
senke
a18aea7174 refactor(studio): AIToolsView module, re-export, stories 
- Module ai-tools-view: types, constants (AI_TOOLS), useAIToolsView,
  ToolGrid, Workspace, Skeleton, orchestrator AIToolsView
- Re-export from AIToolsView.tsx
- Stories: Default, Loading (Skeleton); decorator min-h-layout-page,
  no local ToastProvider (use StorybookDecorator)
- Fix: text-[10px] -> text-xs, min-h-[400px] -> min-h-layout-page-sm

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:07:05 +01:00
senke
502b62f364 refactor(studio): ConnectivityView module, re-export, stories 
- Module connectivity-view: types, useConnectivityView, WebDAV, Webhooks,
  Skeleton, orchestrator ConnectivityView
- Re-export from ConnectivityView.tsx
- Stories: Default, Loading (Skeleton); decorator min-h-layout-page
- Fix: text-[10px] -> text-xs (Mount Password hint)

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:02:00 +01:00
senke
98480c347a refactor(studio): GoLiveView module, re-export, stories 
- Module go-live-view: types, useGoLiveView, Header, Preview, StreamInfo,
  EncoderSetup, QuickInstructions, MicLevel, Skeleton, orchestrator
- Re-export from GoLiveView.tsx
- Stories: Default, Loading (Skeleton); decorator min-h-layout-main
- Fix: text-[10px] -> text-xs, w-[60%] -> w-3/5

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 01:57:22 +01:00
senke
4e43e62e92 refactor(studio): CreateProjectModal module, re-export, stories 
- Module create-project-modal: types, useCreateProjectModal, Header,
  Form, Footer, Skeleton, orchestrator CreateProjectModal
- Re-export from projects/CreateProjectModal.tsx
- Stories: Default, Loading (Skeleton); decorator min-h-layout-story

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 01:51:25 +01:00
senke
c1b9f557e6 refactor(studio): ProjectsManager module, re-export, stories 
- Module projects-manager: types, useProjectsManager, Header, FilterBar,
  Card, AddCard, Empty, Skeleton, orchestrator ProjectsManager
- Re-export from studio/ProjectsManager.tsx
- Stories: Default, Loading (Skeleton), Empty; decorator min-h-layout-main

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 01:44:40 +01:00
senke
d5bf3030a5 refactor(settings): TwoFactorSetup module, re-export, stories 
- Module two-factor-setup: types, useTwoFactorSetup, Header, Step1/2/3, Skeleton
- Re-export from TwoFactorSetup.tsx
- Stories: Default, Step1, Step2, Loading (Skeleton), Error (MSW)
- Decorator: min-h-layout-page-sm

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 01:25:43 +01:00
senke
539118504b refactor(views): UploadView module, re-export, stories 
- Module upload-view: types, useUploadView, Stepper, Step1/2/3, Skeleton
- Layout: min-h-layout-page, max-h-96 (no arbitrary values)
- Re-export from UploadView.tsx
- Stories: Default, Loading (Skeleton), Empty, Error

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 01:12:24 +01:00