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

132 commits

Author SHA1 Message Date
senke
5d25f413bf 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
7501c55de4 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
21b1603bbd 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
6cd4b55971 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
fc21259e84 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
84a6de7440 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
3017526d73 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
ea2a72d554 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
698c3dd144 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
5f53618734 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
e6ef1e9df7 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
4ff7573c7c 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
4468f6700e 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
8d8c772511 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
0475808bee 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
56c063cfae 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
1b7d1be65d 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
411defe923 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
28b5e58043 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
693e39c91d 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
eebaa842b0 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
43139b0407 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
26b1197533 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
47d8100d74 style(ui): elevate Dialog to SaaS Premium 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 15:08:52 +01:00
senke
0ac0705330 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
377b2ade4c 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
b71fa3a91f 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
4e701cc162 style(ui): elevate Button to SaaS Premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 09:38:52 +01:00
senke
f41980a8c2 style(ui): elevate visual fidelity to premium standards 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-07 08:03:28 +01:00
senke
f9db7b1f32 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
27fd12fe6c refactor(ui): tooltip module, useTooltip, re-export, tests 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 10:32:14 +01:00
senke
65545df49b refactor(ui): tabs module, re-export 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 10:12:33 +01:00
senke
61e2021968 refactor(ui): accordion module, re-export 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-06 02:33:10 +01:00
senke
dc54cbc80a 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
04441e15ef 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
5791051a5e 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
970e92790a 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
cf31a8279a 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
c6774762b2 refactor(ui): extract AvatarUpload into avatar-upload module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:21:02 +01:00
senke
407cdba6d5 refactor(ui): extract DatePicker into date-picker module 
Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-02-05 22:15:11 +01:00
senke
41e36d72ce 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
11af9d9aad 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
d37ff52b4a 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
abc18e2fc6 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
0d1a426efa 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
8bfabe79ad 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
eb87ad07b3 chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
senke
62010f6a22 chore(storybook): improve configuration and cleanup 2026-02-04 00:44:40 +01:00
senke
be2854ec7c 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
417e9ba178 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