feat(frontend) : add document upload, list and preview components

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

frontend/components/task/TaskDocumentPreview.vue

@@ -0,0 +1,123 @@
+<template>
+    <Teleport to="body">
+        <Transition name="fade" appear>
+            <div
+                v-if="document"
+                class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80"
+                @click.self="$emit('close')"
+                @keydown.escape="$emit('close')"
+                @keydown.left="$emit('prev')"
+                @keydown.right="$emit('next')"
+                tabindex="0"
+                ref="overlayRef"
+            >
+                <!-- Close button -->
+                <button
+                    class="absolute right-4 top-4 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('close')"
+                >
+                    <Icon name="heroicons:x-mark" class="h-6 w-6" />
+                </button>
+
+                <!-- Navigation arrows -->
+                <button
+                    v-if="hasPrev"
+                    class="absolute left-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('prev')"
+                >
+                    <Icon name="heroicons:chevron-left" class="h-6 w-6" />
+                </button>
+                <button
+                    v-if="hasNext"
+                    class="absolute right-4 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+                    @click="$emit('next')"
+                >
+                    <Icon name="heroicons:chevron-right" class="h-6 w-6" />
+                </button>
+
+                <!-- Content -->
+                <div class="flex max-h-[90vh] max-w-[90vw] flex-col items-center">
+                    <!-- Image preview -->
+                    <img
+                        v-if="isImage"
+                        :src="downloadUrl"
+                        :alt="document.originalName"
+                        class="max-h-[85vh] max-w-[90vw] object-contain"
+                    />
+
+                    <!-- PDF preview -->
+                    <iframe
+                        v-else-if="isPdf"
+                        :src="downloadUrl"
+                        class="h-[85vh] w-[80vw] rounded-lg bg-white"
+                    />
+
+                    <!-- Generic file -->
+                    <div v-else class="flex flex-col items-center gap-4 rounded-xl bg-white p-10">
+                        <Icon name="heroicons:document" class="h-16 w-16 text-neutral-400" />
+                        <p class="max-w-xs truncate text-lg font-medium text-neutral-700">{{ document.originalName }}</p>
+                        <p class="text-sm text-neutral-400">{{ formatSize(document.size) }}</p>
+                        <a
+                            :href="downloadUrl"
+                            download
+                            class="mt-2 rounded-lg bg-blue-600 px-6 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700"
+                        >
+                            {{ $t('taskDocuments.download') }}
+                        </a>
+                    </div>
+
+                    <!-- File name footer -->
+                    <p class="mt-3 text-sm text-white/70">{{ document.originalName }}</p>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { TaskDocument } from '~/services/dto/task-document'
+
+const props = defineProps<{
+    document: TaskDocument | null
+    hasPrev: boolean
+    hasNext: boolean
+}>()
+
+defineEmits<{
+    close: []
+    prev: []
+    next: []
+}>()
+
+const overlayRef = ref<HTMLElement | null>(null)
+
+const { getDownloadUrl } = useTaskDocumentService()
+
+const downloadUrl = computed(() => props.document ? getDownloadUrl(props.document.id) : '')
+const isImage = computed(() => props.document?.mimeType.startsWith('image/') ?? false)
+const isPdf = computed(() => props.document?.mimeType === 'application/pdf')
+
+function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} o`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+}
+
+// Focus overlay for keyboard events
+watch(() => props.document, (doc) => {
+    if (doc) {
+        nextTick(() => overlayRef.value?.focus())
+    }
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>