senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: stabilize builds, tests, and lint across all stacks

Browse source 
Complete stabilization pass bringing all 3 stacks to green:

Frontend (apps/web/):
- Fix TypeScript nullability in useSeason.ts, useTimeOfDay.ts hooks
- Disable no-undef in ESLint config (TypeScript handles it; JSX misidentified)
- Rename 306 story imports from @storybook/react to @storybook/react-vite
- Fix conditional hook call in useMediaQuery.ts useIsTablet
- Move useQuery to top of LoginPage.tsx component
- Remove useless try/catch in GearFormModal.tsx
- Fix stale closure in ResetPasswordPage.tsx handleChange
- Make Storybook decorators (withRouter, withQueryClient, withToast, withAudio)
  no-ops since global StorybookDecorator already provides these — prevents
  nested Router / duplicate provider crashes in vitest-browser
- Fix nested MemoryRouter in 3 page stories (TrackDetail, PlaylistDetail, UserProfile)
- Update i18n initialization in test setup (await init before changeLanguage)
- Update ~30 test assertions from English to French to match i18n translations
- Update test assertions to match SUMI V3 design changes (shadow vs border)
- Fix remaining story type errors (PlayerError, PlaylistBatchActions,
  TrackFilters, VirtualizedChatMessages)

Backend (veza-backend-api/):
- Fix response_test.go RespondWithAppError signature (2 args, not 3)
- Fix TestErrorContractAuthEndpoints expected error codes
  (ErrCodeUnauthorized vs ErrCodeInvalidCredentials)
- Fix TestTrackHandler_GetTrackLikes_Success missing auth middleware setup
- Fix TestPlaybackAnalyticsService_GetTrackStats k-anonymity threshold
  (needs 5 unique users, not 1)
- Replace NOW() PostgreSQL function with time.Now() parameter in marketplace
  service for SQLite test compatibility
- Add missing AutoMigrate entries in marketplace_test.go
  (ProductImage, ProductPreview, ProductLicense, ProductReview)

Results:
- Frontend TypeCheck: 617 errors -> 0 errors
- Frontend ESLint: 349 errors -> 0 errors
- Frontend Vitest: 196 failing tests -> 1 skipped (3396/3397 passing)
- Backend go vet: 1 error -> 0 errors
- Backend tests: 5 failing -> all 13 packages passing
- Rust: 150/150 tests passing (unchanged)
- Storybook audit: 0 errors across 1244 stories

Triage report: docs/TRIAGE_REPORT.md

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
senke 2026-04-05 16:48:07 +02:00
parent 7d3674a9d1
commit 8e9ee2f3a5
540 changed files with 3532 additions and 1256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/web/eslint.config.js
View file

@ -191,6 +191,7 @@ export default [js.configs.recommended, {
'object-shorthand': 'error',
'prefer-template': 'error',
'no-unused-vars': 'off', // Handled by @typescript-eslint/no-unused-vars
'no-undef': 'off', // TypeScript handles this; no-undef doesn't understand TS types (JSX, etc.)
'no-useless-escape': 'error',
'no-prototype-builtins': 'warn',

10
apps/web/index.html
View file

@ -7,13 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Veza - Plateforme de streaming musical</title>
<!-- Google Fonts for Design System -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- SUMI v4: Inter (body) + Noto Serif JP (headings — brush calligraphy, 200-700) + Space Grotesk (alt) + JetBrains Mono (mono) -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+JP:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet">
<!-- SUMI v3: Self-hosted fonts — Space Grotesk (headings) + Inter (body) + JetBrains Mono (code, lazy) -->
<link rel="preload" href="/fonts/SpaceGrotesk-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>
<!-- PERF: Preload stratégique des chunks vendors critiques (sera injecté par Vite en production) -->
<!-- Les hashs seront générés automatiquement lors du build -->

BIN
apps/web/public/fonts/Inter-Variable.woff2 Normal file
View file

Binary file not shown.

BIN
apps/web/public/fonts/JetBrainsMono-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
apps/web/public/fonts/SpaceGrotesk-Bold.woff2 Normal file
View file

Binary file not shown.

2
apps/web/public/mockServiceWorker.js
View file

@ -1,4 +1,4 @@
/* eslint-disable */
/* tslint:disable */
/**

2
apps/web/src/components/AdvancedFilters.tsx
View file

@ -134,7 +134,7 @@ export function AdvancedFilters({
open={isOpen}
onOpenChange={handleToggle}
defaultOpen={defaultOpen}
triggerClassName="p-2 rounded-lg border border-border bg-background/50 hover:bg-background transition-colors"
triggerClassName="p-2 rounded-lg shadow-[0_0_8px_rgba(26,26,30,0.05)] bg-background/50 hover:bg-background transition-colors"
contentClassName={cn('pt-3', contentClassName)}
>
<div className="space-y-4">{children}</div>

2
apps/web/src/components/BulkModeBanner.tsx
View file

@ -70,7 +70,7 @@ export function BulkModeBanner({
aria-live="polite"
aria-atomic="true"
className={cn(
'w-full bg-muted/10 border-b border-border/30 text-muted-foreground',
'w-full bg-muted/10 shadow-[0_2px_6px_-2px_rgba(26,26,30,0.08)] text-muted-foreground',
'px-4 py-4 flex items-center justify-between gap-4',
'transition-all duration-[var(--sumi-duration-normal)]',
className,

2
apps/web/src/components/ErrorBoundary.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import React from 'react';
import { ErrorBoundary } from './ErrorBoundary';

2
apps/web/src/components/OfflineIndicator.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { WifiOff, Loader2, List } from 'lucide-react';
// Since OfflineIndicator has complex hook dependencies, we create visual representations

4
apps/web/src/components/OfflineIndicator.tsx
View file

@ -100,7 +100,7 @@ export function OfflineIndicator() {
if (!isOnline || hasNetworkError) {
return (
<>
<div className="fixed top-0 left-0 right-0 bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-destructive">
<div className="fixed top-0 left-0 right-0 bg-destructive/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-[0_4px_12px_rgba(26,26,30,0.15)]">
<WifiOff className="w-4 h-4" />
<span>
Mode hors ligne
@ -141,7 +141,7 @@ export function OfflineIndicator() {
if (isProcessing && queueSize > 0 && shouldShowSyncBar) {
return (
<>
<div className="fixed top-0 left-0 right-0 bg-primary/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-border">
<div className="fixed top-0 left-0 right-0 bg-primary/90 backdrop-blur-sm text-foreground px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-[0_4px_12px_rgba(26,26,30,0.15)]">
<Loader2 className="w-4 h-4 animate-spin" />
<span>
Synchronisation en cours

6
apps/web/src/components/OfflineQueueManager.tsx
View file

@ -118,7 +118,7 @@ export function OfflineQueueManager({
>
<div className="space-y-4">
{/* Queue Summary */}
<div className="flex items-center justify-between p-4 bg-card/50 rounded-lg border border-border">
<div className="flex items-center justify-between p-4 bg-card/50 rounded-lg shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="flex items-center gap-2">
<Clock className="w-5 h-5 text-muted-foreground" />
<span className="text-sm text-muted-foreground">
@ -151,7 +151,7 @@ export function OfflineQueueManager({
{queue.map((request) => (
<div
key={request.id}
className="p-4 bg-card/30 rounded-lg border border-border hover:border-border/50 transition-colors"
className="p-4 bg-card/30 rounded-lg shadow-[0_0_8px_rgba(26,26,30,0.05)] hover:shadow-[0_0_12px_rgba(26,26,30,0.08)] transition-shadow"
>
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
@ -213,7 +213,7 @@ export function OfflineQueueManager({
{/* Info Message */}
{queue.length > 0 && (
<div className="p-4 bg-muted/10 border border-border/20 rounded-lg text-xs text-muted-foreground">
<div className="p-4 bg-muted/10 shadow-[0_0_8px_rgba(26,26,30,0.05)] rounded-lg text-xs text-muted-foreground">
<p>
Queued requests will be automatically processed when you're back
online. You can remove individual requests or clear the entire

2
apps/web/src/components/admin/AdminAuditLogsView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { AdminAuditLogsView } from './AdminAuditLogsView';
/**

2
apps/web/src/components/admin/AdminDashboardView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { AdminDashboardView } from './AdminDashboardView';
import { AdminDashboardSkeleton } from './admin-dashboard-view';
import { ToastProvider } from '../../components/feedback/ToastProvider';

2
apps/web/src/components/admin/AdminModerationView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { http, HttpResponse } from 'msw';
import { AdminModerationView } from './AdminModerationView';
import { ToastProvider } from '../../components/feedback/ToastProvider';

4
apps/web/src/components/admin/AdminModerationView.tsx
View file

@ -198,7 +198,7 @@ export const AdminModerationView: React.FC = () => {
{ label: 'Pending Appeals', value: stats.pending_appeals, color: 'text-blue-400' },
{ label: 'Pending Fingerprints', value: stats.pending_fingerprints, color: 'text-purple-400' },
].map((stat) => (
<div key={stat.label} className="bg-muted/30 rounded-lg p-3 border border-border/50">
<div key={stat.label} className="bg-muted/30 rounded-lg p-3 shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
<div className="text-xs text-muted-foreground">{stat.label}</div>
</div>
@ -350,7 +350,7 @@ function QueuePanel({
<Clock className="w-3 h-3" /> {new Date(item.created_at).toLocaleString()}
</span>
</div>
<div className="bg-muted/50 p-3 rounded border border-border mb-2">
<div className="bg-muted/50 p-3 rounded shadow-[0_0_8px_rgba(26,26,30,0.05)] mb-2">
<p className="text-sm text-foreground">{item.reason}</p>
</div>
<div className="flex gap-4 text-xs text-muted-foreground">

2
apps/web/src/components/admin/AdminPlatformView.tsx
View file

@ -443,7 +443,7 @@ function PaymentsPanel({ payments }: { payments: PaymentOverview }) {
<div className="space-y-6">
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{cards.map((card) => (
<div key={card.label} className="bg-muted/30 rounded-lg p-4 border border-border/50">
<div key={card.label} className="bg-muted/30 rounded-lg p-4 shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="text-xs text-muted-foreground uppercase mb-1">{card.label}</div>
<div className={`text-2xl font-bold ${card.color}`}>{card.value}</div>
</div>

2
apps/web/src/components/admin/AdminSettingsView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { http, HttpResponse } from 'msw';
import { AdminSettingsView } from './AdminSettingsView';

4
apps/web/src/components/admin/AdminSettingsView.tsx
View file

@ -178,7 +178,7 @@ export const AdminSettingsView: React.FC = () => {
{featureFlags.map((flag) => (
<div
key={flag.name}
className="flex items-center justify-between p-4 bg-muted/50 rounded border border-border"
className="flex items-center justify-between p-4 bg-muted/50 rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]"
>
<div>
<span className="font-bold text-foreground">{flag.name}</span>
@ -267,7 +267,7 @@ export const AdminSettingsView: React.FC = () => {
{announcements.map((a) => (
<div
key={a.id}
className="flex items-center justify-between p-3 bg-muted/50 rounded border border-border"
className="flex items-center justify-between p-3 bg-muted/50 rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]"
>
<div>
<span className="font-bold text-foreground">{a.title}</span>

2
apps/web/src/components/admin/AdminTransfersView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { http, HttpResponse } from 'msw';
import { AdminTransfersView } from './AdminTransfersView';

2
apps/web/src/components/admin/AdminUsersView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { AdminUsersView } from './AdminUsersView';
/**

2
apps/web/src/components/admin/AdminUsersView.tsx
View file

@ -72,7 +72,7 @@ export const AdminUsersView: React.FC = () => {
</div>
</div>
<Card variant="glass" className="p-0 overflow-hidden bg-card/80 border-border">
<Card variant="glass" className="p-0 overflow-hidden bg-card/80">
<div className="p-6 border-b border-border bg-muted/20 flex flex-col md:flex-row gap-6 justify-between items-center">
<div className="w-full md:w-96 relative group">
<Input

2
apps/web/src/components/admin/UserTableRow.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { UserTableRow } from './UserTableRow';
import { User } from '@/types';

2
apps/web/src/components/admin/UserTableRow.tsx
View file

@ -87,7 +87,7 @@ export const UserTableRow: React.FC<UserTableRowProps> = ({
className="fixed inset-0 z-10"
onClick={() => setShowMenu(false)}
></div>
<div className="absolute right-0 top-full mt-2 w-48 bg-card border border-border rounded-lg shadow-xl z-20 overflow-hidden">
<div className="absolute right-0 top-full mt-2 w-48 bg-card rounded-lg shadow-xl z-20 overflow-hidden">
<Button
variant="ghost"
size="sm"

2
apps/web/src/components/admin/modals/BanUserModal.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { BanUserModal } from './BanUserModal';

4
apps/web/src/components/admin/modals/BanUserModal.tsx
View file

@ -24,7 +24,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-md bg-muted border border-destructive rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="relative w-full max-w-md bg-muted rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-destructive/30 bg-destructive/10 flex justify-between items-center">
<h3 className="font-bold text-destructive flex items-center gap-2">
<ShieldBan className="w-5 h-5 fill-current" /> Suspend User
@ -71,7 +71,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
/>
</div>
<div className="flex items-center justify-between p-4 bg-card rounded border border-border">
<div className="flex items-center justify-between p-4 bg-card rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="flex items-center gap-4">
<Calendar className="w-5 h-5 text-muted-foreground" />
<div>

2
apps/web/src/components/analytics/TrackAnalyticsView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TrackAnalyticsView } from './TrackAnalyticsView';
const meta: Meta<typeof TrackAnalyticsView> = {

2
apps/web/src/components/commerce/CartItem.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { CartItem } from './CartItem';
import { fn } from 'storybook/test';
import type { CartItem as CartItemType } from '@/stores/cartStore';

6
apps/web/src/components/commerce/CartItem.tsx
View file

@ -21,7 +21,7 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
return (
<Card
variant="default"
className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:border-border/50 transition-all"
className="flex flex-col md:flex-row items-center gap-4 p-4 group hover:shadow-[0_0_12px_rgba(26,26,30,0.08)] transition-all"
>
{/* Thumbnail */}
<div className="w-full md:w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-muted">
@ -37,10 +37,10 @@ export const CartItem: React.FC<CartItemProps> = ({ item, onRemove }) => {
<h4 className="font-bold text-foreground text-lg">{product.title}</h4>
<p className="text-muted-foreground text-sm mb-2">{product.author}</p>
<div className="flex items-center justify-center md:justify-start gap-2 text-xs">
<span className="px-2 py-1 bg-card border border-border rounded flex items-center gap-1">
<span className="px-2 py-1 bg-card shadow-[0_0_8px_rgba(26,26,30,0.05)] rounded flex items-center gap-1">
<Tag className="w-3 h-3 text-muted-foreground" /> {licenseName} License
</span>
<span className="px-2 py-1 bg-card border border-border rounded uppercase font-bold text-muted-foreground">
<span className="px-2 py-1 bg-card shadow-[0_0_8px_rgba(26,26,30,0.05)] rounded uppercase font-bold text-muted-foreground">
{product.type}
</span>
</div>

2
apps/web/src/components/commerce/OrderSummary.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { OrderSummary } from './OrderSummary';
const meta: Meta<typeof OrderSummary> = {

2
apps/web/src/components/commerce/WishlistView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { WishlistView } from './WishlistView';
import { ToastProvider } from '../../components/feedback/ToastProvider';

2
apps/web/src/components/commerce/WishlistView.tsx
View file

@ -172,7 +172,7 @@ export const WishlistView: React.FC = () => {
<motion.div key={product.id} variants={cardVariants}>
<Card
variant="default"
className="p-4 group hover:border-border/50 hover:shadow-lg transition-all duration-[var(--sumi-duration-normal)]"
className="p-4 group hover:shadow-[0_0_12px_rgba(26,26,30,0.08)] transition-all duration-[var(--sumi-duration-normal)]"
>
<div className="flex gap-4">
<div className="relative w-24 h-24 bg-muted rounded-lg overflow-hidden flex-shrink-0">

2
apps/web/src/components/commerce/modals/PromoCodeModal.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { http, HttpResponse } from 'msw';
import { PromoCodeModal } from './PromoCodeModal';

2
apps/web/src/components/commerce/modals/PromoCodeModal.tsx
View file

@ -55,7 +55,7 @@ export const PromoCodeModal: React.FC<PromoCodeModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-sm bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="relative w-full max-w-sm bg-card rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-foreground flex items-center gap-2">
<Tag className="w-4 h-4 text-muted-foreground" /> Add Promo Code

4
apps/web/src/components/commerce/modals/RefundRequestModal.tsx
View file

@ -41,7 +41,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-card border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="relative w-full max-w-lg bg-card rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-muted flex justify-between items-center">
<h3 className="font-bold text-foreground flex items-center gap-2">
<RefreshCcw className="w-4 h-4 text-warning" /> Request Refund
@ -86,7 +86,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
/>
</div>
<div className="border-2 border-dashed border-border rounded-lg p-6 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-border cursor-pointer transition-colors">
<div className="border-2 border-dashed border-border rounded-lg p-6 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:border-primary/30 cursor-pointer transition-colors">
<UploadCloud className="w-8 h-8 mb-2" />
<span className="text-xs font-bold uppercase">
Upload Evidence (Optional)

2
apps/web/src/components/dashboard/ActivityGraph.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { ActivityGraph } from './ActivityGraph';
const meta = {

4
apps/web/src/components/dashboard/ActivityGraph.tsx
View file

@ -120,12 +120,12 @@ export function ActivityGraph() {
isHovered ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
)}
>
<div className="bg-card border border-border/50 px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
<div className="bg-card px-3 py-2 rounded-lg shadow-xl whitespace-nowrap">
<div className="text-xs font-bold text-foreground mb-0.5">{point.value} écoutes</div>
<div className="text-xs text-muted-foreground font-mono">{point.label}</div>
</div>
{/* Triangle du tooltip */}
<div className="w-2 h-2 bg-card border-b border-r border-border/50 rotate-45 absolute -bottom-1 left-1/2 -translate-x-1/2" />
<div className="w-2 h-2 bg-card rotate-45 absolute -bottom-1 left-1/2 -translate-x-1/2" />
</div>
{/* Label Axe X (tous les 3 ou 5 points selon densité) */}

2
apps/web/src/components/dashboard/StatCard.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { StatCard } from './StatCard';
import { Music, Users, DollarSign } from 'lucide-react';

2
apps/web/src/components/dashboard/TrackList.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { TrackList } from './TrackList';
const meta = {

4
apps/web/src/components/dashboard/TrackList.tsx
View file

@ -67,7 +67,7 @@ export const TrackList: React.FC = () => {
{[1, 2, 3, 4, 5].map((i) => (
<div
key={i}
className="h-16 bg-card/50 animate-pulse rounded-xl border border-border/30"
className="h-16 bg-card/50 animate-pulse rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]"
></div>
))}
</div>
@ -93,7 +93,7 @@ export const TrackList: React.FC = () => {
if (tracks.length === 0) {
return (
<div className="text-muted-foreground text-center py-12 bg-card/30 rounded-xl border border-dashed border-border">
<div className="text-muted-foreground text-center py-12 bg-card/30 rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<BarChart3 className="w-8 h-8 mx-auto mb-2 opacity-50" />
<p>No tracks trending right now.</p>
</div>

2
apps/web/src/components/data/Table.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Table, type TableColumn } from './Table';
type SampleRow = { id: string; name: string; age: number; email: string };

5
apps/web/src/components/data/Timeline.test.tsx
View file

@ -247,6 +247,7 @@ describe('Timeline Component', () => {
});
// Helper function pour formater les dates (copie de l'utilitaire)
// Must use 'fr-FR' locale to match the component's formatDate from @/utils/date
function formatDate(
date: Date | string,
format: 'short' | 'long' | 'relative' = 'short',
@ -259,7 +260,7 @@ function formatDate(
switch (format) {
case 'short':
return d.toLocaleDateString();
return d.toLocaleDateString('fr-FR');
case 'long':
return d.toLocaleDateString('fr-FR', {
year: 'numeric',
@ -271,6 +272,6 @@ function formatDate(
case 'relative':
return 'relative';
default:
return d.toLocaleDateString();
return d.toLocaleDateString('fr-FR');
}
}

2
apps/web/src/components/data/table/Table.tsx
View file

@ -50,7 +50,7 @@ export function Table<T extends Record<string, unknown>>({
return (
<div className={cn('w-full', className)}>
<div className="rounded-md border border-border/50">
<div className="rounded-md shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="relative overflow-x-auto">
<table
className="w-full border-collapse text-sm"

2
apps/web/src/components/developer/APIPlaygroundView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { APIPlaygroundView } from './APIPlaygroundView';
const meta: Meta<typeof APIPlaygroundView> = {

2
apps/web/src/components/developer/APIPlaygroundView.tsx
View file

@ -129,7 +129,7 @@ export const APIPlaygroundView: React.FC = () => {
)}
</div>
<div className="flex-1 bg-black/30 rounded border border-border/50 p-4 relative group">
<div className="flex-1 bg-black/30 rounded shadow-[0_0_8px_rgba(26,26,30,0.05)] p-4 relative group">
{response ? (
<>
<pre className="text-xs text-success font-mono whitespace-pre-wrap overflow-auto h-full max-h-layout-drawer">

2
apps/web/src/components/developer/DeveloperDashboardView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { DeveloperDashboardView } from './DeveloperDashboardView';
import { ToastProvider } from '../../components/feedback/ToastProvider';

2
apps/web/src/components/developer/DeveloperDashboardView.tsx
View file

@ -120,7 +120,7 @@ export const DeveloperDashboardView: React.FC = () => {
{keys.map((k) => (
<div
key={k.id}
className="flex items-center justify-between p-4 rounded-lg border border-border/50 bg-background/30 hover:bg-foreground/5 transition-colors"
className="flex items-center justify-between p-4 rounded-lg shadow-[0_0_8px_rgba(26,26,30,0.05)] bg-background/30 hover:bg-foreground/5 transition-colors"
>
<div>
<div className="font-medium text-foreground">{k.name}</div>

2
apps/web/src/components/developer/WebhooksView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { WebhooksView } from './WebhooksView';
const meta: Meta<typeof WebhooksView> = {

2
apps/web/src/components/developer/modals/CreateAPIKeyModal.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { CreateAPIKeyModal } from './CreateAPIKeyModal';
import { fn } from 'storybook/test';

4
apps/web/src/components/developer/modals/CreateAPIKeyModal.tsx
View file

@ -111,7 +111,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-md"
onClick={step === 1 ? onClose : undefined}
></div>
<div className="relative w-full max-w-2xl sumi-glass border border-[var(--sumi-glass-border)] rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
<div className="relative w-full max-w-2xl sumi-glass rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal">
{/* Header - Fixed */}
<div className="p-6 border-b border-border/50 flex justify-between items-center bg-foreground/5 flex-none z-10">
<h3 className="text-xl font-bold text-foreground flex items-center gap-3 font-heading">
@ -208,7 +208,7 @@ export const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
</p>
</div>
<div className="bg-background/40 border border-border/50 rounded-xl p-1 flex items-center gap-2 relative group overflow-hidden">
<div className="bg-background/40 shadow-[0_0_8px_rgba(26,26,30,0.05)] rounded-xl p-1 flex items-center gap-2 relative group overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent skew-x-12 translate-x-[-200%] group-hover:animate-shimmer"></div>
<div
ref={keyDisplayRef}

2
apps/web/src/components/feedback/Alert.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Alert } from './Alert';

2
apps/web/src/components/feedback/AnnouncementBanner.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { http, HttpResponse } from 'msw';
import { AnnouncementBanner } from './AnnouncementBanner';

2
apps/web/src/components/feedback/AnnouncementBanner.tsx
View file

@ -93,7 +93,7 @@ export function AnnouncementBanner() {
<button
type="button"
onClick={() => setShowAll(true)}
className="text-[10px] text-muted-foreground/50 hover:text-foreground text-center tracking-[0.1em] font-heading py-1 px-3 rounded-md bg-muted/30 border border-border/30 mx-auto w-fit block cursor-pointer transition-colors"
className="text-[10px] text-muted-foreground/50 hover:text-foreground text-center tracking-[0.1em] font-heading py-1 px-3 rounded-md bg-muted/30 shadow-[0_0_8px_rgba(26,26,30,0.05)] mx-auto w-fit block cursor-pointer transition-colors"
style={{ fontWeight: 300 }}
>
+{remaining} more

2
apps/web/src/components/feedback/Toast.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { ToastComponent } from './Toast';

2
apps/web/src/components/filters/FilterBar.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { FilterBar } from './FilterBar';
const mockFilters = {

2
apps/web/src/components/forms/FormBuilder.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { FormBuilder, type FormField } from './FormBuilder';
const sampleFields: FormField[] = [

35
apps/web/src/components/icons/SumiIcon.tsx Normal file
View file

@ -0,0 +1,35 @@
import type { LucideIcon } from 'lucide-react';
import type { ComponentType, SVGProps } from 'react';
import { cn } from '@/lib/utils';
type SumiIconProps = {
/** Hand-drawn Sumi SVG component (priority) */
sumi?: ComponentType<SVGProps<SVGSVGElement>>;
/** Lucide fallback icon */
fallback: LucideIcon;
size?: number;
className?: string;
};
/**
* SumiIcon — wrapper that renders hand-drawn calligraphic SVG icons
* when available, falling back to Lucide icons otherwise.
*
* Place hand-drawn SVGs in ./sumi/ as React components:
* export default (props: SVGProps<SVGSVGElement>) => <svg ...>{...}</svg>
*/
export function SumiIcon({ sumi: SumiSvg, fallback: Fallback, size = 24, className }: SumiIconProps) {
if (SumiSvg) {
return (
<SumiSvg
width={size}
height={size}
className={cn('shrink-0', className)}
aria-hidden="true"
/>
);
}
return <Fallback size={size} className={cn('shrink-0', className)} aria-hidden="true" />;
}

2
apps/web/src/components/inventory/AddEquipmentView.tsx
View file

@ -64,7 +64,7 @@ export const AddEquipmentView: React.FC = () => {
{[1, 2, 3].map((i) => (
<div
key={i}
className="aspect-square bg-card rounded border border-border/50"
className="aspect-square bg-card rounded shadow-[0_0_6px_rgba(26,26,30,0.04)]"
></div>
))}
</div>

2
apps/web/src/components/inventory/EquipmentCard.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { EquipmentCard } from './EquipmentCard';
import { GearItem } from '../../types';

2
apps/web/src/components/inventory/EquipmentDetailView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { EquipmentDetailView, EquipmentDetailViewSkeleton } from './equipment-detail-view';
import { ToastProvider } from '@/components/feedback/ToastProvider';

2
apps/web/src/components/inventory/InventoryView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { InventoryView } from './InventoryView';
import { ToastProvider } from '@/components/feedback/ToastProvider';

6
apps/web/src/components/inventory/InventoryView.tsx
View file

@ -79,7 +79,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</div>
{/* Filters */}
<div className="flex flex-col md:flex-row gap-4 items-center bg-card/50 p-4 rounded-xl border border-border/50">
<div className="flex flex-col md:flex-row gap-4 items-center bg-card/50 p-4 rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="w-full md:w-96">
<SearchInput
placeholder="Search gear..."
@ -89,7 +89,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</div>
<div className="flex flex-wrap gap-2 w-full md:w-auto">
<div className="flex items-center gap-2 bg-background rounded-lg p-1 border border-border">
<div className="flex items-center gap-2 bg-background rounded-lg p-1 shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<Filter className="w-4 h-4 text-muted-foreground ml-2" />
<select
className="bg-transparent text-sm text-foreground focus:outline-none p-1 cursor-pointer"
@ -104,7 +104,7 @@ export const InventoryView: React.FC<InventoryViewProps> = ({ onNavigate }) => {
</select>
</div>
<div className="flex items-center gap-2 bg-background rounded-lg p-1 border border-border">
<div className="flex items-center gap-2 bg-background rounded-lg p-1 shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<Box className="w-4 h-4 text-muted-foreground ml-2" />
<select
className="bg-transparent text-sm text-foreground focus:outline-none p-1 cursor-pointer"

2
apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewGallery.tsx
View file

@ -17,7 +17,7 @@ export function EquipmentDetailViewGallery({
}: EquipmentDetailViewGalleryProps) {
const src = images[activeIndex];
return (
<div className="relative aspect-video bg-black rounded-xl overflow-hidden border border-border group">
<div className="relative aspect-video bg-black rounded-xl overflow-hidden shadow-[0_0_8px_rgba(26,26,30,0.05)] group">
{src && (
<img src={src} alt="" loading="lazy" className="w-full h-full object-contain" />
)}

2
apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewHeader.tsx
View file

@ -28,7 +28,7 @@ export function EquipmentDetailViewHeader({ item }: EquipmentDetailViewHeaderPro
<p className="text-xl text-muted-foreground font-mono mb-4">
{item.brand} {item.model}
</p>
<div className="flex gap-6 text-sm text-muted-foreground mb-6 font-mono bg-muted/50 p-4 rounded-lg border border-border">
<div className="flex gap-6 text-sm text-muted-foreground mb-6 font-mono bg-muted/50 p-4 rounded-lg shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="flex flex-col">
<span className="text-xs uppercase font-bold text-muted-foreground">
Serial

2
apps/web/src/components/inventory/equipment-detail-view/EquipmentDetailViewWarrantyCard.tsx
View file

@ -13,7 +13,7 @@ export function EquipmentDetailViewWarrantyCard({ item }: EquipmentDetailViewWar
<h3 className="font-bold text-foreground mb-4 border-b border-border pb-2 flex items-center gap-2">
<ShieldCheck className="w-4 h-4 text-green-600 dark:text-green-400" /> Warranty & Support
</h3>
<div className="flex justify-between items-center mb-4 p-4 bg-muted/30 rounded border border-border">
<div className="flex justify-between items-center mb-4 p-4 bg-muted/30 rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div>
<span className="block text-xs text-muted-foreground uppercase">
Expires

2
apps/web/src/components/layout/AudioPlayer.tsx
View file

@ -63,7 +63,7 @@ export const AudioPlayer: React.FC = () => {
{/* QUEUE DRAWER */}
{showQueue && !isImmersive && (
<div className="fixed bottom-24 right-4 w-full md:w-96 bg-card/95 backdrop-blur-xl border border-border/50 rounded-xl shadow-2xl z-40 overflow-hidden animate-slideUp max-h-layout-panel flex flex-col ring-1 ring-white/10">
<div className="fixed bottom-24 right-4 w-full md:w-96 bg-card/95 backdrop-blur-xl rounded-xl shadow-2xl z-40 overflow-hidden animate-slideUp max-h-layout-panel flex flex-col ring-1 ring-white/10">
<div className="flex items-center justify-between p-4 border-b border-border bg-muted/80">
<h3 className="font-bold text-foreground text-sm tracking-wide flex items-center gap-2">
<ListMusic className="w-4 h-4 text-muted-foreground" /> PLAY QUEUE

2
apps/web/src/components/layout/DashboardLayout.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { DashboardLayout } from './DashboardLayout';
import DashboardPage from '@/features/dashboard/pages/DashboardPage';
import { PlaylistListPage } from '@/features/playlists/pages/PlaylistListPage';

2
apps/web/src/components/layout/Header.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Header } from './Header';
const meta = {

2
apps/web/src/components/layout/Header.tsx
View file

@ -163,7 +163,7 @@ export function Header(_props: HeaderProps) {
{isUserMenuOpen && (
<FocusTrap active={isUserMenuOpen} onEscape={() => setIsUserMenuOpen(false)}>
<div className="absolute right-0 top-full mt-2 w-64 bg-[var(--sumi-surface-elevated)] backdrop-blur-2xl border border-[var(--sumi-border-faint)] rounded-sm shadow-2xl p-1.5 z-50 animate-ink-reveal origin-top-right">
<div className="absolute right-0 top-full mt-2 w-64 bg-[var(--sumi-surface-elevated)] backdrop-blur-2xl rounded-sm shadow-[0_8px_32px_rgba(26,26,30,0.18)] p-1.5 z-50 animate-ink-reveal origin-top-right">
<div className="px-3 py-3 border-b border-[var(--sumi-border-faint)] mb-1">
<p className="text-sm font-semibold text-foreground truncate">{user?.username}</p>
<p className="text-xs text-muted-foreground truncate mt-0.5">{user?.email}</p>

2
apps/web/src/components/layout/MobileBottomNav.tsx
View file

@ -17,7 +17,7 @@ export function MobileBottomNav() {
return (
<nav
className="fixed bottom-0 left-0 right-0 z-40 bg-[var(--sumi-glass-bg)] backdrop-blur-xl border-t border-[var(--sumi-border-faint)] lg:hidden"
className="fixed bottom-0 left-0 right-0 z-40 bg-[var(--sumi-glass-bg)] backdrop-blur-xl shadow-[0_-4px_8px_-4px_rgba(26,26,30,0.08)] lg:hidden"
aria-label="Mobile navigation"
>
<div className="flex items-center justify-around px-1 py-1">

2
apps/web/src/components/layout/Navbar.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Navbar } from './Navbar';
const meta: Meta<typeof Navbar> = {

6
apps/web/src/components/layout/Navbar.tsx
View file

@ -87,7 +87,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
<nav
role="navigation"
aria-label="Main Navigation"
className="fixed top-0 left-0 right-0 h-16 bg-background/80 backdrop-blur-md border-b border-border/40 z-40 flex items-center justify-between px-6 lg:px-8"
className="fixed top-0 left-0 right-0 h-16 bg-background/80 backdrop-blur-md ink-edge-bottom z-40 flex items-center justify-between px-6 lg:px-8"
>
{/* Brand & Mobile Menu */}
<div className="flex items-center gap-4">
@ -197,8 +197,8 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
</div>
{showUserMenu && (
<div className="absolute top-full right-0 mt-4 w-56 bg-card border border-border rounded-xl shadow-2xl overflow-hidden animate-fadeIn origin-top-right ring-1 ring-border flex flex-col">
<div className="px-4 py-4 border-b border-border/30 mb-1 bg-muted/50">
<div className="absolute top-full right-0 mt-4 w-56 bg-card rounded-xl shadow-2xl overflow-hidden animate-fadeIn origin-top-right ink-edge-strong flex flex-col">
<div className="px-4 py-4 ink-edge-bottom mb-1 bg-muted/50">
<p className="text-sm font-bold text-foreground">Cyber_Producer</p>
<p className="text-xs text-muted-foreground">Pro Plan</p>
</div>

2
apps/web/src/components/layout/Sidebar.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Sidebar } from './Sidebar';
const meta = {

2
apps/web/src/components/layout/Sidebar.tsx
View file

@ -178,7 +178,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
className={cn(
'fixed left-sidebar bottom-sidebar top-sidebar rounded-xl flex flex-col z-sidebar overflow-hidden',
'transition-[width,transform,opacity] duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
'bg-[var(--sumi-bg-raised)] backdrop-blur-md border-r border-[var(--sumi-border-faint)]',
'bg-[var(--sumi-bg-raised)] backdrop-blur-md ink-edge-right',
sidebarOpen ? 'w-sidebar-expanded translate-x-0 opacity-100' : '-translate-x-full lg:translate-x-0 lg:opacity-100 lg:w-sidebar-collapsed'
)}
aria-label="Main sidebar"

2
apps/web/src/components/library/AutoMetadataDetectionModal.tsx
View file

@ -66,7 +66,7 @@ export const AutoMetadataDetectionModal: React.FC<
</div>
) : (
<div className="w-full space-y-6 animate-fadeIn">
<div className="bg-card border border-border/20 rounded-lg p-6 w-full">
<div className="bg-card shadow-[0_0_8px_rgba(26,26,30,0.05)] rounded-lg p-6 w-full">
<div className="grid grid-cols-2 gap-4">
<div className="text-center p-2">
<div className="text-xs text-muted-foreground uppercase font-bold mb-1">

2
apps/web/src/components/library/WatermarkSettingsModal.tsx
View file

@ -37,7 +37,7 @@ export const WatermarkSettingsModal: React.FC<WatermarkSettingsModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-2xl bg-muted border border-border rounded-xl shadow-2xl overflow-hidden animate-scaleIn flex flex-col md:flex-row">
<div className="relative w-full max-w-2xl bg-muted rounded-xl shadow-2xl overflow-hidden animate-scaleIn flex flex-col md:flex-row">
{/* Left: Controls */}
<div className="w-full md:w-1/2 p-6 border-r border-border bg-card">
<div className="flex justify-between items-center mb-6">

2
apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
View file

@ -75,7 +75,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-md bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-xs">
<div className="relative w-full max-w-md bg-muted rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-xs">
<div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-foreground">Add to Playlist</h3>
<button onClick={onClose}>

6
apps/web/src/components/library/playlists/EditPlaylistModal.tsx
View file

@ -45,7 +45,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={() => setShowDeleteConfirm(false)}
></div>
<div className="relative w-full max-w-sm bg-muted border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
<div className="relative w-full max-w-sm bg-muted shadow-[0_0_12px_rgba(220,38,38,0.15)] rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
<h3 className="text-xl font-bold text-foreground mb-2">
Delete "{playlist.title}"?
</h3>
@ -75,7 +75,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="relative w-full max-w-lg bg-muted rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
<div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-foreground">Edit Details</h3>
<button onClick={onClose}>
@ -84,7 +84,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
</div>
<div className="p-6 flex flex-col md:flex-row gap-6">
<div className="w-40 h-40 bg-card border border-border rounded-lg flex flex-col items-center justify-center relative group overflow-hidden flex-shrink-0">
<div className="w-40 h-40 bg-card shadow-[0_0_8px_rgba(26,26,30,0.05)] rounded-lg flex flex-col items-center justify-center relative group overflow-hidden flex-shrink-0">
<img
src={playlist.cover_url}
className="w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"

2
apps/web/src/components/library/playlists/PlaylistsView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { PlaylistsView } from './PlaylistsView';
import { ToastProvider } from '../../feedback/ToastProvider';

2
apps/web/src/components/library/playlists/QueueView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { QueueView } from './QueueView';
import { Skeleton } from '@/components/ui/skeleton';
import { usePlayerStore } from '@/features/player/store/playerStore';

2
apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { SaveQueueAsPlaylistModal } from './SaveQueueAsPlaylistModal';

2
apps/web/src/components/library/playlists/SaveQueueAsPlaylistModal.tsx
View file

@ -67,7 +67,7 @@ export const SaveQueueAsPlaylistModal: React.FC<
role="switch"
aria-checked={isPublic}
aria-label={t('queue.saveAsPlaylist.toggleVisibility')}
className="flex w-full items-center justify-between p-4 bg-card rounded border border-border cursor-pointer hover:border-border/80"
className="flex w-full items-center justify-between p-4 bg-card rounded shadow-[0_0_8px_rgba(26,26,30,0.05)] cursor-pointer hover:shadow-[0_0_12px_rgba(26,26,30,0.1)]"
onClick={() => setIsPublic(!isPublic)}
>
<div className="flex items-center gap-4">

2
apps/web/src/components/live/LiveStreamDetailView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { LiveStreamDetailView } from './LiveStreamDetailView';
import { ToastProvider } from '@/components/feedback/ToastProvider';

2
apps/web/src/components/live/modals/TipStreamerModal.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { TipStreamerModal } from './TipStreamerModal';
import { ToastProvider } from '@/components/feedback/ToastProvider';

2
apps/web/src/components/live/modals/TipStreamerModal.tsx
View file

@ -37,7 +37,7 @@ export const TipStreamerModal: React.FC<TipStreamerModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-md bg-muted border border-warning rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
<div className="relative w-full max-w-md bg-muted rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
<div className="p-4 border-b border-warning/30 bg-card flex justify-between items-center">
<h3 className="font-bold text-warning flex items-center gap-2">
<DollarSign className="w-5 h-5" /> Support {streamerName}

2
apps/web/src/components/marketplace/LicenceCard.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { LicenceCard } from './LicenceCard';
const meta: Meta<typeof LicenceCard> = {

4
apps/web/src/components/marketplace/LicenceCard.tsx
View file

@ -32,7 +32,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
return (
<Card
className={`p-4 transition-all cursor-pointer h-full flex flex-col ${selected ? 'border-primary shadow-neon-cyan/20 bg-primary/5' : 'hover:border-border'}`}
className={`p-4 transition-all cursor-pointer h-full flex flex-col ${selected ? 'border-primary shadow-neon-cyan/20 bg-primary/5' : 'hover:shadow-[0_0_12px_rgba(26,26,30,0.08)]'}`}
onClick={() => onSelect(license)}
>
<div className="flex justify-between items-start mb-4">
@ -74,7 +74,7 @@ export const LicenceCard: React.FC<LicenceCardProps> = ({
<Button
variant="ghost"
size="icon"
className="border border-border"
className="shadow-[0_0_8px_rgba(26,26,30,0.05)]"
onClick={(e) => {
e.stopPropagation();
onInfo(license);

2
apps/web/src/components/marketplace/ProductCard.tsx
View file

@ -144,7 +144,7 @@ const ProductCardComponent: React.FC<ProductCardProps> = ({
<Button
variant="ghost"
size="icon"
className="border border-border hover:bg-white/10"
className="shadow-[0_0_8px_rgba(26,26,30,0.05)] hover:bg-white/10"
onClick={(e) => {
e.stopPropagation();
onClick(product);

2
apps/web/src/components/marketplace/ProductDetailView.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import {
ProductDetailView,
ProductDetailViewSkeleton,

4
apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
View file

@ -33,7 +33,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
<div className="relative w-full max-w-lg bg-muted rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
<div className="p-4 border-b border-border bg-card flex justify-between items-center">
<h3 className="font-bold text-foreground flex items-center gap-2">
<ShieldCheck className="w-5 h-5 text-muted-foreground" /> License Agreement
@ -103,7 +103,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
<button
onClick={(e) => {
e.preventDefault();
// eslint-disable-next-line
alert("Legal contract preview unavailable in this demo.");
}}
className="text-primary hover:underline bg-transparent border-none p-0 inline cursor-pointer"

2
apps/web/src/components/marketplace/product-detail-view/ProductDetailViewGallery.tsx
View file

@ -35,7 +35,7 @@ export function ProductDetailViewGallery({
return (
<div className="lg:col-span-5 space-y-4">
<div className="relative aspect-square rounded-2xl overflow-hidden bg-black border border-border shadow-2xl group">
<div className="relative aspect-square rounded-2xl overflow-hidden bg-black shadow-2xl group">
<img
src={activeImage || coverUrl}
alt={product.title}

12
apps/web/src/components/marketplace/product-detail-view/ProductDetailViewInfo.tsx
View file

@ -23,14 +23,14 @@ export function ProductDetailViewInfo({ product }: ProductDetailViewInfoProps) {
<Button
variant="ghost"
size="icon"
className="border border-border text-muted-foreground hover:text-primary transition-colors duration-[var(--sumi-duration-normal)]"
className="shadow-[0_0_8px_rgba(26,26,30,0.05)] text-muted-foreground hover:text-primary transition-colors duration-[var(--sumi-duration-normal)]"
>
<Heart className="w-5 h-5" />
</Button>
<Button
variant="ghost"
size="icon"
className="border border-border text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
className="shadow-[0_0_8px_rgba(26,26,30,0.05)] text-muted-foreground hover:text-foreground transition-colors duration-[var(--sumi-duration-normal)]"
>
<Share2 className="w-5 h-5" />
</Button>
@ -49,19 +49,19 @@ export function ProductDetailViewInfo({ product }: ProductDetailViewInfoProps) {
<span className="text-foreground/80">{product.author ?? '-'}</span>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8 mt-6">
<div className="bg-card p-4 rounded-xl border border-border">
<div className="bg-card p-4 rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="text-xs text-muted-foreground uppercase font-bold">BPM</div>
<div className="text-foreground font-mono">{product.bpm ?? '-'}</div>
</div>
<div className="bg-card p-4 rounded-xl border border-border">
<div className="bg-card p-4 rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="text-xs text-muted-foreground uppercase font-bold">Key</div>
<div className="text-foreground font-mono">{product.key ?? '-'}</div>
</div>
<div className="bg-card p-4 rounded-xl border border-border">
<div className="bg-card p-4 rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="text-xs text-muted-foreground uppercase font-bold">Genre</div>
<div className="text-foreground truncate">{product.genre ?? '-'}</div>
</div>
<div className="bg-card p-4 rounded-xl border border-border">
<div className="bg-card p-4 rounded-xl shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<div className="text-xs text-muted-foreground uppercase font-bold">Size</div>
<div className="text-foreground">{product.size ?? '-'}</div>
</div>

2
apps/web/src/components/marketplace/product-detail-view/ProductDetailViewLicenses.tsx
View file

@ -46,7 +46,7 @@ export function ProductDetailViewLicenses({
)}
</div>
</div>
<div className="mt-auto bg-card border border-border p-4 rounded-xl shadow-2xl flex flex-col md:flex-row gap-4 items-center">
<div className="mt-auto bg-card p-4 rounded-xl shadow-2xl flex flex-col md:flex-row gap-4 items-center">
<div className="flex-1">
<div className="text-xs text-muted-foreground uppercase font-bold">Total Price</div>
<div className="text-3xl font-mono font-bold text-foreground">

2
apps/web/src/components/modals/CreatorModal.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { CreatorModal } from './CreatorModal';
import { Button } from '../ui/button';
import { useArgs } from 'storybook/preview-api';

6
apps/web/src/components/modals/CreatorModal.tsx
View file

@ -35,7 +35,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
className="absolute inset-0 bg-background/90 backdrop-blur-sm"
onClick={onClose}
></div>
<div className="relative w-full max-w-4xl bg-muted border border-border rounded-2xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-lg">
<div className="relative w-full max-w-4xl bg-muted rounded-2xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-lg">
{/* Header */}
<div className="flex justify-between items-center p-8 border-b border-border bg-card">
<div className="flex items-center gap-4">
@ -87,7 +87,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="space-y-6">
<FileUpload />
<div className="bg-muted p-4 rounded-lg border border-border">
<div className="bg-muted p-4 rounded-lg shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<h4 className="font-bold text-muted-foreground text-sm mb-2 uppercase">
File Requirements
</h4>
@ -110,7 +110,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
Visibility
</label>
<div className="grid grid-cols-3 gap-2">
<Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-muted-foreground bg-muted/10 border-border">
<Button variant="outline" className="p-4 flex flex-col items-center justify-center gap-2 text-muted-foreground bg-muted/10">
<Tag className="w-5 h-5" />{' '}
<span className="text-xs font-bold">Public</span>
</Button>

2
apps/web/src/components/monitoring/monitoring-dashboard/MonitoringDashboard.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { MonitoringDashboard } from './MonitoringDashboard';
import { MonitoringDashboardSkeleton } from './MonitoringDashboardSkeleton';

4
apps/web/src/components/monitoring/monitoring-dashboard/MonitoringDashboardContentErrorsCard.tsx
View file

@ -63,7 +63,7 @@ export function MonitoringDashboardContentErrorsCard({
</div>
</div>
{sentry.enabled && (
<div className="mt-4 p-3 bg-muted rounded border border-border">
<div className="mt-4 p-3 bg-muted rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<p className="text-xs text-muted-foreground mb-2">
Les erreurs sont automatiquement envoyées à Sentry pour le suivi
et l'analyse.
@ -86,7 +86,7 @@ export function MonitoringDashboardContentErrorsCard({
</div>
)}
{!sentry.enabled && (
<div className="mt-4 p-3 bg-muted rounded border border-border">
<div className="mt-4 p-3 bg-muted rounded shadow-[0_0_8px_rgba(26,26,30,0.05)]">
<p className="text-xs text-muted-foreground">
Le suivi des erreurs Sentry n'est pas activé. Configurez{' '}
<code className="bg-background px-1 rounded">VITE_SENTRY_DSN</code>{' '}

2
apps/web/src/components/navigation/Breadcrumbs.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Breadcrumbs } from './Breadcrumbs';
import { FileText, Music } from 'lucide-react';

2
apps/web/src/components/navigation/Pagination.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Pagination } from './Pagination';
import { useState } from 'react';

2
apps/web/src/components/notifications/NotificationBell.stories.tsx
View file

@ -1,4 +1,4 @@
import type { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { NotificationBell } from './NotificationBell';
const mockNotifications = [

Some files were not shown because too many files have changed in this diff Show more