From 1a899de0b33c5942c5edeebd86c3a6187112b3c1 Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Thu, 24 Apr 2025 22:11:44 -0400
Subject: [PATCH] feat: add drag-and-drop to BannerEditor and CreatorLogoEditor

---
 frontend/src/views/creators/BannerEditor.vue  | 25 ++++++++++++++++-
 .../src/views/creators/CreatorLogoEditor.vue  | 27 ++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/creators/BannerEditor.vue b/frontend/src/views/creators/BannerEditor.vue
index 0f64868..b35f7b0 100644
--- a/frontend/src/views/creators/BannerEditor.vue
+++ b/frontend/src/views/creators/BannerEditor.vue
@@ -41,7 +41,10 @@
         />
       </div>
 
-      <div v-else class="image-preview-container" @click="startEditing">
+      <div v-else class="image-preview-container" 
+           @click="startEditing"
+           @dragover.prevent
+           @drop.prevent="handleDrop">
         <img
             :src="fileUrl || fallbackUrl"
             :alt="t('preview')"
@@ -209,6 +212,20 @@ const cancel = () => {
   }
   emits('closeRequested')
 }
+
+// Add drop handler
+const handleDrop = (event) => {
+  const file = event.dataTransfer.files[0]
+  if (file && file.type.startsWith('image/')) {
+    selectedFile.value = file
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      fileUrl.value = e.target.result
+      showCropper.value = true
+    }
+    reader.readAsDataURL(file)
+  }
+}
 </script>
 
 <style scoped>
@@ -226,6 +243,12 @@ const cancel = () => {
   @apply rounded-lg;
   @apply relative;
   @apply cursor-pointer;
+  @apply border-2;
+  @apply border-dashed;
+  @apply border-gray-300;
+  @apply hover:border-gray-500;
+  @apply transition-colors;
+  @apply duration-200;
 }
 
 .preview-image {
diff --git a/frontend/src/views/creators/CreatorLogoEditor.vue b/frontend/src/views/creators/CreatorLogoEditor.vue
index e2c9973..d6ea1b3 100644
--- a/frontend/src/views/creators/CreatorLogoEditor.vue
+++ b/frontend/src/views/creators/CreatorLogoEditor.vue
@@ -42,7 +42,10 @@
         />
       </div>
 
-      <div v-else class="image-preview-container" @click="startEditing">
+      <div v-else class="image-preview-container" 
+           @click="startEditing"
+           @dragover.prevent
+           @drop.prevent="handleDrop">
         <div class="circular-preview">
           <img
               :src="fileUrl || fallbackUrl"
@@ -216,6 +219,20 @@ const cancel = () => {
   }
   emits('closeRequested')
 }
+
+// Add drop handler
+const handleDrop = (event) => {
+  const file = event.dataTransfer.files[0]
+  if (file && file.type.startsWith('image/')) {
+    selectedFile.value = file
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      fileUrl.value = e.target.result
+      showCropper.value = true
+    }
+    reader.readAsDataURL(file)
+  }
+}
 </script>
 
 <style scoped>
@@ -229,6 +246,14 @@ const cancel = () => {
   @apply flex;
   @apply justify-center;
   @apply items-center;
+  @apply border-2;
+  @apply border-dashed;
+  @apply border-gray-300;
+  @apply hover:border-gray-500;
+  @apply transition-colors;
+  @apply duration-200;
+  @apply rounded-lg;
+  @apply p-4;
 }
 
 .circular-preview {