From 1c1e63de3d2627b0f2cca51fe11d70c3bbbe8933 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 2 Mar 2026 13:25:09 +0100
Subject: [PATCH] fix(slides): make delete icon always visible, fix confirm
 dialog z-index, and reset dropzone after upload

- Remove opacity-0/group-hover:opacity-100 so delete button is always visible
- Wrap ConfirmDialog in Teleport to body so it renders above all content
- Replace router.delete with axios.delete for proper slide deletion
- Add dropzoneKey ref to force Vue3Dropzone re-mount after upload completes
---
 resources/js/Components/SlideGrid.vue     | 39 ++++++++++++-----------
 resources/js/Components/SlideUploader.vue |  3 ++
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/resources/js/Components/SlideGrid.vue b/resources/js/Components/SlideGrid.vue
index 30883c3..97c0ed2 100644
--- a/resources/js/Components/SlideGrid.vue
+++ b/resources/js/Components/SlideGrid.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import { router } from '@inertiajs/vue3'
+import axios from 'axios'
 import ConfirmDialog from '@/Components/ConfirmDialog.vue'
 import LoadingSpinner from '@/Components/LoadingSpinner.vue'
 
@@ -85,19 +86,17 @@ function confirmDelete() {
     if (!slideToDelete.value) return
     deleting.value = true
 
-    router.delete(route('slides.destroy', slideToDelete.value.id), {
-        preserveScroll: true,
-        preserveState: true,
-        onSuccess: () => {
+    axios.delete(route('slides.destroy', slideToDelete.value.id))
+        .then(() => {
             confirmingDelete.value = false
             slideToDelete.value = null
             deleting.value = false
             emit('deleted')
-        },
-        onError: () => {
+            router.reload({ preserveScroll: true })
+        })
+        .catch(() => {
             deleting.value = false
-        },
-    })
+        })
 }
 
 // Expire date editing
@@ -194,7 +193,7 @@ function isExpired(expireDate) {
                     <button
                         data-testid="slide-grid-delete-button"
                         @click.stop="promptDelete(slide)"
-                        class="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-lg bg-black/50 text-white/80 opacity-0 backdrop-blur-sm transition-all duration-200 hover:bg-red-600 hover:text-white group-hover:opacity-100"
+                        class="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-lg bg-black/50 text-white/80 backdrop-blur-sm transition-all duration-200 hover:bg-red-600 hover:text-white"
                         title="Löschen"
                     >
                         <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -321,16 +320,18 @@ function isExpired(expireDate) {
         </div>
 
         <!-- Delete confirmation dialog -->
-        <ConfirmDialog
-            :show="confirmingDelete"
-            title="Folie löschen?"
-            :message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`"
-            confirm-label="Löschen"
-            cancel-label="Abbrechen"
-            variant="danger"
-            @confirm="confirmDelete"
-            @cancel="cancelDelete"
-        />
+        <Teleport to="body">
+            <ConfirmDialog
+                :show="confirmingDelete"
+                title="Folie löschen?"
+                :message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`"
+                confirm-label="Löschen"
+                cancel-label="Abbrechen"
+                variant="danger"
+                @confirm="confirmDelete"
+                @cancel="cancelDelete"
+            />
+        </Teleport>
     </div>
 </template>
 
diff --git a/resources/js/Components/SlideUploader.vue b/resources/js/Components/SlideUploader.vue
index b825163..6895e2a 100644
--- a/resources/js/Components/SlideUploader.vue
+++ b/resources/js/Components/SlideUploader.vue
@@ -24,6 +24,7 @@ const props = defineProps({
 const emit = defineEmits(['uploaded'])
 
 const files = ref([])
+const dropzoneKey = ref(0)
 const expireDate = ref('')
 const uploading = ref(false)
 const uploadProgress = ref(0)
@@ -68,6 +69,7 @@ function uploadNextFile(index) {
         uploading.value = false
         uploadProgress.value = 100
         files.value = []
+        dropzoneKey.value++
         emit('uploaded')
 
         // Reload Inertia page data to reflect newly uploaded slides
@@ -206,6 +208,7 @@ function dismissError() {
 
         <!-- Dropzone -->
         <Vue3Dropzone
+            :key="dropzoneKey"
             data-testid="slide-uploader-dropzone"
             v-model="files"
             :multiple="true"