Commit graph

109 commits

Author SHA1 Message Date
senke
8a3da49fbd style(ui): elevate Dialog to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 15:08:52 +01:00
senke
c25b0e957f style(ui): elevate Dropdown, DropdownMenu, Tooltip to SaaS Premium; update test
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 14:23:04 +01:00
senke
688a4fe67d 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
33ba8d0612 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
6e9bacff54 style(ui): elevate Button to SaaS Premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 09:38:52 +01:00
senke
a5889cb0ac style(ui): elevate visual fidelity to premium standards
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 08:03:28 +01:00
senke
9c58ff7818 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
eead265786 refactor(ui): tooltip module, useTooltip, re-export, tests
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-06 10:32:14 +01:00
senke
cb58101137 refactor(ui): tabs module, re-export
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-06 10:12:33 +01:00
senke
80cc76212a refactor(ui): accordion module, re-export
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-06 02:33:10 +01:00
senke
9f78576389 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
a056db91fe 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
44eb0e142f 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
db39d87955 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
15d31cf793 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
c4111ac059 refactor(ui): extract AvatarUpload into avatar-upload module
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 22:21:02 +01:00
senke
38eab5c205 refactor(ui): extract DatePicker into date-picker module
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 22:15:11 +01:00
senke
b20c9f4c6f 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
bf50ee4588 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
53a97148e3 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
0eda9232df 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
1f2e59af8d 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
df6c9c3d2b 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
c8b640263d chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
senke
d2ae91ac25 chore(storybook): improve configuration and cleanup 2026-02-04 00:44:40 +01:00
senke
ba24e4c133 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
5024ff0e0b feat(storybook): expanded coverage for visual and feedback components (batch 5)
- Added stories for: Spinner, KodoEmptyState, HelpText, AstralBackground
- Increased coverage for utility and visual components
2026-02-02 19:46:27 +01:00
senke
ba5b8a9abd feat(storybook): expanded coverage for structural components (batch 4)
- Added stories for: Label, Skeleton, ScrollArea, Toast, Collapsible, Sidebar
- Covered layout and feedback components
2026-02-02 19:44:58 +01:00
senke
affc628722 feat(storybook): expanded coverage for complex form & data components (batch 3)
- Added stories for: DatePicker, Select, RadioGroup, FileUpload, Table
- Achieved high coverage for core UI components
2026-02-02 19:41:12 +01:00
senke
62683f1a17 feat(storybook): expanded coverage for complex UI components (batch 2)
- Added stories for: Accordion, Tabs, Textarea, Tooltip, Dialog, DropdownMenu
- Covered various interactive states and sub-components
2026-02-02 19:39:50 +01:00
senke
91055ee07b feat(storybook): expanded coverage for core UI components (batch 1)
- Added stories for: Button, Avatar, Switch, Slider, Alert, Progress
- Consolidated Button component to src/components/ui/button.tsx
- Removed legacy src/components/Button.tsx
2026-02-02 19:37:52 +01:00
senke
ad60247f33 feat: global update including storybook setup and backend fixes
- Web: Setup Storybook, added addons, configured Tailwind, added stories for UI components.
- Backend: Updated API router, database, workers, and auth in common.
- Stream Server: Removed SQLx queries and updated auth.
- Docs & Scripts: Updated documentation and recovery scripts.
2026-02-02 19:34:14 +01:00
senke
62a6b3a528 improving UI: improve audio player phase 1 2026-01-26 19:18:52 +01:00
senke
f61c0c3dcc improving UI: adding API doc to Developer Page 2026-01-26 14:12:17 +01:00
senke
8803070c2e feat(frontend): complete design system migration and cleanup old pages 2026-01-25 12:33:46 +01:00
senke
06b12daabd refactor of veza frontend ui- batch 1 2026-01-22 17:23:11 +01:00
senke
1a5c81282c refactor(frontend): improve ui using design system
- Refactor Navbar, ChatInput, RegisterPage, and CreatePlaylistDialog to use @veza/design-system components
- Shim local UI components (Button, Input, Card) to align with Design System API and styles
- Fix hundreds of type errors by exporting missing components (SearchInput, FileUpload) and adding missing props (icon, variant)
2026-01-18 22:27:53 +01:00
senke
023b8a89c6 fix: Corriger URL Swagger et finaliser implémentation DeveloperPage
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
2026-01-18 13:55:28 +01:00
senke
a7277abdba fix: Corriger affichage de la page de recherche
- Ajouter z-index relatif pour éviter que les overlays masquent le contenu
- Assurer que les Cards et le contenu de recherche sont au-dessus des overlays
- Corriger problème d'affichage où le champ de recherche et les messages étaient masqués
2026-01-18 13:30:34 +01:00
senke
3465374a81 cleanup: remove remaining commented code in ImageCropper
- Removed commented alternative import statement
- Cleanup 9: Complete (8 files cleaned)
2026-01-16 12:14:00 +01:00
senke
a33359a0e7 cleanup: remove obsolete commented-out code (Cleanup 9)
- AuthView: Removed commented imports and JSX for non-existent EmailVerification/ResetPasswordForm components (functionality handled by separate pages)
- SettingsView: Removed commented useTheme hook
- CheckoutView: Removed commented total calculation
- LazyComponent: Removed commented ErrorBoundary import
- ImageCropper: Removed commented alternative import (already using correct import)
- EditPlaylistModal: Removed commented isCollaborative state
- ExploreView: Removed commented GENRES array
- Preserved: Documentation comments, explanatory comments, TODO comments
- Cleanup 9: Complete (7 files cleaned)
2026-01-16 12:13:39 +01:00
senke
8305c5b6cb aesthetic-improvements: fix spacing in components batch 2 (Action 11.5.1.6)
- Modals: CreatorModal (p-6 → p-8, space-y-6 → space-y-8)
- Seller: CreateProductView (space-y-6 → space-y-8, 2 instances)
- Social: ExploreView, GroupCard (space-y-6 → space-y-8, p-6 → p-8)
- Studio: ProjectsManager, CloudFileBrowser (space-y-6 → space-y-8, gap-6 → gap-8)
- Theme: ThemeSwitcher (space-y-6 → space-y-8, p-6 → p-8)
- Settings: AppearanceSettingsView (p-6 → p-8, space-y-6 → space-y-8)
- Library: PlaylistsView (space-y-6 → space-y-8)
- Upload: TagSuggestionsModal, LyricsEditorModal, BulkUploadModal (p-6 → p-8, space-y-6 → space-y-8)
- UI: modal, dialog, ImageCropper (p-6 → p-8)
- All spacing now aligned to 8px grid (32px standard padding)
- Action 11.5.1.6: Apply direction to all components - Batch 2 complete (spacing fixes)
2026-01-16 12:06:56 +01:00
senke
ccb0169622 aesthetic-improvements: apply design direction to components batch 1 (Action 11.5.1.6)
- UI components: FAB (removed scale transforms), tabs (removed decorative shadow)
- Upload components: FileUploadZone, MetadataEditor, BulkUploadModal (removed scale transforms and decorative gradient)
- Search: SearchBar (removed decorative shadow)
- PWA: PWAInstallBanner (removed decorative shadow)
- Social: ExploreView (removed decorative shadow and image zoom)
- Live: LiveStreamDetailView (removed decorative shadow)
- Player: VisualizerSettingsModal (removed scale transform)
- Marketplace: ReviewProductModal, ProductDetailView (removed scale transforms)
- Library: PlaylistsView (removed scale transform)
- Settings: AppearanceSettingsView (removed scale transform)
- Theme: ThemeSwitcher (removed scale transform)
- Studio: ProjectsManager, CloudFileBrowser (removed scale transforms)
- Social: GroupCard (removed image zoom)
- Seller: CreateProductView (removed scale transform)
- Modals: CreatorModal (removed scale transform)
- Replaced decorative scale transforms with subtle opacity changes or removed entirely
- Action 11.5.1.6: Apply direction to all components - Batch 1 complete (17 components)
2026-01-16 12:06:00 +01:00
senke
6974c12a25 aesthetic-improvements: align spacing to 8px grid (Action 11.2.1.3)
- Created automated script (scripts/align-8px-grid.py) to align all spacing to 8px grid
- Replaced non-8px-aligned spacing: gap-3/p-3/m-3 (12px) → gap-4/p-4/m-4 (16px), gap-5/p-5/m-5 (20px) → gap-6/p-6/m-6 (24px), gap-10/p-10/m-10 (40px) → gap-12/p-12/m-12 (48px), gap-20/p-20/m-20 (80px) → gap-24/p-24/m-24 (96px)
- Preserved: 4px values (gap-1, p-1, m-1) as they may be intentional fine-tuning, responsive breakpoints (sm:, md:, lg:), test files, documentation
- Modified files across all components to ensure consistent 8px grid alignment
- Action 11.2.1.3: Align all elements to 8px grid - COMPLETE
2026-01-16 11:50:46 +01:00
senke
3fb12b2ce2 aesthetic-improvements: automated replacement of decorative cyan with steel (80/20 rule, Action 11.3.1.3)
- Created automated script (scripts/replace-decorative-cyan.py) to systematically replace decorative/informational kodo-cyan instances with kodo-steel variants
- Script intelligently preserves active/functional states, design system variants, semantic indicators, and interactive states
- Modified 85 files, replaced 145 decorative instances, preserved 47 functional instances
- No linter errors, type safety maintained
- Action 11.3.1.3 significantly advanced (total: ~302 instances replaced across ~229 files including previous batches)
2026-01-16 11:40:13 +01:00
senke
c9fe2318a9 aesthetic-improvements: reduce decorative cyan in UI components (80/20 rule, batch 9)
- LiveView: decorative chat message username color (text-kodo-cyan → text-kodo-steel)
- Sidebar: decorative section header icon (text-kodo-cyan → text-kodo-steel)
- CartView: decorative promo code link (text-kodo-cyan → text-kodo-steel)
- Total: ~3 files, ~3 instances replaced
- Preserved: Functional links (LoginPage register link, RegisterPage login link, LiveView streamer profile link, LiveView wallet link), design system variants (Spinner default variant, alert.tsx info variant, badge.tsx cyan variant, ErrorDisplay.tsx info variant, Toast.tsx info variant, Alert.tsx info variant - intentional design system options), semantic status indicators (PasswordStrengthIndicator strong password - semantic color), interactive states (radio-group.tsx focus/interaction, select.tsx selected option, dropdown-menu.tsx checked state), primary actions
- Action 11.3.1.3 in progress (ninth batch: UI components decorative elements)
2026-01-16 11:21:33 +01:00
senke
baebc293eb aesthetic-improvements: reduce decorative cyan backgrounds (80/20 rule)
- KodoEmptyState: decorative background blur and border (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel)
- PWAInstallBanner: decorative icon background and blur effect (2 instances)
- Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances) - decorative header icons
- DashboardPage: activity item icon gradient background (decorative)
- FileManagerView: selection banner background (decorative)
- Total: ~8 files, ~9 instances replaced
- Preserved: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session), primary actions, informational alerts
- Action 11.3.1.3 in progress (first batch: decorative backgrounds)
2026-01-16 11:03:48 +01:00
senke
16df575a9a aesthetic-improvements: replace secondary cyan hover states with steel (batch 3)
- UI components: accordion hover text (1 file)
- Player components: AudioPlayer, MiniPlayer icon button hovers (2 files, 3 instances)
- Social components: CreatePostModal, SharePostModal, ProductDetailView (3 files, 3 instances)
- Settings: AccessibilitySettingsView hover text (1 file)
- Analytics: TrackAnalyticsView, AnalyticsView chart bar hovers (2 files, 2 instances)
- Gamification: LeaderboardView hover text (1 file)
- Upload: FileUploadZone hover border (1 file)
- Banner: BulkModeBanner close button hover (1 file)
- Total: ~12 files, ~15 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan), primary actions (cyan)
- Note: ChatSidebar selected state hover kept cyan (primary state)
- Note: VirtualizedChatMessages scroll button kept cyan (primary action)
- Action 11.3.1.2 in progress (third batch complete)
2026-01-16 10:55:42 +01:00
senke
0a9c67de40 aesthetic-improvements: replace secondary cyan hover states with steel
- Button outline variant: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- Header secondary nav: hover:text-kodo-cyan → hover:text-white, hover:bg-kodo-cyan/5 → hover:bg-white/5
- FileManagerView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProjectsManager: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- GroupDetailView: hover:border-kodo-cyan/30 → hover:border-kodo-steel/50
- AIToolsView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CloudFileBrowser: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProfileView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CourseCard: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- TwoFactorSetup: hover:border-kodo-cyan → hover:border-kodo-steel/50
- GearView: hover:text-kodo-cyan → hover:text-white, hover:border-kodo-cyan → hover:border-kodo-steel/50
- ChatInput: hover:text-kodo-cyan → hover:text-white (3 instances)
- ChatMessage: hover:text-kodo-cyan → hover:text-white (2 instances)
- ChatRoom: hover:text-kodo-cyan → hover:text-white
- AddToPlaylistModal: hover:border-kodo-cyan → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- Preserved focus rings (cyan) and active/selected states (cyan) as per audit
- Action 11.3.1.2 in progress (first batch of ~15 files)
2026-01-16 10:51:30 +01:00
senke
b711eee52d aesthetic-improvements: increase card padding for more whitespace
- Increased CardHeader padding from p-6 (24px) to p-8 (32px)
- Increased CardContent padding from p-6 (24px) to p-8 (32px)
- Increased CardFooter padding from p-6 (24px) to p-8 (32px)
- All values align to 8px grid system (32px = 4× base)
- Provides more breathing room and improves visual hierarchy
- Aligns with Surgical Minimalism principle of increased whitespace
- Action 11.4.3.1 complete
2026-01-16 10:39:37 +01:00