diff --git a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
index e2cd7f7..5ca98f3 100644
--- a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
@@ -1,228 +1,150 @@
 <template>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
-    <div class="flex items-start space-x-4">
-      <!-- File Icon and Info -->
-      <div class="flex-shrink-0">
-        <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
-          <svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-        </div>
-      </div>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
 
-      <!-- File Details -->
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center justify-between">
-          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 truncate">
-            {{ file.filename }}
-          </h3>
-
-          <!-- Status Badge -->
-          <div class="flex-shrink-0 ml-4">
-            <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
-          </div>
-        </div>
-
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-          {{ file.getFormattedSize() }} • {{ file.getFileExtension().toUpperCase() }}
-        </p>
-
-        <!-- Extracted Info -->
-        <div v-if="file.isAnalyzed()" class="mt-2 flex gap-3 text-sm">
-          <span v-if="file.getExtractedChapterNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
-            Chapitre {{ file.getExtractedChapterNumber() }}
-          </span>
-          <span v-if="file.getExtractedVolumeNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
-            Volume {{ file.getExtractedVolumeNumber() }}
-          </span>
-        </div>
-
-        <!-- Error Display -->
-        <div v-if="file.hasError()" class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
-          <div class="flex">
-            <svg class="flex-shrink-0 h-5 w-5 text-red-400" 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>
-            <div class="ml-3">
-              <h3 class="text-sm font-medium text-red-800 dark:text-red-300">Erreur</h3>
-              <div class="mt-2 text-sm text-red-700 dark:text-red-400">{{ file.errorMessage }}</div>
+        <!-- En-tête : 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>
+
+            <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">
+                        Ch. {{ file.getExtractedChapterNumber() }}
+                    </span>
+                    <span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-purple-600 dark:text-purple-400">
+                        Vol. {{ file.getExtractedVolumeNumber() }}
+                    </span>
+                </p>
+            </div>
+
+            <div class="flex items-center gap-2 shrink-0">
+                <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
+
+                <button
+                    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"
+                >
+                    <ArrowUpTrayIcon class="w-3.5 h-3.5" />
+                    Importer
+                </button>
+
+                <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"
+                >
+                    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"
+                    title="Supprimer"
+                >
+                    <XMarkIcon class="w-4 h-4" />
+                </button>
             </div>
-          </div>
         </div>
 
-        <!-- Manga Selection -->
+        <!-- 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">
+            <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">
+            <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>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-              Sélectionner un manga ({{ file.getMatches().length }} correspondance(s) trouvée(s))
-            </label>
+            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                {{ file.getMatches().length }} correspondance(s)
+            </p>
 
-            <!-- Matches Grid -->
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-              <MangaMatchCard
-                v-for="match in sortedMatches"
-                :key="match.id"
-                :match="match"
-                :is-selected="file.selectedManga?.id === match.id"
-                @select-match="handleMangaSelection"
-              />
+            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+                <MangaMatchCard
+                    v-for="match in sortedMatches"
+                    :key="match.id"
+                    :match="match"
+                    :is-selected="file.selectedManga?.id === match.id"
+                    @select-match="handleMangaSelection"
+                />
             </div>
-          </div>
-
-          <!-- Selected Manga Preview -->
-          <div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
-            <img
-              v-if="file.selectedManga.thumbnailUrl"
-              :src="file.selectedManga.thumbnailUrl"
-              :alt="file.selectedManga.title"
-              class="w-12 h-16 object-cover rounded"
-            />
-            <div class="flex-1">
-              <p class="font-medium text-gray-900 dark:text-gray-100">{{ file.selectedManga.title }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400">{{ file.selectedManga.slug }}</p>
-              <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
-            </div>
-          </div>
-
-          <!-- Chapter/Volume Number Inputs -->
-          <div v-if="file.selectedManga" class="grid grid-cols-2 gap-3">
-            <!-- Chapter Number -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Numéro de chapitre
-              </label>
-              <input
-                type="number"
-                step="0.5"
-                :value="file.selectedChapterNumber ?? ''"
-                @input="handleChapterNumberInput"
-                :disabled="file.selectedVolumeNumber !== null"
-                class="w-full 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"
-                placeholder="Ex: 1, 1.5, 2..."
-              />
-            </div>
-
-            <!-- Volume Number -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Numéro de volume
-              </label>
-              <input
-                type="number"
-                step="0.5"
-                :value="file.selectedVolumeNumber ?? ''"
-                @input="handleVolumeNumberInput"
-                :disabled="file.selectedChapterNumber !== null"
-                class="w-full 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"
-                placeholder="Ex: 1, 1.5, 2..."
-              />
-            </div>
-          </div>
         </div>
 
-        <!-- No Matches Message -->
-        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
-          <div class="flex">
-            <svg class="flex-shrink-0 h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-            </svg>
-            <div class="ml-3">
-              <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">Aucun manga trouvé</h3>
-              <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
-                Aucun manga ne correspond à ce fichier. Vérifiez le nom du fichier.
-              </div>
+        <!-- Numéros de chapitre / volume (une fois un manga sélectionné) -->
+        <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>
+                <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"
+                    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>
+                <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"
+                    placeholder="Ex: 1, 1.5..."
+                />
             </div>
-          </div>
         </div>
-      </div>
+
     </div>
-
-    <!-- Actions -->
-    <div class="mt-6 flex justify-between items-center border-t dark:border-gray-700 pt-4">
-      <div class="flex space-x-3">
-        <!-- Import Button -->
-        <button
-          v-if="file.isReadyForImport()"
-          @click="$emit('import-file')"
-          :disabled="isImporting"
-          class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"
-        >
-          <svg v-if="isImporting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-          {{ isImporting ? 'Import en cours...' : 'Importer' }}
-        </button>
-
-        <!-- Retry Button -->
-        <button
-          v-if="file.hasError()"
-          @click="$emit('retry-file')"
-          class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-        >
-          Réessayer
-        </button>
-      </div>
-
-      <!-- Remove Button -->
-      <button
-        @click="$emit('remove-file')"
-        class="text-red-600 hover:text-red-700 text-sm font-medium"
-      >
-        Supprimer
-      </button>
-    </div>
-  </div>
 </template>
 
 <script setup>
+import { ArrowUpTrayIcon, DocumentIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
 import { computed } from 'vue';
 import MangaMatchCard from './MangaMatchCard.vue';
 import StatusBadge from './StatusBadge.vue';
 
 const props = defineProps({
-  file: {
-    type: Object,
-    required: true
-  },
-  isAnalyzing: {
-    type: Boolean,
-    default: false
-  },
-  isImporting: {
-    type: Boolean,
-    default: false
-  }
+    file: { type: Object, required: true },
+    isAnalyzing: { type: Boolean, default: false },
+    isImporting: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
-  'manga-selected',
-  'chapter-number-selected',
-  'volume-number-selected',
-  'import-file',
-  'retry-file',
-  'remove-file'
+    'manga-selected',
+    'chapter-number-selected',
+    'volume-number-selected',
+    'import-file',
+    'retry-file',
+    'remove-file',
 ]);
 
-// Computed property to get sorted matches
-const sortedMatches = computed(() => {
-  const matches = props.file.getMatches();
-  return matches.sort((a, b) => b.matchScore - a.matchScore);
-});
+const sortedMatches = computed(() =>
+    [...props.file.getMatches()].sort((a, b) => b.matchScore - a.matchScore)
+);
 
-const handleMangaSelection = (selectedManga) => {
-  emit('manga-selected', selectedManga);
-};
+const handleMangaSelection = (manga) => emit('manga-selected', manga);
 
 const handleChapterNumberInput = (event) => {
-  const value = event.target.value;
-  const chapterNumber = value ? parseFloat(value) : null;
-  emit('chapter-number-selected', chapterNumber);
+    const value = event.target.value;
+    emit('chapter-number-selected', value ? parseFloat(value) : null);
 };
 
 const handleVolumeNumberInput = (event) => {
-  const value = event.target.value;
-  const volumeNumber = value ? parseFloat(value) : null;
-  emit('volume-number-selected', volumeNumber);
+    const value = event.target.value;
+    emit('volume-number-selected', value ? parseFloat(value) : null);
 };
 </script>
diff --git a/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
index 468a779..b12acf5 100644
--- a/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
@@ -1,116 +1,47 @@
 <template>
-  <div
-    class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md"
-    :class="{
-      'border-blue-500 bg-blue-50 dark:bg-blue-900/20': isSelected,
-      'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-500': !isSelected
-    }"
-    @click="$emit('select-match', match)"
-  >
-    <!-- Match Header with Score -->
-    <div class="flex items-center justify-between mb-3">
-      <div class="flex items-center space-x-2">
-        <div
-          class="w-3 h-3 rounded-full"
-          :class="{
-            'bg-blue-500': isSelected,
-            'bg-gray-300': !isSelected
-          }"
-        ></div>
-        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Score: {{ match.matchScore }}</span>
-      </div>
-      <div v-if="isSelected" class="text-blue-600">
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-        </svg>
-      </div>
-    </div>
-
-    <!-- Manga Thumbnail -->
-    <div class="flex space-x-3">
-      <div class="flex-shrink-0">
-        <img
-          v-if="match.thumbnailUrl"
-          :src="match.thumbnailUrl"
-          :alt="match.title"
-          class="w-16 h-20 object-cover rounded border"
-        />
-        <div
-          v-else
-          class="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded border dark:border-gray-600 flex items-center justify-center"
-        >
-          <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        </div>
-      </div>
-
-      <!-- Manga Info -->
-      <div class="flex-1 min-w-0">
-        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" :title="match.title">
-          {{ match.title }}
-        </h4>
-        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate" :title="match.slug">
-          {{ match.slug }}
-        </p>
-
-        <!-- Alternative Slugs -->
-        <div v-if="match.alternativeSlugs && match.alternativeSlugs.length > 0" class="mt-2">
-          <p class="text-xs text-gray-400 dark:text-gray-500">Autres titres:</p>
-          <div class="flex flex-wrap gap-1 mt-1">
-            <span
-              v-for="altSlug in match.alternativeSlugs.slice(0, 2)"
-              :key="altSlug"
-              class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded"
+    <div
+        class="border rounded-lg p-2.5 cursor-pointer transition-all duration-150"
+        :class="isSelected
+            ? 'border-blue-500 bg-blue-50 dark:bg-blue-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)"
+    >
+        <div class="flex gap-2.5">
+            <!-- Couverture -->
+            <img
+                v-if="match.thumbnailUrl"
+                :src="match.thumbnailUrl"
+                :alt="match.title"
+                class="w-12 h-16 object-cover rounded 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"
             >
-              {{ altSlug }}
-            </span>
-            <span
-              v-if="match.alternativeSlugs.length > 2"
-              class="text-xs text-gray-400 dark:text-gray-500"
-            >
-              +{{ match.alternativeSlugs.length - 2 }} autres
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+                <PhotoIcon class="w-6 h-6 text-gray-400" />
+            </div>
 
-    <!-- Score Bar -->
-    <div class="mt-3">
-      <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
-        <span>Correspondance</span>
-        <span>{{ match.matchScore }}%</span>
-      </div>
-      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-        <div
-          class="h-2 rounded-full transition-all duration-300"
-          :class="{
-            'bg-blue-500': isSelected,
-            'bg-gray-400': !isSelected
-          }"
-          :style="{ width: match.matchScore + '%' }"
-        ></div>
-      </div>
+            <!-- Infos -->
+            <div class="flex-1 min-w-0 flex flex-col justify-between py-0.5">
+                <p class="text-xs font-medium text-gray-900 dark:text-gray-100 line-clamp-3 leading-snug" :title="match.title">
+                    {{ match.title }}
+                </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" />
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
+import { CheckCircleIcon, PhotoIcon } from '@heroicons/vue/24/outline';
+
 const props = defineProps({
-  match: {
-    type: Object,
-    required: true
-  },
-  isSelected: {
-    type: Boolean,
-    default: false
-  }
+    match: { type: Object, required: true },
+    isSelected: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['select-match']);
 </script>
-
-
-
-
diff --git a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
index 4904204..3694f6d 100644
--- a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
+++ b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
@@ -1,115 +1,94 @@
 <template>
-    <div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8">
-        <!-- Header -->
-        <div class="mb-8">
-            <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Import de Bibliothèque</h1>
-            <p class="text-gray-600 dark:text-gray-400">
-                Importez vos fichiers CBZ/CBR dans votre bibliothèque Mangarr
-            </p>
-        </div>
+    <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
+        <Toolbar v-if="store.hasFiles && !store.allFilesProcessed" :config="toolbarConfig" />
 
-        <!-- Progress Bar (if files are being processed) -->
-        <div v-if="store.hasFiles && !store.allFilesProcessed" class="mb-8">
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Progression</span>
-                    <span class="text-sm text-gray-500 dark:text-gray-400">{{ store.progressPercentage }}%</span>
-                </div>
-                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                    <div
-                        class="bg-blue-600 h-2 rounded-full transition-all duration-300"
-                        :style="{ width: store.progressPercentage + '%' }"
-                    ></div>
-                </div>
-                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
-                    <span>{{ store.importedCount }} importés</span>
-                    <span>{{ store.errorCount }} erreurs</span>
-                    <span>{{ store.totalFiles }} total</span>
-                </div>
-            </div>
-        </div>
+        <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">
 
-        <!-- File Upload Zone -->
-        <div v-if="!store.hasFiles || store.allFilesProcessed" class="mb-8">
-            <FileUpload
-                label="Importer des fichiers CBZ/CBR"
-                accept=".cbz,.cbr"
-                :multiple="true"
-                description="Formats CBZ ou CBR uniquement"
-                @files-selected="handleFilesSelected"
-            />
-        </div>
-
-        <!-- Files List -->
-        <div v-if="store.hasFiles" class="space-y-6">
-            <!-- Action Buttons -->
-            <div class="flex flex-wrap gap-4 mb-6">
-                <button
-                    v-if="store.hasReadyFiles"
-                    @click="importAllFiles"
-                    :disabled="store.isLoading"
-                    class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md font-medium"
-                >
-                    <LoadingSpinner v-if="store.isLoading" class="w-4 h-4 mr-2" />
-                    Importer tous les fichiers prêts ({{ store.readyCount }})
-                </button>
-
-                <button
-                    v-if="store.analyzedFiles.length > 0"
-                    @click="autoSelectMatches"
-                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium"
-                >
-                    Sélection automatique
-                </button>
-
-                <button
-                    @click="clearAllFiles"
-                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium"
-                >
-                    Effacer tout
-                </button>
-            </div>
-
-            <!-- Files Grid -->
-            <div class="grid gap-6">
-                <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="(chapterNumber) => store.setFileChapterNumber(file.id, chapterNumber)"
-                    @volume-number-selected="(volumeNumber) => store.setFileVolumeNumber(file.id, volumeNumber)"
-                    @import-file="() => importSingleFile(file.id)"
-                    @retry-file="() => retryFile(file.id)"
-                    @remove-file="() => store.removeFile(file.id)"
+                <!-- 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)"
+                    />
+                </div>
+
+                <!-- Résultats -->
+                <ImportResults v-if="store.allFilesProcessed" />
+
             </div>
         </div>
-
-        <!-- Results Summary (when all files are processed) -->
-        <div v-if="store.allFilesProcessed" class="mt-8">
-            <ImportResults />
-        </div>
-    </div></div>
+    </div>
 </template>
 
 <script setup>
-import { onUnmounted } from 'vue';
+import { ArrowUpTrayIcon, SparklesIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { computed, onUnmounted } from 'vue';
 import FileUpload from '../../../../shared/components/ui/FileUpload.vue';
-import LoadingSpinner from '../../../../shared/components/ui/LoadingSpinner.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useNewImportStore } from '../../application/store/newImportStore';
 import FileImportCard from '../components/FileImportCard.vue';
 import ImportResults from '../components/ImportResults.vue';
 
 const store = useNewImportStore();
 
-// === EVENT HANDLERS ===
-
-const handleFilesSelected = (files) => {
-    store.addFiles(files);
-};
+const toolbarConfig = computed(() => ({
+    leftSection: [],
+    rightSection: [
+        ...(store.analyzedFiles.length > 0 ? [{
+            type: 'button',
+            icon: SparklesIcon,
+            label: 'Sélection auto',
+            onClick: () => store.autoSelectBestMatches(),
+        }] : []),
+        ...(store.hasReadyFiles ? [{
+            type: 'button',
+            icon: ArrowUpTrayIcon,
+            label: `Importer (${store.readyCount})`,
+            onClick: importAllFiles,
+            disabled: store.isLoading,
+        }] : []),
+        {
+            type: 'button',
+            icon: TrashIcon,
+            label: 'Effacer',
+            onClick: () => store.clearFiles(),
+        },
+    ],
+}));
 
 const importAllFiles = async () => {
     try {
@@ -135,19 +114,6 @@ const retryFile = async (fileId) => {
     }
 };
 
-const autoSelectMatches = () => {
-    store.autoSelectBestMatches();
-};
-
-const clearAllFiles = () => {
-    if (confirm('Êtes-vous sûr de vouloir effacer tous les fichiers ?')) {
-        store.clearFiles();
-    }
-};
-
-// === LIFECYCLE ===
-
-// Reset state when component unmounts
 onUnmounted(() => {
     store.resetGlobalState();
 });