Refactor/UI ux

apps/web/src/features/workout/workout-card.tsx

@@ -5,88 +5,128 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-  CardTitle,
 } from '@/shared/components/ui/card';
 import { WORKOUT_ELEMENT_TYPES, WorkoutDto, TrainingSessionDto } from '@dropit/schemas';
-import { getCategoryBadgeVariant } from '@/shared/utils';
-import { Separator } from '@/shared/components/ui/separator';
 
 interface WorkoutCardProps {
   workout: WorkoutDto;
   trainingSessions: TrainingSessionDto[];
   onWorkoutClick: (id: string) => void;
 }
 
+// Fonction pour obtenir la couleur pastel selon la catégorie (jaune ou rouge pâle)
+const getCategoryColor = (category: string) => {
+  const colors: Record<string, string> = {
+    Force: 'bg-red-50 text-red-700 border-red-200',
+    Technique: 'bg-yellow-50 text-yellow-700 border-yellow-200',
+    Endurance: 'bg-red-50 text-red-700 border-red-200',
+    Mobilité: 'bg-yellow-50 text-yellow-700 border-yellow-200',
+    Conditioning: 'bg-red-50 text-red-700 border-red-200',
+  };
+  return colors[category] || 'bg-yellow-50 text-yellow-700 border-yellow-200';
+};
+
 export function WorkoutCard({ workout, trainingSessions, onWorkoutClick }: WorkoutCardProps) {
   return (
     <Card
-      className="cursor-pointer shadow-none hover:shadow-md transition-shadow rounded-md flex flex-col" 
-      onClick={() => onWorkoutClick(workout.id)}
+      className="border border-gray-100 rounded-2xl"
     >
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-6">
-        <CardTitle className="text-sm font-bold">{workout.title}</CardTitle>
-        <Badge 
-            variant="outline"
-            className={`text-xs font-medium ${getCategoryBadgeVariant(workout.workoutCategory || '')}`}
-          >
-            {workout.workoutCategory || 'Sans catégorie'}
-          </Badge>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between gap-3">
+          <h3 className="text-base font-semibold text-gray-900 line-clamp-2 flex-1">
+            {workout.title}
+          </h3>
+          {workout.workoutCategory && (
+            <Badge
+              variant="outline"
+              className={`text-xs font-medium shrink-0 ${getCategoryColor(workout.workoutCategory)}`}
+            >
+              {workout.workoutCategory}
+            </Badge>
+          )}
+        </div>
       </CardHeader>
-      <CardContent className="space-y-4">
-        {workout.elements.map((element) => {
-          const isExercise = element.type === WORKOUT_ELEMENT_TYPES.EXERCISE;
-          const categoryName = isExercise
-            ? element.exercise.exerciseCategory?.name
-            : element.complex.complexCategory?.name;
 
-          return (
-            <div key={element.id} className="space-y-1">
-              <div className="flex items-baseline gap-2">
-                <span className="text-xs text-foreground">
-                  {element.type.toUpperCase()}
-                </span>
-                {categoryName && (
-                  <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground">•</span>
-                    <span className="text-xs text-foreground">
-                      {categoryName}
-                    </span>
+      <CardContent className="pb-4">
+        <div className="grid grid-cols-2 gap-3">
+          {workout.elements.map((element) => {
+            const isExercise = element.type === WORKOUT_ELEMENT_TYPES.EXERCISE;
+
+            return (
+              <div
+                key={element.id}
+                className={`p-3 rounded-lg border ${
+                  isExercise
+                    ? 'bg-yellow-50/50 border-yellow-100'
+                    : 'bg-red-50/50 border-red-100'
+                }`}
+              >
+                {/* Header avec type et sets/reps */}
+                <div className="flex items-center justify-between mb-2">
+                  <Badge
+                    variant="secondary"
+                    className={`text-[10px] font-semibold uppercase ${
+                      isExercise
+                        ? 'bg-yellow-100 text-yellow-700 hover:bg-yellow-100'
+                        : 'bg-red-100 text-red-700 hover:bg-red-100'
+                    }`}
+                  >
+                    {isExercise ? 'exercise' : 'complex'}
+                  </Badge>
+                  <span className="text-xs font-semibold text-gray-700">
+                    {element.sets}x{element.reps}  {('intensity' in element && element.intensity) ? `${element.intensity}%` : ''}
+                  </span>
+                </div>
+
+                {/* Contenu */}
+                {isExercise ? (
+                  <div className="text-xs text-gray-600">
+                    {element.exercise.name}
+                  </div>
+                ) : (
+                  <div className="space-y-1.5">
+                    {element.complex.exercises && element.complex.exercises.length > 0 && (
+                      <div className="border-l-2 border-gray-300 pl-2 space-y-0.5">
+                        {element.complex.exercises.map((ex, idx) => (
+                          <div key={`${ex.name}-${idx}`} className="text-xs text-gray-600">
+                            {ex.name}
+                          </div>
+                        ))}
+                      </div>
+                    )}
                   </div>
                 )}
               </div>
-              {/* Contenu */}
-              {isExercise ? (
-                <Badge variant="secondary" className="text-xs font-normal">
-                  {element.exercise.name}
-                </Badge>
-              ) : (
-                <div className="flex flex-wrap gap-1">
-                  {element.complex.exercises?.map((ex) => (
-                    <Badge key={ex.name} variant="secondary" className="text-xs font-normal">
-                      {ex.name}
-                    </Badge>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
       </CardContent>
-      <CardFooter className="gap-2 flex flex-col justify-end h-full">
-        <div className="flex items-center justify-end w-full">
-          <span className="text-xs text-muted-foreground">
-            {trainingSessions.length > 0 
+
+      <CardFooter className="pt-3 border-t border-gray-100 flex-col gap-3">
+        <div className="flex items-center justify-between w-full text-xs">
+          <span className={`font-medium ${
+            trainingSessions.length > 0 ? 'text-emerald-600' : 'text-gray-400'
+          }`}>
+            {trainingSessions.length > 0
               ? `${trainingSessions.length} session${trainingSessions.length > 1 ? 's' : ''} planifiée${trainingSessions.length > 1 ? 's' : ''}`
               : 'Non planifié'
             }
           </span>
         </div>
-        <Separator className="my-2" />
+
         <div className='flex gap-2 w-full'>
-          <Button variant="outline" size="sm" className="flex-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="flex-1 text-xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              onWorkoutClick(workout.id);
+            }}
+          >
             Voir les détails
           </Button>
-          <Button variant="default" size="sm" className="flex-1">
+          <Button variant="default" size="sm" className="flex-1 text-xs">
             Planifier
           </Button>
         </div>

apps/web/src/features/workout/workout-grid.tsx

@@ -9,12 +9,12 @@ interface WorkoutGridProps {
 
 export function WorkoutGrid({ workouts, trainingSessions, onWorkoutClick }: WorkoutGridProps) {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-6xl">
       {workouts.map((workout) => {
         const workoutSessions = trainingSessions.filter(
           session => session.workout.id === workout.id
         );
-        
+
         return (
           <WorkoutCard
             key={workout.id}

apps/web/src/routes/__home.athletes.$athleteId.tsx

@@ -255,7 +255,7 @@ function AthleteDetailPage() {
       </div>
 
       {/* Main Content */}
-      <div className="flex-1 overflow-auto p-6">
+      <div className="flex-1 overflow-auto p-8">
         <div className="w-full">
           <AthleteDetail
             athlete={athlete}

apps/web/src/routes/__home.athletes.tsx

@@ -46,7 +46,7 @@ function AthletesPage() {
   if (!athletes) return <div>{t('common:no_results')}</div>;
 
   return (
-    <div className="relative flex-1">
+    <div className="relative flex-1 p-8">
       <HeaderPage
         title={t('athletes:title')}
         description={t('athletes:description')}

apps/web/src/routes/__home.dashboard.tsx

@@ -14,7 +14,7 @@ function Dashboard() {
   const { t } = useTranslation();
 
   return (
-    <div className="relative flex-1">
+    <div className="relative flex-1 p-8">
       <HeaderPage
         title={t('dashboard.title')}
         description={t('dashboard.description')}

apps/web/src/routes/__home.help.tsx

@@ -5,5 +5,5 @@ export const Route = createFileRoute('/__home/help')({
 })
 
 function RouteComponent() {
-  return <div>Hello "/__home/help"!</div>
+  return <div className="p-8">Hello "/__home/help"!</div>
 }

apps/web/src/routes/__home.library.complex.tsx

@@ -1,5 +1,6 @@
 import { api } from '@/lib/api'
 import { DetailsPanel } from '@/shared/components/ui/details-panel'
+import { Spinner } from '@/shared/components/ui/spinner'
 import { useTranslation } from '@dropit/i18n'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { createFileRoute } from '@tanstack/react-router'
@@ -9,6 +10,7 @@ import { ComplexDetail } from '../features/complex/complex-detail'
 import { ComplexFilters } from '../features/complex/complex-filters'
 import { ComplexGrid } from '../features/complex/complex-grid'
 import { DialogCreation } from '../features/exercises/dialog-creation'
+import { HeaderPage } from '../shared/components/layout/header-page'
 
 export const Route = createFileRoute('/__home/library/complex')({
   component: ComplexPage,
@@ -40,7 +42,7 @@ function ComplexPage() {
     },
   })
 
-  const { data: complexDetails } = useQuery({
+  const { data: complexDetails, isLoading: complexDetailsLoading } = useQuery({
     queryKey: ['complex', selectedComplex],
     queryFn: async () => {
       if (!selectedComplex) return null
@@ -69,43 +71,52 @@ function ComplexPage() {
   }
 
   return (
-    <div className="relative flex-1">
-      <div
-        className={`transition-all duration-200 ${
-          selectedComplex ? 'lg:mr-[430px]' : ''
-        }`}
-      >
-        <ComplexFilters
-          onFilterChange={setFilter}
-          onCategoryChange={setCategoryFilter}
-          onCreateClick={() => setCreateComplexModalOpen(true)}
-          categories={categories}
-          disabled={isLoading || !complexes?.length}
+    <div className="h-full flex gap-0">
+      <div className="flex-1 min-w-0 flex flex-col p-8">
+        <HeaderPage
+          title={t('library.title')}
+          description={t('library.description')}
         />
 
-        {isLoading ? (
-          <div className="flex items-center justify-center h-32">
-            {t('common.loading')}
-          </div>
-        ) : !complexes?.length ? (
-          <div className="flex flex-col items-center justify-center h-32 gap-2 text-muted-foreground">
-            <p>{t('complex.filters.no_results')}</p>
-            <p className="text-sm">{t('common.start_create')}</p>
-          </div>
-        ) : (
-          <ComplexGrid
-            complexes={filteredComplexes || []}
-            onComplexClick={(complexId) => setSelectedComplex(complexId)}
+        <div className="mt-6 flex-1 min-h-0">
+          <ComplexFilters
+            onFilterChange={setFilter}
+            onCategoryChange={setCategoryFilter}
+            onCreateClick={() => setCreateComplexModalOpen(true)}
+            categories={categories}
+            disabled={isLoading || !complexes?.length}
           />
-        )}
+
+          {isLoading ? (
+            <div className="flex items-center justify-center h-32">
+              {t('common.loading')}
+            </div>
+          ) : !complexes?.length ? (
+            <div className="flex flex-col items-center justify-center h-32 gap-2 text-muted-foreground">
+              <p>{t('complex.filters.no_results')}</p>
+              <p className="text-sm">{t('common.start_create')}</p>
+            </div>
+          ) : (
+            <ComplexGrid
+              complexes={filteredComplexes || []}
+              onComplexClick={(complexId) => setSelectedComplex(complexId)}
+            />
+          )}
+        </div>
       </div>
 
       <DetailsPanel
         open={!!selectedComplex}
         onClose={() => setSelectedComplex(null)}
         title={t('complex.details.title')}
       >
-        {complexDetails && <ComplexDetail complex={complexDetails} />}
+        {complexDetailsLoading ? (
+          <div className="flex items-center justify-center h-32">
+            <Spinner className="size-8" />
+          </div>
+        ) : complexDetails ? (
+          <ComplexDetail complex={complexDetails} />
+        ) : null}
       </DetailsPanel>
 
       <DialogCreation