From cbfbb16c599540aab6e93fbf1bfe8dfd43894d0c Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Sun, 15 Mar 2026 18:33:44 +0100
Subject: [PATCH] feat(frontend) : replace confirm() with themed modal for
 document deletion

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/components/task/TaskModal.vue | 47 ++++++++++++++++++++++++--
 1 file changed, 44 insertions(+), 3 deletions(-)

diff --git a/frontend/components/task/TaskModal.vue b/frontend/components/task/TaskModal.vue
index 0a3c5e5..0d4cf2a 100644
--- a/frontend/components/task/TaskModal.vue
+++ b/frontend/components/task/TaskModal.vue
@@ -213,6 +213,37 @@
                         v-model="confirmDeleteOpen"
                         @confirm="handleDelete"
                     />
+
+                    <!-- Confirm delete document modal -->
+                    <Teleport v-if="confirmDeleteDocOpen" to="body">
+                        <Transition name="modal" appear>
+                            <div class="fixed inset-0 z-[70] flex items-center justify-center">
+                                <div class="absolute inset-0 bg-black/30" @click="confirmDeleteDocOpen = false" />
+                                <div class="relative z-10 w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
+                                    <h3 class="text-lg font-bold text-neutral-900">{{ $t('taskDocuments.confirmDeleteTitle') }}</h3>
+                                    <p class="mt-3 text-sm text-neutral-600">
+                                        {{ $t('taskDocuments.confirmDeleteMessage') }}
+                                    </p>
+                                    <div class="mt-6 flex justify-end gap-3">
+                                        <button
+                                            type="button"
+                                            class="rounded-md border border-neutral-300 px-4 py-2 text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+                                            @click="confirmDeleteDocOpen = false"
+                                        >
+                                            {{ $t('common.cancel') }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-red-700"
+                                            @click="confirmDeleteDocument"
+                                        >
+                                            Supprimer
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </Transition>
+                    </Teleport>
                 </div>
             </div>
         </Transition>
@@ -416,9 +447,19 @@ function nextPreview() {
     }
 }
 
-async function handleDeleteDocument(doc: TaskDocument) {
-    if (!confirm(t('taskDocuments.confirmDeleteMessage'))) return
-    await removeDocument(doc.id)
+const confirmDeleteDocOpen = ref(false)
+const documentToDelete = ref<TaskDocument | null>(null)
+
+function handleDeleteDocument(doc: TaskDocument) {
+    documentToDelete.value = doc
+    confirmDeleteDocOpen.value = true
+}
+
+async function confirmDeleteDocument() {
+    if (!documentToDelete.value) return
+    await removeDocument(documentToDelete.value.id)
+    confirmDeleteDocOpen.value = false
+    documentToDelete.value = null
     await refreshDocuments()
 }