From f72ae3cab9743ec5c132c5e79282193df39700ca Mon Sep 17 00:00:00 2001
From: "ext.jeremy.guillot@maxicoffee.domains" <j.guillot_ext@maxicoffee.com>
Date: Sun, 15 Mar 2026 20:13:31 +0100
Subject: [PATCH] style(import): aligner l'UI d'import sur le design system
 settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Layout max-width supprimé → pleine largeur disponible
- Sections avec border-t et titres uppercase comme les settings
- FileImportCard : card → row (divide-y, py-3, pas de shadow/border)
- ImportResults : card → sections border-t inline dans la page
- Inputs : padding explicite, border explicite, sans rounded
- Suppression de tous les rounded-* sur la page (boutons, badges, images, zone upload)
---
 .../components/FileImportCard.vue             |  34 ++--
 .../presentation/components/ImportResults.vue | 146 +++++++++---------
 .../components/MangaMatchCard.vue             |  10 +-
 .../presentation/components/StatusBadge.vue   |   6 +-
 .../presentation/pages/NewImportPage.vue      |  93 ++++++-----
 .../app/shared/components/ui/FileUpload.vue   |  27 +---
 6 files changed, 156 insertions(+), 160 deletions(-)

diff --git a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
index 5ca98f3..ca62d8f 100644
--- a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
@@ -1,20 +1,20 @@
 <template>
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
+    <div class="py-3">
 
-        <!-- En-tête : icône, nom, statut, actions -->
+        <!-- Row principal : icône, nom, statut, actions -->
         <div class="flex items-center gap-3">
-            <div class="w-9 h-9 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center shrink-0">
-                <DocumentIcon class="w-5 h-5 text-gray-500 dark:text-gray-400" />
+            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                <DocumentIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
             </div>
 
             <div class="flex-1 min-w-0">
                 <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</p>
                 <p class="text-xs text-gray-500 dark:text-gray-400">
                     {{ file.getFormattedSize() }} · {{ file.getFileExtension().toUpperCase() }}
-                    <span v-if="file.isAnalyzed() && file.getExtractedChapterNumber()" class="ml-2 text-blue-600 dark:text-blue-400">
+                    <span v-if="file.isAnalyzed() && file.getExtractedChapterNumber()" class="ml-2 text-green-600 dark:text-green-400">
                         Ch. {{ file.getExtractedChapterNumber() }}
                     </span>
-                    <span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-purple-600 dark:text-purple-400">
+                    <span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-green-600 dark:text-green-400">
                         Vol. {{ file.getExtractedVolumeNumber() }}
                     </span>
                 </p>
@@ -27,7 +27,7 @@
                     v-if="file.isReadyForImport()"
                     @click="$emit('import-file')"
                     :disabled="isImporting"
-                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-xs font-medium rounded-md transition-colors"
+                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-xs font-medium transition-colors"
                 >
                     <ArrowUpTrayIcon class="w-3.5 h-3.5" />
                     Importer
@@ -36,14 +36,14 @@
                 <button
                     v-if="file.hasError()"
                     @click="$emit('retry-file')"
-                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-md transition-colors"
+                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium transition-colors"
                 >
                     Réessayer
                 </button>
 
                 <button
                     @click="$emit('remove-file')"
-                    class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors rounded"
+                    class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                     title="Supprimer"
                 >
                     <XMarkIcon class="w-4 h-4" />
@@ -52,19 +52,19 @@
         </div>
 
         <!-- Message d'erreur -->
-        <div v-if="file.hasError()" class="mt-3 flex items-start gap-2 text-xs text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/20 rounded-md px-3 py-2">
+        <div v-if="file.hasError()" class="mt-2 flex items-start gap-2 text-xs text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-3 py-2">
             <ExclamationCircleIcon class="w-4 h-4 shrink-0 mt-0.5" />
             {{ file.errorMessage }}
         </div>
 
         <!-- Aucun manga trouvé -->
-        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-3 flex items-start gap-2 text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 rounded-md px-3 py-2">
+        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-2 flex items-start gap-2 text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-2">
             <ExclamationTriangleIcon class="w-4 h-4 shrink-0 mt-0.5" />
             Aucun manga correspondant trouvé. Vérifiez le nom du fichier.
         </div>
 
         <!-- Sélection du manga -->
-        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
+        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-3 space-y-3">
             <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
                 {{ file.getMatches().length }} correspondance(s)
             </p>
@@ -80,29 +80,29 @@
             </div>
         </div>
 
-        <!-- Numéros de chapitre / volume (une fois un manga sélectionné) -->
+        <!-- Numéros de chapitre / volume -->
         <div v-if="file.selectedManga" class="mt-3 grid grid-cols-2 gap-3">
             <div>
-                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Chapitre</label>
+                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Chapitre</label>
                 <input
                     type="number"
                     step="0.5"
                     :value="file.selectedChapterNumber ?? ''"
                     @input="handleChapterNumberInput"
                     :disabled="file.selectedVolumeNumber !== null"
-                    class="w-full text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
+                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
                     placeholder="Ex: 1, 1.5..."
                 />
             </div>
             <div>
-                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Volume</label>
+                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Volume</label>
                 <input
                     type="number"
                     step="0.5"
                     :value="file.selectedVolumeNumber ?? ''"
                     @input="handleVolumeNumberInput"
                     :disabled="file.selectedChapterNumber !== null"
-                    class="w-full text-sm border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
+                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
                     placeholder="Ex: 1, 1.5..."
                 />
             </div>
diff --git a/assets/vue/app/domain/import/presentation/components/ImportResults.vue b/assets/vue/app/domain/import/presentation/components/ImportResults.vue
index 0031b1f..8e3f853 100644
--- a/assets/vue/app/domain/import/presentation/components/ImportResults.vue
+++ b/assets/vue/app/domain/import/presentation/components/ImportResults.vue
@@ -1,96 +1,94 @@
 <template>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
-    <div class="text-center mb-6">
-      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/40 mb-4">
-        <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+  <div>
+    <!-- En-tête -->
+    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="flex items-center justify-center h-9 w-9 bg-green-100 dark:bg-green-900/40">
+            <CheckCircleIcon class="h-5 w-5 text-green-600" />
+          </div>
+          <div>
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">Import terminé</h3>
+            <p class="text-xs text-gray-500 dark:text-gray-400">Voici le résumé de votre session d'import</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-6 text-center">
+          <div>
+            <div class="text-xl font-bold text-green-600">{{ importedCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Importés</div>
+          </div>
+          <div>
+            <div class="text-xl font-bold text-red-600">{{ errorCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Erreurs</div>
+          </div>
+          <div>
+            <div class="text-xl font-bold text-gray-600 dark:text-gray-300">{{ totalCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Total</div>
+          </div>
+        </div>
       </div>
-      <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Import terminé</h3>
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        Voici le résumé de votre session d'import
-      </p>
-    </div>
+    </section>
 
-    <!-- Statistics -->
-    <div class="grid grid-cols-3 gap-4 mb-6">
-      <div class="text-center">
-        <div class="text-2xl font-bold text-green-600">{{ importedCount }}</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Importés</div>
-      </div>
-      <div class="text-center">
-        <div class="text-2xl font-bold text-red-600">{{ errorCount }}</div>
-        <div class="text-sm text-gray-500">Erreurs</div>
-      </div>
-      <div class="text-center">
-        <div class="text-2xl font-bold text-gray-600">{{ totalCount }}</div>
-        <div class="text-sm text-gray-500">Total</div>
-      </div>
-    </div>
-
-    <!-- Success Files List -->
-    <div v-if="importedFiles.length > 0" class="mb-6">
-      <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
-        Fichiers importés avec succès ({{ importedFiles.length }})
-      </h4>
-      <ul class="space-y-2">
-        <li
+    <!-- Fichiers importés -->
+    <section v-if="importedFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Importés ({{ importedFiles.length }})
+      </h2>
+      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+        <div
           v-for="file in importedFiles"
           :key="file.id"
-          class="flex items-center text-sm"
+          class="flex items-center gap-2 py-2.5 text-sm"
         >
-          <svg class="flex-shrink-0 h-4 w-4 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-          </svg>
-          <span class="text-gray-900 dark:text-gray-100">{{ file.filename }}</span>
-          <span v-if="file.selectedManga" class="ml-2 text-gray-500 dark:text-gray-400">
-            → {{ file.selectedManga.title }}
-          </span>
-        </li>
-      </ul>
-    </div>
+          <CheckCircleIcon class="flex-shrink-0 h-4 w-4 text-green-400" />
+          <span class="text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</span>
+          <span v-if="file.selectedManga" class="text-gray-400 dark:text-gray-500 shrink-0">→ {{ file.selectedManga.title }}</span>
+        </div>
+      </div>
+    </section>
 
-    <!-- Error Files List -->
-    <div v-if="errorFiles.length > 0" class="mb-6">
-      <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
-        Fichiers en erreur ({{ errorFiles.length }})
-      </h4>
-      <ul class="space-y-2">
-        <li
+    <!-- Fichiers en erreur -->
+    <section v-if="errorFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Erreurs ({{ errorFiles.length }})
+      </h2>
+      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+        <div
           v-for="file in errorFiles"
           :key="file.id"
-          class="flex items-start text-sm"
+          class="flex items-start gap-2 py-2.5 text-sm"
         >
-          <svg class="flex-shrink-0 h-4 w-4 text-red-400 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-          </svg>
+          <XCircleIcon class="flex-shrink-0 h-4 w-4 text-red-400 mt-0.5" />
           <div>
             <div class="text-gray-900 dark:text-gray-100">{{ file.filename }}</div>
-            <div class="text-red-600 dark:text-red-400 text-xs mt-1">{{ file.errorMessage }}</div>
+            <div class="text-red-600 dark:text-red-400 text-xs mt-0.5">{{ file.errorMessage }}</div>
           </div>
-        </li>
-      </ul>
-    </div>
+        </div>
+      </div>
+    </section>
 
     <!-- Actions -->
-    <div class="flex justify-center space-x-4 pt-6 border-t dark:border-gray-700">
-      <button
-        @click="startNewImport"
-        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-      >
-        Nouvel import
-      </button>
-      <button
-        @click="goToLibrary"
-        class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-      >
-        Aller à la bibliothèque
-      </button>
-    </div>
+    <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <div class="flex gap-3">
+        <button
+          @click="startNewImport"
+          class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 text-sm font-medium"
+        >
+          Nouvel import
+        </button>
+        <button
+          @click="goToLibrary"
+          class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 text-sm font-medium"
+        >
+          Aller à la bibliothèque
+        </button>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useNewImportStore } from '../../application/store/newImportStore';
diff --git a/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
index b12acf5..ce1e82b 100644
--- a/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
@@ -1,8 +1,8 @@
 <template>
     <div
-        class="border rounded-lg p-2.5 cursor-pointer transition-all duration-150"
+        class="border p-2.5 cursor-pointer transition-all duration-150"
         :class="isSelected
-            ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+            ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
             : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'"
         @click="$emit('select-match', match)"
     >
@@ -12,11 +12,11 @@
                 v-if="match.thumbnailUrl"
                 :src="match.thumbnailUrl"
                 :alt="match.title"
-                class="w-12 h-16 object-cover rounded shrink-0"
+                class="w-12 h-16 object-cover shrink-0"
             />
             <div
                 v-else
-                class="w-12 h-16 bg-gray-100 dark:bg-gray-700 rounded shrink-0 flex items-center justify-center"
+                class="w-12 h-16 bg-gray-100 dark:bg-gray-700 shrink-0 flex items-center justify-center"
             >
                 <PhotoIcon class="w-6 h-6 text-gray-400" />
             </div>
@@ -28,7 +28,7 @@
                 </p>
                 <div class="flex items-center justify-between mt-1">
                     <span class="text-xs text-gray-400 dark:text-gray-500">{{ match.matchScore }}%</span>
-                    <CheckCircleIcon v-if="isSelected" class="w-4 h-4 text-blue-500 shrink-0" />
+                    <CheckCircleIcon v-if="isSelected" class="w-4 h-4 text-green-500 shrink-0" />
                 </div>
             </div>
         </div>
diff --git a/assets/vue/app/domain/import/presentation/components/StatusBadge.vue b/assets/vue/app/domain/import/presentation/components/StatusBadge.vue
index 0cb8b15..c9434e2 100644
--- a/assets/vue/app/domain/import/presentation/components/StatusBadge.vue
+++ b/assets/vue/app/domain/import/presentation/components/StatusBadge.vue
@@ -46,10 +46,10 @@ const badgeText = computed(() => {
 });
 
 const badgeClasses = computed(() => {
-  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium';
+  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 text-xs font-medium';
 
   if (props.isImporting || props.isAnalyzing) {
-    return `${baseClasses} bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300`;
+    return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
   }
 
   switch (props.status) {
@@ -58,7 +58,7 @@ const badgeClasses = computed(() => {
     case 'analyzed':
       return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300`;
     case 'importing':
-      return `${baseClasses} bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300`;
+      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
     case 'imported':
       return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
     case 'error':
diff --git a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
index 3694f6d..57cd047 100644
--- a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
+++ b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
@@ -1,50 +1,57 @@
 <template>
-    <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
-        <Toolbar v-if="store.hasFiles && !store.allFilesProcessed" :config="toolbarConfig" />
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
 
         <div class="overflow-y-auto flex-1">
-            <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+            <div class="px-6 py-8">
 
                 <!-- Zone de dépôt -->
-                <FileUpload
-                    v-if="!store.hasFiles"
-                    label="Importer des fichiers CBZ/CBR"
-                    accept=".cbz,.cbr"
-                    :multiple="true"
-                    description="Formats CBZ ou CBR uniquement"
-                    @files-selected="store.addFiles($event)"
-                />
-
-                <!-- Barre de progression -->
-                <div v-if="store.hasFiles && !store.allFilesProcessed" class="flex items-center gap-3">
-                    <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
-                        <div
-                            class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
-                            :style="{ width: store.progressPercentage + '%' }"
-                        />
-                    </div>
-                    <span class="text-xs text-gray-500 dark:text-gray-400 shrink-0">
-                        {{ store.importedCount }}/{{ store.totalFiles }}
-                        <span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
-                    </span>
-                </div>
-
-                <!-- Liste des fichiers -->
-                <div v-if="store.hasFiles && !store.allFilesProcessed" class="space-y-4">
-                    <FileImportCard
-                        v-for="file in store.files"
-                        :key="file.id"
-                        :file="file"
-                        :is-analyzing="store.analyzingFiles.has(file.id)"
-                        :is-importing="store.importingFiles.has(file.id)"
-                        @manga-selected="(manga) => store.setFileManga(file.id, manga)"
-                        @chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
-                        @volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
-                        @import-file="() => importSingleFile(file.id)"
-                        @retry-file="() => retryFile(file.id)"
-                        @remove-file="() => store.removeFile(file.id)"
+                <section v-if="!store.hasFiles" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichiers</h2>
+                    <FileUpload
+                        label="Importer des fichiers CBZ/CBR"
+                        accept=".cbz,.cbr"
+                        :multiple="true"
+                        description="Formats CBZ ou CBR uniquement"
+                        @files-selected="store.addFiles($event)"
                     />
-                </div>
+                </section>
+
+                <!-- Fichiers en cours -->
+                <template v-if="store.hasFiles && !store.allFilesProcessed">
+                    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                        <div class="flex items-center justify-between mb-3">
+                            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                                {{ store.totalFiles }} fichier(s)
+                            </h2>
+                            <span class="text-xs text-gray-500 dark:text-gray-400">
+                                {{ store.importedCount }}/{{ store.totalFiles }}
+                                <span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
+                            </span>
+                        </div>
+                        <div class="bg-gray-200 dark:bg-gray-700 h-1.5 mb-4">
+                            <div
+                                class="bg-green-600 h-1.5 transition-all duration-300"
+                                :style="{ width: store.progressPercentage + '%' }"
+                            />
+                        </div>
+                        <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                            <FileImportCard
+                                v-for="file in store.files"
+                                :key="file.id"
+                                :file="file"
+                                :is-analyzing="store.analyzingFiles.has(file.id)"
+                                :is-importing="store.importingFiles.has(file.id)"
+                                @manga-selected="(manga) => store.setFileManga(file.id, manga)"
+                                @chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
+                                @volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
+                                @import-file="() => importSingleFile(file.id)"
+                                @retry-file="() => retryFile(file.id)"
+                                @remove-file="() => store.removeFile(file.id)"
+                            />
+                        </div>
+                    </section>
+                </template>
 
                 <!-- Résultats -->
                 <ImportResults v-if="store.allFilesProcessed" />
@@ -66,7 +73,9 @@ import ImportResults from '../components/ImportResults.vue';
 const store = useNewImportStore();
 
 const toolbarConfig = computed(() => ({
-    leftSection: [],
+    leftSection: [
+        { type: 'label', text: 'Import de bibliothèque', class: 'text-sm font-medium' },
+    ],
     rightSection: [
         ...(store.analyzedFiles.length > 0 ? [{
             type: 'button',
diff --git a/assets/vue/app/shared/components/ui/FileUpload.vue b/assets/vue/app/shared/components/ui/FileUpload.vue
index 2c57bf2..4e872f9 100644
--- a/assets/vue/app/shared/components/ui/FileUpload.vue
+++ b/assets/vue/app/shared/components/ui/FileUpload.vue
@@ -1,35 +1,23 @@
 <template>
   <div class="file-upload">
-    <label :for="inputId" class="block text-sm font-medium text-gray-700 mb-2">
+    <label :for="inputId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
       {{ label }}
     </label>
     
     <div 
-      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
-      :class="{ 'border-green-500 bg-green-50': isDragOver, 'hover:border-gray-400': !isDragOver }"
+      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed "
+      :class="{ 'border-green-500 bg-green-50 dark:bg-green-900/20': isDragOver, 'hover:border-gray-400': !isDragOver }"
       @drop.prevent="handleDrop"
       @dragover.prevent="isDragOver = true"
       @dragleave.prevent="isDragOver = false"
     >
       <div class="space-y-1 text-center">
-        <svg 
-          class="mx-auto h-12 w-12 text-gray-400" 
-          stroke="currentColor" 
-          fill="none" 
-          viewBox="0 0 48 48"
-        >
-          <path 
-            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" 
-            stroke-width="2" 
-            stroke-linecap="round" 
-            stroke-linejoin="round" 
-          />
-        </svg>
+        <ArrowUpTrayIcon class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
         
         <div class="flex text-sm text-gray-600">
           <label 
             :for="inputId" 
-            class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500"
+            class="relative cursor-pointer font-medium text-green-600 hover:text-green-500"
           >
             <span>Sélectionner des fichiers</span>
             <input 
@@ -50,8 +38,8 @@
         </p>
         
         <div v-if="selectedFiles.length > 0" class="mt-4">
-          <h4 class="text-sm font-medium text-gray-700 mb-2">Fichiers sélectionnés :</h4>
-          <ul class="text-xs text-gray-600 space-y-1">
+          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fichiers sélectionnés :</h4>
+          <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
             <li v-for="file in selectedFiles" :key="file.name" class="flex justify-between items-center">
               <span class="truncate">{{ file.name }}</span>
               <span class="text-gray-400">{{ formatFileSize(file.size) }}</span>
@@ -64,6 +52,7 @@
 </template>
 
 <script setup>
+import { ArrowUpTrayIcon } from '@heroicons/vue/24/outline';
 import { ref, computed, watch } from 'vue';
 
 const props = defineProps({
-- 
2.49.1