chore(photos): simplify photo components

frontend/src/views/creators/AboutCreator.vue

@@ -1,4 +1,4 @@
-<template>  
+<template>
   <div class="p-4 relative"
        @mouseenter="showEditButtons = isLoggedIn && creatorProfileStore.creator?.id === brandingStore.value.id"
        @mouseleave="showEditButtons = false">
@@ -46,7 +46,7 @@
         {{ t('creator.sections.about.title') }}
       </h1>
 
-      <div> 
+      <div>
         <!-- Description Section -->
         <div>
           <div v-if="!isEditMode">
@@ -68,9 +68,9 @@
                       rows="5"
                       variant="outlined"></v-textarea>
         </div>
-        
+
         <!-- Video Section -->
-        <div v-if="videoUrl || isEditMode" 
+        <div v-if="videoUrl || isEditMode"
              :class="['content-section', {
                'rounded-t-xl': hasImages && !isEditMode,
                'rounded-xl': !hasImages && !isEditMode
@@ -98,18 +98,21 @@
         </div>
 
         <!-- Photos Section using Album component -->
-        <Album
+        <div>
-            v-if="hasImages || isEditMode"
+          <!-- Use AlbumView for display mode -->
-            :is-edit-mode="isEditMode"
+          <AlbumView v-if="!isEditMode && hasImages"
-            :images="imageUrls"
+                     :images="imageUrls"
-            @update:images="updateImages"
+                     :class="['content-section', {
-            @update:isEditMode="isEditMode = $event"
+                        'rounded-b-xl': videoUrl && !isEditMode,
-            :class="['content-section', {
+                        'rounded-xl': !videoUrl && !isEditMode
-              'rounded-b-xl': videoUrl && !isEditMode,
+                     }]"/>
-              'rounded-xl': !videoUrl && !isEditMode
-            }]"
-        />
 
+          <!-- Use AlbumEditor for edit mode -->
+          <AlbumEditor v-if="isEditMode"
+                       :images="imageUrls"
+                       @update:images="updateImages"/>
+        </div>
+        
         <!-- Contact Information Section -->
         <div v-if="phoneNumber || email" class="contact-info mt-6">
           <!-- Phone Number -->
@@ -135,6 +138,8 @@ import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useI18n} from 'vue-i18n';
 import Album from './Album.vue';
 import {buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId} from '@/utils/youtube';
+import AlbumEditor from "@/views/creators/AlbumEditor.vue";
+import AlbumView from "@/views/creators/AlbumView.vue";
 
 const {t} = useI18n();
 const creatorProfileStore = useCreatorProfileStore();
@@ -167,17 +172,17 @@ const canSave = computed(() => {
   if (!editableDescription.value || editableDescription.value.trim() === '') {
     return false;
   }
-  
+
   // Check if description is too long
   if (editableDescription.value.length > 2000) {
     return false;
   }
-  
+
   // Check if video URL is invalid (if one is provided)
   if (editableVideoUrl.value && !validateVideoUrl(editableVideoUrl.value)) {
     return false;
   }
-  
+
   return true;
 });
 
@@ -199,12 +204,12 @@ function validateVideoUrl(url) {
     videoUrlError.value = "";
     return true;
   }
-  
+
   if (!isValidYouTubeUrlOrId(url)) {
     videoUrlError.value = t('creator.validation.invalidYoutubeUrl');
     return false;
   }
-  
+
   videoUrlError.value = "";
   return true;
 }
@@ -228,13 +233,13 @@ function toggleEditMode() {
 // Fetch album data
 async function fetchAlbumData() {
   if (!brandingStore.value?.id) return;
-  
+
   albumId.value = brandingStore.value.id;
-  
+
   try {
     // Try to get the album
     const response = await client.get(`/api/albums/${albumId.value}`);
-    
+
     if (response.data && response.data.photos) {
       // Store original photos for comparison
       originalPhotos.value = response.data.photos;
@@ -315,7 +320,7 @@ async function saveChanges() {
     if (imageUrls.value.length > 0) {
       // Create or update the album
       const albumId = brandingStore.value.id;
-      
+
       try {
         // Try to create the album first (it will fail if it already exists)
         await client.post('/api/albums', {
@@ -327,13 +332,13 @@ async function saveChanges() {
         // Album might already exist, which is fine
         console.log("Album might already exist:", error);
       }
-      
+
       // Check for deleted photos
       const deletedPhotos = originalPhotos.value.filter(originalPhoto => {
         // If the photo URL is not in the current images array, it was deleted
         return !imageUrls.value.includes(originalPhoto.photoUrl);
       });
-      
+
       // Delete removed photos
       for (const photo of deletedPhotos) {
         try {
@@ -342,7 +347,7 @@ async function saveChanges() {
           console.error("Error deleting photo:", error);
         }
       }
-      
+
       // Now add or update photos
       for (let i = 0; i < imageUrls.value.length; i++) {
         const imageUrl = imageUrls.value[i];
@@ -350,14 +355,14 @@ async function saveChanges() {
           // This is a new image that needs to be uploaded
           const photoId = crypto.randomUUID();
           const formData = new FormData();
-          
+
           // Convert data URL to file
           const response = await fetch(imageUrl);
           const blob = await response.blob();
-          const file = new File([blob], `photo-${i}.jpg`, { type: 'image/jpeg' });
+          const file = new File([blob], `photo-${i}.jpg`, {type: 'image/jpeg'});
-          
+
           formData.append('file', file);
-          
+
           await client.post(`/api/albums/${albumId}/photos`, formData, {
             headers: {
               'Content-Type': 'multipart/form-data'
@@ -368,7 +373,7 @@ async function saveChanges() {
           });
         }
       }
-      
+
       // Refresh album data after changes
       await fetchAlbumData();
     }

frontend/src/views/creators/Album.vue

@@ -2,14 +2,7 @@
   <div v-if="hasImages || isEditMode" 
        class="creator-album"
        @click="handleAlbumClick">
-    <!-- Use AlbumView for display mode -->
+
-    <AlbumView v-if="!isEditMode" 
-               :images="images" />
-    
-    <!-- Use AlbumEditor for edit mode -->
-    <AlbumEditor v-if="isEditMode" 
-                 :images="images"
-                 @update:images="updateImages" />
   </div>
 </template>
 

frontend/src/views/creators/AlbumEditor.vue

@@ -35,7 +35,7 @@
         @end="handleReorder"
       >
         <template #item="{ element, index }">
-          <div class="photo-wrapper">
+          <div class="photo-wrapper" @click.stop="toggleMobileControls(index)">
             <div class="index-bubble">{{ index + 1 }}</div>
             <img :src="element.url" :alt="'Image ' + (index + 1)" />
             <!-- Processing spinner overlay -->
@@ -52,20 +52,23 @@
             <button @click.stop="moveImage(index, 'up')" 
                     class="action-btn left-btn" 
                     :disabled="index === 0"
-                    :title="t('moveUp')">
+                    :title="t('moveUp')"
+                    :class="{'mobile-active': activePhotoIndex === index}">
               <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('moveDown')">
+                    :title="t('moveDown')"
+                    :class="{'mobile-active': activePhotoIndex === index}">
               <v-icon>mdi-arrow-right</v-icon>
             </button>
             <!-- Delete button -->
             <button @click.stop="deleteImage(index)" 
                     class="action-btn delete-btn" 
-                    :title="t('delete')">
+                    :title="t('delete')"
+                    :class="{'mobile-active': activePhotoIndex === index}">
               <v-icon>mdi-delete</v-icon>
             </button>
           </div>
@@ -77,7 +80,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { useI18n } from 'vue-i18n';
 import draggable from 'vuedraggable';
 
@@ -93,6 +96,7 @@ 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
@@ -103,8 +107,32 @@ onMounted(() => {
     isUploading: false,
     file: null // Store the actual file for upload
   }));
+
+  // Add event listener to close active controls when clicking outside
+  document.addEventListener('click', closeActiveControls);
 });
 
+// Close active controls when component is unmounted
+onUnmounted(() => {
+  document.removeEventListener('click', closeActiveControls);
+});
+
+// Function to handle mobile control visibility
+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;
+  }
+}
+
+// Close active controls when clicking outside
+function closeActiveControls() {
+  activePhotoIndex.value = null;
+}
+
 // Trigger file input click
 function triggerFileInput() {
   fileInput.value.click();
@@ -161,11 +189,13 @@ function handleFileUpload(event) {
 // Delete an image
 function deleteImage(index) {
   localImages.value.splice(index, 1);
+  activePhotoIndex.value = null; // Reset active photo
   emit('update:images', localImages.value.map(img => img.url));
 }
 
 // Handle reorder after drag and drop
 function handleReorder() {
+  activePhotoIndex.value = null; // Reset active photo
   emit('update:images', localImages.value.map(img => img.url));
 }
 
@@ -176,6 +206,7 @@ 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.map(img => img.url));
   }
 }
@@ -229,6 +260,7 @@ function moveImage(index, direction) {
   @apply rounded-lg;
   @apply overflow-hidden;
   @apply bg-gray-100;
+  @apply cursor-pointer;
 }
 
 .photo-wrapper img {
@@ -253,7 +285,15 @@ function moveImage(index, direction) {
   @apply z-10;
 }
 
-.photo-wrapper:hover .action-btn {
+/* 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 {
   @apply opacity-100;
 }
 
@@ -325,52 +365,4 @@ function moveImage(index, direction) {
 .loading-overlay.uploading {
   @apply bg-opacity-75;
 }
-</style>
+</style>
-
-<i18n>
-{
-  "en": {
-    "upload": "Upload Photos",
-    "delete": "Delete",
-    "dropzoneText": "Click or drag photos here to upload",
-    "moveUp": "Move Left",
-    "moveDown": "Move Right",
-    "uploading": "Uploading...",
-    "creator": {
-      "sections": {
-        "album": {
-          "title": "Photos"
-        }
-      }
-    }
-  },
-  "fr": {
-    "upload": "Télécharger des photos",
-    "delete": "Supprimer",
-    "dropzoneText": "Cliquez ou glissez-déposez les photos ici",
-    "moveUp": "Déplacer à gauche",
-    "moveDown": "Déplacer à droite",
-    "creator": {
-      "sections": {
-        "album": {
-          "title": "Photos"
-        }
-      }
-    }
-  },
-  "es": {
-    "upload": "Subir fotos",
-    "delete": "Eliminar",
-    "dropzoneText": "Haga clic o arrastre las fotos aquí",
-    "moveUp": "Mover a la izquierda",
-    "moveDown": "Mover a la derecha",
-    "creator": {
-      "sections": {
-        "album": {
-          "title": "Fotos"
-        }
-      }
-    }
-  }
-}
-</i18n>