senke
73e8372b0e
refactor: Phase 7 — Clean up legacy components and remove dead tokens
...
- Bulk replace text-white → text-foreground across 116 component files
(preserving text-white/ opacity variants)
- Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow
classes from all components
- Replace --duration-normal/--duration-immersive/--duration-slow with
--sumi-duration-normal/--sumi-duration-slow across 130+ files
- Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out
- Replace focus:ring-blue-500 → focus:ring-primary (4 files)
- Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms
(SUMI anti-pattern: no scale on hover)
- Clean up stale kodo- references in comments
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 02:09:29 +01:00
senke
69e40e3c04
refactor: Phase 6 — Migrate feature modules to SUMI tokens
...
- auth: Replace gray-* with muted/border tokens, text-foreground
- settings: TwoFactorSettings + NotificationSettings text-foreground
- chat: ChatInput, ConversationItem, ChatPage — text-foreground,
remove kodo references
- player: PlayerExpanded, PlayerQueue, PlayerControls — text-foreground,
remove cyan/magenta gradients
- playlists: All components — text-foreground for badges/headings
- tracks: TrackCard, TrackListRow — text-foreground, remove glow effects
- studio: FileGridCard — text-foreground
- library: LibraryPageGrid — remove hover-glow-cyan, shadow-card-glow-cyan
- profile: UserProfilePageHeader — text-foreground
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 02:06:28 +01:00
senke
24b4cce8ea
refactor: Phase 2 — Font migration to SUMI stack
...
- Update Google Fonts: Inter + Space Grotesk + JetBrains Mono + Noto Serif JP
- Remove: Orbitron, Barlow, Source Serif 4, IBM Plex Mono, Noto Sans JP
- Replace all font-display (Orbitron) references with font-heading (Space Grotesk)
across ~70 TSX files
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-12 01:49:07 +01:00
senke
3c742c3576
test(web): player, playlists, tracks tests; feat(playlists): permissions utils
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-11 22:19:24 +01:00
senke
ccc233e1ea
fix(tests): cycles 12–18 – corrections services, mocks et design tokens
...
- chatService: getChannels → getServers
- commerceService: getOrders/getOrderDetails/getSalesStats → getPurchases/getSellerStats
- marketplaceService: mock réponse, params API, getDownloadLink → listOrders
- config/env.test: vi.stubEnv, import dynamique
- useAuth.test: mock useAuthStore
- TrackStatsDisplay, UploadQuota: mock du bon service (analyticsService, uploadService)
- TrackListEmpty, TrackListRow, TrackSearch: design tokens, assertions
- trackDownloadService, chunkedUploadService: MSW/server.use
- trackListService, trackSearchService, trackShareService: assertions
- ErrorBoundary, LoginForm, PlaylistErrorBoundary, PlaylistRecommendations
- RAPPORT_RESOLUTION_TESTS_CYCLE1.md
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-11 09:43:55 +01:00
senke
149e616183
refactor(ui): Design tokens in PlaylistCard + TrackCard polish
...
- PlaylistCard: duration tokens, primary/secondary gradient (KŌDŌ)
- TrackCard: hover:-translate-y-0.5, ease-out token
- Remove arbitrary purple-500/pink-500, duration-200/300
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 22:52:57 +01:00
senke
95e31646cb
feat(ui): Sidebar refactor, premium skeletons, ContentFadeIn transitions
...
- Sidebar: useSidebarNavigation hook, ARIA, token-based layout
- Layout: lg:ml-main-expanded/collapsed (replace arbitrary ml-64)
- TrackCardSkeleton + PlaylistCardSkeleton: KŌDŌ tokens, min-heights for CLS
- ContentFadeIn: 200ms fade-in with --ease-out
- TrackGrid, PlaylistList, LibraryPage: integrate skeletons + fade-in
- Player: player-bar subcomponents, useAudioAnalyser
- Tests: TrackGrid wrapper (QueryClient, ToastProvider)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 22:51:51 +01:00
senke
64fbb81ddf
ui(design): Phase 3 - rounded tokens, min-w/min-h, stories, NavigationProgress
...
- rounded-[var(--radius-xl/md/lg/sm)] → rounded-xl, rounded-md, rounded-lg, rounded-sm
- Timeline: min-w-[200px] → min-w-50
- AddEquipmentView, MetadataForm: min-h-[100px] → min-h-25
- NavigationProgress: shadow-[...] → shadow-button-primary-glow
- Stories: ActivityGraph, StatCard, NotificationBell, LoadingState, ScrollArea, Skeleton, FileUploadZone
- Reduced arbitrary values from ~60+ to 11 (5 files, exceptions documented)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 19:24:07 +01:00
senke
45e350a292
feat(ui): chat status indicators, notification grouping, feature discovery
...
Chat status indicators:
- ChatMessage: Avatar with online status on incoming messages
- VirtualizedChatMessageItem: proper Avatar component with status
- ChatInterfaceMessages: added status="online" to existing avatars
- ConversationItem: Avatar with status for DM conversations
Notification polish:
- AnimatePresence + motion.div on dropdown (scale+fade, 150ms)
- Date grouping: Today, Yesterday, This Week, Earlier
- Sticky section headers with backdrop-blur
Feature discovery (new FeatureHighlight component):
- One-time spotlight tooltip with localStorage persistence
- Applied to: search bar (Ctrl+K), keyboard shortcuts (?), track context menu
- framer-motion animation with 0.5s delay
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-10 00:04:23 +01:00
senke
c3cd478508
feat(ui): contextual skeleton loading + list stagger animations
...
Skeleton loading (5 pages migrated from spinner):
- SettingsPage: tabs + profile + settings cards skeleton
- RolesPage: table header + 6 data rows + assign role skeleton
- MarketplaceHome: filter bar + category pills + 8 product cards
- TrackSearchResults: results count + 8 track card grid
- PlaybackSummary: 3-column stats skeleton
List stagger animations (5 lists):
- New stagger-fade-in CSS keyframe (translateY 8px, 250ms, ease-out)
- 50ms per item delay, capped at 500ms (10+ items render together)
- Applied to: NotificationsPage, PlaylistList, PlaylistTrackList (static),
dashboard TrackList, NotificationMenuList
- Respects prefers-reduced-motion
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:59:54 +01:00
senke
2fd7935957
feat(ui): remaining polish — DnD feedback, typography headings, lightbox, share dialog
...
Includes changes from previous session that weren't fully staged:
- PlaylistDetailView + QueueView: drag-over visual feedback
- PlaylistTrackListSortableItem: DnD opacity + shadow + insertion line
- ImageViewerModal: zoom toggle, keyboard nav, image counter, loading skeleton
- Badge: dismissible, pulse, dot-only enhancements
- ShareDialog: useCopyToClipboard integration
- SessionsPage, NotificationsPage, SettingsPage, DashboardPage: typography utility classes
- index.css: like-bounce, shake, empty-state-in, marquee, typography utilities
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:54:39 +01:00
senke
18e94ce6f0
feat(ui): table polish + mobile bottom navigation
...
Table improvements (8 files):
- Sticky headers: bg-background/95 backdrop-blur-sm on all thead elements
- Sort indicators: SortableTableHead with ChevronsUpDown/ChevronUp/ChevronDown
- Row hover: hover:bg-muted/50 duration-150 with active state
- Borders softened: border-border/50, last row no border
- Header typography: text-xs font-medium uppercase tracking-wider
- Consistent cell padding: px-4 py-3 for body, px-4 py-2.5 for headers
- Applied to: ui/table, data/table, TrackList, TrackListRow, FileManager, studio files
Mobile bottom navigation:
- New MobileBottomNav component (5 items: Home, Search, Library, Chat, Profile)
- Only visible on mobile (lg:hidden), z-40 below player
- 48px touch targets, safe-area-inset-bottom for iPhone
- Active state with primary color + top indicator bar
- Integrated into Layout with pb-20 lg:pb-0 main padding
- Header touch target fix: theme toggle min-h-10 min-w-10
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:37:25 +01:00
senke
cb9a8a85f7
feat(ui): form polish + micro-interactions for premium feel
...
Forms quality:
- Password visibility toggle (Eye/EyeOff) on FloatingInput, AuthInput
- Applied to LoginForm and RegisterForm password fields
- Focus glow effect on all inputs (primary color shadow ring)
- Error shake animation (0.4s spring shake on validation errors)
Micro-interactions:
- Like button bounce animation (scale 1→1.3→0.9→1.1→1)
- useCopyToClipboard hook — reusable copy with visual feedback
- Applied to CreateAPIKeyModal, ShareDialog, SharePostModal (Check icon swap)
- Universal button press effect: active:scale-[0.98] on all variants
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:31:52 +01:00
senke
cd764d32cb
feat(ui): premium empty states + focus ring consistency
...
Empty states enhanced:
- EmptyState component gains variant prop (default/centered/card)
- Soft entry animation (fade + scale) via new CSS keyframe
- Icon wrapped in muted background circle
- Library: "Your library is empty" + "Upload Track" action
- Search: "No results found" + improved description
- Wishlist: "Explore the marketplace" + Browse button
- Queue: "Nothing in your queue" with autoplay context
- Chat: improved no-conversation and no-messages states
Focus ring consistency (6 files fixed):
- input.tsx: ring-primary/30 → ring-ring + ring-offset
- checkbox.tsx: peer-focus → peer-focus-visible + ring-ring
- textarea.tsx: focus:ring-1 → focus-visible:ring-2 + ring-ring
- List.tsx: added ring-offset-background
- TrackListRow.tsx: full focus-visible on rows + action buttons
- PlaylistCard.tsx: focus-visible on checkbox button
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:23:09 +01:00
senke
b1f5fbf0bf
feat(ui): hover cards, Spotify player layout, scrollbar tokens, context menu integration
...
HoverCard component (new):
- Rich preview cards on hover with framer-motion animation
- Viewport-aware positioning, portal rendering, open/close delays
- UserHoverContent: Discord-style user preview (avatar, bio, stats, follow)
- TrackHoverContent: Spotify-style track preview (cover, stats, play)
Audio player — Spotify-like 3-column layout:
- grid-cols-3 layout: track info | controls | volume+queue
- Progress bar moved to top edge (minimal variant)
- Glassmorphism (bg-background/95 backdrop-blur-md)
- Prominent centered play button (h-10 w-10 rounded-full, active:scale-95)
- Title marquee animation for long track names
- Reduced padding for tighter premium feel
Scrollbar styling:
- Migrated hardcoded rgba() to semantic tokens via color-mix(in oklch)
- Added transition on thumb hover for smooth visual feedback
ContextMenu integration:
- TrackListRow wrapped with ContextMenu (play, like, more actions)
- Dynamic items based on available callbacks
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:18:46 +01:00
senke
592cc94b63
feat(ui): polish, animations & performance optimizations
...
Sprint 4.1 — Exit animations with framer-motion AnimatePresence:
- modal.tsx: overlay fade + panel scale/fade entry/exit
- dropdown.tsx: slide/fade entry/exit
Sprint 4.2 — Missing hover transitions on PostCard:
- Added transition-colors to author name + tags hover states
Sprint 4.3 — Button loading prop:
- Added loading?: boolean with Loader2 spinner + auto-disable
Sprint 4.4 — OptimizedImage replacement:
- PostCard, ProductCard, CourseCard, PlaylistDetailView content images
Sprint 4.5 — React.memo on list components:
- ProductCard, PlaylistCard, TrackCard, CourseCard, PostCard
Sprint 4.6 — Consolidate duplicates:
- Deleted KodoEmptyState (redundant with EmptyState)
- Documented Spinner vs LoadingSpinner distinction (complementary)
- Confirmed Dialog delegates to Modal (correct architecture)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:05:26 +01:00
senke
0d0046f48c
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
034a2769c5
ui(a11y): add focus-visible ring to 16 interactive components
...
Add consistent focus-visible:ring-2 focus-visible:ring-ring pattern to
elements using role="button" / tabIndex={0} that lacked visible focus
indicators.
Affected: TrackCard, 2FA setup steps, ProjectsManager cards,
NotificationMenuItem, SelectOptionItem, DropdownMenuItem,
ConversationItem, VirtualizedChatMessageItem, GearInventoryGrid,
UploadModal, SearchPageResults, SocialViewFeedItem, SocialViewSidebar,
FileManagerViewTable.
Improves keyboard navigation across the application.
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-08 22:48:24 +01:00
senke
ba9ccfb30b
style(tracks): align story decorators with KŌDŌ tokens
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:17:00 +01:00
senke
f30aea1962
style(TrackCard): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:14:35 +01:00
senke
aeec29caa1
style(TrackListRow): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:13:34 +01:00
senke
6a8ef31582
style(track-search): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:12:01 +01:00
senke
d5418cdb7b
style(TrackListContainer): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:11:47 +01:00
senke
11836f55f3
style(UploadQuota): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:10:05 +01:00
senke
2e04a3a1da
style(track-grid): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:08:39 +01:00
senke
8e640400a1
style(TrackStatsDisplay): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:07:10 +01:00
senke
d444fb3896
style(TrackSort): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:05:27 +01:00
senke
5b8c8a420e
style(ShareDialog): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:04:19 +01:00
senke
1a81e76e26
style(LikeButton): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:03:10 +01:00
senke
6832aeed39
style(TrackListSelectionActions): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:01:35 +01:00
senke
0e9bcb8e99
style(ViewToggle): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:59:38 +01:00
senke
c18771df09
style(track-search-filters): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:58:24 +01:00
senke
91bb04b956
style(track-list-pagination): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:56:06 +01:00
senke
c70046a7f8
style(track-filters): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:54:49 +01:00
senke
6d982d1ba0
style(comment-thread): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:52:35 +01:00
senke
94487a9b4f
style(track-history): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:49:21 +01:00
senke
02f5d18879
style(tracks): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:35:52 +01:00
senke
a41e7ce521
style(comments): elevate visual fidelity to premium standards
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:13:59 +01:00
senke
b10821717d
feat(tracks): use TrackListSkeleton for loading state and add Error story
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 07:40:16 +01:00
senke
3c5fb9cc0e
test(comments): add comprehensive stories and MSW mocks
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 07:33:05 +01:00
senke
a65e4b7ab2
feat(comments): add high-fidelity skeletons and Framer Motion transitions
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 07:32:49 +01:00
senke
1006cc7e3a
refactor(comments): modularize CommentSection with atomic sub-components
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 07:32:37 +01:00
senke
fa2563558c
refactor(web): split TrackListPagination into module (info, nav, utils, skeleton)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 05:03:53 +01:00
senke
1ea128b60d
refactor(tracks): TrackHistory module, re-export, stories, tests
...
- Module track-history: types, useTrackHistory, Header, Empty, ItemRow, Pagination, Skeleton, trackHistoryUtils
- Re-export from TrackHistory.tsx
- Stories: Default, Loading, Empty, Error (MSW)
- Tests: mock @/features/tracks/services/trackHistoryService, formatHistoryDate defensive, pagination/error tests fixed
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-06 01:34:58 +01:00
senke
c5ffa235a2
refactor(tracks): split TrackSearchFilters into module (Basic, Advanced, Skeleton)
...
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 23:09:36 +01:00
senke
048393d266
refactor(tracks): extract TrackFilters into track-filters module
...
- Add track-filters/ with useTrackFilters, TrackFiltersHeader, TrackFiltersSearch,
TrackFiltersGrid, TrackFiltersClear, TrackFiltersSkeleton, types
- Re-export from TrackFilters.tsx for backward compatibility
- Stories: Default, Collapsible, Loading (skeleton)
- Layout primitive min-h-layout-story for skeleton; no arbitrary values
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 22:46:11 +01:00
senke
9ebaf9acb1
test(tracks): add stories and mocks for CommentThread
...
- Stories: EmptyReplies, LoadingReplies, ReplyError; decorator uses max-w-2xl, min-h-layout-story
- CommentThreadSkeleton.stories.tsx
- MSW: PUT */api/v1/comments/:id for update; useUser mock in CommentThread.test
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 19:20:58 +01:00
senke
f4b6ede605
refactor(tracks): decompose CommentThread into sub-components
...
- Add comment-thread module: types, useCommentReplies, useCommentActions
- Presentational components: CommentThreadHeader, CommentThreadContent,
CommentThreadActions, CommentReplyForm, CommentRepliesList
- CommentThreadSkeleton for Loading state
- CommentThread.tsx becomes orchestrator (~170 lines); re-export from module
- FE-COMP-012 preserved; no breaking change for CommentSection
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 19:20:47 +01:00
senke
c8b640263d
chore(dx): add .cursorrules and design system audit documentation
2026-02-05 14:20:06 +01:00
senke
97c77a1925
refactor(storybook): remove duplicate providers from stories (Phase 2)
...
Stories no longer wrap with QueryClientProvider, ToastProvider,
ThemeProvider, or MemoryRouter; global StorybookDecorator provides them.
- Route-specific pages use parameters.router.initialEntries
(ResetPasswordPage, VerifyEmailPage) or minimal MemoryRouter+Route
where useParams is needed (TrackDetailPage, PlaylistDetailPage).
- Stories that seeded query cache use useQueryClient() from global
decorator (FollowButton, CollaboratorManagement, CommentSection).
- Navbar, AuthLayout, DashboardLayout, Header, and 25+ story files
simplified to layout divs only.
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 13:08:17 +01:00