From ca231f3e3f3ece99bc20c6c04f3010bf83a50217 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 16 Feb 2026 14:36:27 +0100
Subject: [PATCH 01/11] stable version

---
 app/components/DragAndDrop.vue         | 23 +++++------
 app/components/FileUploader.vue        | 51 ++++++++++++++++--------
 app/components/HybridRenderingView.vue |  2 +-
 app/components/RemoteRenderingView.vue |  2 +-
 app/components/Step.vue                | 31 ++++++++-------
 app/components/Stepper.vue             | 55 ++++++++++++++++++++------
 6 files changed, 105 insertions(+), 59 deletions(-)

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index 723dc232..66bc4fef 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -33,7 +33,7 @@
   <v-hover v-slot="{ isHovering, props: hoverProps }">
     <v-card
       v-bind="hoverProps"
-      class="text-center cursor-pointer"
+      class="text-center cursor-pointer glass-panel border-opacity-10 border-white"
       :class="{
         'elevation-4': isHovering || isDragging,
         'elevation-0': !(isHovering || isDragging),
@@ -41,14 +41,11 @@
       :style="{
         position: 'relative',
         overflow: 'hidden',
-        transition: 'all 0.3s ease',
+        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         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'
-        }`,
+            ? '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,
@@ -62,8 +59,9 @@
       <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'"
-          :elevation="isHovering || isDragging ? 4 : 0"
+          :color="
+            isHovering || isDragging ? 'white' : 'rgba(255, 255, 255, 0.1)'
+          "
           rounded="circle"
           width="80"
           height="80"
@@ -72,16 +70,13 @@
           <v-icon
             :icon="loading ? 'mdi-loading' : 'mdi-cloud-upload'"
             size="40"
-            :color="isHovering || isDragging ? 'white' : 'grey-darken-1'"
+            :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"
-          :class="
-            isHovering || isDragging ? 'text-primary' : 'text-grey-darken-2'
-          "
+          class="text-h6 font-weight-bold justify-center pa-0 mb-1 text-white"
           style="transition: color 0.3s ease"
         >
           {{ loading ? loadingText : isDragging ? dropText : idleText }}
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index a346cb35..15ccdbbe 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -98,43 +98,60 @@
     @files-selected="processSelectedFiles"
   />
 
-  <v-card-text v-if="internal_files.length" class="mt-4">
-    <v-sheet class="d-flex align-center mb-3" color="transparent">
-      <v-icon icon="mdi-file-check" class="mr-2" color="primary" />
-      <span class="text-subtitle-2 font-weight-bold"> Selected Files </span>
-      <v-chip size="x-small" class="ml-2" color="primary" variant="flat">
+  <v-card-text v-if="internal_files.length" class="mt-6">
+    <v-sheet class="d-flex align-center mb-4" color="transparent">
+      <v-icon icon="mdi-file-check" class="mr-3" color="success" 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"
+      >
         {{ internal_files.length }}
       </v-chip>
     </v-sheet>
 
-    <v-sheet class="d-flex flex-wrap gap-2" color="transparent">
+    <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
       <v-chip
         v-for="(file, index) in internal_files"
         :key="index"
         closable
-        size="small"
-        color="primary"
-        variant="tonal"
-        class="font-weight-medium"
+        size="default"
+        color="white"
+        variant="outlined"
+        class="font-weight-medium glass-panel border-opacity-10 px-4"
+        style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
-        <v-icon start size="16">mdi-file-outline</v-icon>
-        {{ file.name }}
+        <v-icon start size="18" color="success">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
+          >
+        </template>
       </v-chip>
     </v-sheet>
   </v-card-text>
 
-  <v-card-actions v-if="!props.auto_upload && internal_files.length">
+  <v-card-actions
+    v-if="!props.auto_upload && internal_files.length"
+    class="mt-6 pa-0"
+  >
     <v-btn
       color="primary"
-      variant="elevated"
+      variant="flat"
       size="large"
-      rounded="lg"
+      rounded="xl"
       :loading="loading"
-      class="text-none px-3 font-weight-bold"
+      class="text-none px-6 font-weight-bold custom-upload-btn"
+      block
       @click="upload_files"
     >
-      <v-icon start size="20">mdi-cloud-upload-outline</v-icon>
+      <v-icon start size="22">mdi-cloud-upload</v-icon>
       Upload {{ internal_files.length }} file<span
         v-if="internal_files.length > 1"
         >s</span
diff --git a/app/components/HybridRenderingView.vue b/app/components/HybridRenderingView.vue
index 8a2785e8..e80b83db 100644
--- a/app/components/HybridRenderingView.vue
+++ b/app/components/HybridRenderingView.vue
@@ -50,7 +50,7 @@
 
 <template>
   <ClientOnly>
-    <div class="fill-height" style="position: relative">
+    <div class="fill-height" style="position: relative; height: 100%">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col
diff --git a/app/components/RemoteRenderingView.vue b/app/components/RemoteRenderingView.vue
index 54d1801a..0898a102 100644
--- a/app/components/RemoteRenderingView.vue
+++ b/app/components/RemoteRenderingView.vue
@@ -100,7 +100,7 @@
 
 <template>
   <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
+    <div style="position: relative; width: 100%; height: 100%">
       <ViewToolbar />
       <slot name="ui"></slot>
       <v-col
diff --git a/app/components/Step.vue b/app/components/Step.vue
index e71ebccc..654cd6ac 100644
--- a/app/components/Step.vue
+++ b/app/components/Step.vue
@@ -48,7 +48,8 @@
   <v-stepper-vertical-item
     :value="step_index + 1"
     :editable="step_index < current_step_index"
-    color="primary"
+    color="white"
+    class="text-white"
     hide-actions
   >
     <template #title>
@@ -56,17 +57,18 @@
         color="transparent"
         class="d-flex flex-column justify-center ps-2"
       >
-        <v-text
-          tag="h3"
-          class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
-          :class="
-            current_step_index === step_index
-              ? 'text-primary'
-              : 'text-grey-darken-1'
-          "
+        <h3
+          class="text-h6 font-weight-bold mb-0 transition-swing"
+          :style="{
+            color:
+              current_step_index === step_index
+                ? '#3c9983'
+                : 'rgba(255, 255, 255, 0.5)',
+            transition: 'color 0.3s ease',
+          }"
         >
           {{ steps[step_index].step_title }}
-        </v-text>
+        </h3>
 
         <v-sheet
           v-if="sortedChips.length && current_step_index >= step_index"
@@ -77,9 +79,10 @@
             v-for="(chip, chip_index) in sortedChips"
             :key="chip_index"
             size="small"
-            class="me-2 mb-1 font-weight-medium"
-            color="primary"
-            variant="tonal"
+            class="me-2 mb-1 font-weight-bold border-opacity-20"
+            color="white"
+            variant="outlined"
+            style="background: rgba(255, 255, 255, 0.05)"
           >
             {{ truncate(chip, 30) }}
           </v-chip>
@@ -88,8 +91,6 @@
     </template>
 
     <v-card-text class="pt-0">
-      <v-divider class="mb-6 opacity-10" />
-
       <component
         v-if="step_index === current_step_index"
         :key="step_index"
diff --git a/app/components/Stepper.vue b/app/components/Stepper.vue
index ec28d823..dbd7285d 100644
--- a/app/components/Stepper.vue
+++ b/app/components/Stepper.vue
@@ -8,16 +8,19 @@
 
 <template>
   <v-card-item class="flex-shrink-0 pa-0">
-    <v-card-title
-      class="text-h4 text-primary px-8 pt-6 pb-4 font-weight-bold d-flex align-center"
-    >
-      <v-icon icon="mdi-file-upload-outline" class="mr-3" />
-      Import Data
-    </v-card-title>
-
-    <v-card-subtitle class="px-8 pb-4 text-medium">
-      Choose a file to import.
-    </v-card-subtitle>
+    <div class="px-8 pt-8 pb-4">
+      <div class="d-flex align-center mb-2">
+        <v-icon
+          icon="mdi-file-upload-outline"
+          class="mr-3 title-text"
+          size="32"
+        />
+        <h2 class="title-text">Import Data</h2>
+      </div>
+      <p class="text-white text-body-1">
+        Select and configure your files for a seamless import.
+      </p>
+    </div>
   </v-card-item>
 
   <v-stepper-vertical
@@ -25,7 +28,7 @@
     @update:model-value="current_step_index = $event - 1"
     flat
     non-linear
-    class="pa-0 ma-0 bg-white rounded-xl overflow-hidden"
+    class="pa-0 ma-0 bg-transparent rounded-xl overflow-hidden custom-stepper"
   >
     <Step
       v-for="(step, index) in steps"
@@ -35,3 +38,33 @@
     />
   </v-stepper-vertical>
 </template>
+
+<style scoped>
+  .custom-stepper :deep(.v-stepper-vertical-item) {
+    background: transparent !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item__content) {
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 12px;
+    margin: 8px 16px 16px 40px !important;
+    padding: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .custom-stepper :deep(.v-avatar) {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: white !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item--active .v-avatar) {
+    background: #3c9983 !important;
+    border-color: #3c9983;
+    color: #0a0f0e !important;
+  }
+
+  .custom-stepper :deep(.v-stepper-vertical-item__connector) {
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+</style>

From cc47600db65f0132cc77442a5c672032cd76f295 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 16 Feb 2026 16:55:28 +0100
Subject: [PATCH 02/11] Changes UI

---
 app/components/FileUploader.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index 15ccdbbe..b4fe2579 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -100,7 +100,7 @@
 
   <v-card-text v-if="internal_files.length" class="mt-6">
     <v-sheet class="d-flex align-center mb-4" color="transparent">
-      <v-icon icon="mdi-file-check" class="mr-3" color="success" size="24" />
+      <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>
@@ -126,7 +126,7 @@
         style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
-        <v-icon start size="18" color="success">mdi-file-outline</v-icon>
+        <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"

From 4fb033ff408c7224cff356fe3789b53cd4c954e8 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 16 Feb 2026 17:46:46 +0100
Subject: [PATCH 03/11] fix(UI): Refacto and new style

---
 app/components/DragAndDrop.vue                | 10 +--
 app/components/FileUploader.vue               |  2 +-
 app/components/GlassCard.vue                  | 41 ++++++++++
 app/components/HybridRenderingView.vue        |  1 -
 app/components/OptionCard.vue                 | 55 -------------
 app/components/Screenshot.vue                 | 82 +++++++++++--------
 app/components/Viewer/ContextMenuItem.vue     | 13 ++-
 .../EdgedCurve/SpecificEdgesOptions.vue       | 10 +--
 .../Viewer/Generic/Mesh/EdgesOptions.vue      | 10 +--
 .../Viewer/Generic/Mesh/PointsOptions.vue     | 10 +--
 .../Viewer/PointSet/SpecificPointsOptions.vue | 10 +--
 app/components/Viewer/Tree/ObjectTree.vue     |  1 +
 app/components/ZScaling.vue                   | 82 ++++++++++---------
 13 files changed, 153 insertions(+), 174 deletions(-)
 create mode 100644 app/components/GlassCard.vue
 delete mode 100644 app/components/OptionCard.vue

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index 66bc4fef..edea078f 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -31,16 +31,15 @@
 
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <v-card
+    <GlassCard
       v-bind="hoverProps"
-      class="text-center cursor-pointer glass-panel border-opacity-10 border-white"
+      class="text-center cursor-pointer overflow-hidden border-opacity-10 border-white"
       :class="{
         'elevation-4': isHovering || isDragging,
         'elevation-0': !(isHovering || isDragging),
       }"
       :style="{
         position: 'relative',
-        overflow: 'hidden',
         transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
         background:
           isHovering || isDragging
@@ -50,7 +49,8 @@
         pointerEvents: loading ? 'none' : 'auto',
         opacity: loading ? 0.6 : 1,
       }"
-      rounded="xl"
+      variant="panel"
+      padding="pa-0"
       @click="triggerFileDialog"
       @dragover.prevent="isDragging = true"
       @dragleave.prevent="isDragging = false"
@@ -95,7 +95,7 @@
         :accept="accept"
         @change="handleFileSelect"
       />
-    </v-card>
+    </GlassCard>
   </v-hover>
 </template>
 
diff --git a/app/components/FileUploader.vue b/app/components/FileUploader.vue
index b4fe2579..6b2a1a94 100644
--- a/app/components/FileUploader.vue
+++ b/app/components/FileUploader.vue
@@ -122,7 +122,7 @@
         size="default"
         color="white"
         variant="outlined"
-        class="font-weight-medium glass-panel border-opacity-10 px-4"
+        class="font-weight-medium glass-ui border-opacity-10 px-4"
         style="background: rgba(255, 255, 255, 0.05) !important"
         @click:close="removeFile(index)"
       >
diff --git a/app/components/GlassCard.vue b/app/components/GlassCard.vue
new file mode 100644
index 00000000..4c703470
--- /dev/null
+++ b/app/components/GlassCard.vue
@@ -0,0 +1,41 @@
+<script setup>
+  defineProps({
+    variant: {
+      type: String,
+      default: "panel",
+      validator: (v) => ["panel", "ui"].includes(v),
+    },
+    rounded: { type: String, default: "xl" },
+    padding: { type: String, default: "pa-6" },
+    theme: { type: String, default: null },
+  })
+</script>
+
+<template>
+  <v-card
+    v-bind="$attrs"
+    @mousedown.stop
+    @click.stop
+    @dblclick.stop
+    @wheel.stop
+    @contextmenu.stop
+    flat
+    :theme="theme || (variant === 'panel' ? 'dark' : undefined)"
+    :class="[
+      variant === 'panel' ? 'glass-panel' : 'glass-ui',
+      'border-thin',
+      `rounded-${rounded}`,
+      padding,
+    ]"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}" />
+    </template>
+  </v-card>
+</template>
+
+<style scoped>
+  .border-thin {
+    border-style: solid !important;
+  }
+</style>
diff --git a/app/components/HybridRenderingView.vue b/app/components/HybridRenderingView.vue
index e80b83db..defe868c 100644
--- a/app/components/HybridRenderingView.vue
+++ b/app/components/HybridRenderingView.vue
@@ -1,6 +1,5 @@
 <script setup>
   import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar"
-
   import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
   import { useViewerStore } from "@ogw_front/stores/viewer"
 
diff --git a/app/components/OptionCard.vue b/app/components/OptionCard.vue
deleted file mode 100644
index 9e488311..00000000
--- a/app/components/OptionCard.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup>
-  import { useTheme } from "vuetify"
-
-  const theme = useTheme()
-  const primaryColor = computed(() => theme.current.value.colors.primary)
-
-  defineProps({
-    title: { type: String, default: "" },
-    width: { type: [Number, String], default: 320 },
-    maxHeight: { type: [Number, String], default: 500 },
-  })
-</script>
-<template>
-  <v-card
-    @click.stop
-    :title="title"
-    class="option-card rounded-xl border-thin elevation-24"
-    :width="width"
-    :max-height="maxHeight"
-    :ripple="false"
-    theme="dark"
-  >
-    <v-card-text class="pa-5">
-      <slot />
-    </v-card-text>
-    <v-card-actions v-if="$slots.actions" class="justify-center pb-4">
-      <slot name="actions" />
-    </v-card-actions>
-  </v-card>
-</template>
-
-<style scoped>
-  .option-card {
-    background-color: rgba(30, 30, 30, 0.85) !important;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-color: rgba(255, 255, 255, 0.15) !important;
-  }
-
-  ::v-deep(.v-list-item:hover) {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
-  ::v-deep(.v-slider-track__fill),
-  ::v-deep(.v-selection-control--dirty .v-switch__track) {
-    background-color: v-bind(primaryColor) !important;
-  }
-
-  ::v-deep(.v-btn) {
-    border-radius: 8px;
-    text-transform: none;
-    font-weight: 500;
-    letter-spacing: normal;
-  }
-</style>
diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index 8fb71a8a..5e22144e 100644
--- a/app/components/Screenshot.vue
+++ b/app/components/Screenshot.vue
@@ -46,49 +46,59 @@
   })
 </script>
 <template>
-  <OptionCard
+  <GlassCard
     v-if="props.show_dialog"
+    @click.stop
     title="Take a screenshot"
     :width="props.width"
-    class="position-absolute"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-container>
-      <v-row>
-        <v-col cols="8" class="py-0">
-          <v-text-field v-model="filename" label="File name"></v-text-field>
-        </v-col>
-        <v-col cols="4" class="py-0">
-          <v-select
-            v-model="output_extension"
-            :items="output_extensions"
-            label="Extension"
-            required
-          />
-        </v-col>
-      </v-row>
+    <v-card-text class="pa-5">
+      <v-container>
+        <v-row>
+          <v-col cols="8" class="py-0">
+            <v-text-field v-model="filename" label="File name"></v-text-field>
+          </v-col>
+          <v-col cols="4" class="py-0">
+            <v-select
+              v-model="output_extension"
+              :items="output_extensions"
+              label="Extension"
+              required
+            />
+          </v-col>
+        </v-row>
 
-      <v-row>
-        <v-col cols="12" class="py-0">
-          <v-switch
-            v-model="include_background"
-            :disabled="output_extension !== 'png'"
-            label="Include background"
-            inset
-          ></v-switch>
-        </v-col>
-      </v-row>
-    </v-container>
+        <v-row>
+          <v-col cols="12" class="py-0">
+            <v-switch
+              v-model="include_background"
+              :disabled="output_extension !== 'png'"
+              label="Include background"
+              inset
+            ></v-switch>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
 
     <template #actions>
-      <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
-      <v-btn
-        variant="outlined"
-        :disabled="!filename || !output_extension"
-        color="white"
-        @click="takeScreenshot()"
-        >Screenshot</v-btn
-      >
+      <v-card-actions class="justify-center pb-4">
+        <v-btn variant="text" color="primary" @click="emit('close')"
+          >Close</v-btn
+        >
+        <v-btn
+          variant="outlined"
+          :disabled="!filename || !output_extension"
+          color="primary"
+          @click="takeScreenshot()"
+          >Screenshot</v-btn
+        >
+      </v-card-actions>
     </template>
-  </OptionCard>
+  </GlassCard>
 </template>
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index 3e81f217..6fd8e1b5 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -86,13 +86,20 @@
       color="transparent"
       @click.stop
     >
-      <OptionCard
+      <GlassCard
+        @click.stop
         :title="props.tooltip"
         width="320"
         :max-height="maxCardHeight"
+        :ripple="false"
+        variant="panel"
+        padding="pa-0"
+        class="elevation-24"
       >
-        <slot name="options" />
-      </OptionCard>
+        <v-card-text class="pa-5">
+          <slot name="options" />
+        </v-card-text>
+      </GlassCard>
     </v-sheet>
   </v-sheet>
 </template>
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index c82938b1..b60b8592 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -75,15 +75,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 02fe857e..e5dbc1a2 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -68,15 +68,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 7f7c2810..c414d728 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -61,15 +61,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index 4ab46a48..b1d81ad3 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -68,15 +68,7 @@
             <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
           </v-col>
           <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
+            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
           </v-col>
         </v-row>
         <v-row>
diff --git a/app/components/Viewer/Tree/ObjectTree.vue b/app/components/Viewer/Tree/ObjectTree.vue
index afe46fc1..5336077a 100644
--- a/app/components/Viewer/Tree/ObjectTree.vue
+++ b/app/components/Viewer/Tree/ObjectTree.vue
@@ -42,6 +42,7 @@
     class="treeview-container"
     :style="{ width: `${treeviewStore.panelWidth}px` }"
     @contextmenu.prevent
+    @mousedown.stop
   >
     <v-row
       class="resizable-panel"
diff --git a/app/components/ZScaling.vue b/app/components/ZScaling.vue
index c47eaaea..e2b8e5de 100644
--- a/app/components/ZScaling.vue
+++ b/app/components/ZScaling.vue
@@ -5,50 +5,58 @@
   })
 </script>
 <template>
-  <OptionCard
+  <GlassCard
+    @click.stop
     title="Z Scaling Control"
     :width="width"
-    class="position-absolute rounded-xl"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute rounded-xl elevation-24"
     style="z-index: 2; top: 90px; right: 55px"
   >
-    <v-container>
-      <v-row>
-        <v-col cols="12" class="py-2">
-          <v-slider
-            v-model="zScale"
-            :min="1"
-            :max="10"
-            :step="0.2"
-            label="Z Scale"
-            thumb-label
-            color="white"
-            track-color="white"
-          />
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col cols="12" class="py-2">
-          <v-text-field
-            v-model.number="zScale"
-            type="number"
-            label="Z Scale Value"
-            outlined
-            dense
-            hide-details
-            step="0.1"
-            :min="1"
-          />
-        </v-col>
-      </v-row>
-    </v-container>
+    <v-card-text class="pa-5">
+      <v-container>
+        <v-row>
+          <v-col cols="12" class="py-2">
+            <v-slider
+              v-model="zScale"
+              :min="1"
+              :max="10"
+              :step="0.2"
+              label="Z Scale"
+              thumb-label
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col cols="12" class="py-2">
+            <v-text-field
+              v-model.number="zScale"
+              type="number"
+              label="Z Scale Value"
+              outlined
+              dense
+              hide-details
+              step="0.1"
+              :min="1"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
 
     <template #actions>
-      <v-btn variant="text" color="white" @click="$emit('close')">Close</v-btn>
-      <v-btn variant="outlined" color="white" @click="$emit('close')"
-        >Apply</v-btn
-      >
+      <v-card-actions class="justify-center pb-4">
+        <v-btn variant="text" color="white" @click="$emit('close')"
+          >Close</v-btn
+        >
+        <v-btn variant="outlined" color="white" @click="$emit('close')"
+          >Apply</v-btn
+        >
+      </v-card-actions>
     </template>
-  </OptionCard>
+  </GlassCard>
 </template>
 
 <style scoped>

From a3560808919dbfac12f51bb1adf52664db3c2f44 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 17 Feb 2026 08:48:45 +0000
Subject: [PATCH 04/11] Apply prepare changes

---
 tests/integration/microservices/back/requirements.txt   | 1 -
 tests/integration/microservices/viewer/requirements.txt | 1 -
 2 files changed, 2 deletions(-)

diff --git a/tests/integration/microservices/back/requirements.txt b/tests/integration/microservices/back/requirements.txt
index c4caed69..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.1.3
diff --git a/tests/integration/microservices/viewer/requirements.txt b/tests/integration/microservices/viewer/requirements.txt
index e1403dba..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.15.2

From c2c942d2ade6971e4b6128aeac878c5814540aa3 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 17 Feb 2026 11:41:33 +0100
Subject: [PATCH 05/11] import

---
 app/components/DragAndDrop.vue            | 2 ++
 app/components/Screenshot.vue             | 1 +
 app/components/Viewer/ContextMenuItem.vue | 1 +
 app/components/ZScaling.vue               | 2 ++
 4 files changed, 6 insertions(+)

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index edea078f..0416df08 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -1,4 +1,6 @@
 <script setup>
+  import GlassCard from "~/components/GlassCard.vue"
+
   const props = defineProps({
     multiple: { type: Boolean, default: false },
     accept: { type: String, default: "" },
diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index 5e22144e..576e13db 100644
--- a/app/components/Screenshot.vue
+++ b/app/components/Screenshot.vue
@@ -1,5 +1,6 @@
 <script setup>
   import fileDownload from "js-file-download"
+  import GlassCard from "~/components/GlassCard.vue"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
   import { useViewerStore } from "@ogw_front/stores/viewer"
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index 6fd8e1b5..8163486c 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -1,4 +1,5 @@
 <script setup>
+  import GlassCard from "~/components/GlassCard.vue"
   import { useTheme } from "vuetify"
   import { useMenuStore } from "@ogw_front/stores/menu"
   import { useElementSize } from "@vueuse/core"
diff --git a/app/components/ZScaling.vue b/app/components/ZScaling.vue
index e2b8e5de..dd6096b4 100644
--- a/app/components/ZScaling.vue
+++ b/app/components/ZScaling.vue
@@ -1,4 +1,6 @@
 <script setup>
+  import GlassCard from "~/components/GlassCard.vue"
+
   const zScale = defineModel({ type: Number, default: 1 })
   const props = defineProps({
     width: { type: Number, default: 400 },

From c9f122eb3b172ccc23d57858f8787584fef75c1b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 18 Feb 2026 11:36:40 +0100
Subject: [PATCH 06/11] remove clickable card

---
 app/components/GlassCard.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/components/GlassCard.vue b/app/components/GlassCard.vue
index 4c703470..2c8eea53 100644
--- a/app/components/GlassCard.vue
+++ b/app/components/GlassCard.vue
@@ -1,4 +1,6 @@
 <script setup>
+  import { useAttrs, computed } from "vue"
+
   defineProps({
     variant: {
       type: String,
@@ -9,6 +11,9 @@
     padding: { type: String, default: "pa-6" },
     theme: { type: String, default: null },
   })
+
+  const attrs = useAttrs()
+  const isInteractive = computed(() => !!attrs.onClick)
 </script>
 
 <template>
@@ -20,12 +25,14 @@
     @wheel.stop
     @contextmenu.stop
     flat
+    :ripple="isInteractive"
     :theme="theme || (variant === 'panel' ? 'dark' : undefined)"
     :class="[
       variant === 'panel' ? 'glass-panel' : 'glass-ui',
       'border-thin',
       `rounded-${rounded}`,
       padding,
+      { 'cursor-default': !isInteractive },
     ]"
   >
     <template v-for="(_, name) in $slots" #[name]="slotProps">
@@ -38,4 +45,8 @@
   .border-thin {
     border-style: solid !important;
   }
+
+  .cursor-default {
+    cursor: default !important;
+  }
 </style>

From 0ea17721c64a5d6d852a48e892bac3836371225a Mon Sep 17 00:00:00 2001
From: Tao Schiro <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 19 Feb 2026 00:20:12 +0100
Subject: [PATCH 07/11] Update app/components/ZScaling.vue

Co-authored-by: Julien Champagnol <91873154+JulienChampagnol@users.noreply.github.com>
---
 app/components/ZScaling.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/ZScaling.vue b/app/components/ZScaling.vue
index dd6096b4..330572fd 100644
--- a/app/components/ZScaling.vue
+++ b/app/components/ZScaling.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import GlassCard from "~/components/GlassCard.vue"
+  import GlassCard from "@ogw_front/components/GlassCard"
 
   const zScale = defineModel({ type: Number, default: 1 })
   const props = defineProps({

From 34196e27ef93904eee871de1a380d45174215e44 Mon Sep 17 00:00:00 2001
From: Tao Schiro <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 19 Feb 2026 00:20:20 +0100
Subject: [PATCH 08/11] Update app/components/Screenshot.vue

Co-authored-by: Julien Champagnol <91873154+JulienChampagnol@users.noreply.github.com>
---
 app/components/Screenshot.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Screenshot.vue b/app/components/Screenshot.vue
index 576e13db..d6974e41 100644
--- a/app/components/Screenshot.vue
+++ b/app/components/Screenshot.vue
@@ -1,6 +1,6 @@
 <script setup>
   import fileDownload from "js-file-download"
-  import GlassCard from "~/components/GlassCard.vue"
+  import GlassCard from "@ogw_front/components/GlassCard"
   import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
   import { useViewerStore } from "@ogw_front/stores/viewer"

From b300677a2110e0a35e40c8ea6fdd6d2442205d3a Mon Sep 17 00:00:00 2001
From: Tao Schiro <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 19 Feb 2026 00:20:28 +0100
Subject: [PATCH 09/11] Update app/components/DragAndDrop.vue

Co-authored-by: Julien Champagnol <91873154+JulienChampagnol@users.noreply.github.com>
---
 app/components/DragAndDrop.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/DragAndDrop.vue b/app/components/DragAndDrop.vue
index 0416df08..b52a430c 100644
--- a/app/components/DragAndDrop.vue
+++ b/app/components/DragAndDrop.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import GlassCard from "~/components/GlassCard.vue"
+  import GlassCard from "@ogw_front/components/GlassCard"
 
   const props = defineProps({
     multiple: { type: Boolean, default: false },

From b94565c31dbc888429780d9c0bd8fd0feed1850c Mon Sep 17 00:00:00 2001
From: Tao Schiro <106495600+SpliiT@users.noreply.github.com>
Date: Thu, 19 Feb 2026 00:20:36 +0100
Subject: [PATCH 10/11] Update app/components/Viewer/ContextMenuItem.vue

Co-authored-by: Julien Champagnol <91873154+JulienChampagnol@users.noreply.github.com>
---
 app/components/Viewer/ContextMenuItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index 8163486c..bbec805b 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -1,5 +1,5 @@
 <script setup>
-  import GlassCard from "~/components/GlassCard.vue"
+  import GlassCard from "@ogw_front/components/GlassCard"
   import { useTheme } from "vuetify"
   import { useMenuStore } from "@ogw_front/stores/menu"
   import { useElementSize } from "@vueuse/core"

From 22016afb71f41b309f940fdeab1665ee3afb1dc7 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Thu, 19 Feb 2026 10:03:57 +0100
Subject: [PATCH 11/11] rm useless import

---
 app/components/GlassCard.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/components/GlassCard.vue b/app/components/GlassCard.vue
index 2c8eea53..ef76311c 100644
--- a/app/components/GlassCard.vue
+++ b/app/components/GlassCard.vue
@@ -1,6 +1,4 @@
 <script setup>
-  import { useAttrs, computed } from "vue"
-
   defineProps({
     variant: {
       type: String,