style(import): simplifier et harmoniser l'interface d'import de bibliothèque

- NewImportPage : layout flex/h-full + bg-gray-50 cohérent avec ConversionPage,
  Toolbar sombre pour les actions (sélection auto, importer, effacer),
  suppression du grand header h1 et du confirm() natif,
  ImportResults seul affiché en fin de session
- FileImportCard : en-tête compact avec actions inline (import + ×),
  suppression du bloc "selected manga preview" redondant,
  SVG inline remplacés par Heroicons, grille de correspondances élargie
- MangaMatchCard : suppression de la barre de score (doublon) et des
  slugs alternatifs, carte compacte avec coche de sélection Heroicons

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();
 });