Lesstime/frontend/modules/mail/components/MailAttachmentPreview.vue

<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>