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
senke
85911dce7f
aesthetic-improvements: remove excessive hover effects from high-priority files
...
- Removed scale transforms (hover:scale-[1.02], hover:scale-110, group-hover:scale-110/105) from cards and images
- Removed decorative shadow/glow effects (hover:shadow-neon-cyan/20, hover:shadow-lg) from cards
- Removed hover-lift class (translateY + shadow) from base Card and Button components
- Replaced excessive effects with subtle hover:bg-white/5 or hover:opacity-90
- Preserved functional hover states (group-hover:opacity-100 for play overlays, hover:bg-accent/50 for interactive feedback)
- Updated 14 files: ProductCard, TrackCard, CourseCard, EquipmentCard, PostCard, ProfileView, card.tsx, SearchPage, PlayerControls, OrderSummary, DiscoverView, PlaylistCard, Sidebar, button.tsx
- Effects are now subtle and purposeful, aligning with Surgical Minimalism
- Action 11.4.1.3 complete
2026-01-16 10:34:41 +01:00
senke
0c6700acf5
aesthetic-improvements: use dim text sparingly for better contrast
...
- Updated button variants (outline, ghost) to use text-white
- Updated empty state descriptions to use text-white with opacity
- Updated page subtitles to use text-white opacity-80
- Updated Navbar interactive elements to use text-white
- Preserved text-kodo-secondary for truly secondary info (metadata, timestamps, helper text)
- Action 11.1.1.2 complete
2026-01-16 10:14:17 +01:00
senke
91a45cb46c
consistency: add JSDoc documentation for button variants
...
- Added comprehensive JSDoc comments for buttonVariants
- Documented all 5 variants (default, destructive, outline, secondary, ghost) with use cases
- Documented all 4 sizes (default, sm, lg, icon) with descriptions
- Added ButtonProps interface documentation with examples
- Added Button component documentation with usage examples
- Action 9.3.1.5 complete
2026-01-16 02:15:30 +01:00
senke
ccc2daf27f
consistency: simplify button glow effects
...
- Removed excessive glows from button variants
- default: removed base glow, reduced hover glow (30px→15px, opacity 0.5→0.3)
- destructive: removed hover glow
- outline: removed hover glow
- Buttons now have minimal, subtle glows for better visual hierarchy
- Action 9.3.1.4 complete
2026-01-16 02:14:52 +01:00
senke
f8655ebaed
consistency: remove unused button variants (neon, glass, premium, link)
...
- Removed neon, glass, premium, and link variants from Button component
- Replaced variant="link" in PostCard with variant="ghost" (with underline)
- Replaced variant="premium" in LibraryPage and FAB with variant="default"
- Updated COMPONENT_USAGE.md to reflect removed variants
- Remaining variants: default, destructive, outline, secondary, ghost
- Action 9.3.1.2 complete
2026-01-16 02:13:51 +01:00