feat(mail) : décodage des en-têtes MIME + aperçu inline des pièces jointes

- Décode les encoded-words MIME (RFC 2047) des sujets et noms d'expéditeur
  via App\Mail\MimeHeaderDecoder, appliqué dans ImapMailProvider (sync propre)
- Commande app:mail:redecode-headers (--dry-run) pour re-décoder l'existant en base
- Aperçu inline images + PDF en visionneuse modale plein écran (MailAttachmentPreview),
  téléchargement conservé pour les autres types
- Tests unitaires du décodeur + maj docs/mail-integration.md

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/components/mail/MailAttachmentPreview.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+const props = defineProps<{
+    /** Ouverture de la visionneuse. */
+    modelValue: boolean
+    /** Nom du fichier affiché dans la barre. */
+    filename: string
+    /** Type MIME — détermine le rendu (image vs PDF). */
+    mimeType: string
+    /** Object URL du Blob de la pièce jointe. null tant que le contenu charge. */
+    url: string | null
+    /** Téléchargement en cours du contenu. */
+    loading: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+    download: []
+}>()
+
+const { t } = useI18n()
+
+const isImage = computed(() => props.mimeType.startsWith('image/'))
+const isPdf = computed(() => props.mimeType === 'application/pdf')
+
+function close(): void {
+    emit('update:modelValue', false)
+}
+
+function onKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Escape') close()
+}
+
+watch(
+    () => props.modelValue,
+    (open) => {
+        if (open) {
+            window.addEventListener('keydown', onKeydown)
+        } else {
+            window.removeEventListener('keydown', onKeydown)
+        }
+    },
+)
+
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+</script>
+
+<template>
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="mail-preview" appear>
+            <div class="fixed inset-0 z-50 flex flex-col bg-slate-900/80 backdrop-blur-sm">
+                <!-- Barre supérieure -->
+                <div class="flex flex-shrink-0 items-center justify-between gap-4 px-4 py-3 text-white">
+                    <div class="flex min-w-0 items-center gap-2">
+                        <Icon
+                            :name="isImage ? 'material-symbols:image-outline' : 'material-symbols:picture-as-pdf-outline'"
+                            size="18"
+                            class="flex-shrink-0 text-white/70"
+                        />
+                        <span class="truncate text-sm font-medium">{{ filename }}</span>
+                    </div>
+                    <div class="flex flex-shrink-0 items-center gap-1">
+                        <button
+                            type="button"
+                            class="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-white/90 transition-colors hover:bg-white/10"
+                            @click="emit('download')"
+                        >
+                            <Icon name="material-symbols:download" size="18" />
+                            <span class="hidden sm:inline">{{ t('mail.actions.download') }}</span>
+                        </button>
+                        <button
+                            type="button"
+                            class="rounded-md p-1.5 text-white/90 transition-colors hover:bg-white/10"
+                            :aria-label="t('mail.preview.close')"
+                            @click="close"
+                        >
+                            <Icon name="mdi:close" size="20" />
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Contenu -->
+                <div class="flex min-h-0 flex-1 items-center justify-center overflow-auto p-4" @click.self="close">
+                    <div v-if="loading" class="flex flex-col items-center gap-3 text-white/70">
+                        <Icon name="material-symbols:progress-activity" size="32" class="animate-spin" />
+                        <span class="text-sm">{{ t('mail.preview.loading') }}</span>
+                    </div>
+
+                    <img
+                        v-else-if="isImage && url"
+                        :src="url"
+                        :alt="filename"
+                        class="max-h-full max-w-full rounded-lg object-contain shadow-2xl"
+                    >
+
+                    <iframe
+                        v-else-if="isPdf && url"
+                        :src="url"
+                        :title="filename"
+                        class="h-full w-full max-w-5xl rounded-lg bg-white shadow-2xl"
+                    />
+
+                    <div v-else class="flex flex-col items-center gap-3 text-white/70">
+                        <Icon name="material-symbols:visibility-off-outline" size="32" />
+                        <span class="text-sm">{{ t('mail.preview.unavailable') }}</span>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.mail-preview-enter-active,
+.mail-preview-leave-active {
+    transition: opacity 0.2s ease;
+}
+.mail-preview-enter-from,
+.mail-preview-leave-to {
+    opacity: 0;
+}
+</style>

frontend/components/mail/MailMessageViewer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MailMessageDetailDto, MailAddressDto } from '~/services/dto/mail'
+import type { MailMessageDetailDto, MailAddressDto, MailAttachmentDto } from '~/services/dto/mail'
 import { sanitizeMailHtml } from '~/utils/sanitizeMailHtml'
 import { useMailService } from '~/services/mail'
 
@@ -24,22 +24,101 @@ const sanitizedBody = computed((): string => {
     return sanitizeMailHtml(props.detail.bodyHtml, { allowImages: showImages.value })
 })
 
+// ─── Pièces jointes : aperçu / téléchargement ──────────────────────────────
+
+function isImage(mime: string): boolean {
+    return mime.startsWith('image/')
+}
+
+function isPdf(mime: string): boolean {
+    return mime === 'application/pdf'
+}
+
+function isPreviewable(mime: string): boolean {
+    return isImage(mime) || isPdf(mime)
+}
+
+function attachmentIcon(mime: string): string {
+    if (isImage(mime)) return 'material-symbols:image-outline'
+    if (isPdf(mime)) return 'material-symbols:picture-as-pdf-outline'
+    return 'material-symbols:attach-file'
+}
+
+const previewOpen = ref(false)
+const previewLoading = ref(false)
+const previewAtt = ref<MailAttachmentDto | null>(null)
+const previewUrl = ref<string | null>(null)
+let previewBlob: Blob | null = null
+
+function revokePreview(): void {
+    if (previewUrl.value) {
+        URL.revokeObjectURL(previewUrl.value)
+        previewUrl.value = null
+    }
+    previewBlob = null
+}
+
 watch(
     () => props.detail?.header.id,
     () => {
         showImages.value = false
+        previewOpen.value = false
+        revokePreview()
     },
 )
 
+watch(previewOpen, (open) => {
+    if (!open) revokePreview()
+})
+
+onBeforeUnmount(revokePreview)
+
+async function handleAttachmentClick(att: MailAttachmentDto): Promise<void> {
+    if (!isPreviewable(att.mimeType)) {
+        await handleDownload(att.downloadId, att.filename)
+        return
+    }
+
+    previewAtt.value = att
+    previewUrl.value = null
+    previewLoading.value = true
+    previewOpen.value = true
+
+    try {
+        const { data } = await mailService.downloadAttachment(att.downloadId)
+        previewBlob = data
+        previewUrl.value = URL.createObjectURL(data)
+    } catch {
+        // useApi affiche déjà le toast — on referme la visionneuse.
+        previewOpen.value = false
+    } finally {
+        previewLoading.value = false
+    }
+}
+
+function downloadFromPreview(): void {
+    const att = previewAtt.value
+    if (!att) return
+    if (previewBlob) {
+        triggerBlobDownload(previewBlob, att.filename)
+    } else {
+        void handleDownload(att.downloadId, att.filename)
+    }
+}
+
+function triggerBlobDownload(blob: Blob, filename: string): void {
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+}
+
 async function handleDownload(downloadId: string, filename: string): Promise<void> {
     try {
         const { data } = await mailService.downloadAttachment(downloadId)
-        const url = URL.createObjectURL(data)
-        const a = document.createElement('a')
-        a.href = url
-        a.download = filename
-        a.click()
-        URL.revokeObjectURL(url)
+        triggerBlobDownload(data, filename)
     } catch {
         // L'erreur est gérée par useApi (toast automatique)
     }
@@ -169,15 +248,31 @@ function joinAddresses(addresses: MailAddressDto[]): string {
                         :key="att.downloadId"
                         type="button"
                         class="flex items-center gap-1.5 rounded border border-neutral-200 bg-neutral-50 px-2.5 py-1.5 text-xs text-neutral-700 transition-colors hover:bg-neutral-100 hover:border-neutral-300"
-                        :title="att.filename"
-                        @click="handleDownload(att.downloadId, att.filename)"
+                        :title="isPreviewable(att.mimeType) ? t('mail.preview.open') : t('mail.actions.download')"
+                        @click="handleAttachmentClick(att)"
                     >
-                        <Icon name="material-symbols:attach-file" size="14" class="flex-shrink-0 text-neutral-400" />
+                        <Icon :name="attachmentIcon(att.mimeType)" size="14" class="flex-shrink-0 text-neutral-400" />
                         <span class="max-w-[180px] truncate">{{ att.filename }}</span>
                         <span class="text-neutral-400">({{ Math.round(att.size / 1024) }} Ko)</span>
+                        <Icon
+                            v-if="isPreviewable(att.mimeType)"
+                            name="material-symbols:visibility-outline"
+                            size="13"
+                            class="flex-shrink-0 text-neutral-400"
+                        />
                     </button>
                 </div>
             </div>
+
+            <MailAttachmentPreview
+                v-if="previewAtt"
+                v-model="previewOpen"
+                :filename="previewAtt.filename"
+                :mime-type="previewAtt.mimeType"
+                :url="previewUrl"
+                :loading="previewLoading"
+                @download="downloadFromPreview"
+            />
         </template>
     </div>
 </template>

frontend/i18n/locales/fr.json

@@ -528,6 +528,12 @@
             "list": "Aucun message dans ce dossier.",
             "viewer": "Sélectionnez un message pour le lire."
         },
+        "preview": {
+            "open": "Prévisualiser",
+            "close": "Fermer l'aperçu",
+            "loading": "Chargement de l'aperçu…",
+            "unavailable": "Aperçu indisponible pour ce type de fichier."
+        },
         "folderTree": {
             "expand": "Déplier le dossier",
             "collapse": "Replier le dossier"