Commit graph

73 commits

Author SHA1 Message Date
senke
bfdc785ccc refactor(tokens): complete design token migration to semantic system
Sprint 3.1 — Default colors → semantic (~15 files, ~99 replacements):
- lime-500 → success, red-500 → destructive, cyan-500 → primary

Sprint 3.2 — Hardcoded colors → semantic (~13 files, ~99 replacements):
- text-white → text-foreground, bg-black → bg-background, bg-white → bg-card

Sprint 3.3 — Legacy kodo-* → semantic (~27 files, ~122 replacements):
- bg-kodo-ink → bg-card, bg-kodo-void → bg-background, text-kodo-steel → text-muted-foreground
- Preserved kodo-cyan/magenta/lime/gold palette accents and gradients

Sprint 3.4 — Arbitrary values → Tailwind scale (5 replacements):
- min-h-[600px] → min-h-layout-page, min-h-[400px] → min-h-layout-page-sm
- left-[50%] → left-1/2, min-h-[80px] → min-h-20, min-h-[40px] → min-h-10

Sprint 3.5 — Border-radius standardization (4 replacements):
- Modal/dialog skeletons: rounded-lg → rounded-xl (convention)

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-09 23:05:09 +01:00
senke
50f41beec5 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
dd6333d540 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
7e4bcbdb65 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
7113d35a4a 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
47164e5f3c 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
39b2b642d2 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
b1ed46b142 small fixes : cors + login loop 2026-02-07 20:36:48 +01:00
senke
09f954951e feat(ui): login immersive — tokens, rounded-xl, surface card, primary CTA
- AuthInput: bg-card border-border focus:border-primary rounded-xl, 200ms transition
- AuthLayout: Card variant surface, logo bg-primary + glow
- AuthButton: rounded-xl, primary glow shadow, 200ms ease-in-out
- fix-login-form: inputs/button/checkbox rounded-xl, checkbox accent primary

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 19:52:12 +01:00
senke
8eac80ffb2 style(settings,auth): elevate Security and Auth to SaaS Premium
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-07 16:02:52 +01:00
senke
e293cc9366 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
3a991d85b6 refactor(auth): split SessionsPage into module (Header, Content, Skeleton, stories)
Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 23:19:06 +01:00
senke
f622fad9fc refactor(auth): extract RegisterPage into register-page module
- Add register-page/ with useRegisterPage, RegisterPageForm,
  RegisterPageVerificationNotice, RegisterPageSkeleton
- Layout primitives (min-h-layout-page-sm), tokens (success, destructive)
- Stories: Default, Loading, WithError; re-export from pages/RegisterPage

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-02-05 21:50:17 +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
senke
d2ae91ac25 chore(storybook): improve configuration and cleanup 2026-02-04 00:44:40 +01:00
senke
a2576c4eae stabilisation: fix commit 2026-02-03 09:56:11 +01:00
senke
e810d67788 feat(storybook): complete comprehensive ui coverage for auth, player, tracks, and groups 2026-02-02 20:55:57 +01:00
senke
962aff677f feat(storybook): add stories for Auth, Player, Tracks, Dashboard (Batches 22-25)
- Batch 22 (Auth/Settings): OAuthButtons, PasswordStrengthIndicator, ThemeSwitcher, TwoFactorSettings
- Batch 23 (Player): TimeDisplay, RepeatShuffleButtons, NextPreviousButtons, QualitySelector
- Batch 24 (Tracks): LikeButton, TrackFilters, TrackStatsDisplay
- Batch 25 (Dashboard): StatCard
- Fixed build issues with sonner dependencies.
2026-02-02 20:42:51 +01:00
senke
fd0d7b3128 feat(storybook): expanded coverage for feature components (batches 10-12)
- Batch 10 (Auth): AuthButton, AuthInput, LoginForm, RegisterForm
- Batch 11 (Chat): ChatMessage, ChatInput, TypingIndicator
- Batch 12 (Player/Tracks): PlayPauseButton, VolumeControl, ProgressBar, TrackCard
- Achieved extensive functional component coverage.
2026-02-02 20:19:10 +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
f167696a4d stabilized but still broken MVP VERSION 2026-01-18 16:28:22 +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
c64cf7aea4 cleanup: address simple TODO comments (Cleanup 14)
- Fixed ChatRoom.tsx: Implemented current user ID check for isMe
  - Added useUser hook to get current user
  - Replaced hardcoded isMe=false with proper user ID comparison
- Improved TwoFactorVerify.tsx: Enhanced TODO comment with specific action items
  - Clarified that verify() is for setup, not login
  - Added FIXME with clear explanation of the issue
  - Documented that parent should handle verification
- Cleanup 14: In progress - addressing simple, safe TODOs
2026-01-16 12:31:40 +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
f9f34eccad aesthetic-improvements: reduce decorative cyan in chat, auth, player, streaming, and dashboard (80/20 rule, batch 13)
- Chat: ChatSidebar loading spinner and decorative icon, VirtualizedChatMessages decorative attachment badge, ChatPage decorative icon and loading spinner border/text, ChatMessage decorative username indicator and icon (7 instances)
- Auth: TwoFactorVerify decorative icon (1 instance)
- Player: PlayerLoading decorative spinner (1 instance)
- Streaming: PlaybackSummary decorative icon (1 instance)
- Dashboard: DashboardPage decorative chart color and gradient and icon (3 instances)
- Total: ~13 files, ~13 instances replaced
- Preserved: Active/selected states (ChatSidebar selected conversation, ChatMessage isMe message bubble and highlighted message, DashboardPage selected button 30J, ChatInput drag active overlay and emoji picker active, TrackFilters active filter badge, TrackHistory current track, TrackGridDensitySelector selected density, PlaybackSpeedControl selected speed, ViewToggle selected view mode, TrackList selected tracks, TrackListRow selected state, PlaylistList selected view mode, QualitySelector selected quality, SettingsPage selected tab and theme, LoginForm checkbox accent - focus/interaction, RegisterPage checkbox accent - focus/interaction), functional links (ForgotPasswordPage link, TwoFactorVerify links, RegisterPage links, AuthLayout link, ProfileForm links, LoginPage link, RegisterPage link), design system variants, semantic status indicators, interactive states, functional loading indicators, informational alerts/toasts
- Action 11.3.1.3 in progress (thirteenth batch: chat, auth, player, streaming, and dashboard components)
2026-01-16 11:32:55 +01:00
senke
4396d9ea63 aesthetic-improvements: replace secondary cyan hover states with steel (batch 4)
- LibraryPage: card hover border, title hover text (3 instances, also removed scale transform)
- ProductCard: title hover text (1 instance)
- TrackListSelectionActions: action button hovers (5 instances: play, like, download, more, clear) - replaced with hover:bg-white/5
- AuthLayout: footer link hover text (1 instance)
- Pages: SocialPage, GearPage, DeveloperPage outline button hovers (3 instances)
- SocialPage: comment button hover text (1 instance)
- Total: ~8 files, ~14 instances replaced
- Preserved: Primary buttons (cyan), player control buttons (cyan - primary actions), AuthButton primary variant (cyan)
- Action 11.3.1.2 in progress (fourth batch complete)
2026-01-16 10:57:14 +01:00
senke
de79895e5d consistency: fix remaining Tailwind default colors in auth and features components 2026-01-16 01:59:31 +01:00
senke
89ec2b06f0 consistency: auto-migrate Tailwind default colors (Batch 9, 70 instances) 2026-01-16 01:56:50 +01:00
senke
db88a6e64e consistency: auto-migrate Tailwind default colors (Batch 8, 47 instances) 2026-01-16 01:56:47 +01:00
senke
f02aef695d scalability: update feature API files to use service layer
- Updated features/auth/api/authApi.ts to re-export from services/api/auth.ts
- Added deprecation comments to features/tracks/api/trackApi.ts
- Added documentation comments to webhooks, sessions, and admin API files
- All feature API files now document their relationship to the service layer
- Maintains backward compatibility
- No breaking changes
- Action 6.1.1.10 complete
2026-01-15 20:45:59 +01:00
senke
3ade0e80ae scalability: replace direct auth API calls with authApi service
- Replaced imports in VerifyEmailPage.tsx (verifyEmail, resendVerificationEmail → authApi.verifyEmail, authApi.resendVerification)
- Replaced imports in useUsernameAvailability.ts (checkUsernameAvailability → authApi.checkUsername with response.available extraction)
- Replaced imports in usePasswordReset.ts (requestPasswordReset, resetPassword → authApi.requestPasswordReset, authApi.resetPassword)
- Replaced imports in RegisterPage.tsx (resendVerificationEmail → authApi.resendVerification)
- All function calls updated to use authApi methods with proper request object wrapping
- Test files still use direct imports (acceptable - tests can use implementation details)
- AuthContext.tsx uses services/authService (legacy service, separate from features/auth/services/authService)
- No TypeScript errors related to authApi
- Action 6.1.1.8 complete
2026-01-15 20:40:46 +01:00
senke
8d7ca4138f security: add pre-validation to RegisterForm and LoginForm
- Integrated useFormValidation hook into RegisterForm
- Integrated useFormValidation hook into LoginForm
- Validation triggers on form data change (debounced 300ms)
- Backend validation errors displayed alongside client-side errors
- Errors mapped to correct form fields
- Uses watch() from react-hook-form to monitor form changes
- Handles field name mapping (password_confirm vs password_confirmation)
- No TypeScript errors
- Action 5.2.1.2 complete
2026-01-15 20:11:22 +01:00
senke
22e08a1a8e state-ownership: remove _refreshUserPromise field from authStore
- Removed _refreshUserPromise from AuthState interface
- Removed _refreshUserPromise from initial state
- Field no longer needed - React Query handles deduplication automatically
- No references to field remain in codebase
- Action 4.3.1.3 complete
2026-01-15 18:11:41 +01:00
senke
6972445688 state-ownership: simplify refreshUser using React Query deduplication
- Removed manual promise deduplication logic (_refreshUserPromise usage)
- Removed promise creation and storage
- Simplified to direct async function that calls getMe()
- React Query's useUser hook handles deduplication automatically
- Preserved all error handling and state preservation logic
- Function simplified from 83 lines to 58 lines
- Action 4.3.1.2 complete
2026-01-15 18:10:39 +01:00
senke
6a8add17d3 state-ownership: remove user field from authStore, keep only isAuthenticated
- Removed user field from AuthState interface
- Removed all user assignments in login, register, logout, refreshUser, checkAuthStatus
- Updated refreshUser to verify auth via getMe() but not store user (React Query handles that)
- Updated checkAuthStatus to verify auth via getMe() but not store user
- Updated persist partialize to not store user (only isAuthenticated)
- Updated broadcastSync shouldSync to only check isAuthenticated
- Removed User import
- Store now only manages isAuthenticated boolean
- User data exclusively managed by React Query (useUser hook)
- All production code already migrated (Actions 4.1.1.3-4.1.1.4 complete)
- Action 4.1.1.5 complete
2026-01-15 18:08:31 +01:00
senke
b44542b0bf api-contracts: update feature-specific auth types to use generated types
- Replace RefreshResponse with VezaBackendApiInternalDtoTokenResponse
- Replace ResendVerificationRequest with VezaBackendApiInternalDtoResendVerificationRequest
- Keep AuthResponse as is (uses extended User/AuthTokens)
- Keep form data types (frontend-specific)
- Tracks types already updated, roles/chat/settings kept as is
2026-01-15 17:13:43 +01:00
senke
7df3a03e46 api-contracts: replace ApiError interface with Zod-inferred type
- Replace manual ApiError interface with Zod-inferred type from apiSchemas
- Update all imports (15+ files) to use ApiError from @/schemas/apiSchemas
- Remove ApiError interface from types/api.ts
- Update ApiResponse to import ApiError from schemas
- All TypeScript checks pass for ApiError-related code
2026-01-15 17:03:35 +01:00
senke
daada38da8 state-ownership: replace all useAuthStore().user with useUser() hook
- Migrated all hooks: useAuth, useChat, useLogin
- Migrated all components: Header, ProfileForm, FollowButton, LikeButton, PlaylistFollowButton, ChatMessage, ChatMessages, CommentThread, CommentSection, PlaylistList, ChatSidebar, SettingsPage, DashboardPage
- Updated storeSelectors.ts useAuthUser() to use React Query
- All production code now uses useUser() hook instead of Zustand store
- Action 4.1.1.3 and 4.1.1.4 complete
2026-01-14 01:45:42 +01:00
senke
76d95ecfb4 incus deployement fully implemented, Makefile updated and make fmt ran 2026-01-13 19:47:57 +01:00
senke
8b6b8afd6c state-ownership: create React Query hook for user (Action 4.1.1.1) 2026-01-11 17:43:07 +01:00
senke
94a0296664 error-propagation: fix AuthErrorMessage tests for ErrorDisplay integration 2026-01-11 17:03:00 +01:00
senke
d704eb98d3 error-propagation: update AuthErrorMessage to use ErrorDisplay component 2026-01-11 17:02:34 +01:00
senke
f74b020d4b api-contracts: install openapi-generator-cli and create type generation script
- Completed Action 1.1.2.1: Installed @openapitools/openapi-generator-cli
- Completed Action 1.1.2.2: Created generate-types.sh script
- Added swagger annotations to cmd/modern-server/main.go
- Regenerated swagger.yaml with proper info section
- Successfully generated TypeScript types to src/types/generated/

The script generates types from veza-backend-api/openapi.yaml using
typescript-axios generator and creates barrel exports.
2026-01-11 16:30:43 +01:00
senke
cc2ebae4dc feat: Visual masterpiece - true light mode & premium UI
🎨 **True Light/Dark Mode**
- Implemented proper light mode with inverted color scheme
- Smooth theme transitions (0.3s ease)
- Light mode colors: white backgrounds, dark text, vibrant accents
- System theme detection with proper class application

🌈 **Enhanced Theme System**
- 4 color themes work in both light and dark modes
- Cyber (cyan/magenta), Ocean (blue/teal), Forest (green/lime), Sunset (orange/purple)
- Theme-specific glassmorphism effects
- Proper contrast in light mode

 **Premium Animations**
- Float, glow-pulse, slide-in, scale-in, rotate-in animations
- Smooth page transitions
- Hover effects with depth (lift, glow, scale)
- Micro-interactions on all interactive elements

🎯 **Visual Polish**
- Enhanced glassmorphism for light/dark modes
- Custom scrollbar with theme colors
- Beautiful text selection
- Focus indicators for accessibility
- Premium utility classes

🔧 **Technical Improvements**
- Updated UIStore to properly apply light/dark classes
- Added data-theme attribute for CSS targeting
- Smooth scroll behavior
- Optimized transitions

The app is now a visual masterpiece with perfect light/dark mode support!
2026-01-11 02:32:21 +01:00
senke
8efbb97e6f stabilisation commit A 2026-01-07 19:39:21 +01:00