Commit graph

27 commits

Author SHA1 Message Date
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
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
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
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
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
2964cec09a chore(dx): add .cursorrules and design system audit documentation 2026-02-05 14:20:06 +01:00
senke
0e9b206389 stabilisation: fix commit 2026-02-03 09:56:11 +01:00
senke
d0c270314e improving UI: adding API doc to Developer Page 2026-01-26 14:12:17 +01:00
senke
eccc4e5e89 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
420b0f4e9b stabilized but still broken MVP VERSION 2026-01-18 16:28:22 +01:00
senke
575531e9a2 fix: Improve button click handling and error management
- Add explicit event prevention in onClick handler
- Add type='button' to prevent form submission
- Improve error handling in handleGenerate
- Reset loading state after successful generation
- Ensure button click events are properly handled
2026-01-18 14:49:59 +01:00
senke
3450b7998a fix: Change Button variant from 'primary' to 'default'
- Button component uses 'default' variant for primary actions, not 'primary'
- Fixes issue where Generate Key button wasn't working
- Ensures button is properly styled and clickable
2026-01-18 14:49:32 +01:00
senke
04bb1ca660 fix: Prevent modal from closing on backdrop click when showing generated key
- Disable backdrop click to close when in step 2 (showing generated key)
- Ensures user can copy the key before modal closes
- Only allow closing via Done button after key is generated
2026-01-18 14:46:55 +01:00
senke
fcdf15dacc fix: Make API key creation and generation buttons functional
- Update CreateAPIKeyModal to properly handle async operations
- Add loading states and form validation
- Wait for API response before showing generated key
- Add proper error handling and user feedback
- Disable buttons during generation
- Return full key from service for display in modal
- Fix Input component usage (add proper label wrapper)
- Ensure form validation works (name required, at least one scope)
2026-01-18 14:46:16 +01:00
senke
d73ff4df21 fix: Utiliser iframe pour charger Swagger UI HTML directement
- Ajouter option useIframe pour charger /swagger/index.html dans un iframe
- Cela évite les problèmes avec /swagger/doc.json qui retourne 500
- Swagger UI HTML fonctionne correctement et affiche toute la documentation
- Garder le composant React comme fallback si nécessaire
2026-01-18 13:58:03 +01:00
senke
52f65cf3d8 fix: Corriger erreur de syntaxe dans SwaggerUI (backtick supplémentaire) 2026-01-18 13:56:06 +01:00
senke
93564a88cd fix: Nettoyer code inutilisé dans SwaggerUI 2026-01-18 13:55:50 +01:00
senke
5dedc2ce4e 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
5832ffb0c8 feat: Implémenter fonctionnalités API Keys et Usage Stats dans DeveloperPage
- Corriger URL Swagger pour utiliser /docs/swagger.json
- Implémenter onglet API Keys avec liste, création et révocation
- Implémenter onglet Usage Stats avec métriques et graphiques
- Intégrer developerService pour charger les données
- Ajouter CreateAPIKeyModal fonctionnel
- Corriger CreateAPIKeyModal pour utiliser le nouveau système de toast
- Ajouter gestion d'erreurs et états de chargement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes
2026-01-18 13:54:32 +01:00
senke
39749f6b52 fix: Améliorer gestion d'erreurs dans SwaggerUI
- Ajouter état d'erreur avec UI de fallback
- Ajouter boutons Retry et Open in New Tab en cas d'erreur
- Corriger types TypeScript pour supportedSubmitMethods
- Nettoyer les variables inutilisées
2026-01-18 13:51:34 +01:00
senke
2ff64b01c8 feat: Intégrer Swagger UI dans la page Developer API
- Installer swagger-ui-react et swagger-ui-dist
- Créer composant SwaggerUI avec styles personnalisés pour le thème Kodo
- Ajouter système d'onglets dans DeveloperPage (Documentation, API Keys, Usage Stats)
- Configurer Swagger UI pour charger /swagger/doc.json depuis le backend
- Ajouter support de l'authentification Bearer token dans les requêtes Swagger
- Personnaliser les styles pour correspondre au design system Kodo
- La documentation complète de l'API est maintenant accessible directement dans l'interface
2026-01-18 13:50:47 +01:00
senke
7c69474cf9 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
41b1cfaedd 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
fed22d40a5 aesthetic-improvements: reduce decorative cyan across multiple component categories (80/20 rule, batch 11)
- Social: FeedView, ConnectionsView, GroupsView, ExploreView, GroupDetailView loading spinners and decorative text, CreatePostModal decorative select text and hashtag links, PostCard decorative tag links and waveform bars and view comments link, CreateGroupModal decorative icon (9 instances)
- Settings: DataExportModal decorative icon, LoginHistory decorative IP text, AppearanceSettingsView decorative icon and selected theme checkmark, BackupsView decorative icon, CloudIntegrationView decorative icon, AccessibilitySettingsView decorative icon, SecuritySettings decorative icon, PasskeyModal decorative icon and loading spinner (8 instances)
- Studio: ProjectsManager loading spinner and progress percentage text, CloudFileBrowser decorative music icons, AIToolsView decorative music icon, ConnectivityView decorative icon, CreateProjectModal decorative icon, CloudSettingsView decorative icon (6 instances)
- Admin: AdminDashboardView loading spinner and decorative chart bars and icon, AdminSettingsView decorative icon, AdminModerationView loading spinner, AdminUsersView loading spinner (5 instances)
- Inventory: InventoryView loading spinner, EquipmentCard decorative price icon, EquipmentDetailView loading spinner and decorative icons and price text, AddEquipmentView decorative icon (5 instances)
- Seller: CreateProductView decorative icon, SellerDashboardView loading spinner and decorative icon and sales text (3 instances)
- Live: LiveStreamDetailView decorative streamer name text (1 instance)
- Developer: DeveloperDashboardView loading spinner, WebhooksView decorative icon (2 instances)
- Upload: BulkUploadModal decorative icon, FilePreviewCard decorative audio file icon, MetadataForm decorative button text, CoverArtUploadModal decorative icon, LyricsEditorModal decorative icon (5 instances)
- Notifications: NotificationItem decorative follow icon and mark as read button, NotificationBell decorative mark all read link (3 instances)
- Total: ~46 files, ~46 instances replaced
- Preserved: Active/selected states (CloudFileBrowser selected files checkmarks, CreatePostModal post type active state, GroupCard/GroupDetailView public/private badges - semantic indicators, DataExportModal checkbox accents - focus/interaction, AppearanceSettingsView selected theme - active state, PasskeyModal checkbox accent - focus/interaction, LyricsEditorModal checkbox accent - focus/interaction, FileUploadZone drag active state - active state, EquipmentDetailView support link - functional link, FlashSaleModal link - functional link, EquipmentDetailView image indicator dots - active state), primary actions, design system variants
- Action 11.3.1.3 in progress (eleventh batch: social, settings, studio, admin, inventory, seller, live, developer, upload, notifications components)
2026-01-16 11:26:33 +01:00
senke
fdb080ae00 consistency: fix remaining Tailwind default colors in auth and features components 2026-01-16 01:59:31 +01:00
senke
39f7967e1e incus deployement fully implemented, Makefile updated and make fmt ran 2026-01-13 19:47:57 +01:00
senke
59d9f6b9c9 chore: remove production logs in components 2026-01-07 10:31:02 +01:00