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

ui(design): Phase 3 - rounded tokens, min-w/min-h, stories, NavigationProgress

Browse source 
- rounded-[var(--radius-xl/md/lg/sm)] → rounded-xl, rounded-md, rounded-lg, rounded-sm
- Timeline: min-w-[200px] → min-w-50
- AddEquipmentView, MetadataForm: min-h-[100px] → min-h-25
- NavigationProgress: shadow-[...] → shadow-button-primary-glow
- Stories: ActivityGraph, StatCard, NotificationBell, LoadingState, ScrollArea, Skeleton, FileUploadZone
- Reduced arbitrary values from ~60+ to 11 (5 files, exceptions documented)

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-10 19:24:07 +01:00
parent 4b9d0a341d
commit 64fbb81ddf
80 changed files with 178 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
apps/web/docs/AUDIT_UI_SPOTIFY_DISCORD_20260210.md
View file

@ -102,7 +102,28 @@ Audit complet du frontend pour la phase d'amélioration UI autonome. Basé sur l
---
## 6. Commandes de vérification
## 6. Progrès réalisés (10 feb 2026)
### Phase 1 — Commits effectués
- **Commit 1** : Tokens layout chat/stream/modal + ChatPage, LiveStreamDetailView, Modal, ChatRoom, ChatInput
- **Commit 2** : ImageCropper (h-layout-modal-sm), PlaybackSummary (min-h-50)
### Phase 3 — Commit 3 (suite)
- **rounded-[var(--radius-xl/md/lg/sm)]** → rounded-xl, rounded-md, rounded-lg, rounded-sm (composants + skeletons + stories)
- **min-w/min-h** : Timeline (min-w-50), AddEquipmentView (min-h-25), MetadataForm (min-h-25)
- **NavigationProgress** : shadow-[...] → shadow-button-primary-glow
- **Stories** : ActivityGraph, StatCard, NotificationBell, LoadingState, ScrollArea, Skeleton, FileUploadZone → min-h-layout-page-sm, w-80, w-96, min-h-50, max-w-xl
### Arbitraires restants (priorité basse, exceptions documentées)
- AstralBackground : w-[60%] h-[60%] (décoratif)
- ChatInput : h-[450px] (emoji picker tiers)
- ChatMessage : max-w-[80%], max-w-[150px], h-[400px] (bulles chat)
- GlobalPlayer : max-w-[45%] (responsive)
- ChatMessage.stories : min-h-[200px]
---
## 7. Commandes de vérification
```bash
# Rapport arbitraire

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

@ -7,7 +7,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-full max-w-3xl h-[400px] p-4 bg-background">
<div className="w-full max-w-3xl min-h-layout-page-sm p-4 bg-background">
<Story />
</div>
),

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

@ -8,7 +8,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-[300px] h-[200px] p-4 bg-background">
<div className="w-80 min-h-50 p-4 bg-background">
<Story />
</div>
),

2
apps/web/src/components/data/Timeline.tsx
View file

@ -44,7 +44,7 @@ export function Timeline({
{items.map((item, index) => (
<div
key={item.id}
className="relative flex min-w-[200px] flex-shrink-0 flex-col items-center"
className="relative flex min-w-50 flex-shrink-0 flex-col items-center"
>
{/* Ligne horizontale */}
{index < items.length - 1 && (

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

@ -175,7 +175,7 @@ export const AddEquipmentView: React.FC = () => {
Notes
</h3>
<textarea
className="w-full bg-kodo-graphite border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-[100px]"
className="w-full bg-kodo-graphite border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-25"
placeholder="Condition notes, modifications, etc..."
value={formData.notes}
onChange={(e) => handleChange('notes', e.target.value)}

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

@ -31,7 +31,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="flex justify-end p-4 bg-card min-h-[400px]">
<div className="flex justify-end p-4 bg-card min-h-layout-page-sm">
<Story />
</div>
),

2
apps/web/src/components/ui/LoadingState.stories.tsx
View file

@ -46,7 +46,7 @@ export const Skeleton: Story = {
export const WrapperExample: Story = {
render: (args) => (
<Card className="p-6 w-[300px]">
<Card className="p-6 w-80">
<LoadingStateWrapper {...args} isLoading={true}>
<div>
<h3>Content Loaded</h3>

2
apps/web/src/components/ui/NavigationProgress.tsx
View file

@ -39,7 +39,7 @@ export function NavigationProgress() {
transition={{ duration: 0.15 }}
>
<motion.div
className="h-full bg-primary shadow-[0_0_10px_var(--primary)]"
className="h-full bg-primary shadow-button-primary-glow"
initial={{ width: '0%' }}
animate={{ width: `${progress}%` }}
transition={{ duration: 0.3, ease: 'easeOut' }}

2
apps/web/src/components/ui/ScrollArea.stories.tsx
View file

@ -6,7 +6,7 @@ const meta = {
component: ScrollArea,
tags: ['autodocs'],
args: {
className: 'h-[200px] w-[350px] rounded-md border p-4',
className: 'min-h-50 w-96 rounded-md border p-4',
}
} satisfies Meta<typeof ScrollArea>;

12
apps/web/src/components/ui/Skeleton.stories.tsx
View file

@ -27,11 +27,11 @@ export const Default: Story = {
export const CardLoading: Story = {
render: () => (
<div className="flex flex-col space-y-3 w-[300px]">
<Skeleton className="h-[125px] w-full rounded-xl" />
<div className="flex flex-col space-y-3 w-80">
<Skeleton className="h-32 w-full rounded-xl" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-60" />
<Skeleton className="h-4 w-50" />
</div>
</div>
),
@ -42,8 +42,8 @@ export const AvatarLoading: Story = {
<div className="flex items-center space-x-4">
<Skeleton className="h-12 w-12 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-60" />
<Skeleton className="h-4 w-50" />
</div>
</div>
),

2
apps/web/src/components/ui/card.tsx
View file

@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const cardVariants = cva(
'flex flex-col rounded-[var(--radius-xl)] text-card-foreground transition-[box-shadow,background-color,border-color,transform] duration-[var(--duration-normal)] ease-out relative overflow-hidden',
'flex flex-col rounded-xl text-card-foreground transition-[box-shadow,background-color,border-color,transform] duration-[var(--duration-normal)] ease-out relative overflow-hidden',
{
variants: {
variant: {

2
apps/web/src/components/ui/dropdown.tsx
View file

@ -176,7 +176,7 @@ export function Dropdown({
handleOpenChange(true);
}
}}
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-[var(--radius)]"
className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-lg"
style={{ display: 'inline-block' }}
>
{trigger}

2
apps/web/src/components/upload/FileUploadZone.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof FileUploadZone> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="bg-background p-8 w-[500px]">
<div className="bg-background p-8 max-w-xl">
<Story />
</div>
),

2
apps/web/src/components/upload/metadata/MetadataForm.tsx
View file

@ -237,7 +237,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
Description
</label>
<textarea
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-[100px] text-sm"
className="w-full bg-muted border border-border rounded-lg p-4 text-white focus:border-border outline-none min-h-25 text-sm"
placeholder="Tell the story behind this track..."
value={data.description || ''}
onChange={(e) => updateField('description', e.target.value)}

6
apps/web/src/components/views/admin-view/AdminViewSkeleton.tsx
View file

@ -5,7 +5,7 @@ export function AdminViewSkeleton() {
return (
<div className="flex flex-col lg:flex-row gap-8 animate-fadeIn min-h-layout-main">
<div className="w-full lg:w-64 flex-shrink-0">
<Skeleton className="h-20 w-full rounded-[var(--radius-xl)] mb-6" />
<Skeleton className="h-20 w-full rounded-xl mb-6" />
<div className="space-y-1 p-2">
{[1, 2, 3, 4, 5].map((i) => (
<Skeleton key={i} className="h-12 w-full rounded-lg" />
@ -14,8 +14,8 @@ export function AdminViewSkeleton() {
</div>
<div className="flex-1 space-y-4">
<Skeleton className="h-10 w-48" />
<Skeleton className="h-40 w-full rounded-[var(--radius-xl)]" />
<Skeleton className="h-40 w-full rounded-[var(--radius-xl)]" />
<Skeleton className="h-40 w-full rounded-xl" />
<Skeleton className="h-40 w-full rounded-xl" />
</div>
</div>
);

12
apps/web/src/components/views/analytics-view/AnalyticsViewSkeleton.tsx
View file

@ -10,7 +10,7 @@ export function AnalyticsViewSkeleton() {
<Skeleton className="h-4 w-80" />
</div>
<div className="flex flex-wrap items-center gap-3">
<Skeleton className="h-10 w-48 rounded-[var(--radius-xl)]" />
<Skeleton className="h-10 w-48 rounded-xl" />
<div className="flex gap-2">
<Skeleton className="h-9 w-20" />
<Skeleton className="h-9 w-20" />
@ -20,19 +20,19 @@ export function AnalyticsViewSkeleton() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[1, 2, 3, 4].map((i) => (
<Skeleton key={i} className="h-28 w-full rounded-[var(--radius-xl)]" />
<Skeleton key={i} className="h-28 w-full rounded-xl" />
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<Skeleton className="lg:col-span-2 h-80 rounded-[var(--radius-xl)]" />
<Skeleton className="lg:col-span-2 h-80 rounded-xl" />
<div className="space-y-6">
<Skeleton className="h-56 rounded-[var(--radius-xl)]" />
<Skeleton className="h-44 rounded-[var(--radius-xl)]" />
<Skeleton className="h-56 rounded-xl" />
<Skeleton className="h-44 rounded-xl" />
</div>
</div>
<Skeleton className="h-96 w-full rounded-[var(--radius-xl)]" />
<Skeleton className="h-96 w-full rounded-xl" />
</div>
);
}

2
apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
View file

@ -20,7 +20,7 @@ export function CheckoutViewOrderSummary({
onPurchase,
}: CheckoutViewOrderSummaryProps) {
return (
<Card variant="glass" className="rounded-[var(--radius-xl)] p-8 sticky top-24 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
<Card variant="glass" className="rounded-xl p-8 sticky top-24 border-white/5 bg-black/20 backdrop-blur-xl hover-glow-cyan transition-shadow duration-[var(--duration-normal)]">
<h3 className="font-bold text-foreground mb-4 uppercase tracking-wider text-sm tracking-tight">
Order Summary
</h3>

4
apps/web/src/components/views/marketplace-view/MarketplaceViewSkeleton.tsx
View file

@ -12,7 +12,7 @@ export function MarketplaceViewSkeleton() {
<Skeleton className="h-10 w-full md:w-64" />
</div>
<div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-8 bg-card/50 p-2 rounded-[var(--radius-xl)] border border-border">
<div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-8 bg-card/50 p-2 rounded-xl border border-border">
<div className="flex items-center gap-2 w-full">
<Skeleton className="h-9 w-24" />
<Skeleton className="h-9 w-16" />
@ -26,7 +26,7 @@ export function MarketplaceViewSkeleton() {
<div className="flex-1">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-8">
{[1, 2, 3, 4, 5, 6].map((i) => (
<Skeleton key={i} className="aspect-square rounded-[var(--radius-xl)]" />
<Skeleton key={i} className="aspect-square rounded-xl" />
))}
</div>
</div>

2
apps/web/src/components/views/settings-view/SettingsViewSkeleton.tsx
View file

@ -18,7 +18,7 @@ export function SettingsViewSkeleton() {
</div>
<div className="min-h-layout-page">
<Skeleton className="h-96 w-full rounded-[var(--radius-xl)]" />
<Skeleton className="h-96 w-full rounded-xl" />
</div>
</div>
);

8
apps/web/src/components/views/social-view/SocialViewSkeleton.tsx
View file

@ -5,8 +5,8 @@ export function SocialViewSkeleton() {
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 animate-fadeIn pb-20 min-h-layout-page">
<div className="hidden lg:block lg:col-span-3 space-y-8">
<Skeleton className="h-48 rounded-[var(--radius-xl)]" />
<Skeleton className="h-32 rounded-[var(--radius-xl)]" />
<Skeleton className="h-48 rounded-xl" />
<Skeleton className="h-32 rounded-xl" />
</div>
<div className="col-span-1 lg:col-span-6 space-y-8">
@ -15,12 +15,12 @@ export function SocialViewSkeleton() {
<Skeleton className="h-4 w-64" />
</div>
{[1, 2, 3].map((i) => (
<Skeleton key={i} className="h-44 rounded-[var(--radius-xl)]" />
<Skeleton key={i} className="h-44 rounded-xl" />
))}
</div>
<div className="hidden lg:block lg:col-span-3">
<Skeleton className="h-40 rounded-[var(--radius-xl)]" />
<Skeleton className="h-40 rounded-xl" />
</div>
</div>
);

2
apps/web/src/features/library/pages/library-page/LibraryPageSkeleton.tsx
View file

@ -16,7 +16,7 @@ export function LibraryPageSkeleton() {
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-6">
{Array.from({ length: 10 }, (_, i) => (
<Skeleton key={i} className="aspect-[4/5] rounded-[var(--radius-xl)]" />
<Skeleton key={i} className="aspect-[4/5] rounded-xl" />
))}
</div>
</div>

4
apps/web/src/features/playlists/components/PlaylistCard.tsx
View file

@ -180,7 +180,7 @@ function PlaylistCardComponent({
role="button"
tabIndex={0}
aria-label={`${selected ? 'Désélectionner' : 'Sélectionner'} la playlist ${playlist.title}`}
className="touch-manipulation rounded-[var(--radius-xl)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
className="touch-manipulation rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
{cardContent}
</div>
@ -193,7 +193,7 @@ function PlaylistCardComponent({
onClick={handleClick}
onKeyDown={handleKeyDown}
aria-label={`Voir la playlist ${playlist.title}`}
className="touch-manipulation rounded-[var(--radius-xl)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
className="touch-manipulation rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
{cardContent}
</Link>

2
apps/web/src/features/tracks/components/CommentThread.stories.tsx
View file

@ -70,7 +70,7 @@ const meta: Meta<typeof CommentThread> = {
},
decorators: [
(Story) => (
<div className="max-w-2xl w-full p-4 border border-border rounded-[var(--radius-xl)] bg-background min-h-layout-story shadow-lg">
<div className="max-w-2xl w-full p-4 border border-border rounded-xl bg-background min-h-layout-story shadow-lg">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/LikeButton.stories.tsx
View file

@ -8,7 +8,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/LikeButton.tsx
View file

@ -166,7 +166,7 @@ export function LikeButton({
variant={variant}
size={size}
className={cn(
'rounded-[var(--radius-md)] transition-[color,transform] duration-[var(--duration-normal)]',
'rounded-md transition-[color,transform] duration-[var(--duration-normal)]',
className,
isLiked && 'text-destructive hover:text-destructive/90',
compact && 'h-auto p-1',

8
apps/web/src/features/tracks/components/ShareDialog.tsx
View file

@ -134,12 +134,12 @@ export function ShareDialog({ open, onClose, trackId }: ShareDialogProps) {
<Input
value={shareUrl}
readOnly
className="flex-1 rounded-[var(--radius-md)] transition-[border-color] duration-[var(--duration-normal)]"
className="flex-1 rounded-md transition-[border-color] duration-[var(--duration-normal)]"
/>
<Button
onClick={handleCopy}
variant="outline"
className="rounded-[var(--radius-md)] transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
>
{isCopied ? (
<Check className="h-4 w-4 text-success" />
@ -156,13 +156,13 @@ export function ShareDialog({ open, onClose, trackId }: ShareDialogProps) {
<Button
variant="outline"
onClick={onClose}
className="rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)]"
className="rounded-md transition-colors duration-[var(--duration-normal)]"
>
Close
</Button>
<Button
onClick={handleCopy}
className="rounded-[var(--radius-md)] transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
>
<Copy className="mr-2 h-4 w-4" />
Copy Link

2
apps/web/src/features/tracks/components/TrackCard.stories.tsx
View file

@ -32,7 +32,7 @@ const meta = {
},
decorators: [
(Story) => (
<div className="max-w-xs min-h-layout-story p-4 bg-background border border-border rounded-[var(--radius-xl)]">
<div className="max-w-xs min-h-layout-story p-4 bg-background border border-border rounded-xl">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/TrackCard.tsx
View file

@ -47,7 +47,7 @@ function TrackCardComponent({
role="button"
tabIndex={onClick ? 0 : -1}
className={cn(
'group relative rounded-[var(--radius-xl)] overflow-hidden border-0 shadow-lg shadow-black/5 cursor-pointer',
'group relative rounded-xl overflow-hidden border-0 shadow-lg shadow-black/5 cursor-pointer',
'bg-card hover:shadow-xl hover:shadow-black/10 transition-[box-shadow,transform,background-color] duration-[var(--duration-normal)] ease-out active:scale-[0.98]',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
className,

2
apps/web/src/features/tracks/components/TrackFilters.stories.tsx
View file

@ -37,7 +37,7 @@ const meta = {
},
decorators: [
(Story) => (
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/TrackGrid.stories.tsx
View file

@ -34,7 +34,7 @@ const meta = {
},
decorators: [
(Story) => (
<div className="w-full max-w-6xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="w-full max-w-6xl p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

4
apps/web/src/features/tracks/components/TrackGrid.tsx
View file

@ -131,7 +131,7 @@ export function TrackGrid({
{Array.from({ length: columns * 2 }).map((_, i) => (
<Skeleton
key={i}
className="rounded-[var(--radius-md)] aspect-[3/4]"
className="rounded-md aspect-[3/4]"
/>
))}
</div>
@ -147,7 +147,7 @@ export function TrackGrid({
}
const densityButtonClass = [
'p-2 rounded-[var(--radius-md)] text-sm font-medium tracking-tight',
'p-2 rounded-md text-sm font-medium tracking-tight',
'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
'hover:bg-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'active:scale-95',

2
apps/web/src/features/tracks/components/TrackGridDensitySelector.stories.tsx
View file

@ -9,7 +9,7 @@ const meta: Meta<typeof TrackGridDensitySelector> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

4
apps/web/src/features/tracks/components/TrackGridDensitySelector.tsx
View file

@ -49,7 +49,7 @@ export function TrackGridDensitySelector({
return (
<div
className={cn(
'inline-flex items-center gap-1 p-1 rounded-[var(--radius-lg)]',
'inline-flex items-center gap-1 p-1 rounded-lg',
'bg-muted/40 border border-border',
'transition-[opacity,box-shadow] duration-[var(--duration-normal)]',
className,
@ -65,7 +65,7 @@ export function TrackGridDensitySelector({
type="button"
onClick={() => onChange(option.value)}
className={cn(
'flex items-center gap-2 px-4 py-1.5 rounded-[var(--radius-md)]',
'flex items-center gap-2 px-4 py-1.5 rounded-md',
'text-sm font-medium tracking-tight',
'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
'hover:bg-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',

2
apps/web/src/features/tracks/components/TrackHistory.stories.tsx
View file

@ -17,7 +17,7 @@ const meta: Meta<typeof TrackHistory> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="max-w-xl border border-border/80 p-4 rounded-[var(--radius-xl)] bg-background min-h-layout-story">
<div className="max-w-xl border border-border/80 p-4 rounded-xl bg-background min-h-layout-story">
<Story />
</div>
),

10
apps/web/src/features/tracks/components/TrackList.tsx
View file

@ -73,7 +73,7 @@ export function TrackList({
return (
<div
className={cn(
'p-6 text-center text-muted-foreground/90 text-sm tracking-tight rounded-[var(--radius-xl)]',
'p-6 text-center text-muted-foreground/90 text-sm tracking-tight rounded-xl',
className,
)}
>
@ -88,7 +88,7 @@ export function TrackList({
return (
<div className={cn('space-y-4', className)}>
{showSelection && showSelectionActions && selectedTracks.length > 0 && (
<div className="flex items-center gap-2 p-3 bg-muted/80 rounded-[var(--radius-xl)] transition-colors duration-[var(--duration-normal)]">
<div className="flex items-center gap-2 p-3 bg-muted/80 rounded-xl transition-colors duration-[var(--duration-normal)]">
<span className="text-sm text-foreground/90 tracking-tight">
{selectedTracks.length} pistes sélectionnées
</span>
@ -185,7 +185,7 @@ export function TrackList({
key={track.id}
role="listitem"
className={cn(
'flex items-center gap-4 p-3 rounded-[var(--radius-lg)] h-14 transition-colors duration-[var(--duration-normal)] group',
'flex items-center gap-4 p-3 rounded-lg h-14 transition-colors duration-[var(--duration-normal)] group',
'hover:bg-muted/50',
selectedTracks.includes(track.id) && 'bg-primary/10',
)}
@ -209,11 +209,11 @@ export function TrackList({
<img
src={track.cover}
alt={`Cover de ${track.title}`}
className="w-full h-full object-cover rounded-[var(--radius-md)] shadow-md"
className="w-full h-full object-cover rounded-md shadow-md"
/>
)}
{/* Play Overlay */}
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-[var(--radius-md)]">
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-md">
{currentPlayingId === track.id ? (
<button
aria-label="Mettre en pause"

2
apps/web/src/features/tracks/components/TrackListContainer.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof TrackListContainer> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="bg-background border border-border rounded-[var(--radius-xl)] p-4 min-h-layout-story">
<div className="bg-background border border-border rounded-xl p-4 min-h-layout-story">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/TrackListContainer.tsx
View file

@ -22,7 +22,7 @@ export function TrackListContainer({
return (
<div
className={cn(
'p-4 rounded-[var(--radius-lg)] bg-destructive/10 border border-destructive/30',
'p-4 rounded-lg bg-destructive/10 border border-destructive/30',
'text-destructive text-sm tracking-tight transition-opacity duration-[var(--duration-normal)]',
)}
>

2
apps/web/src/features/tracks/components/TrackListPagination.stories.tsx
View file

@ -14,7 +14,7 @@ const meta: Meta<typeof TrackListPagination> = {
},
decorators: [
(Story) => (
<div className="w-full max-w-2xl border border-border rounded-[var(--radius-xl)] bg-background min-h-layout-story flex flex-col justify-end">
<div className="w-full max-w-2xl border border-border rounded-xl bg-background min-h-layout-story flex flex-col justify-end">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/TrackListRow.stories.tsx
View file

@ -28,7 +28,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-full max-w-2xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="w-full max-w-2xl p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

14
apps/web/src/features/tracks/components/TrackListRow.tsx
View file

@ -139,10 +139,10 @@ export function TrackListRow({
<img
src={track.cover}
alt={`Cover de ${track.title}`}
className="w-full h-full object-cover rounded-[var(--radius-md)]"
className="w-full h-full object-cover rounded-md"
/>
) : (
<div className="w-full h-full bg-muted flex items-center justify-center rounded-[var(--radius-md)]">
<div className="w-full h-full bg-muted flex items-center justify-center rounded-md">
<svg
className="w-4 h-4 text-muted-foreground/90"
fill="none"
@ -159,7 +159,7 @@ export function TrackListRow({
</div>
)}
{showActions && (
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-[var(--radius-md)]">
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-md">
<button
onClick={handlePlay}
aria-label={isPlaying ? 'Mettre en pause' : 'Lire'}
@ -199,7 +199,7 @@ export function TrackListRow({
<li
role="listitem"
className={cn(
'flex items-center gap-4 p-2 rounded-[var(--radius-md)] hover:bg-muted/50 group h-14',
'flex items-center gap-4 p-2 rounded-md hover:bg-muted/50 group h-14',
'transition-colors duration-[var(--duration-normal)]',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
isSelected && 'bg-primary/10',
@ -226,10 +226,10 @@ export function TrackListRow({
<img
src={track.cover}
alt={`Cover de ${track.title}`}
className="w-full h-full object-cover rounded-[var(--radius-md)]"
className="w-full h-full object-cover rounded-md"
/>
) : (
<div className="w-full h-full bg-muted flex items-center justify-center rounded-[var(--radius-md)]">
<div className="w-full h-full bg-muted flex items-center justify-center rounded-md">
<svg
className="w-5 h-5 text-muted-foreground/90"
fill="none"
@ -249,7 +249,7 @@ export function TrackListRow({
)}
{showActions && (
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-[var(--radius-md)]">
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity duration-[var(--duration-normal)] rounded-md">
<button
aria-label={isPlaying ? 'Mettre en pause' : 'Lire'}
onClick={handlePlay}

2
apps/web/src/features/tracks/components/TrackListSelectionActions.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof TrackListSelectionActions> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-full max-w-2xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story flex flex-col justify-end">
<div className="w-full max-w-2xl p-4 bg-background border border-border rounded-xl min-h-layout-story flex flex-col justify-end">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/TrackListSelectionActions.tsx
View file

@ -54,7 +54,7 @@ export function TrackListSelectionActions({
};
const actionButtonClass = [
'p-2 rounded-[var(--radius-md)]',
'p-2 rounded-md',
'transition-[background-color,transform] duration-[var(--duration-normal)]',
'hover:bg-primary-foreground/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-foreground/40 focus-visible:ring-offset-2 focus-visible:ring-offset-primary',
'active:scale-95',

10
apps/web/src/features/tracks/components/TrackListSkeleton.tsx
View file

@ -29,27 +29,27 @@ export function TrackListSkeleton({
{Array.from({ length: count }).map((_, index) => (
<div
key={index}
className="flex items-center gap-4 p-4 rounded-[var(--radius-xl)] bg-card border-0 shadow-sm animate-pulse"
className="flex items-center gap-4 p-4 rounded-xl bg-card border-0 shadow-sm animate-pulse"
>
{/* Cover Skeleton */}
{showCover && (
<div className="flex-shrink-0">
<div className="w-12 h-12 rounded-[var(--radius-md)] bg-muted" />
<div className="w-12 h-12 rounded-md bg-muted" />
</div>
)}
{/* Track Info Skeleton */}
<div className="flex-1 min-w-0 space-y-2">
<div className="h-4 rounded-[var(--radius-md)] bg-muted w-3/4" />
<div className="h-4 rounded-md bg-muted w-3/4" />
{showMetadata && (
<div className="h-3 rounded-[var(--radius-md)] bg-muted w-1/2" />
<div className="h-3 rounded-md bg-muted w-1/2" />
)}
</div>
{/* Duration Skeleton */}
{showDuration && (
<div className="flex-shrink-0">
<div className="h-3 rounded-[var(--radius-md)] bg-muted w-12" />
<div className="h-3 rounded-md bg-muted w-12" />
</div>
)}
</div>

2
apps/web/src/features/tracks/components/TrackSearch.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof TrackSearch> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

4
apps/web/src/features/tracks/components/TrackSearch.tsx
View file

@ -116,13 +116,13 @@ export function TrackSearch({
handleSearch();
}
}}
className="pl-10 rounded-[var(--radius-md)] transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
className="pl-10 rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
/>
</div>
<Button
onClick={handleSearch}
disabled={loading}
className="rounded-[var(--radius-md)] transition-transform duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-transform duration-[var(--duration-normal)] active:scale-95"
>
Rechercher
</Button>

2
apps/web/src/features/tracks/components/TrackSearchFilters.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof TrackSearchFilters> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/TrackSearchResults.stories.tsx
View file

@ -8,7 +8,7 @@ const meta: Meta<typeof TrackSearchResults> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="w-full max-w-4xl p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

12
apps/web/src/features/tracks/components/TrackSearchResults.tsx
View file

@ -107,7 +107,7 @@ export function TrackSearchResults({
return (
<Alert
variant="destructive"
className={cn('rounded-[var(--radius-xl)]', className)}
className={cn('rounded-xl', className)}
>
<AlertCircle className="h-4 w-4" />
<AlertTitle>Erreur</AlertTitle>
@ -151,7 +151,7 @@ export function TrackSearchResults({
<Card
key={track.id}
className={cn(
'overflow-hidden rounded-[var(--radius-xl)]',
'overflow-hidden rounded-xl',
'transition-[box-shadow,transform] duration-[var(--duration-normal)] hover:shadow-xl',
)}
>
@ -203,12 +203,12 @@ export function TrackSearchResults({
<span>{formatDuration(track.duration)}</span>
</div>
{track.genre && (
<span className="px-2 py-1 bg-muted/60 rounded-[var(--radius-md)]">
<span className="px-2 py-1 bg-muted/60 rounded-md">
{track.genre}
</span>
)}
{track.format && (
<span className="px-2 py-1 bg-muted/60 rounded-[var(--radius-md)]">
<span className="px-2 py-1 bg-muted/60 rounded-md">
{track.format}
</span>
)}
@ -235,7 +235,7 @@ export function TrackSearchResults({
size="sm"
onClick={handlePreviousPage}
disabled={page <= 1}
className="rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-colors duration-[var(--duration-normal)] active:scale-95"
>
<ChevronLeft className="h-4 w-4 mr-1" />
Précédent
@ -245,7 +245,7 @@ export function TrackSearchResults({
size="sm"
onClick={handleNextPage}
disabled={page >= totalPages}
className="rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-colors duration-[var(--duration-normal)] active:scale-95"
>
Suivant
<ChevronRight className="h-4 w-4 ml-1" />

2
apps/web/src/features/tracks/components/TrackSort.stories.tsx
View file

@ -9,7 +9,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

4
apps/web/src/features/tracks/components/TrackSort.tsx
View file

@ -142,7 +142,7 @@ export function TrackSort({
}
className={cn(
'pl-10 pr-8 py-2 border border-input bg-background',
'rounded-[var(--radius-md)] text-sm font-medium text-foreground tracking-tight',
'rounded-md text-sm font-medium text-foreground tracking-tight',
'transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent focus-visible:ring-primary/30',
'appearance-none cursor-pointer',
@ -165,7 +165,7 @@ export function TrackSort({
type="button"
onClick={handleOrderToggle}
className={cn(
'p-2 rounded-[var(--radius-md)] border border-input bg-background',
'p-2 rounded-md border border-input bg-background',
'text-foreground flex items-center justify-center',
'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
'hover:bg-muted/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',

2
apps/web/src/features/tracks/components/TrackStatsDisplay.stories.tsx
View file

@ -8,7 +8,7 @@ const meta = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

4
apps/web/src/features/tracks/components/TrackStatsDisplay.tsx
View file

@ -97,7 +97,7 @@ export function TrackStatsDisplay({
>
<div
className={cn(
'p-2 rounded-[var(--radius-md)] mb-1 transition-transform duration-[var(--duration-normal)] hover:scale-105',
'p-2 rounded-md mb-1 transition-transform duration-[var(--duration-normal)] hover:scale-105',
item.bg,
item.color,
)}
@ -133,7 +133,7 @@ export function TrackStatsDisplay({
>
<div
className={cn(
'p-1.5 rounded-[var(--radius-md)] opacity-80 group-hover:opacity-100 transition-[opacity,transform] duration-[var(--duration-normal)]',
'p-1.5 rounded-md opacity-80 group-hover:opacity-100 transition-[opacity,transform] duration-[var(--duration-normal)]',
item.bg,
item.color,
)}

2
apps/web/src/features/tracks/components/UploadQuota.stories.tsx
View file

@ -13,7 +13,7 @@ const meta: Meta<typeof UploadQuota> = {
tags: ['autodocs'],
decorators: [
(Story) => (
<div className="p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

2
apps/web/src/features/tracks/components/UploadQuota.tsx
View file

@ -185,7 +185,7 @@ export function UploadQuota({
{/* Warning message if quota is near limit */}
{isQuotaNearLimit && !isQuotaExceeded && (
<div className="flex items-start gap-2 p-2 bg-warning/10 rounded-[var(--radius-md)] text-xs text-warning tracking-tight transition-colors duration-[var(--duration-normal)]">
<div className="flex items-start gap-2 p-2 bg-warning/10 rounded-md text-xs text-warning tracking-tight transition-colors duration-[var(--duration-normal)]">
<AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
<span>
Votre quota d'upload approche de sa limite. Pensez à libérer de

2
apps/web/src/features/tracks/components/ViewToggle.stories.tsx
View file

@ -9,7 +9,7 @@ const meta = {
parameters: { layout: 'centered' },
decorators: [
(Story) => (
<div className="p-4 bg-background border border-border rounded-[var(--radius-xl)] min-h-layout-story">
<div className="p-4 bg-background border border-border rounded-xl min-h-layout-story">
<Story />
</div>
),

4
apps/web/src/features/tracks/components/ViewToggle.tsx
View file

@ -63,7 +63,7 @@ export function ViewToggle({
};
const buttonBase = [
'flex items-center gap-2 px-4 py-1.5 rounded-[var(--radius-md)]',
'flex items-center gap-2 px-4 py-1.5 rounded-md',
'text-sm font-medium tracking-tight',
'transition-[color,background-color,transform,opacity] duration-[var(--duration-normal)]',
'hover:bg-muted/70 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
@ -73,7 +73,7 @@ export function ViewToggle({
return (
<div
className={cn(
'inline-flex items-center gap-1 p-1 rounded-[var(--radius-lg)]',
'inline-flex items-center gap-1 p-1 rounded-lg',
'bg-muted/40 border border-border',
'transition-[opacity,box-shadow] duration-[var(--duration-normal)]',
isTransitioning && 'opacity-75',

2
apps/web/src/features/tracks/components/comment-thread/CommentRepliesList.tsx
View file

@ -15,7 +15,7 @@ export function CommentRepliesList({
return (
<div
className={cn(
'space-y-4 pt-2 pl-4 border-l-2 border-border/80 rounded-[var(--radius-sm)] transition-colors duration-[var(--duration-normal)]',
'space-y-4 pt-2 pl-4 border-l-2 border-border/80 rounded-sm transition-colors duration-[var(--duration-normal)]',
className,
)}
data-testid="comment-replies-list"

8
apps/web/src/features/tracks/components/comment-thread/CommentReplyForm.tsx
View file

@ -27,7 +27,7 @@ export function CommentReplyForm({
<form
onSubmit={onSubmit}
className={cn(
'space-y-2 pt-2 rounded-[var(--radius-lg)] transition-opacity duration-[var(--duration-normal)]',
'space-y-2 pt-2 rounded-lg transition-opacity duration-[var(--duration-normal)]',
className,
)}
data-testid="comment-reply-form"
@ -38,14 +38,14 @@ export function CommentReplyForm({
placeholder={placeholder}
maxLength={500}
autoFocus
className="rounded-[var(--radius-md)] transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
className="rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
/>
<div className="flex gap-2">
<Button
type="submit"
size="sm"
disabled={!value.trim() || isPending}
className="rounded-[var(--radius-md)] transition-transform duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-transform duration-[var(--duration-normal)] active:scale-95"
>
{isPending ? (
<Spinner size="sm" className="mr-2" />
@ -59,7 +59,7 @@ export function CommentReplyForm({
variant="outline"
size="sm"
onClick={onCancel}
className="rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)]"
className="rounded-md transition-colors duration-[var(--duration-normal)]"
>
<X className="h-4 w-4 mr-2" />
Annuler

2
apps/web/src/features/tracks/components/comment-thread/CommentThread.tsx
View file

@ -85,7 +85,7 @@ export function CommentThread({
<>
<div
className={cn(
'space-y-4 rounded-[var(--radius-lg)] p-3 -m-3 transition-[color,box-shadow] duration-[var(--duration-normal)]',
'space-y-4 rounded-lg p-3 -m-3 transition-[color,box-shadow] duration-[var(--duration-normal)]',
'hover:bg-muted/20 focus-within:ring-1 focus-within:ring-primary/20 focus-within:ring-inset focus-within:bg-muted/10',
className,
)}

4
apps/web/src/features/tracks/components/comment-thread/CommentThreadActions.tsx
View file

@ -47,7 +47,7 @@ export function CommentThreadActions({
variant="ghost"
size="sm"
onClick={onToggleReply}
className="h-7 text-xs tracking-tight rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)] hover:text-primary hover:bg-primary/10"
className="h-7 text-xs tracking-tight rounded-md transition-colors duration-[var(--duration-normal)] hover:text-primary hover:bg-primary/10"
>
<Reply className="h-3 w-3 mr-1 text-primary/90" />
Répondre
@ -66,7 +66,7 @@ export function CommentThreadActions({
variant="ghost"
size="sm"
onClick={onToggleReplies}
className="h-7 text-xs tracking-tight rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)] hover:text-primary hover:bg-primary/10"
className="h-7 text-xs tracking-tight rounded-md transition-colors duration-[var(--duration-normal)] hover:text-primary hover:bg-primary/10"
>
<MessageCircle className="h-3 w-3 mr-1 text-primary/90" />
{showReplies ? 'Masquer' : 'Afficher'} {repliesCount}{' '}

8
apps/web/src/features/tracks/components/comment-thread/CommentThreadContent.tsx
View file

@ -31,7 +31,7 @@ export function CommentThreadContent({
<form
onSubmit={onEditSubmit}
className={cn(
'space-y-2 rounded-[var(--radius-lg)] transition-opacity duration-[var(--duration-normal)]',
'space-y-2 rounded-lg transition-opacity duration-[var(--duration-normal)]',
className,
)}
data-testid="comment-edit-form"
@ -41,14 +41,14 @@ export function CommentThreadContent({
onChange={(e) => onEditContentChange(e.target.value)}
maxLength={500}
autoFocus
className="rounded-[var(--radius-md)] transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
className="rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]"
/>
<div className="flex gap-2">
<Button
type="submit"
size="sm"
disabled={!editContent.trim() || isEditPending}
className="rounded-[var(--radius-md)] transition-transform duration-[var(--duration-normal)] active:scale-95"
className="rounded-md transition-transform duration-[var(--duration-normal)] active:scale-95"
>
{isEditPending ? (
<Spinner size="sm" className="mr-2" />
@ -62,7 +62,7 @@ export function CommentThreadContent({
variant="outline"
size="sm"
onClick={onEditCancel}
className="rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)]"
className="rounded-md transition-colors duration-[var(--duration-normal)]"
>
<X className="h-4 w-4 mr-2" />
Annuler

4
apps/web/src/features/tracks/components/comment-thread/CommentThreadHeader.tsx
View file

@ -58,12 +58,12 @@ export function CommentThreadHeader({
<Button
variant="ghost"
size="icon"
className="h-6 w-6 rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)] hover:text-foreground hover:bg-muted/50"
className="h-6 w-6 rounded-md transition-colors duration-[var(--duration-normal)] hover:text-foreground hover:bg-muted/50"
>
<MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="rounded-[var(--radius-lg)]">
<DropdownMenuContent align="end" className="rounded-lg">
{canEdit && (
<DropdownMenuItem onClick={onEdit}>
<Edit2 className="mr-2 h-4 w-4" />

2
apps/web/src/features/tracks/components/comment-thread/CommentThreadSkeleton.stories.tsx
View file

@ -9,7 +9,7 @@ const meta: Meta<typeof CommentThreadSkeleton> = {
},
decorators: [
(Story) => (
<div className="max-w-2xl w-full p-4 border border-border rounded-[var(--radius-xl)] bg-background min-h-layout-story space-y-4">
<div className="max-w-2xl w-full p-4 border border-border rounded-xl bg-background min-h-layout-story space-y-4">
<Story />
<CommentThreadSkeleton />
<CommentThreadSkeleton />

10
apps/web/src/features/tracks/components/comment-thread/CommentThreadSkeleton.tsx
View file

@ -14,7 +14,7 @@ export function CommentThreadSkeleton({
return (
<div
className={cn(
'flex gap-4 animate-pulse rounded-[var(--radius-lg)] transition-opacity duration-[var(--duration-normal)]',
'flex gap-4 animate-pulse rounded-lg transition-opacity duration-[var(--duration-normal)]',
className,
)}
data-testid="comment-thread-skeleton"
@ -22,11 +22,11 @@ export function CommentThreadSkeleton({
<div className="h-8 w-8 shrink-0 rounded-full bg-muted" />
<div className="flex-1 min-w-0 space-y-2">
<div className="flex items-center gap-2">
<div className="h-4 w-24 rounded-[var(--radius-md)] bg-muted" />
<div className="h-3 w-16 rounded-[var(--radius-md)] bg-muted" />
<div className="h-4 w-24 rounded-md bg-muted" />
<div className="h-3 w-16 rounded-md bg-muted" />
</div>
<div className="h-4 w-full rounded-[var(--radius-md)] bg-muted" />
<div className="h-4 w-2/3 rounded-[var(--radius-md)] bg-muted" />
<div className="h-4 w-full rounded-md bg-muted" />
<div className="h-4 w-2/3 rounded-md bg-muted" />
</div>
</div>
);

2
apps/web/src/features/tracks/components/track-filters/TrackFilters.tsx
View file

@ -48,7 +48,7 @@ export function TrackFilters({
return (
<div
className={cn(
'bg-card border border-border rounded-[var(--radius-xl)] p-4 shadow-sm',
'bg-card border border-border rounded-xl p-4 shadow-sm',
'transition-[box-shadow,border-color] duration-[var(--duration-normal)] hover:shadow-md',
className,
)}

2
apps/web/src/features/tracks/components/track-filters/TrackFiltersClear.tsx
View file

@ -13,7 +13,7 @@ export function TrackFiltersClear({ onClear }: TrackFiltersClearProps) {
onClick={onClear}
className={cn(
'flex items-center gap-2 px-4 py-2 text-sm font-medium tracking-tight',
'text-foreground rounded-[var(--radius-md)]',
'text-foreground rounded-md',
'transition-[color,background-color,transform] duration-[var(--duration-normal)] hover:bg-muted/50 active:scale-95',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
)}

2
apps/web/src/features/tracks/components/track-filters/TrackFiltersHeader.tsx
View file

@ -21,7 +21,7 @@ export function TrackFiltersHeader({
type="button"
onClick={onToggle}
className={cn(
'flex items-center justify-between w-full mb-4 text-left rounded-[var(--radius-md)]',
'flex items-center justify-between w-full mb-4 text-left rounded-md',
'transition-colors duration-[var(--duration-normal)] hover:bg-muted/30',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
)}

2
apps/web/src/features/tracks/components/track-filters/TrackFiltersSearch.tsx
View file

@ -29,7 +29,7 @@ export function TrackFiltersSearch({ value, onChange }: TrackFiltersSearchProps)
type="button"
onClick={() => onChange('')}
className={cn(
'absolute right-3 top-1/2 -translate-y-1/2 rounded-[var(--radius-sm)]',
'absolute right-3 top-1/2 -translate-y-1/2 rounded-sm',
'text-muted-foreground/90 transition-colors duration-[var(--duration-normal)] hover:text-foreground hover:bg-muted/30',
)}
aria-label="Effacer la recherche"

6
apps/web/src/features/tracks/components/track-filters/TrackFiltersSkeleton.tsx
View file

@ -13,18 +13,18 @@ export function TrackFiltersSkeleton({ className }: TrackFiltersSkeletonProps) {
return (
<div
className={cn(
'bg-card border border-border rounded-[var(--radius-xl)] p-4 min-h-layout-story shadow-sm',
'bg-card border border-border rounded-xl p-4 min-h-layout-story shadow-sm',
'transition-opacity duration-[var(--duration-normal)]',
className,
)}
>
<div className="space-y-4">
<Skeleton className="h-10 rounded-[var(--radius-md)]" />
<Skeleton className="h-10 rounded-md" />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{[1, 2, 3, 4].map((i) => (
<Skeleton
key={i}
className="h-10 rounded-[var(--radius-md)]"
className="h-10 rounded-md"
/>
))}
</div>

4
apps/web/src/features/tracks/components/track-filters/types.ts
View file

@ -20,7 +20,7 @@ export interface TrackFiltersProps {
}
export const INPUT_CLASS = [
'w-full px-4 py-2 border border-input bg-background rounded-[var(--radius-md)]',
'w-full px-4 py-2 border border-input bg-background rounded-md',
'text-foreground placeholder:text-muted-foreground',
'transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent focus-visible:ring-primary/30',
@ -30,7 +30,7 @@ export const LABEL_CLASS =
'block text-sm font-medium text-foreground text-muted-foreground/90 tracking-tight mb-1';
export const SELECT_CLASS = [
'w-full px-4 py-2 border border-input bg-background rounded-[var(--radius-md)] text-foreground',
'w-full px-4 py-2 border border-input bg-background rounded-md text-foreground',
'transition-[border-color,box-shadow] duration-[var(--duration-normal)]',
'focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent focus-visible:ring-primary/30',
].join(' ');

2
apps/web/src/features/tracks/components/track-history/TrackHistory.tsx
View file

@ -37,7 +37,7 @@ export function TrackHistory({
if (error) {
return (
<div className={cn('p-4', className)}>
<Alert variant="destructive" className="rounded-[var(--radius-xl)]">
<Alert variant="destructive" className="rounded-xl">
<AlertDescription className="tracking-tight">{error}</AlertDescription>
</Alert>
</div>

2
apps/web/src/features/tracks/components/track-history/TrackHistoryEmpty.tsx
View file

@ -2,7 +2,7 @@ import { History } from 'lucide-react';
export function TrackHistoryEmpty() {
return (
<div className="text-center py-8 text-muted-foreground/90 text-sm tracking-tight rounded-[var(--radius-xl)]">
<div className="text-center py-8 text-muted-foreground/90 text-sm tracking-tight rounded-xl">
<History className="h-12 w-12 mx-auto mb-4 opacity-50 transition-opacity duration-[var(--duration-normal)]" aria-hidden />
<p>Aucune modification enregistrée</p>
</div>

6
apps/web/src/features/tracks/components/track-history/TrackHistoryItemRow.tsx
View file

@ -46,13 +46,13 @@ export function TrackHistoryItemRow({ item }: TrackHistoryItemRowProps) {
</div>
{(oldValue !== null || newValue !== null) && (
<div className="space-y-2 rounded-[var(--radius-lg)] border border-border/80 bg-muted/50 p-4 text-sm transition-colors duration-[var(--duration-normal)]">
<div className="space-y-2 rounded-lg border border-border/80 bg-muted/50 p-4 text-sm transition-colors duration-[var(--duration-normal)]">
{oldValue !== null && (
<div>
<div className="text-xs font-medium text-muted-foreground/90 mb-1 tracking-tight">
Ancienne valeur:
</div>
<pre className="text-xs bg-background rounded-[var(--radius-md)] p-2 overflow-x-auto tracking-tight">
<pre className="text-xs bg-background rounded-md p-2 overflow-x-auto tracking-tight">
{formatValue(oldValue)}
</pre>
</div>
@ -62,7 +62,7 @@ export function TrackHistoryItemRow({ item }: TrackHistoryItemRowProps) {
<div className="text-xs font-medium text-muted-foreground/90 mb-1 tracking-tight">
Nouvelle valeur:
</div>
<pre className="text-xs bg-background rounded-[var(--radius-md)] p-2 overflow-x-auto tracking-tight">
<pre className="text-xs bg-background rounded-md p-2 overflow-x-auto tracking-tight">
{formatValue(newValue)}
</pre>
</div>

12
apps/web/src/features/tracks/components/track-history/TrackHistorySkeleton.tsx
View file

@ -9,9 +9,9 @@ export function TrackHistorySkeleton() {
<div className="space-y-4 min-h-layout-story">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Skeleton className="h-5 w-5 rounded-[var(--radius-md)]" />
<Skeleton className="h-6 w-52 rounded-[var(--radius-md)]" />
<Skeleton className="h-4 w-8 rounded-[var(--radius-md)]" />
<Skeleton className="h-5 w-5 rounded-md" />
<Skeleton className="h-6 w-52 rounded-md" />
<Skeleton className="h-4 w-8 rounded-md" />
</div>
</div>
<div className="relative space-y-6">
@ -21,10 +21,10 @@ export function TrackHistorySkeleton() {
<Skeleton className="relative z-10 h-12 w-12 shrink-0 rounded-full" />
<div className="flex-1 min-w-0 space-y-2 pb-6">
<div className="flex items-center justify-between gap-2">
<Skeleton className="h-4 w-24 rounded-[var(--radius-md)]" />
<Skeleton className="h-3 w-32 rounded-[var(--radius-md)]" />
<Skeleton className="h-4 w-24 rounded-md" />
<Skeleton className="h-3 w-32 rounded-md" />
</div>
<Skeleton className="h-16 rounded-[var(--radius-lg)]" />
<Skeleton className="h-16 rounded-lg" />
</div>
</div>
))}

4
apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationNav.tsx
View file

@ -17,14 +17,14 @@ interface TrackListPaginationNavProps {
}
const navButtonClass = [
'p-2 rounded-[var(--radius-md)] text-muted-foreground/90',
'p-2 rounded-md text-muted-foreground/90',
'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
'hover:bg-primary/10 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed active:scale-95',
].join(' ');
const pageButtonClass = [
'px-4 py-1.5 rounded-[var(--radius-md)] text-sm font-medium tabular-nums tracking-tight',
'px-4 py-1.5 rounded-md text-sm font-medium tabular-nums tracking-tight',
'transition-[color,background-color,transform] duration-[var(--duration-normal)]',
'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'disabled:opacity-50 disabled:cursor-not-allowed active:scale-95',

12
apps/web/src/features/tracks/components/track-list-pagination/TrackListPaginationSkeleton.tsx
View file

@ -17,17 +17,17 @@ export function TrackListPaginationSkeleton({
)}
role="presentation"
>
<Skeleton className="h-4 w-48 rounded-[var(--radius-md)]" />
<Skeleton className="h-4 w-48 rounded-md" />
<div className="flex items-center gap-2">
<Skeleton className="h-10 w-10 rounded-[var(--radius-md)]" />
<Skeleton className="h-10 w-10 rounded-[var(--radius-md)]" />
<Skeleton className="h-10 w-10 rounded-md" />
<Skeleton className="h-10 w-10 rounded-md" />
<div className="flex gap-1">
{Array.from({ length: 5 }, (_, i) => (
<Skeleton key={i} className="h-9 w-10 rounded-[var(--radius-md)]" />
<Skeleton key={i} className="h-9 w-10 rounded-md" />
))}
</div>
<Skeleton className="h-10 w-10 rounded-[var(--radius-md)]" />
<Skeleton className="h-10 w-10 rounded-[var(--radius-md)]" />
<Skeleton className="h-10 w-10 rounded-md" />
<Skeleton className="h-10 w-10 rounded-md" />
</div>
</div>
);

2
apps/web/src/features/tracks/components/track-search-filters/TrackSearchFilters.tsx
View file

@ -40,7 +40,7 @@ export function TrackSearchFilters({
variant="ghost"
size="sm"
onClick={() => setShowAdvanced(!showAdvanced)}
className="text-sm tracking-tight rounded-[var(--radius-md)] transition-colors duration-[var(--duration-normal)] hover:bg-primary/10 hover:text-primary"
className="text-sm tracking-tight rounded-md transition-colors duration-[var(--duration-normal)] hover:bg-primary/10 hover:text-primary"
>
{showAdvanced ? 'Masquer' : 'Afficher'} les filtres avancés
</Button>

4
apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersAdvanced.tsx
View file

@ -14,7 +14,7 @@ interface TrackSearchFiltersAdvancedProps {
const labelClass = 'text-muted-foreground/90 tracking-tight';
const inputClass =
'rounded-[var(--radius-md)] transition-[border-color,box-shadow] duration-[var(--duration-normal)]';
'rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]';
export function TrackSearchFiltersAdvanced({
filters,
@ -23,7 +23,7 @@ export function TrackSearchFiltersAdvanced({
updateFilter,
}: TrackSearchFiltersAdvancedProps) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 border border-border rounded-[var(--radius-xl)] bg-muted/30 transition-colors duration-[var(--duration-normal)]">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 border border-border rounded-xl bg-muted/30 transition-colors duration-[var(--duration-normal)]">
<div className="space-y-2">
<Label htmlFor="tags" className={labelClass}>
Tags (séparés par des virgules)

4
apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersBasic.tsx
View file

@ -19,7 +19,7 @@ interface TrackSearchFiltersBasicProps {
const labelClass = 'text-muted-foreground/90 tracking-tight';
const selectClass =
'w-full mt-1 rounded-[var(--radius-md)] transition-[border-color,box-shadow] duration-[var(--duration-normal)]';
'w-full mt-1 rounded-md transition-[border-color,box-shadow] duration-[var(--duration-normal)]';
export function TrackSearchFiltersBasic({
filters,
@ -94,7 +94,7 @@ export function TrackSearchFiltersBasic({
variant="outline"
size="sm"
onClick={onClear}
className="mb-0 rounded-[var(--radius-md)] transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
className="mb-0 rounded-md transition-[color,transform] duration-[var(--duration-normal)] active:scale-95"
>
<X className="h-4 w-4 mr-2 text-muted-foreground/90" />
Réinitialiser

6
apps/web/src/features/tracks/components/track-search-filters/TrackSearchFiltersSkeleton.tsx
View file

@ -22,12 +22,12 @@ export function TrackSearchFiltersSkeleton({
<div className="flex flex-wrap gap-4 items-end">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="flex-1 min-w-48 space-y-1">
<Skeleton className="h-4 w-16 rounded-[var(--radius-md)]" />
<Skeleton className="h-10 w-full rounded-[var(--radius-md)]" />
<Skeleton className="h-4 w-16 rounded-md" />
<Skeleton className="h-10 w-full rounded-md" />
</div>
))}
</div>
<Skeleton className="h-9 w-48 rounded-[var(--radius-md)]" />
<Skeleton className="h-9 w-48 rounded-md" />
</div>
);
}