From 7a0b97ac1a425d4fcc9f136b337fc74b0a89bb64 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Mon, 2 Jun 2025 13:50:11 -0400
Subject: [PATCH] fix(album): removing images does not work on mobile

---
 frontend/src/views/creators/AlbumEditor.vue | 52 ++-------------------
 1 file changed, 5 insertions(+), 47 deletions(-)

diff --git a/frontend/src/views/creators/AlbumEditor.vue b/frontend/src/views/creators/AlbumEditor.vue
index 22d5034..b23c51f 100644
--- a/frontend/src/views/creators/AlbumEditor.vue
+++ b/frontend/src/views/creators/AlbumEditor.vue
@@ -20,7 +20,7 @@
       <!-- Photos grid -->
       <draggable v-model="localImages" class="photos-grid" item-key="id" @end="handleReorder">
         <template #item="{ element, index }">
-          <div class="photo-wrapper" @click.stop="toggleMobileControls(index)">
+          <div class="photo-wrapper">
             <div class="index-bubble">{{ index + 1 }}</div>
             <img :src="element.image.originalUrl" :alt="'Image ' + (index + 1)" />
             <!-- Processing spinner overlay -->
@@ -35,18 +35,16 @@
             </div>
             <!-- Left arrow -->
             <button @click.stop="moveImage(index, 'up')" class="action-btn left-btn" :disabled="index === 0"
-              :title="t('moveLeft')" :class="{ 'mobile-active': activePhotoIndex === index }">
+              :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')"
-              :class="{ 'mobile-active': activePhotoIndex === index }">
+              :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')"
-              :class="{ 'mobile-active': activePhotoIndex === index }">
+            <button @click.stop="deleteImage(index)" class="action-btn delete-btn" :title="t('delete')">
               <v-icon>mdi-delete</v-icon>
             </button>
           </div>
@@ -75,7 +73,6 @@ const emit = defineEmits(['update:images']);
 const { t } = useI18n();
 const fileInput = ref(null);
 const localImages = ref([]);
-const activePhotoIndex = ref(null); // Track which photo is currently active for mobile
 
 onMounted(() => {
   // Initialize local images with IDs and states
@@ -85,19 +82,8 @@ onMounted(() => {
     isProcessing: false,
     isUploading: false,
   }));
-
-  // Add event listener to close active controls when clicking outside
-  document.addEventListener('click', closeActiveControls);
 });
 
-onUnmounted(() => {
-  document.removeEventListener('click', closeActiveControls);
-});
-
-function closeActiveControls() {
-  activePhotoIndex.value = null;
-}
-
 watch(localImages, (newVal) => {
   console.log('localImages changed:', newVal);
 }, { deep: true });
@@ -157,19 +143,9 @@ function handleFileUpload(event) {
 }
 
 function handleReorder() {
-  activePhotoIndex.value = null; // Reset active photo
   emit('update:images', localImages.value);
 }
 
-function toggleMobileControls(index) {
-  // If clicking the same photo, toggle the controls
-  if (activePhotoIndex.value === index) {
-    activePhotoIndex.value = null;
-  } else {
-    // Otherwise, set this photo as active
-    activePhotoIndex.value = index;
-  }
-}
 
 function moveImage(index, direction) {
   const newIndex = direction === 'up' ? index - 1 : index + 1;
@@ -177,14 +153,12 @@ function moveImage(index, direction) {
     const temp = localImages.value[index];
     localImages.value[index] = localImages.value[newIndex];
     localImages.value[newIndex] = temp;
-    activePhotoIndex.value = newIndex; // Keep the moved image active
     emit('update:images', localImages.value);
   }
 }
 
 function deleteImage(index) {
   localImages.value.splice(index, 1);
-  activePhotoIndex.value = null; // Reset active photo
   emit('update:images', localImages.value);
 }
 
@@ -263,22 +237,10 @@ function deleteImage(index) {
 }
 
 /* Show buttons on hover for desktop */
-@media (hover: hover) {
-  .photo-wrapper:hover .action-btn {
-    @apply opacity-100;
-  }
-}
-
-/* For mobile, show buttons when photo is active */
-.action-btn.mobile-active {
+.action-btn {
   @apply opacity-100;
 }
 
-.action-btn:hover:not(:disabled) {
-  @apply bg-opacity-75;
-  @apply scale-110;
-}
-
 .action-btn:disabled {
   @apply opacity-30;
   @apply cursor-not-allowed;
@@ -305,10 +267,6 @@ function deleteImage(index) {
   @apply bg-opacity-50;
 }
 
-.delete-btn:hover {
-  @apply bg-opacity-75;
-}
-
 .index-bubble {
   @apply absolute;
   @apply top-2;