From a480a4ce5daf41731093232aa97700780a526a7f Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Sat, 26 Apr 2025 18:08:57 -0400
Subject: [PATCH] feat(creator): introduce Album component and refactor
 AboutCreator to use it

---
 frontend/src/views/creators/AboutCreator.vue        | 13 +++++++------
 .../views/creators/{CreatorAlbum.vue => Album.vue}  |  0
 frontend/src/views/creators/AlbumEditor.vue         |  7 ++++++-
 frontend/src/views/creators/AlbumView.vue           |  7 ++-----
 frontend/src/views/creators/CreatorHome.vue         |  2 +-
 5 files changed, 16 insertions(+), 13 deletions(-)
 rename frontend/src/views/creators/{CreatorAlbum.vue => Album.vue} (100%)

diff --git a/frontend/src/views/creators/AboutCreator.vue b/frontend/src/views/creators/AboutCreator.vue
index 7466462..75b07c1 100644
--- a/frontend/src/views/creators/AboutCreator.vue
+++ b/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">
@@ -94,8 +94,8 @@
           </div>
         </div>
 
-        <!-- Photos Section using CreatorAlbum component -->
-        <CreatorAlbum
+        <!-- Photos Section using Album component -->
+        <Album
             v-if="hasImages || isEditMode"
             :is-edit-mode="isEditMode"
             :images="imageUrls"
@@ -130,7 +130,7 @@ import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useI18n} from 'vue-i18n';
-import CreatorAlbum from './CreatorAlbum.vue';
+import Album from './Album.vue';
 import {buildEmbedUrl, isValidYouTubeUrlOrId, extractVideoId} from '@/utils/youtube';
 
 const {t} = useI18n();
@@ -244,7 +244,7 @@ onMounted(async () => {
   await fetchAlbumData();
 });
 
-// Update images from CreatorAlbum component
+// Update images from Album component
 function updateImages(newImages) {
   imageUrls.value = newImages;
 }
@@ -401,11 +401,12 @@ function cancelEdit() {
 }
 
 .contact-info {
+  @apply text-lg text-justify whitespace-pre-line;
   @apply flex flex-col items-center;
 }
 
 .contact-item {
-  @apply text-lg text-center mb-2 font-semibold;
+  @apply text-lg text-center mb-2;
 }
 
 /* Formatting styles for description */
diff --git a/frontend/src/views/creators/CreatorAlbum.vue b/frontend/src/views/creators/Album.vue
similarity index 100%
rename from frontend/src/views/creators/CreatorAlbum.vue
rename to frontend/src/views/creators/Album.vue
diff --git a/frontend/src/views/creators/AlbumEditor.vue b/frontend/src/views/creators/AlbumEditor.vue
index 474dea9..3adf254 100644
--- a/frontend/src/views/creators/AlbumEditor.vue
+++ b/frontend/src/views/creators/AlbumEditor.vue
@@ -1,12 +1,16 @@
 <template>
   <div class="album-editor">
-    <h2 class="text-xl font-semibold mb-4">{{ t('creator.sections.album.title') }}</h2>
+
+    <h2 class="text-xl font-semibold mb-4">
+      {{ t('creator.sections.album.title') }}
+    </h2>
     
     <!-- Drop zone with photos -->
     <div class="drop-zone" 
          @dragover.prevent
          @drop.prevent="handleDrop"
          @click="triggerFileInput">
+
       <!-- Upload prompt -->
       <div class="drop-zone-content">
         <v-icon size="large">mdi-plus</v-icon>
@@ -68,6 +72,7 @@
         </template>
       </draggable>
     </div>
+    
   </div>
 </template>
 
diff --git a/frontend/src/views/creators/AlbumView.vue b/frontend/src/views/creators/AlbumView.vue
index b08ecf9..869a4bf 100644
--- a/frontend/src/views/creators/AlbumView.vue
+++ b/frontend/src/views/creators/AlbumView.vue
@@ -80,15 +80,12 @@ const gridColumns = computed(() => {
 }
 
 .image-grid {
-  display: grid;
-  width: 100%;
+  @apply w-full grid;
   grid-template-columns: v-bind(gridColumns);
 }
 
 .image-wrapper {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
+  @apply relative w-full aspect-square;
 }
 
 .image {
diff --git a/frontend/src/views/creators/CreatorHome.vue b/frontend/src/views/creators/CreatorHome.vue
index bc58965..e967375 100644
--- a/frontend/src/views/creators/CreatorHome.vue
+++ b/frontend/src/views/creators/CreatorHome.vue
@@ -16,7 +16,7 @@
 
       <!-- About Creator Section -->
       <div class="section">
-        <AboutCreator/>
+        <AboutCreator/>        
       </div>
 
     </div>