From 698ddda4aeacc9bfb3148d3a0d364d7d3f21ea6c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 24 Mar 2026 17:09:07 +0100
Subject: [PATCH 1/8] fix(DragAndDrop): Improve DragAndDrop style and logic

---
 app/components/DragAndDrop.vue                | 183 ++++++++++--------
 .../DragAndDrop/DragAndDropInline.vue         |  89 +++++++++
 .../DragAndDrop/DragAndDropOverlay.vue        | 177 +++++++++++++++++
 app/components/FileSelector.vue               |   4 +-
 app/components/FileUploader.vue               | 114 ++++++++++-
 5 files changed, 472 insertions(+), 95 deletions(-)
 create mode 100644 app/components/DragAndDrop/DragAndDropInline.vue
 create mode 100644 app/components/DragAndDrop/DragAndDropOverlay.vue

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index c56e5517..9599c43a 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -1,116 +1,127 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+import { onMounted, onUnmounted, ref } from "vue";
+import DragAndDropInline from "./DragAndDrop/DragAndDropInline.vue";
+import DragAndDropOverlay from "./DragAndDrop/DragAndDropOverlay.vue";
 
-const { multiple, accept, loading, showExtensions } = defineProps({
+const props = defineProps({
   multiple: { type: Boolean, default: false },
   accept: { type: String, default: "" },
   loading: { type: Boolean, default: false },
   showExtensions: { type: Boolean, default: true },
+  fullscreen: { type: Boolean, default: false },
+  inline: { type: Boolean, default: true },
+  showOverlay: { type: Boolean, default: true },
+  idleText: { type: String, default: "Click or drag and drop" },
+  dropText: { type: String, default: "Drop files here" },
+  loadingText: { type: String, default: "Loading..." },
 });
 
 const emit = defineEmits(["files-selected"]);
 
 const isDragging = ref(false);
+const isInternalDrag = ref(false);
+const dragCounter = ref(0);
 const fileInput = ref(undefined);
 
 function triggerFileDialog() {
   fileInput.value?.click();
 }
 
-function handleDrop(event) {
+function onDragEnter(event) {
+  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+    dragCounter.value++;
+    isDragging.value = true;
+  }
+}
+
+function onDragLeave() {
+  dragCounter.value--;
+  if (dragCounter.value <= 0) {
+    isDragging.value = false;
+    dragCounter.value = 0;
+  }
+}
+
+function onDragOver(event) {
+  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+    event.preventDefault();
+  }
+}
+
+function onDrop(event) {
+  event.preventDefault();
+  dragCounter.value = 0;
   isDragging.value = false;
   const files = [...event.dataTransfer.files];
-  emit("files-selected", files);
+  if (files.length > 0) emit("files-selected", files);
+}
+
+function onKeyDown(event) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    isDragging.value = false;
+    dragCounter.value = 0;
+  }
 }
 
 function handleFileSelect(event) {
   const files = [...event.target.files];
-  emit("files-selected", files);
+  if (files.length > 0) emit("files-selected", files);
   event.target.value = "";
 }
+
+function onInternalDragStart() {
+  isInternalDrag.value = true;
+}
+
+function onInternalDragEnd() {
+  isInternalDrag.value = false;
+}
+
+onMounted(() => {
+  window.addEventListener("dragstart", onInternalDragStart);
+  window.addEventListener("dragend", onInternalDragEnd);
+  window.addEventListener("dragenter", onDragEnter);
+  window.addEventListener("dragover", onDragOver);
+  window.addEventListener("dragleave", onDragLeave);
+  window.addEventListener("drop", onDrop);
+  window.addEventListener("keydown", onKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("dragstart", onInternalDragStart);
+  window.removeEventListener("dragend", onInternalDragEnd);
+  window.removeEventListener("dragenter", onDragEnter);
+  window.removeEventListener("dragover", onDragOver);
+  window.removeEventListener("dragleave", onDragLeave);
+  window.removeEventListener("drop", onDrop);
+  window.removeEventListener("keydown", onKeyDown);
+});
+
+defineExpose({ triggerFileDialog });
 </script>
 
 <template>
-  <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <GlassCard
-      v-bind="hoverProps"
-      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
-      :class="{
-        'elevation-4': isHovering || isDragging,
-        'elevation-0': !(isHovering || isDragging),
-      }"
-      :style="{
-        position: 'relative',
-        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-        background:
-          isHovering || isDragging
-            ? 'rgba(255, 255, 255, 0.08) !important'
-            : 'rgba(255, 255, 255, 0.03) !important',
-        transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
-        pointerEvents: loading ? 'none' : 'auto',
-        opacity: loading ? 0.6 : 1,
-      }"
-      variant="panel"
-      padding="pa-0"
-      @click="triggerFileDialog"
-      @dragover.prevent="isDragging = true"
-      @dragleave.prevent="isDragging = false"
-      @drop.prevent="handleDrop"
-    >
-      <v-card-text class="pa-8">
-        <v-sheet
-          class="mx-auto mb-6 d-flex align-center justify-center"
-          :color="isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'"
-          rounded="circle"
-          width="80"
-          height="80"
-          style="transition: all 0.3s ease"
-        >
-          <v-icon
-            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
-            size="40"
-            :color="isHovering || isDragging ? 'primary' : 'white'"
-            :class="{ rotating: loading }"
-          />
-        </v-sheet>
-
-        <v-card-title
-          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
-          style="transition: color 0.3s ease"
-        >
-          {{
-            loading ? "Uploading..." : isDragging ? "Drop to upload" : "Click or Drag & Drop files"
-          }}
-        </v-card-title>
-
-        <v-card-subtitle v-if="showExtensions" class="text-body-2 pa-0">
-          {{ accept ? `(${accept} files)` : "All files allowed" }}
-        </v-card-subtitle>
-      </v-card-text>
-
-      <input
-        ref="fileInput"
-        type="file"
-        class="d-none"
-        :multiple="multiple"
-        :accept="accept"
-        @change="handleFileSelect"
-      />
-    </GlassCard>
-  </v-hover>
-</template>
+  <DragAndDropInline
+    v-if="inline"
+    v-bind="props"
+    :is-dragging="isDragging"
+    @click="triggerFileDialog"
+  />
 
-<style scoped>
-.rotating {
-  animation: rotate 1s linear infinite;
-}
+  <DragAndDropOverlay
+    v-bind="props"
+    :is-dragging="isDragging"
+  />
+
+  <input
+    ref="fileInput"
+    type="file"
+    class="d-none"
+    :multiple="multiple"
+    :accept="accept"
+    @change="handleFileSelect"
+  />
+</template>
 
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
new file mode 100644
index 00000000..897e0911
--- /dev/null
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -0,0 +1,89 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+
+const {
+  isDragging,
+  loading,
+  loadingText,
+  dropText,
+  idleText,
+  accept,
+  showExtensions,
+} = defineProps({
+  isDragging: { type: Boolean, required: true },
+  loading: { type: Boolean, required: true },
+  loadingText: { type: String, required: true },
+  dropText: { type: String, required: true },
+  idleText: { type: String, required: true },
+  accept: { type: String, default: "" },
+  showExtensions: { type: Boolean, required: true },
+});
+
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <GlassCard
+      v-bind="hoverProps"
+      class="drag-card-inline text-center cursor-pointer transition-swing"
+      :class="{ 'dragging-active': isDragging, 'elevation-8': isHovering }"
+      variant="ui"
+      @click="emit('click')"
+    >
+      <v-sheet
+        class="mx-auto mb-4 d-flex align-center justify-center transition-swing"
+        :color="isHovering || isDragging ? 'primary' : 'rgba(255,255,255,0.05)'"
+        rounded="circle"
+        width="64"
+        height="64"
+      >
+        <v-icon
+          :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+          size="32"
+          :color="isHovering || isDragging ? 'white' : 'primary'"
+          :class="{ rotating: loading }"
+        />
+      </v-sheet>
+
+      <v-card-text class="pa-0">
+        <v-sheet class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent">
+          {{ loading ? loadingText : isDragging ? dropText : idleText }}
+        </v-sheet>
+        <v-sheet
+          v-if="accept && showExtensions"
+          class="text-body-2 text-white opacity-60 bg-transparent"
+        >
+          {{ accept }}
+        </v-sheet>
+      </v-card-text>
+    </GlassCard>
+  </v-hover>
+</template>
+
+<style scoped>
+.drag-card-inline {
+  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
+  background: rgba(255, 255, 255, 0.03) !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.drag-card-inline:hover,
+.drag-card-inline.dragging-active {
+  border-color: rgba(var(--v-theme-primary), 0.4) !important;
+  background: rgba(var(--v-theme-primary), 0.05) !important;
+}
+
+.rotating {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/app/components/DragAndDrop/DragAndDropOverlay.vue b/app/components/DragAndDrop/DragAndDropOverlay.vue
new file mode 100644
index 00000000..6e54f04e
--- /dev/null
+++ b/app/components/DragAndDrop/DragAndDropOverlay.vue
@@ -0,0 +1,177 @@
+<script setup>
+const {
+  isDragging,
+  showOverlay,
+  fullscreen,
+  loading,
+  loadingText,
+  dropText,
+  multiple,
+  accept,
+  showExtensions,
+} = defineProps({
+  isDragging: { type: Boolean, required: true },
+  showOverlay: { type: Boolean, required: true },
+  fullscreen: { type: Boolean, required: true },
+  loading: { type: Boolean, required: true },
+  loadingText: { type: String, required: true },
+  dropText: { type: String, required: true },
+  multiple: { type: Boolean, required: true },
+  accept: { type: String, default: "" },
+  showExtensions: { type: Boolean, required: true },
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <v-fade-transition>
+      <v-overlay
+        v-if="isDragging && showOverlay"
+        :model-value="true"
+        :scrim="false"
+        class="drag-overlay"
+        content-class="w-100 h-100"
+        persistent
+      >
+        <v-container class="fill-height" :fluid="fullscreen">
+          <v-row align="center" justify="center">
+            <v-col
+              cols="12"
+              :md="fullscreen ? 12 : 8"
+              :lg="fullscreen ? 12 : 6"
+              class="text-center"
+            >
+              <v-sheet
+                class="mx-auto mb-8 pulse-animation d-flex align-center justify-center"
+                color="primary"
+                rounded="circle"
+                :width="fullscreen ? 140 : 120"
+                :height="fullscreen ? 140 : 120"
+              >
+                <v-icon
+                  icon="mdi-cloud-upload"
+                  :size="fullscreen ? 80 : 64"
+                  color="white"
+                />
+              </v-sheet>
+
+              <v-sheet
+                class="font-weight-black mb-6 text-white text-glow d-block bg-transparent"
+                :class="fullscreen ? 'text-h2' : 'text-h3'"
+              >
+                {{
+                  loading
+                    ? loadingText
+                    : fullscreen
+                      ? "Drop your files here"
+                      : "Drop your files"
+                }}
+              </v-sheet>
+
+              <v-sheet
+                class="text-white opacity-70 d-block mb-8 mx-auto bg-transparent"
+                :class="fullscreen ? 'text-h5' : 'text-h6'"
+                :style="fullscreen ? 'max-width:700px' : 'max-width:500px'"
+              >
+                {{
+                  multiple
+                    ? "Drag your files anywhere on the screen to import them."
+                    : "Drag your file anywhere on the screen to import it."
+                }}
+              </v-sheet>
+
+              <v-chip
+                v-if="accept && showExtensions"
+                color="white"
+                variant="outlined"
+                :size="fullscreen ? 'x-large' : 'large'"
+                class="px-8 glow-chip"
+              >
+                Accepted formats: {{ accept }}
+              </v-chip>
+
+              <v-sheet
+                class="text-white opacity-40 d-block mt-12 bg-transparent"
+                :class="fullscreen ? 'text-h6' : 'text-body-2'"
+              >
+                Press
+                <v-kbd class="escape-kbd mx-1">Esc</v-kbd>
+                to cancel
+              </v-sheet>
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <v-sheet
+          v-if="fullscreen"
+          class="drag-frame-border"
+          color="transparent"
+        />
+      </v-overlay>
+    </v-fade-transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.drag-overlay :deep(.v-overlay__content) {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(24px);
+}
+
+.drag-frame-border {
+  position: absolute;
+  inset: 32px;
+  border: 4px dashed rgba(255, 255, 255, 0.3);
+  border-radius: 32px;
+  pointer-events: none;
+  animation: border-glimmer 4s infinite ease-in-out;
+}
+
+.glow-chip {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border-color: rgba(255, 255, 255, 0.4) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.escape-kbd {
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.2);
+  font-weight: bold;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.text-glow {
+  text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
+}
+
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0px rgba(var(--v-theme-primary), 0.4);
+  }
+  70% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 20px rgba(var(--v-theme-primary), 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0px rgba(var(--v-theme-primary), 0);
+  }
+}
+
+@keyframes border-glimmer {
+  0%,
+  100% {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    border-color: rgba(var(--v-theme-primary), 0.4);
+  }
+}
+</style>
diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index cfbfe039..bbbf593a 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -9,10 +9,11 @@ const schema = schemas.opengeodeweb_back.allowed_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, files, auto_upload } = defineProps({
+const { multiple, files, auto_upload, show_overlay } = defineProps({
   multiple: { type: Boolean, required: true },
   files: { type: Array, default: () => [] },
   auto_upload: { type: Boolean, default: true },
+  show_overlay: { type: Boolean, default: true },
 });
 
 const internal_files = ref(files);
@@ -63,6 +64,7 @@ await get_allowed_files();
       accept,
       files: internal_files,
       auto_upload: internal_auto_upload,
+      show_overlay,
     }"
     @files_uploaded="files_uploaded_event"
   />
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 6438e574..24ca21ef 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -1,15 +1,17 @@
 <script setup>
 import DragAndDrop from "@ogw_front/components/DragAndDrop";
+import GlassCard from "@ogw_front/components/GlassCard";
 import { useGeodeStore } from "@ogw_front/stores/geode";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, mini } = defineProps({
+const { multiple, accept, files, auto_upload, mini, show_overlay } = defineProps({
   multiple: { type: Boolean, required: true },
   accept: { type: String, required: true },
   files: { type: Array, required: false, default: [] },
   auto_upload: { type: Boolean, required: false, default: false },
   mini: { type: Boolean, required: false, default: false },
+  show_overlay: { type: Boolean, required: false, default: true },
 });
 
 const geodeStore = useGeodeStore();
@@ -17,6 +19,7 @@ const geodeStore = useGeodeStore();
 const internal_files = ref(files);
 const loading = ref(false);
 const files_uploaded = ref(false);
+const dragAndDropRef = ref(null);
 
 const toggle_loading = useToggle(loading);
 
@@ -38,7 +41,9 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
+  const promise_array = internal_files.value.map((file) =>
+    geodeStore.upload(file),
+  );
   await Promise.all(promise_array);
   files_uploaded.value = true;
   emit("files_uploaded", internal_files.value);
@@ -71,20 +76,75 @@ watch(internal_files, (value) => {
 
 <template>
   <DragAndDrop
+    ref="dragAndDropRef"
     :multiple="multiple"
     :accept="accept"
     :loading="loading"
     :show-extensions="false"
+    :inline="false"
+    :show-overlay="show_overlay"
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-6">
+  <v-hover
+    v-if="!internal_files.length"
+    v-slot="{ isHovering, props: hoverProps }"
+  >
+    <GlassCard
+      v-bind="hoverProps"
+      class="text-center cursor-pointer glass-ui border-dashed pa-12 mb-0 transition-swing"
+      :class="{ 'elevation-12 border-opacity-40': isHovering }"
+      variant="ui"
+      @click="dragAndDropRef?.triggerFileDialog"
+    >
+      <v-sheet
+        class="mx-auto mb-6 d-flex align-center justify-center transition-swing"
+        :color="isHovering ? 'primary' : 'rgba(255, 255, 255, 0.05)'"
+        rounded="circle"
+        width="80"
+        height="80"
+      >
+        <v-icon
+          :icon="loading ? 'mdi-loading' : 'mdi-plus'"
+          size="40"
+          :color="isHovering ? 'white' : 'primary'"
+          :class="{ rotating: loading }"
+        />
+      </v-sheet>
+
+      <div class="text-h6 font-weight-bold text-white mb-1">Select files</div>
+      <div class="text-body-2 text-white opacity-60">
+        Or drag and drop them anywhere to import them
+      </div>
+    </GlassCard>
+  </v-hover>
+
+  <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected Files </span>
-      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
+      <v-spacer />
+      <v-btn
+        v-if="multiple"
+        variant="text"
+        color="white"
+        size="small"
+        class="text-none opacity-60"
+        prepend-icon="mdi-plus"
+        @click="dragAndDropRef?.triggerFileDialog"
+      >
+        Add
+      </v-btn>
     </v-sheet>
 
     <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
@@ -102,13 +162,18 @@ watch(internal_files, (value) => {
         <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
         <span class="text-white">{{ file.name }}</span>
         <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+            >mdi-close-circle</v-icon
+          >
         </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-6 pa-0">
+  <v-card-actions
+    v-if="!auto_upload && internal_files.length"
+    class="mt-8 pa-0"
+  >
     <v-btn
       color="primary"
       variant="flat"
@@ -120,7 +185,40 @@ watch(internal_files, (value) => {
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
+      Upload {{ internal_files.length }} file<span
+        v-if="internal_files.length > 1"
+        >s</span
+      >
     </v-btn>
   </v-card-actions>
 </template>
+
+<style scoped>
+.border-dashed {
+  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
+  transition: all 0.3s ease;
+}
+
+.border-dashed:hover {
+  border-color: rgba(var(--v-theme-primary), 0.4) !important;
+  background: rgba(var(--v-theme-primary), 0.02) !important;
+}
+
+.rotating {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.custom-upload-btn {
+  letter-spacing: 0.5px;
+  box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);
+}
+</style>

From 5a7f0ebbbdf42a9b1e658b2a6d227c3682f94e5e Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:15:22 +0000
Subject: [PATCH 2/8] Apply prepare changes

---
 .oxlintrc.json                                |  4 ++-
 app/components/DragAndDrop.vue                |  6 +---
 .../DragAndDrop/DragAndDropInline.vue         | 27 ++++++---------
 .../DragAndDrop/DragAndDropOverlay.vue        | 18 ++--------
 app/components/FileUploader.vue               | 34 ++++---------------
 5 files changed, 24 insertions(+), 65 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index cfed6074..9ef99ce4 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -119,7 +119,9 @@
         "vitest/no-hooks": "off",
         "vitest/no-importing-vitest-globals": "off",
         "max-lines-per-function": "off",
-        "max-statements": "off"
+        "max-statements": "off",
+        "vitest/prefer-to-be-truthy": "off",
+        "vitest/prefer-to-be-falsy": "off"
       }
     },
     {
diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index 9599c43a..85f431e2 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -110,10 +110,7 @@ defineExpose({ triggerFileDialog });
     @click="triggerFileDialog"
   />
 
-  <DragAndDropOverlay
-    v-bind="props"
-    :is-dragging="isDragging"
-  />
+  <DragAndDropOverlay v-bind="props" :is-dragging="isDragging" />
 
   <input
     ref="fileInput"
@@ -124,4 +121,3 @@ defineExpose({ triggerFileDialog });
     @change="handleFileSelect"
   />
 </template>
-
diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
index 897e0911..a651d2fd 100644
--- a/app/components/DragAndDrop/DragAndDropInline.vue
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -1,23 +1,16 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const {
-  isDragging,
-  loading,
-  loadingText,
-  dropText,
-  idleText,
-  accept,
-  showExtensions,
-} = defineProps({
-  isDragging: { type: Boolean, required: true },
-  loading: { type: Boolean, required: true },
-  loadingText: { type: String, required: true },
-  dropText: { type: String, required: true },
-  idleText: { type: String, required: true },
-  accept: { type: String, default: "" },
-  showExtensions: { type: Boolean, required: true },
-});
+const { isDragging, loading, loadingText, dropText, idleText, accept, showExtensions } =
+  defineProps({
+    isDragging: { type: Boolean, required: true },
+    loading: { type: Boolean, required: true },
+    loadingText: { type: String, required: true },
+    dropText: { type: String, required: true },
+    idleText: { type: String, required: true },
+    accept: { type: String, default: "" },
+    showExtensions: { type: Boolean, required: true },
+  });
 
 const emit = defineEmits(["click"]);
 </script>
diff --git a/app/components/DragAndDrop/DragAndDropOverlay.vue b/app/components/DragAndDrop/DragAndDropOverlay.vue
index 6e54f04e..ebfcc7d1 100644
--- a/app/components/DragAndDrop/DragAndDropOverlay.vue
+++ b/app/components/DragAndDrop/DragAndDropOverlay.vue
@@ -48,11 +48,7 @@ const {
                 :width="fullscreen ? 140 : 120"
                 :height="fullscreen ? 140 : 120"
               >
-                <v-icon
-                  icon="mdi-cloud-upload"
-                  :size="fullscreen ? 80 : 64"
-                  color="white"
-                />
+                <v-icon icon="mdi-cloud-upload" :size="fullscreen ? 80 : 64" color="white" />
               </v-sheet>
 
               <v-sheet
@@ -60,11 +56,7 @@ const {
                 :class="fullscreen ? 'text-h2' : 'text-h3'"
               >
                 {{
-                  loading
-                    ? loadingText
-                    : fullscreen
-                      ? "Drop your files here"
-                      : "Drop your files"
+                  loading ? loadingText : fullscreen ? "Drop your files here" : "Drop your files"
                 }}
               </v-sheet>
 
@@ -102,11 +94,7 @@ const {
           </v-row>
         </v-container>
 
-        <v-sheet
-          v-if="fullscreen"
-          class="drag-frame-border"
-          color="transparent"
-        />
+        <v-sheet v-if="fullscreen" class="drag-frame-border" color="transparent" />
       </v-overlay>
     </v-fade-transition>
   </Teleport>
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 24ca21ef..ec641fec 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -41,9 +41,7 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) =>
-    geodeStore.upload(file),
-  );
+  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
   files_uploaded.value = true;
   emit("files_uploaded", internal_files.value);
@@ -86,10 +84,7 @@ watch(internal_files, (value) => {
     @files-selected="processSelectedFiles"
   />
 
-  <v-hover
-    v-if="!internal_files.length"
-    v-slot="{ isHovering, props: hoverProps }"
-  >
+  <v-hover v-if="!internal_files.length" v-slot="{ isHovering, props: hoverProps }">
     <GlassCard
       v-bind="hoverProps"
       class="text-center cursor-pointer glass-ui border-dashed pa-12 mb-0 transition-swing"
@@ -122,15 +117,8 @@ watch(internal_files, (value) => {
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white">
-        Selected files
-      </span>
-      <v-chip
-        size="small"
-        class="ml-3 bg-white-opacity-10"
-        color="white"
-        variant="flat"
-      >
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
+      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
         {{ internal_files.length }}
       </v-chip>
       <v-spacer />
@@ -162,18 +150,13 @@ watch(internal_files, (value) => {
         <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
         <span class="text-white">{{ file.name }}</span>
         <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
-            >mdi-close-circle</v-icon
-          >
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
         </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions
-    v-if="!auto_upload && internal_files.length"
-    class="mt-8 pa-0"
-  >
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
     <v-btn
       color="primary"
       variant="flat"
@@ -185,10 +168,7 @@ watch(internal_files, (value) => {
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span
-        v-if="internal_files.length > 1"
-        >s</span
-      >
+      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
     </v-btn>
   </v-card-actions>
 </template>

From a80f8ae7d2f224696b898d204dcc24d5f1026728 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 24 Mar 2026 17:31:30 +0100
Subject: [PATCH 3/8] oxc

---
 app/components/DragAndDrop.vue                | 63 ++++++++++++-------
 .../DragAndDrop/DragAndDropInline.vue         | 17 ++---
 .../DragAndDrop/DragAndDropOverlay.vue        | 15 +++--
 3 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index 9599c43a..8f28b5ce 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -3,7 +3,20 @@ import { onMounted, onUnmounted, ref } from "vue";
 import DragAndDropInline from "./DragAndDrop/DragAndDropInline.vue";
 import DragAndDropOverlay from "./DragAndDrop/DragAndDropOverlay.vue";
 
-const props = defineProps({
+const {
+  multiple,
+  accept,
+  loading,
+  showExtensions,
+  fullscreen,
+  inline,
+  showOverlay,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
+  },
+} = defineProps({
   multiple: { type: Boolean, default: false },
   accept: { type: String, default: "" },
   loading: { type: Boolean, default: false },
@@ -11,9 +24,7 @@ const props = defineProps({
   fullscreen: { type: Boolean, default: false },
   inline: { type: Boolean, default: true },
   showOverlay: { type: Boolean, default: true },
-  idleText: { type: String, default: "Click or drag and drop" },
-  dropText: { type: String, default: "Drop files here" },
-  loadingText: { type: String, default: "Loading..." },
+  texts: { type: Object, default: undefined },
 });
 
 const emit = defineEmits(["files-selected"]);
@@ -29,13 +40,13 @@ function triggerFileDialog() {
 
 function onDragEnter(event) {
   if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
-    dragCounter.value++;
+    dragCounter.value += 1;
     isDragging.value = true;
   }
 }
 
 function onDragLeave() {
-  dragCounter.value--;
+  dragCounter.value -= 1;
   if (dragCounter.value <= 0) {
     isDragging.value = false;
     dragCounter.value = 0;
@@ -53,7 +64,9 @@ function onDrop(event) {
   dragCounter.value = 0;
   isDragging.value = false;
   const files = [...event.dataTransfer.files];
-  if (files.length > 0) emit("files-selected", files);
+  if (files.length > 0) {
+    emit("files-selected", files);
+  }
 }
 
 function onKeyDown(event) {
@@ -67,7 +80,9 @@ function onKeyDown(event) {
 
 function handleFileSelect(event) {
   const files = [...event.target.files];
-  if (files.length > 0) emit("files-selected", files);
+  if (files.length > 0) {
+    emit("files-selected", files);
+  }
   event.target.value = "";
 }
 
@@ -80,23 +95,23 @@ function onInternalDragEnd() {
 }
 
 onMounted(() => {
-  window.addEventListener("dragstart", onInternalDragStart);
-  window.addEventListener("dragend", onInternalDragEnd);
-  window.addEventListener("dragenter", onDragEnter);
-  window.addEventListener("dragover", onDragOver);
-  window.addEventListener("dragleave", onDragLeave);
-  window.addEventListener("drop", onDrop);
-  window.addEventListener("keydown", onKeyDown);
+  globalThis.addEventListener("dragstart", onInternalDragStart);
+  globalThis.addEventListener("dragend", onInternalDragEnd);
+  globalThis.addEventListener("dragenter", onDragEnter);
+  globalThis.addEventListener("dragover", onDragOver);
+  globalThis.addEventListener("dragleave", onDragLeave);
+  globalThis.addEventListener("drop", onDrop);
+  globalThis.addEventListener("keydown", onKeyDown);
 });
 
 onUnmounted(() => {
-  window.removeEventListener("dragstart", onInternalDragStart);
-  window.removeEventListener("dragend", onInternalDragEnd);
-  window.removeEventListener("dragenter", onDragEnter);
-  window.removeEventListener("dragover", onDragOver);
-  window.removeEventListener("dragleave", onDragLeave);
-  window.removeEventListener("drop", onDrop);
-  window.removeEventListener("keydown", onKeyDown);
+  globalThis.removeEventListener("dragstart", onInternalDragStart);
+  globalThis.removeEventListener("dragend", onInternalDragEnd);
+  globalThis.removeEventListener("dragenter", onDragEnter);
+  globalThis.removeEventListener("dragover", onDragOver);
+  globalThis.removeEventListener("dragleave", onDragLeave);
+  globalThis.removeEventListener("drop", onDrop);
+  globalThis.removeEventListener("keydown", onKeyDown);
 });
 
 defineExpose({ triggerFileDialog });
@@ -105,13 +120,13 @@ defineExpose({ triggerFileDialog });
 <template>
   <DragAndDropInline
     v-if="inline"
-    v-bind="props"
+    v-bind="$props"
     :is-dragging="isDragging"
     @click="triggerFileDialog"
   />
 
   <DragAndDropOverlay
-    v-bind="props"
+    v-bind="$props"
     :is-dragging="isDragging"
   />
 
diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
index 897e0911..b14d20f2 100644
--- a/app/components/DragAndDrop/DragAndDropInline.vue
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -4,17 +4,20 @@ import GlassCard from "@ogw_front/components/GlassCard";
 const {
   isDragging,
   loading,
-  loadingText,
-  dropText,
-  idleText,
+  texts,
   accept,
   showExtensions,
 } = defineProps({
   isDragging: { type: Boolean, required: true },
   loading: { type: Boolean, required: true },
-  loadingText: { type: String, required: true },
-  dropText: { type: String, required: true },
-  idleText: { type: String, required: true },
+  texts: {
+    type: Object,
+    default: () => ({
+      idle: "Click or drag and drop",
+      drop: "Drop files here",
+      loading: "Loading...",
+    }),
+  },
   accept: { type: String, default: "" },
   showExtensions: { type: Boolean, required: true },
 });
@@ -48,7 +51,7 @@ const emit = defineEmits(["click"]);
 
       <v-card-text class="pa-0">
         <v-sheet class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent">
-          {{ loading ? loadingText : isDragging ? dropText : idleText }}
+          {{ loading ? texts.loading : isDragging ? texts.drop : texts.idle }}
         </v-sheet>
         <v-sheet
           v-if="accept && showExtensions"
diff --git a/app/components/DragAndDrop/DragAndDropOverlay.vue b/app/components/DragAndDrop/DragAndDropOverlay.vue
index 6e54f04e..7d22d621 100644
--- a/app/components/DragAndDrop/DragAndDropOverlay.vue
+++ b/app/components/DragAndDrop/DragAndDropOverlay.vue
@@ -4,8 +4,7 @@ const {
   showOverlay,
   fullscreen,
   loading,
-  loadingText,
-  dropText,
+  texts,
   multiple,
   accept,
   showExtensions,
@@ -14,8 +13,14 @@ const {
   showOverlay: { type: Boolean, required: true },
   fullscreen: { type: Boolean, required: true },
   loading: { type: Boolean, required: true },
-  loadingText: { type: String, required: true },
-  dropText: { type: String, required: true },
+  texts: {
+    type: Object,
+    default: () => ({
+      idle: "Click or drag and drop",
+      drop: "Drop files here",
+      loading: "Loading...",
+    }),
+  },
   multiple: { type: Boolean, required: true },
   accept: { type: String, default: "" },
   showExtensions: { type: Boolean, required: true },
@@ -61,7 +66,7 @@ const {
               >
                 {{
                   loading
-                    ? loadingText
+                    ? texts.loading
                     : fullscreen
                       ? "Drop your files here"
                       : "Drop your files"

From 5babdd4bedcfbb21ac6d3e55457fb05cb49aadf2 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 24 Mar 2026 16:33:39 +0000
Subject: [PATCH 4/8] Apply prepare changes

---
 .../DragAndDrop/DragAndDropInline.vue         |  4 +-
 .../DragAndDrop/DragAndDropOverlay.vue        | 62 +++++++------------
 2 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
index 57811470..62454de3 100644
--- a/app/components/DragAndDrop/DragAndDropInline.vue
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -44,9 +44,7 @@ const emit = defineEmits(["click"]);
       </v-sheet>
 
       <v-card-text class="pa-0">
-        <v-sheet
-          class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent"
-        >
+        <v-sheet class="text-h6 font-weight-bold text-white d-block mb-1 bg-transparent">
           {{ loading ? texts.loading : isDragging ? texts.drop : texts.idle }}
         </v-sheet>
         <v-sheet
diff --git a/app/components/DragAndDrop/DragAndDropOverlay.vue b/app/components/DragAndDrop/DragAndDropOverlay.vue
index 7d22d621..5d6ca179 100644
--- a/app/components/DragAndDrop/DragAndDropOverlay.vue
+++ b/app/components/DragAndDrop/DragAndDropOverlay.vue
@@ -1,30 +1,22 @@
 <script setup>
-const {
-  isDragging,
-  showOverlay,
-  fullscreen,
-  loading,
-  texts,
-  multiple,
-  accept,
-  showExtensions,
-} = defineProps({
-  isDragging: { type: Boolean, required: true },
-  showOverlay: { type: Boolean, required: true },
-  fullscreen: { type: Boolean, required: true },
-  loading: { type: Boolean, required: true },
-  texts: {
-    type: Object,
-    default: () => ({
-      idle: "Click or drag and drop",
-      drop: "Drop files here",
-      loading: "Loading...",
-    }),
-  },
-  multiple: { type: Boolean, required: true },
-  accept: { type: String, default: "" },
-  showExtensions: { type: Boolean, required: true },
-});
+const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, showExtensions } =
+  defineProps({
+    isDragging: { type: Boolean, required: true },
+    showOverlay: { type: Boolean, required: true },
+    fullscreen: { type: Boolean, required: true },
+    loading: { type: Boolean, required: true },
+    texts: {
+      type: Object,
+      default: () => ({
+        idle: "Click or drag and drop",
+        drop: "Drop files here",
+        loading: "Loading...",
+      }),
+    },
+    multiple: { type: Boolean, required: true },
+    accept: { type: String, default: "" },
+    showExtensions: { type: Boolean, required: true },
+  });
 </script>
 
 <template>
@@ -53,11 +45,7 @@ const {
                 :width="fullscreen ? 140 : 120"
                 :height="fullscreen ? 140 : 120"
               >
-                <v-icon
-                  icon="mdi-cloud-upload"
-                  :size="fullscreen ? 80 : 64"
-                  color="white"
-                />
+                <v-icon icon="mdi-cloud-upload" :size="fullscreen ? 80 : 64" color="white" />
               </v-sheet>
 
               <v-sheet
@@ -65,11 +53,7 @@ const {
                 :class="fullscreen ? 'text-h2' : 'text-h3'"
               >
                 {{
-                  loading
-                    ? texts.loading
-                    : fullscreen
-                      ? "Drop your files here"
-                      : "Drop your files"
+                  loading ? texts.loading : fullscreen ? "Drop your files here" : "Drop your files"
                 }}
               </v-sheet>
 
@@ -107,11 +91,7 @@ const {
           </v-row>
         </v-container>
 
-        <v-sheet
-          v-if="fullscreen"
-          class="drag-frame-border"
-          color="transparent"
-        />
+        <v-sheet v-if="fullscreen" class="drag-frame-border" color="transparent" />
       </v-overlay>
     </v-fade-transition>
   </Teleport>

From d8e85d59e48e5249d1e564b19875cb9507cfda66 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 25 Mar 2026 10:59:08 +0100
Subject: [PATCH 5/8] oxcc

---
 app/components/FileUploader.vue | 53 +++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index ec641fec..c2af98c0 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -5,21 +5,22 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, mini, show_overlay } = defineProps({
-  multiple: { type: Boolean, required: true },
-  accept: { type: String, required: true },
-  files: { type: Array, required: false, default: [] },
-  auto_upload: { type: Boolean, required: false, default: false },
-  mini: { type: Boolean, required: false, default: false },
-  show_overlay: { type: Boolean, required: false, default: true },
-});
+const { multiple, accept, files, auto_upload, mini, show_overlay } =
+  defineProps({
+    multiple: { type: Boolean, required: true },
+    accept: { type: String, required: true },
+    files: { type: Array, required: false, default: [] },
+    auto_upload: { type: Boolean, required: false, default: false },
+    mini: { type: Boolean, required: false, default: false },
+    show_overlay: { type: Boolean, required: false, default: true },
+  });
 
 const geodeStore = useGeodeStore();
 
 const internal_files = ref(files);
 const loading = ref(false);
 const files_uploaded = ref(false);
-const dragAndDropRef = ref(null);
+const dragAndDropRef = ref(undefined);
 
 const toggle_loading = useToggle(loading);
 
@@ -41,7 +42,9 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
+  const promise_array = internal_files.value.map((file) =>
+    geodeStore.upload(file),
+  );
   await Promise.all(promise_array);
   files_uploaded.value = true;
   emit("files_uploaded", internal_files.value);
@@ -84,7 +87,10 @@ watch(internal_files, (value) => {
     @files-selected="processSelectedFiles"
   />
 
-  <v-hover v-if="!internal_files.length" v-slot="{ isHovering, props: hoverProps }">
+  <v-hover
+    v-if="!internal_files.length"
+    v-slot="{ isHovering, props: hoverProps }"
+  >
     <GlassCard
       v-bind="hoverProps"
       class="text-center cursor-pointer glass-ui border-dashed pa-12 mb-0 transition-swing"
@@ -117,8 +123,15 @@ watch(internal_files, (value) => {
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
-      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
+      <span class="text-subtitle-1 font-weight-bold text-white">
+        Selected files
+      </span>
+      <v-chip
+        size="small"
+        class="ml-3 bg-white-opacity-10"
+        color="white"
+        variant="flat"
+      >
         {{ internal_files.length }}
       </v-chip>
       <v-spacer />
@@ -150,13 +163,18 @@ watch(internal_files, (value) => {
         <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
         <span class="text-white">{{ file.name }}</span>
         <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
+            >mdi-close-circle</v-icon
+          >
         </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
+  <v-card-actions
+    v-if="!auto_upload && internal_files.length"
+    class="mt-8 pa-0"
+  >
     <v-btn
       color="primary"
       variant="flat"
@@ -168,7 +186,10 @@ watch(internal_files, (value) => {
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
+      Upload {{ internal_files.length }} file<span
+        v-if="internal_files.length > 1"
+        >s</span
+      >
     </v-btn>
   </v-card-actions>
 </template>

From 2ef8378f232a69652d08d3155ddca0bb3ca11093 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 25 Mar 2026 10:00:28 +0000
Subject: [PATCH 6/8] Apply prepare changes

---
 app/components/FileUploader.vue | 51 ++++++++++-----------------------
 1 file changed, 15 insertions(+), 36 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index c2af98c0..d4a8efa0 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -5,15 +5,14 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const { multiple, accept, files, auto_upload, mini, show_overlay } =
-  defineProps({
-    multiple: { type: Boolean, required: true },
-    accept: { type: String, required: true },
-    files: { type: Array, required: false, default: [] },
-    auto_upload: { type: Boolean, required: false, default: false },
-    mini: { type: Boolean, required: false, default: false },
-    show_overlay: { type: Boolean, required: false, default: true },
-  });
+const { multiple, accept, files, auto_upload, mini, show_overlay } = defineProps({
+  multiple: { type: Boolean, required: true },
+  accept: { type: String, required: true },
+  files: { type: Array, required: false, default: [] },
+  auto_upload: { type: Boolean, required: false, default: false },
+  mini: { type: Boolean, required: false, default: false },
+  show_overlay: { type: Boolean, required: false, default: true },
+});
 
 const geodeStore = useGeodeStore();
 
@@ -42,9 +41,7 @@ function removeFile(index) {
 
 async function upload_files() {
   toggle_loading();
-  const promise_array = internal_files.value.map((file) =>
-    geodeStore.upload(file),
-  );
+  const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
   files_uploaded.value = true;
   emit("files_uploaded", internal_files.value);
@@ -87,10 +84,7 @@ watch(internal_files, (value) => {
     @files-selected="processSelectedFiles"
   />
 
-  <v-hover
-    v-if="!internal_files.length"
-    v-slot="{ isHovering, props: hoverProps }"
-  >
+  <v-hover v-if="!internal_files.length" v-slot="{ isHovering, props: hoverProps }">
     <GlassCard
       v-bind="hoverProps"
       class="text-center cursor-pointer glass-ui border-dashed pa-12 mb-0 transition-swing"
@@ -123,15 +117,8 @@ watch(internal_files, (value) => {
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
       <v-icon icon="mdi-file-check" class="mr-3" color="primary" size="24" />
-      <span class="text-subtitle-1 font-weight-bold text-white">
-        Selected files
-      </span>
-      <v-chip
-        size="small"
-        class="ml-3 bg-white-opacity-10"
-        color="white"
-        variant="flat"
-      >
+      <span class="text-subtitle-1 font-weight-bold text-white"> Selected files </span>
+      <v-chip size="small" class="ml-3 bg-white-opacity-10" color="white" variant="flat">
         {{ internal_files.length }}
       </v-chip>
       <v-spacer />
@@ -163,18 +150,13 @@ watch(internal_files, (value) => {
         <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
         <span class="text-white">{{ file.name }}</span>
         <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100"
-            >mdi-close-circle</v-icon
-          >
+          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
         </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions
-    v-if="!auto_upload && internal_files.length"
-    class="mt-8 pa-0"
-  >
+  <v-card-actions v-if="!auto_upload && internal_files.length" class="mt-8 pa-0">
     <v-btn
       color="primary"
       variant="flat"
@@ -186,10 +168,7 @@ watch(internal_files, (value) => {
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span
-        v-if="internal_files.length > 1"
-        >s</span
-      >
+      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
     </v-btn>
   </v-card-actions>
 </template>

From ed7215b0b2da545df07ab7bacb59ef2ba06aa4a3 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 26 Mar 2026 10:59:21 +0100
Subject: [PATCH 7/8] drag and drop style refacto

---
 app/components/DragAndDrop.vue                | 32 +++++++++-
 .../DragAndDrop/DragAndDropInline.vue         | 12 ----
 app/components/FileUploader.vue               | 61 ++++++-------------
 3 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index c5a367cf..b91004f7 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -120,12 +120,25 @@ defineExpose({ triggerFileDialog });
 <template>
   <DragAndDropInline
     v-if="inline"
-    v-bind="$props"
     :is-dragging="isDragging"
+    :loading="loading"
+    :texts="texts"
+    :accept="accept"
+    :show-extensions="showExtensions"
     @click="triggerFileDialog"
   />
 
-  <DragAndDropOverlay v-bind="$props" :is-dragging="isDragging" />
+  <DragAndDropOverlay
+    v-if="isDragging && showOverlay"
+    :is-dragging="isDragging"
+    :show-overlay="showOverlay"
+    :fullscreen="fullscreen"
+    :loading="loading"
+    :texts="texts"
+    :multiple="multiple"
+    :accept="accept"
+    :show-extensions="showExtensions"
+  />
 
   <input
     ref="fileInput"
@@ -136,3 +149,18 @@ defineExpose({ triggerFileDialog });
     @change="handleFileSelect"
   />
 </template>
+
+<style>
+.rotating {
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
index 62454de3..21546259 100644
--- a/app/components/DragAndDrop/DragAndDropInline.vue
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -71,16 +71,4 @@ const emit = defineEmits(["click"]);
   background: rgba(var(--v-theme-primary), 0.05) !important;
 }
 
-.rotating {
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index d4a8efa0..9c46ccdc 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -74,45 +74,33 @@ watch(internal_files, (value) => {
 
 <template>
   <DragAndDrop
+    v-if="!internal_files.length"
     ref="dragAndDropRef"
     :multiple="multiple"
     :accept="accept"
     :loading="loading"
     :show-extensions="false"
-    :inline="false"
+    :inline="true"
     :show-overlay="show_overlay"
+    :texts="{
+      idle: 'Select files',
+      drop: 'Drop files here',
+      loading: 'Loading...',
+    }"
     @files-selected="processSelectedFiles"
   />
 
-  <v-hover v-if="!internal_files.length" v-slot="{ isHovering, props: hoverProps }">
-    <GlassCard
-      v-bind="hoverProps"
-      class="text-center cursor-pointer glass-ui border-dashed pa-12 mb-0 transition-swing"
-      :class="{ 'elevation-12 border-opacity-40': isHovering }"
-      variant="ui"
-      @click="dragAndDropRef?.triggerFileDialog"
-    >
-      <v-sheet
-        class="mx-auto mb-6 d-flex align-center justify-center transition-swing"
-        :color="isHovering ? 'primary' : 'rgba(255, 255, 255, 0.05)'"
-        rounded="circle"
-        width="80"
-        height="80"
-      >
-        <v-icon
-          :icon="loading ? 'mdi-loading' : 'mdi-plus'"
-          size="40"
-          :color="isHovering ? 'white' : 'primary'"
-          :class="{ rotating: loading }"
-        />
-      </v-sheet>
-
-      <div class="text-h6 font-weight-bold text-white mb-1">Select files</div>
-      <div class="text-body-2 text-white opacity-60">
-        Or drag and drop them anywhere to import them
-      </div>
-    </GlassCard>
-  </v-hover>
+  <DragAndDrop
+    v-else
+    ref="dragAndDropRef"
+    :multiple="multiple"
+    :accept="accept"
+    :loading="loading"
+    :show-extensions="false"
+    :inline="false"
+    :show-overlay="show_overlay"
+    @files-selected="processSelectedFiles"
+  />
 
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
@@ -184,19 +172,6 @@ watch(internal_files, (value) => {
   background: rgba(var(--v-theme-primary), 0.02) !important;
 }
 
-.rotating {
-  animation: rotate 1s linear infinite;
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .custom-upload-btn {
   letter-spacing: 0.5px;
   box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);

From 3f1a7bf31663abd71fc3a31fe1878d19fdd9b526 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 26 Mar 2026 09:59:58 +0000
Subject: [PATCH 8/8] Apply prepare changes

---
 app/components/DragAndDrop/DragAndDropInline.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/DragAndDrop/DragAndDropInline.vue b/app/components/DragAndDrop/DragAndDropInline.vue
index 21546259..082c0e0b 100644
--- a/app/components/DragAndDrop/DragAndDropInline.vue
+++ b/app/components/DragAndDrop/DragAndDropInline.vue
@@ -70,5 +70,4 @@ const emit = defineEmits(["click"]);
   border-color: rgba(var(--v-theme-primary), 0.4) !important;
   background: rgba(var(--v-theme-primary), 0.05) !important;
 }
-
 </style>