From 19d2c1d4c3abf7f2bfbdf3d92d3ec96a8313a3ee Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Mon, 2 Jun 2025 14:22:35 -0400
Subject: [PATCH] fix(album): removing images does not work on mobile

---
 frontend/src/views/creators/AlbumEditor.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/creators/AlbumEditor.vue b/frontend/src/views/creators/AlbumEditor.vue
index e887bbe..9cce461 100644
--- a/frontend/src/views/creators/AlbumEditor.vue
+++ b/frontend/src/views/creators/AlbumEditor.vue
@@ -18,7 +18,8 @@
       <input type="file" ref="fileInput" @change="handleFileUpload" accept="image/*" multiple class="hidden" />
 
       <!-- Photos grid -->
-      <draggable v-model="localImages" class="photos-grid" item-key="id" @end="handleReorder">
+      <draggable v-model="localImages" class="photos-grid" item-key="id" @end="handleReorder" :filter="'.action-btn'"
+        :prevent-on-filter="false">
         <template #item="{ element, index }">
           <div class="photo-wrapper">
             <div class="index-bubble">{{ index + 1 }}</div>
@@ -34,17 +35,18 @@
               <span class="mt-2 text-sm text-white">{{ t('uploading') }}</span>
             </div>
             <!-- Left arrow -->
-            <button @click.stop="moveImage(index, 'up')" class="action-btn left-btn" :disabled="index === 0"
-              :title="t('moveLeft')">
+            <button @click.stop="moveImage(index, 'up')" @touchstart.stop="moveImage(index, 'up')"
+              class="action-btn left-btn" :disabled="index === 0" :title="t('moveLeft')">
               <v-icon>mdi-arrow-left</v-icon>
             </button>
             <!-- Right arrow -->
-            <button @click.stop="moveImage(index, 'down')" class="action-btn right-btn"
-              :disabled="index === localImages.length - 1" :title="t('moveRight')">
+            <button @click.stop="moveImage(index, 'down')" @touchstart.stop="moveImage(index, 'down')"
+              class="action-btn right-btn" :disabled="index === localImages.length - 1" :title="t('moveRight')">
               <v-icon>mdi-arrow-right</v-icon>
             </button>
             <!-- Delete button -->
-            <button @click.stop="deleteImage(index)" class="action-btn delete-btn" :title="t('delete')">
+            <button @click.stop="deleteImage(index)" touchstart.stop="deleteImage(index)" class="action-btn delete-btn"
+              :title="t('delete')">
               <v-icon>mdi-delete</v-icon>
             </button>
           </div>