From 04eb78cecfaa3600cb5b2127aaef7db01a38a35e Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 20 Jan 2026 15:47:37 +0100
Subject: [PATCH 1/5] edit stepper

---
 app/components/FileUploader.vue |   2 +-
 app/components/Step.vue         | 183 ++++++++++++++++++++++----------
 app/components/Stepper.vue      |  43 +++++---
 3 files changed, 159 insertions(+), 69 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index c51425bc..98d51087 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -37,7 +37,7 @@
   import { upload_file } from "@ogw_front/utils/upload_file"
   const schema = schemas.opengeodeweb_back.upload_file
 
-  const emit = defineEmits(["files_uploaded", "decrement_step"])
+  const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
diff --git a/app/components/Step.vue b/app/components/Step.vue
index 70fa53c2..69cb0d6b 100644
--- a/app/components/Step.vue
+++ b/app/components/Step.vue
@@ -1,62 +1,93 @@
 <template>
-  <v-stepper-content :step="step_index + 1">
-    <v-row
-      align="center"
-      class="mb-4 py-2"
-      @click="set_current_step(step_index)"
-    >
-      <v-col cols="auto" class="d-flex justify-center align-center">
-        <v-icon
-          v-if="current_step_index > step_index"
-          icon="mdi-check-circle"
-          color="grey"
-        />
+  <v-stepper-vertical-item
+    :value="step_index"
+    hide-actions
+    class="custom-step-item"
+  >
+    <template v-slot:title>
+      <div
+        class="d-flex align-center py-3 px-2 cursor-pointer step-header"
+        @click="set_current_step(step_index)"
+      >
+        <v-avatar
+          size="48"
+          :color="
+            current_step_index == step_index
+              ? 'primary'
+              : current_step_index > step_index
+                ? 'success'
+                : 'grey-lighten-3'
+          "
+          class="mr-4 elevation-2 step-icon-container"
+        >
+          <v-icon
+            v-if="current_step_index > step_index"
+            icon="mdi-check"
+            color="white"
+            size="28"
+          />
+          <v-icon
+            v-else
+            :icon="`mdi-numeric-${step_index + 1}`"
+            :color="current_step_index == step_index ? 'white' : 'grey-darken-1'"
+            size="28"
+            class="font-weight-bold"
+          />
+        </v-avatar>
+
+        <div class="flex-grow-1">
+          <h3
+            class="text-h6 font-weight-bold mb-0 transition-swing"
+            :class="
+              current_step_index == step_index
+                ? 'text-primary'
+                : 'text-grey-darken-1'
+            "
+          >
+            {{ steps[step_index].step_title }}
+          </h3>
+          <div
+            v-if="
+              steps[step_index].chips.length && current_step_index >= step_index
+            "
+            class="d-flex flex-wrap mt-2"
+          >
+            <v-chip
+              v-for="(chip, chip_index) in steps[step_index].chips"
+              :key="chip_index"
+              size="x-small"
+              class="mr-1 mb-1 font-weight-medium"
+              color="primary"
+              variant="tonal"
+            >
+              {{ truncate(chip, 30) }}
+            </v-chip>
+          </div>
+        </div>
+
         <v-icon
-          v-else-if="current_step_index == step_index"
-          :icon="`mdi-numeric-${step_index + 1}-circle`"
+          v-if="current_step_index == step_index"
+          icon="mdi-chevron-down"
           color="primary"
+          class="ml-2"
         />
-        <v-icon
-          v-else
-          :icon="`mdi-numeric-${step_index + 1}-circle`"
-          color="grey"
-        />
-      </v-col>
-      <v-col>
-        <p class="m-0 font-weight-bold">
-          {{ steps[step_index].step_title }}
-        </p>
-      </v-col>
-      <v-chip-group
-        v-if="
-          steps[step_index].chips.length && current_step_index >= step_index
-        "
-        column
-        class="d-flex flex-wrap ma-2 overflow-y-auto"
-        multiple
-        style="max-height: 150px"
-      >
-        <v-chip
-          v-for="(chip, chip_index) in steps[step_index].chips"
-          :key="chip_index"
-          class="ma-1"
-          :title="chip"
-        >
-          {{ truncate(chip, 50) }}
-        </v-chip>
-      </v-chip-group>
-    </v-row>
-    <component
-      v-if="step_index == current_step_index"
-      :key="step_index"
-      :is="steps[step_index].component.component_name"
-      v-bind="steps[step_index].component.component_options"
-      @increment_step="increment_step"
-      @decrement_step="decrement_step"
-      @update_values="update_values_event"
-      @reset_values="$emit('reset_values')"
-    />
-  </v-stepper-content>
+      </div>
+    </template>
+
+    <div class="step-content-wrapper pa-4 pt-0">
+      <v-divider class="mb-6 opacity-10" />
+      <component
+        v-if="step_index == current_step_index"
+        :key="step_index"
+        :is="steps[step_index].component.component_name"
+        v-bind="steps[step_index].component.component_options"
+        @increment_step="increment_step"
+        @decrement_step="decrement_step"
+        @update_values="update_values_event"
+        @reset_values="$emit('reset_values')"
+      />
+    </div>
+  </v-stepper-vertical-item>
 </template>
 
 <script setup>
@@ -102,3 +133,45 @@
     )
   })
 </script>
+
+<style scoped>
+  .step-header {
+    transition: all 0.2s ease;
+    border-radius: 16px;
+  }
+
+  .step-header:hover {
+    background-color: rgba(var(--v-theme-primary), 0.05);
+  }
+
+  .step-icon-container {
+    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .step-header:hover .step-icon-container {
+    transform: scale(1.1);
+  }
+
+  .custom-step-item {
+    transition: all 0.4s ease;
+  }
+
+  :deep(.v-stepper-vertical-item__content) {
+    padding: 0 !important;
+  }
+
+  .step-content-wrapper {
+    animation: slideIn 0.4s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
diff --git a/app/components/Stepper.vue b/app/components/Stepper.vue
index 0a0399d6..f64445cb 100644
--- a/app/components/Stepper.vue
+++ b/app/components/Stepper.vue
@@ -1,20 +1,16 @@
 <template>
   <v-stepper-vertical
     v-model="current_step_index"
-    class="pa-4 ma-0"
-    elevation="1"
-    rounded
+    class="pa-0 ma-0 custom-stepper"
+    flat
+    rounded="xl"
   >
-    <v-stepper-items>
-      <v-col cols="12">
-        <Step
-          v-for="(step, index) in steps"
-          :key="step"
-          :step_index="index"
-          @reset_values="emit('reset_values')"
-        />
-      </v-col>
-    </v-stepper-items>
+    <Step
+      v-for="(step, index) in steps"
+      :key="step"
+      :step_index="index"
+      @reset_values="emit('reset_values')"
+    />
   </v-stepper-vertical>
 </template>
 
@@ -25,3 +21,24 @@
   const stepper_tree = inject("stepper_tree")
   const { steps, current_step_index } = toRefs(stepper_tree)
 </script>
+
+<style scoped>
+  .custom-stepper {
+    background: transparent !important;
+  }
+
+  :deep(.v-stepper-vertical-item) {
+    padding: 0 !important;
+    margin-bottom: 16px !important;
+    border-radius: 24px !important;
+    overflow: hidden;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :deep(.v-stepper-vertical-item--active) {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+    border-color: rgba(var(--v-theme-primary), 0.2) !important;
+  }
+</style>

From 6b641b1ae2fd9515258d6b0e1c298ac1b93d3975 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 20 Jan 2026 16:35:58 +0100
Subject: [PATCH 2/5] fix(Stepper): Fix stepper issues

---
 app/components/Step.vue    | 125 ++++++++++++-------------------------
 app/components/Stepper.vue |  22 ++++---
 2 files changed, 51 insertions(+), 96 deletions(-)

diff --git a/app/components/Step.vue b/app/components/Step.vue
index 69cb0d6b..3b1b2dde 100644
--- a/app/components/Step.vue
+++ b/app/components/Step.vue
@@ -1,76 +1,39 @@
 <template>
   <v-stepper-vertical-item
-    :value="step_index"
+    :value="step_index + 1"
+    :editable="step_index < current_step_index"
     hide-actions
     class="custom-step-item"
   >
     <template v-slot:title>
-      <div
-        class="d-flex align-center py-3 px-2 cursor-pointer step-header"
-        @click="set_current_step(step_index)"
-      >
-        <v-avatar
-          size="48"
-          :color="
+      <div class="step-title-wrapper">
+        <h3
+          class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
+          :class="
             current_step_index == step_index
-              ? 'primary'
-              : current_step_index > step_index
-                ? 'success'
-                : 'grey-lighten-3'
+              ? 'text-primary'
+              : 'text-grey-darken-1'
           "
-          class="mr-4 elevation-2 step-icon-container"
         >
-          <v-icon
-            v-if="current_step_index > step_index"
-            icon="mdi-check"
-            color="white"
-            size="28"
-          />
-          <v-icon
-            v-else
-            :icon="`mdi-numeric-${step_index + 1}`"
-            :color="current_step_index == step_index ? 'white' : 'grey-darken-1'"
-            size="28"
-            class="font-weight-bold"
-          />
-        </v-avatar>
-
-        <div class="flex-grow-1">
-          <h3
-            class="text-h6 font-weight-bold mb-0 transition-swing"
-            :class="
-              current_step_index == step_index
-                ? 'text-primary'
-                : 'text-grey-darken-1'
-            "
-          >
-            {{ steps[step_index].step_title }}
-          </h3>
-          <div
-            v-if="
-              steps[step_index].chips.length && current_step_index >= step_index
-            "
-            class="d-flex flex-wrap mt-2"
+          {{ steps[step_index].step_title }}
+        </h3>
+        <div
+          v-if="
+            steps[step_index].chips.length && current_step_index >= step_index
+          "
+          class="d-flex flex-wrap mt-2"
+        >
+          <v-chip
+            v-for="(chip, chip_index) in steps[step_index].chips"
+            :key="chip_index"
+            size="small"
+            class="mr-2 mb-1 font-weight-medium"
+            color="primary"
+            variant="tonal"
           >
-            <v-chip
-              v-for="(chip, chip_index) in steps[step_index].chips"
-              :key="chip_index"
-              size="x-small"
-              class="mr-1 mb-1 font-weight-medium"
-              color="primary"
-              variant="tonal"
-            >
-              {{ truncate(chip, 30) }}
-            </v-chip>
-          </div>
+            {{ truncate(chip, 30) }}
+          </v-chip>
         </div>
-
-        <v-icon
-          v-if="current_step_index == step_index"
-          icon="mdi-chevron-down"
-          color="primary"
-          class="ml-2"
-        />
       </div>
     </template>
 
@@ -105,9 +68,11 @@
   const stepper_tree = inject("stepper_tree")
   const { current_step_index, steps } = toRefs(stepper_tree)
 
-  function set_current_step(step_index) {
-    stepper_tree.current_step_index = step_index
-  }
+  watch(current_step_index, (newVal, oldVal) => {
+    if (newVal < oldVal) {
+      stepper_tree.navigating_back = true
+    }
+  })
 
   function update_values_event(keys_values_object) {
     for (const [key, value] of Object.entries(keys_values_object)) {
@@ -135,33 +100,21 @@
 </script>
 
 <style scoped>
-  .step-header {
-    transition: all 0.2s ease;
-    border-radius: 16px;
-  }
-
-  .step-header:hover {
-    background-color: rgba(var(--v-theme-primary), 0.05);
-  }
-
-  .step-icon-container {
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-
-  .step-header:hover .step-icon-container {
-    transform: scale(1.1);
-  }
-
   .custom-step-item {
     transition: all 0.4s ease;
   }
 
-  :deep(.v-stepper-vertical-item__content) {
-    padding: 0 !important;
+  :deep(.v-stepper-vertical-item__header) {
+    align-items: center !important;
+    padding-top: 12px !important;
+    padding-bottom: 12px !important;
   }
 
-  .step-content-wrapper {
-    animation: slideIn 0.4s ease-out;
+  .step-title-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 24px;
   }
 
   @keyframes slideIn {
diff --git a/app/components/Stepper.vue b/app/components/Stepper.vue
index f64445cb..501e9200 100644
--- a/app/components/Stepper.vue
+++ b/app/components/Stepper.vue
@@ -1,13 +1,15 @@
 <template>
   <v-stepper-vertical
-    v-model="current_step_index"
+    :model-value="current_step_index + 1"
+    @update:model-value="current_step_index = $event - 1"
     class="pa-0 ma-0 custom-stepper"
     flat
     rounded="xl"
+    non-linear
   >
     <Step
       v-for="(step, index) in steps"
-      :key="step"
+      :key="index"
       :step_index="index"
       @reset_values="emit('reset_values')"
     />
@@ -24,21 +26,21 @@
 
 <style scoped>
   .custom-stepper {
-    background: transparent !important;
+    background: white !important;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
   }
 
   :deep(.v-stepper-vertical-item) {
     padding: 0 !important;
-    margin-bottom: 16px !important;
-    border-radius: 24px !important;
-    overflow: hidden;
-    background: white;
-    border: 1px solid rgba(0, 0, 0, 0.05) !important;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   :deep(.v-stepper-vertical-item--active) {
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
-    border-color: rgba(var(--v-theme-primary), 0.2) !important;
+    background: rgba(var(--v-theme-primary), 0.02);
+  }
+
+  :deep(.v-stepper-vertical-item__loader) {
+    display: none;
   }
 </style>

From b6f9a47b4d164acd5cfb15ca19564fba0cb4c6a3 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 20 Jan 2026 17:05:31 +0100
Subject: [PATCH 3/5] fix warnings

---
 app/components/FileSelector.vue              |  3 ++-
 app/components/FileUploader.vue              |  2 +-
 app/components/Launcher.vue                  |  2 +-
 app/components/Recaptcha.vue                 |  7 +++++-
 app/components/Step.vue                      |  1 +
 app/components/Stepper.vue                   |  4 ----
 app/plugins/auto_store_register.js           | 24 ++++++++++++--------
 app/stores/data.js                           |  2 +-
 internal/database/tables/model_components.js |  2 +-
 internal/stores/model/blocks.js              |  6 +++++
 internal/stores/model/corners.js             |  6 +++++
 internal/stores/model/lines.js               |  6 +++++
 internal/stores/model/surfaces.js            |  6 +++++
 13 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/app/components/FileSelector.vue b/app/components/FileSelector.vue
index d3e206ff..985fb354 100644
--- a/app/components/FileSelector.vue
+++ b/app/components/FileSelector.vue
@@ -41,7 +41,8 @@
     },
     { deep: true },
   )
-  watch(props.auto_upload, (newVal) => {
+  const auto_upload_prop = toRef(props, "auto_upload")
+  watch(auto_upload_prop, (newVal) => {
     auto_upload.value = newVal
   })
 
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 98d51087..e83f4092 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -108,7 +108,7 @@
   watch(internal_files, (value) => {
     files_uploaded.value = false
     if (props.auto_upload) {
-      if (props.multiple.value == false) {
+      if (props.multiple == false) {
         internal_files.value = [value]
       }
       upload_files()
diff --git a/app/components/Launcher.vue b/app/components/Launcher.vue
index f6f77858..67a319b4 100644
--- a/app/components/Launcher.vue
+++ b/app/components/Launcher.vue
@@ -8,7 +8,7 @@
         align-self="center"
         style="z-index: 1000"
       >
-        <Recaptcha :color="'secondary'" />
+        <Recaptcha :button_color="'secondary'" />
       </v-col>
       <v-col v-else-if="infraStore.status == Status.CREATING">
         <Loading />
diff --git a/app/components/Recaptcha.vue b/app/components/Recaptcha.vue
index 502d6917..58bd095e 100644
--- a/app/components/Recaptcha.vue
+++ b/app/components/Recaptcha.vue
@@ -31,7 +31,7 @@
     <VCol cols="4" class="d-flex justify-center align-center">
       <VBtn
         :text="props.button_label"
-        :color="props.button_color"
+        :color="props.color || props.button_color"
         @click="submit_recaptcha"
       />
     </VCol>
@@ -53,11 +53,16 @@
       required: false,
       default: "white",
     },
+    color: {
+      type: String,
+      required: false,
+    },
   })
   const infraStore = useInfraStore()
   const name = ref("")
   const email = ref("")
   const launch = ref(false)
+  const valid = ref(false)
   const emailRules = [
     (value) => {
       if (value) {
diff --git a/app/components/Step.vue b/app/components/Step.vue
index 3b1b2dde..ae00d478 100644
--- a/app/components/Step.vue
+++ b/app/components/Step.vue
@@ -2,6 +2,7 @@
   <v-stepper-vertical-item
     :value="step_index + 1"
     :editable="step_index < current_step_index"
+    color="primary"
     hide-actions
     class="custom-step-item"
   >
diff --git a/app/components/Stepper.vue b/app/components/Stepper.vue
index 501e9200..11483e39 100644
--- a/app/components/Stepper.vue
+++ b/app/components/Stepper.vue
@@ -36,10 +36,6 @@
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  :deep(.v-stepper-vertical-item--active) {
-    background: rgba(var(--v-theme-primary), 0.02);
-  }
-
   :deep(.v-stepper-vertical-item__loader) {
     display: none;
   }
diff --git a/app/plugins/auto_store_register.js b/app/plugins/auto_store_register.js
index fba19ebb..d023c45e 100644
--- a/app/plugins/auto_store_register.js
+++ b/app/plugins/auto_store_register.js
@@ -10,15 +10,19 @@ const autoStoreRegister = ({ store }) => {
   console.log(`[AutoRegister] Store "${store.$id}" processed`)
 }
 
-export default defineNuxtPlugin((nuxtApp) => {
-  const { $pinia } = nuxtApp
-  if (!$pinia) {
-    console.warn("Pinia instance not available.")
-    return
-  }
+export default defineNuxtPlugin({
+  name: "auto-store-register",
+  dependsOn: ["pinia"],
+  setup(nuxtApp) {
+    const { $pinia } = nuxtApp
+    if (!$pinia) {
+      console.warn("Pinia instance not available.")
+      return
+    }
 
-  $pinia.use(autoStoreRegister)
-  console.log(
-    "[AUTOREGISTER PLUGIN] Loaded automatically from OpenGeodeWeb-Front",
-  )
+    $pinia.use(autoStoreRegister)
+    console.log(
+      "[AUTOREGISTER PLUGIN] Loaded automatically from OpenGeodeWeb-Front",
+    )
+  },
 })
diff --git a/app/stores/data.js b/app/stores/data.js
index de1f50bd..f1201818 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -103,7 +103,7 @@ export const useDataStore = defineStore("data", () => {
 
   async function addModelComponents(values) {
     if (!values || values.length === 0) {
-      console.warn("[addModelComponents] No mesh components to add")
+      console.debug("[addModelComponents] No mesh components to add")
       return
     }
     values.map((value) => {
diff --git a/internal/database/tables/model_components.js b/internal/database/tables/model_components.js
index a260bf5c..4bf4601f 100644
--- a/internal/database/tables/model_components.js
+++ b/internal/database/tables/model_components.js
@@ -1,4 +1,4 @@
 export const modelComponentsTable = {
   name: "model_components",
-  schema: "[id+geode_id], viewer_id, type, name, created_at",
+  schema: "[id+geode_id], [id+type], viewer_id, type, name, created_at",
 }
diff --git a/internal/stores/model/blocks.js b/internal/stores/model/blocks.js
index 28ebee94..c5e8c731 100644
--- a/internal/stores/model/blocks.js
+++ b/internal/stores/model/blocks.js
@@ -32,6 +32,9 @@ export function useModelBlocksStyle() {
     modelBlockStyle(id, block_id).visibility = visibility
   }
   async function setModelBlocksVisibility(id, block_ids, visibility) {
+    if (!block_ids || block_ids.length === 0) {
+      return
+    }
     const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       block_ids,
@@ -70,6 +73,9 @@ export function useModelBlocksStyle() {
   }
 
   async function setModelBlocksColor(id, block_ids, color) {
+    if (!block_ids || block_ids.length === 0) {
+      return
+    }
     const blocks_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       block_ids,
diff --git a/internal/stores/model/corners.js b/internal/stores/model/corners.js
index a8da3abf..fdbf7b3c 100644
--- a/internal/stores/model/corners.js
+++ b/internal/stores/model/corners.js
@@ -32,6 +32,9 @@ export function useModelCornersStyle() {
     modelCornerStyle(id, corner_id).visibility = visibility
   }
   async function setModelCornersVisibility(id, corner_ids, visibility) {
+    if (!corner_ids || corner_ids.length === 0) {
+      return
+    }
     const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       corner_ids,
@@ -71,6 +74,9 @@ export function useModelCornersStyle() {
   }
 
   async function setModelCornersColor(id, corner_ids, color) {
+    if (!corner_ids || corner_ids.length === 0) {
+      return
+    }
     const corner_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       corner_ids,
diff --git a/internal/stores/model/lines.js b/internal/stores/model/lines.js
index 9680d62b..da83d8e2 100644
--- a/internal/stores/model/lines.js
+++ b/internal/stores/model/lines.js
@@ -32,6 +32,9 @@ export function useModelLinesStyle() {
     modelLineStyle(id, line_id).visibility = visibility
   }
   async function setModelLinesVisibility(id, line_ids, visibility) {
+    if (!line_ids || line_ids.length === 0) {
+      return
+    }
     const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       line_ids,
@@ -69,6 +72,9 @@ export function useModelLinesStyle() {
     modelLineStyle(id, line_id).color = color
   }
   async function setModelLinesColor(id, line_ids, color) {
+    if (!line_ids || line_ids.length === 0) {
+      return
+    }
     const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       line_ids,
diff --git a/internal/stores/model/surfaces.js b/internal/stores/model/surfaces.js
index 719628e1..5138f836 100644
--- a/internal/stores/model/surfaces.js
+++ b/internal/stores/model/surfaces.js
@@ -31,6 +31,9 @@ export function useModelSurfacesStyle() {
     modelSurfaceStyle(id, surface_id).visibility = visibility
   }
   async function setModelSurfacesVisibility(id, surface_ids, visibility) {
+    if (!surface_ids || surface_ids.length === 0) {
+      return
+    }
     const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       surface_ids,
@@ -68,6 +71,9 @@ export function useModelSurfacesStyle() {
   }
 
   async function setModelSurfacesColor(id, surface_ids, color) {
+    if (!surface_ids || surface_ids.length === 0) {
+      return
+    }
     const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(
       id,
       surface_ids,

From 187dcc8f04e3ab52d18ca95b0c9a78d45765d6f6 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 20 Jan 2026 17:46:50 +0100
Subject: [PATCH 4/5] neww component and some edits

---
 app/components/DragAndDrop.vue  | 121 ++++++++++++++++++++++++++++++++
 app/components/FileUploader.vue | 109 +++++++++++++++++++---------
 app/components/Step.vue         |  33 ++++++++-
 app/components/Stepper.vue      |  13 +++-
 4 files changed, 237 insertions(+), 39 deletions(-)
 create mode 100644 app/components/DragAndDrop.vue

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
new file mode 100644
index 00000000..f4c670cd
--- /dev/null
+++ b/app/components/DragAndDrop.vue
@@ -0,0 +1,121 @@
+<template>
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
+    <v-card
+      v-bind="hoverProps"
+      class="text-center cursor-pointer"
+      :class="{
+        'elevation-4': isHovering || isDragging,
+        'elevation-0': !(isHovering || isDragging),
+      }"
+      :style="{
+        position: 'relative',
+        overflow: 'hidden',
+        transition: 'all 0.3s ease',
+        background: isHovering || isDragging ? 'rgba(var(--v-theme-primary), 0.05)' : 'rgba(0, 0, 0, 0.02)',
+        border: `2px dashed ${isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'}`,
+        transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
+        pointerEvents: loading ? 'none' : 'auto',
+        opacity: loading ? 0.6 : 1,
+      }"
+      rounded="xl"
+      @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 ? 'primary' : 'grey-lighten-2'"
+          :style="{
+            width: '80px',
+            height: '80px',
+            transition: 'all 0.3s ease',
+          }"
+          rounded="circle"
+          :elevation="isHovering || isDragging ? 4 : 0"
+        >
+          <v-icon
+            :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
+            size="40"
+            :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+            :class="{ rotating: loading }"
+          />
+        </v-sheet>
+
+        <div
+          class="text-h6 font-weight-bold mb-1"
+          :class="isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'"
+          style="transition: color 0.3s ease"
+        >
+          {{
+            loading
+              ? loadingText
+              : isDragging
+                ? dropText
+                : idleText
+          }}
+        </div>
+
+        <div v-if="showExtensions" class="text-body-2 text-grey-darken-1">
+          {{ accept ? `(${accept} files)` : 'All files allowed' }}
+        </div>
+      </v-card-text>
+
+      <input
+        ref="fileInput"
+        type="file"
+        class="d-none"
+        :multiple="multiple"
+        :accept="accept"
+        @change="handleFileSelect"
+      />
+    </v-card>
+  </v-hover>
+</template>
+
+<script setup>
+  const props = defineProps({
+    multiple: { type: Boolean, default: false },
+    accept: { type: String, default: "" },
+    loading: { type: Boolean, default: false },
+    showExtensions: { type: Boolean, default: true },
+    idleText: { type: String, default: "Click or Drag & Drop files" },
+    dropText: { type: String, default: "Drop to upload" },
+    loadingText: { type: String, default: "Uploading..." },
+  })
+
+  const emit = defineEmits(["files-selected"])
+
+  const isDragging = ref(false)
+  const fileInput = ref(null)
+
+  const triggerFileDialog = () => fileInput.value?.click()
+
+  function handleDrop(e) {
+    isDragging.value = false
+    const files = Array.from(e.dataTransfer.files)
+    emit("files-selected", files)
+  }
+
+  function handleFileSelect(e) {
+    const files = Array.from(e.target.files)
+    emit("files-selected", files)
+    e.target.value = ""
+  }
+</script>
+
+<style scoped>
+  .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 e83f4092..0ad3e7fe 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -1,31 +1,48 @@
 <template>
-  <v-row>
-    <v-col class="pa-0">
-      <v-file-input
-        v-model="internal_files"
-        :multiple="props.multiple"
-        :label="label"
-        :accept="props.accept"
-        :rules="[(value) => !!value || 'The file is mandatory']"
+  <DragAndDrop
+    :multiple="props.multiple"
+    :accept="props.accept"
+    :loading="loading"
+    :show-extensions="false"
+    @files-selected="processSelectedFiles"
+  />
+
+  <div v-if="internal_files.length" class="mt-6">
+    <div class="text-subtitle-2 font-weight-bold mb-3 d-flex align-center">
+      <v-icon icon="mdi-file-check" class="mr-2" color="primary" />
+      Selected Files
+      <v-chip size="x-small" class="ml-2" color="primary" variant="flat">
+        {{ internal_files.length }}
+      </v-chip>
+    </div>
+    <div class="d-flex flex-wrap gap-2">
+      <v-chip
+        v-for="(file, index) in internal_files"
+        :key="index"
+        closable
+        size="small"
         color="primary"
-        :hide-input="props.mini"
-        :hide-details="props.mini"
-        chips
-        counter
-        show-size
-        @click:clear="clear()"
-      />
-    </v-col>
-  </v-row>
-  <v-row v-if="!props.auto_upload">
+        variant="tonal"
+        class="font-weight-medium"
+        @click:close="removeFile(index)"
+      >
+        <v-icon start size="16">mdi-file-outline</v-icon>
+        {{ file.name }}
+      </v-chip>
+    </div>
+  </div>
+
+  <v-row v-if="!props.auto_upload && internal_files.length" class="mt-6">
     <v-col cols="auto">
       <v-btn
         color="primary"
-        :disabled="!internal_files.length && !files_uploaded"
         :loading="loading"
-        class="pa-2"
+        class="text-none px-8"
+        rounded="lg"
+        elevation="2"
         @click="upload_files"
       >
+        <v-icon start>mdi-upload</v-icon>
         Upload file(s)
       </v-btn>
     </v-col>
@@ -35,6 +52,8 @@
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
   import { upload_file } from "@ogw_front/utils/upload_file"
+  import DragAndDrop from "@ogw_front/components/DragAndDrop"
+
   const schema = schemas.opengeodeweb_back.upload_file
 
   const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"])
@@ -47,15 +66,28 @@
     mini: { type: Boolean, required: false, default: false },
   })
 
-  const label = props.multiple
-    ? "Please select file(s) to import"
-    : "Please select a file to import"
   const internal_files = ref(props.files)
   const loading = ref(false)
   const files_uploaded = ref(false)
 
   const toggle_loading = useToggle(loading)
 
+  function processSelectedFiles(files) {
+    if (props.multiple) {
+      internal_files.value = [...internal_files.value, ...files]
+    } else {
+      internal_files.value = [files[0]]
+    }
+  }
+
+  function removeFile(index) {
+    internal_files.value.splice(index, 1)
+    if (internal_files.value.length === 0) {
+      files_uploaded.value = false
+      emit("files_uploaded", [])
+    }
+  }
+
   async function upload_files() {
     toggle_loading()
     var promise_array = []
@@ -92,11 +124,6 @@
     }
   }
 
-  function clear() {
-    internal_files.value = []
-    emit("files_uploaded", internal_files.value)
-  }
-
   watch(
     () => props.files,
     (newVal) => {
@@ -107,17 +134,31 @@
 
   watch(internal_files, (value) => {
     files_uploaded.value = false
-    if (props.auto_upload) {
-      if (props.multiple == false) {
-        internal_files.value = [value]
-      }
+    if (props.auto_upload && value.length > 0) {
       upload_files()
     }
   })
 </script>
 
 <style scoped>
-  .div.v-input__details {
-    display: none;
+  .rotating {
+    animation: rotate 1s linear infinite;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .gap-2 {
+    gap: 8px;
+  }
+
+  .text-primary {
+    color: rgb(var(--v-theme-primary)) !important;
   }
 </style>
diff --git a/app/components/Step.vue b/app/components/Step.vue
index ae00d478..6e01c9b7 100644
--- a/app/components/Step.vue
+++ b/app/components/Step.vue
@@ -107,8 +107,32 @@
 
   :deep(.v-stepper-vertical-item__header) {
     align-items: center !important;
-    padding-top: 12px !important;
-    padding-bottom: 12px !important;
+    padding-top: 16px !important;
+    padding-bottom: 16px !important;
+  }
+
+  :deep(.v-stepper-vertical-item__avatar) {
+    background: transparent !important;
+    color: #6b7280 !important;
+    font-weight: 700 !important;
+    box-shadow: none !important;
+    border: 2px solid #e5e7eb !important;
+  }
+
+  :deep(.v-stepper-vertical-item--active .v-stepper-vertical-item__avatar) {
+    background: rgba(var(--v-theme-primary), 0.1) !important;
+    color: rgb(var(--v-theme-primary)) !important;
+    border-color: rgb(var(--v-theme-primary)) !important;
+  }
+
+  :deep(.v-stepper-vertical-item--complete .v-stepper-vertical-item__avatar) {
+    background: rgb(var(--v-theme-primary)) !important;
+    color: white !important;
+    border-color: rgb(var(--v-theme-primary)) !important;
+  }
+
+  :deep(.v-stepper-vertical-item__step-line) {
+    border-left: 1px solid #e5e7eb !important;
   }
 
   .step-title-wrapper {
@@ -116,6 +140,11 @@
     flex-direction: column;
     justify-content: center;
     min-height: 24px;
+    padding-left: 8px;
+  }
+
+  .text-primary {
+    color: rgb(var(--v-theme-primary)) !important;
   }
 
   @keyframes slideIn {
diff --git a/app/components/Stepper.vue b/app/components/Stepper.vue
index 11483e39..2dfa28e4 100644
--- a/app/components/Stepper.vue
+++ b/app/components/Stepper.vue
@@ -4,7 +4,6 @@
     @update:model-value="current_step_index = $event - 1"
     class="pa-0 ma-0 custom-stepper"
     flat
-    rounded="xl"
     non-linear
   >
     <Step
@@ -27,8 +26,8 @@
 <style scoped>
   .custom-stepper {
     background: white !important;
-    border: 1px solid rgba(0, 0, 0, 0.08) !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
+    border-radius: 24px !important;
+    overflow: hidden;
   }
 
   :deep(.v-stepper-vertical-item) {
@@ -36,7 +35,15 @@
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
+  :deep(.v-stepper-vertical-item--active) {
+    background: rgba(var(--v-theme-primary), 0.02);
+  }
+
   :deep(.v-stepper-vertical-item__loader) {
     display: none;
   }
+
+  .gap-4 {
+    gap: 16px;
+  }
 </style>

From 2f3c7268bae83508c6555308afa1b5ed534d66d0 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 20 Jan 2026 16:48:21 +0000
Subject: [PATCH 5/5] Apply prepare changes

---
 app/components/DragAndDrop.vue                | 19 +++++++++----------
 .../microservices/back/requirements.txt       |  1 -
 .../microservices/viewer/requirements.txt     |  1 -
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index f4c670cd..0149445b 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -11,7 +11,10 @@
         position: 'relative',
         overflow: 'hidden',
         transition: 'all 0.3s ease',
-        background: isHovering || isDragging ? 'rgba(var(--v-theme-primary), 0.05)' : 'rgba(0, 0, 0, 0.02)',
+        background:
+          isHovering || isDragging
+            ? 'rgba(var(--v-theme-primary), 0.05)'
+            : 'rgba(0, 0, 0, 0.02)',
         border: `2px dashed ${isHovering || isDragging ? 'rgb(var(--v-theme-primary))' : '#e0e0e0'}`,
         transform: isHovering || isDragging ? 'translateY(-2px)' : 'none',
         pointerEvents: loading ? 'none' : 'auto',
@@ -45,20 +48,16 @@
 
         <div
           class="text-h6 font-weight-bold mb-1"
-          :class="isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'"
+          :class="
+            isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
+          "
           style="transition: color 0.3s ease"
         >
-          {{
-            loading
-              ? loadingText
-              : isDragging
-                ? dropText
-                : idleText
-          }}
+          {{ loading ? loadingText : isDragging ? dropText : idleText }}
         </div>
 
         <div v-if="showExtensions" class="text-body-2 text-grey-darken-1">
-          {{ accept ? `(${accept} files)` : 'All files allowed' }}
+          {{ accept ? `(${accept} files)` : "All files allowed" }}
         </div>
       </v-card-text>
 
diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt
index ecd51b9e..bd3a3ef5 100644
--- a/tests/integration/microservices/back/requirements.txt
+++ b/tests/integration/microservices/back/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/back/requirements.txt tests/integration/microservices/back/requirements.in
 #
 
-opengeodeweb-back==6.*,>=6.0.0rc1
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
index 8293def3..4d097394 100644
--- a/tests/integration/microservices/viewer/requirements.txt
+++ b/tests/integration/microservices/viewer/requirements.txt
@@ -5,4 +5,3 @@
 #    pip-compile --output-file=tests/integration/microservices/viewer/requirements.txt tests/integration/microservices/viewer/requirements.in
 #
 
-opengeodeweb-viewer==1.*,>=1.14.0