From 59a040e56ef5420903ae848e1e70f042a3583640 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 18 May 2026 17:23:00 +0200
Subject: [PATCH 01/24] feat(ContextMenu): New multiple context menu system

---
 app/components/Viewer/ContextMenu.vue     | 165 +++++++++++++++++-
 app/components/Viewer/ContextMenuItem.vue | 116 +++++++++++--
 app/components/Viewer/Ui.vue              | 193 +++++++++++++++++++++-
 app/composables/project_manager.js        | 160 +++++++++---------
 app/composables/use_adaptive_styles.js    |  28 +++-
 internal/stores/hybrid_viewer.js          |   6 +
 6 files changed, 567 insertions(+), 101 deletions(-)

diff --git a/app/components/Viewer/ContextMenu.vue b/app/components/Viewer/ContextMenu.vue
index 8fece88a9..36eabe4c7 100644
--- a/app/components/Viewer/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
 const RADIUS = 80;
 const MARGIN_OFFSET = 40;
@@ -73,11 +75,45 @@ watch(
 
 const menuItemCount = computed(() => menu_items.value.length);
 
+let dragMoved = false;
+const dragThreshold = 3;
+let dragStartClientX = 0;
+let dragStartClientY = 0;
+const showName = ref(false);
+
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const treeviewStore = useTreeviewStore();
+const isOverTreeview = computed(() => {
+  const hasAdditional = treeviewStore.opened_views.some(v => v.id !== "main");
+  const hasMain = treeviewStore.opened_views.some(v => v.id === "main");
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  const treeviewWidth = 10 + 48 + firstColWidth + secondColWidth + 20;
+  return menuX.value < treeviewWidth;
+});
+
+const activatorBtn = ref(undefined);
+const { adaptiveStyles } = useAdaptiveStyles(activatorBtn);
+
+const computedItemStyles = computed(() => {
+  if (isOverTreeview.value) {
+    return {
+      "--adaptive-blur": "15px",
+      "--adaptive-opacity": 0.85,
+      "--adaptive-brightness": 1.15,
+    };
+  }
+  return adaptiveStyles.value;
+});
+
 function startDrag(event) {
   isDragging.value = true;
+  dragMoved = false;
   dragStartX.value = event.clientX - menuX.value;
   dragStartY.value = event.clientY - menuY.value;
-  event.preventDefault();
+  dragStartClientX = event.clientX;
+  dragStartClientY = event.clientY;
 }
 
 function clampPosition(posX, posY) {
@@ -89,6 +125,14 @@ function clampPosition(posX, posY) {
 }
 
 function handleDrag(event) {
+  const deltaX = event.clientX - dragStartClientX;
+  const deltaY = event.clientY - dragStartClientY;
+  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+  if (distance > dragThreshold) {
+    dragMoved = true;
+  }
+
   const { x: clampedX, y: clampedY } = clampPosition(
     event.clientX - dragStartX.value,
     event.clientY - dragStartY.value,
@@ -104,6 +148,13 @@ function stopDrag(event) {
   menuStore.setMenuPosition(menuX.value, menuY.value);
 }
 
+function onCenterClick(event) {
+  event.stopPropagation();
+  if (!dragMoved) {
+    showName.value = !showName.value;
+  }
+}
+
 function getMenuStyle() {
   return {
     position: "fixed",
@@ -146,7 +197,10 @@ function getItemStyle(index) {
     transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
     transition: "opacity 0.2s ease, transform 0.2s ease",
     position: "absolute",
-    zIndex: menuStore.active_item_index === index ? Z_INDEX_ACTIVE_ITEM : Z_INDEX_BASE_ITEM,
+    zIndex:
+      menuStore.active_item_index === index
+        ? Z_INDEX_ACTIVE_ITEM
+        : Z_INDEX_BASE_ITEM,
   };
 }
 </script>
@@ -181,6 +235,69 @@ function getItemStyle(index) {
           :style="getItemStyle(index)"
           @mousedown.stop
         />
+
+        <!-- Active Object Central Indicator -->
+        <v-btn
+          ref="activatorBtn"
+          icon
+          variant="outlined"
+          class="central-selector-btn elevation-6"
+          style="width: 52px; height: 52px; z-index: 5"
+          :style="computedItemStyles"
+          @mousedown="startDrag"
+          @click.stop="onCenterClick"
+        >
+          <v-icon
+            icon="mdi-information-outline"
+            size="28"
+            color="primary"
+            style="pointer-events: none"
+          />
+        </v-btn>
+
+        <!-- Direct local name display (no teleportation, no lag!) -->
+        <transition name="fade-scale">
+          <div
+            v-if="showName"
+            class="object-name-popover"
+            @mousedown.stop
+            @click.stop
+          >
+            <GlassCard
+              variant="panel"
+              padding="pa-2 px-3"
+              rounded="lg"
+              class="elevation-12 text-center border-thin"
+              min-width="140"
+              max-width="250"
+            >
+              <div
+                class="text-caption font-weight-black text-uppercase text-secondary"
+                style="font-size: 0.68rem; line-height: 1.2"
+              >
+                {{ meta_data.geode_object_type }}
+              </div>
+              <div
+                class="text-subtitle-2 font-weight-bold text-truncate text-white"
+                style="line-height: 1.3"
+              >
+                {{ meta_data.name || "Unnamed Object" }}
+              </div>
+              <div
+                class="text-grey-lighten-1 mt-1"
+                style="
+                  font-family: monospace;
+                  font-size: 0.6rem;
+                  opacity: 0.7;
+                  word-break: break-all;
+                  line-height: 1.2;
+                "
+              >
+                ID: {{ meta_data.id }}
+              </div>
+            </GlassCard>
+          </div>
+        </transition>
       </div>
     </div>
   </v-menu>
@@ -200,6 +317,8 @@ function getItemStyle(index) {
   height: 100%;
   border-radius: 50%;
   cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .circular-menu-drag-handle:active {
@@ -221,4 +340,46 @@ function getItemStyle(index) {
   transform-origin: center;
   will-change: transform, opacity;
 }
+
+.central-selector-btn {
+  background: transparent !important;
+  border: 2px solid rgba(var(--v-theme-primary), 0.35) !important;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.central-selector-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.2s ease,
+    backdrop-filter 0.2s ease;
+}
+
+.central-selector-btn:hover {
+  transform: scale(1.08);
+  border-color: rgba(var(--v-theme-primary), 0.85) !important;
+}
+
+.central-selector-btn:hover::before {
+  background: rgba(255, 255, 255, calc(var(--adaptive-opacity, 0.15) + 0.15));
+}
+
+.object-name-popover {
+  position: absolute;
+  bottom: 110px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
 </style>
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index cc3e12197..c71e07ae6 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -2,7 +2,6 @@
 import GlassCard from "@ogw_front/components/GlassCard";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
-
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 500;
 const MARGIN = 60;
@@ -12,6 +11,9 @@ const OFFSET = 40;
 const menuStore = useMenuStore();
 const theme = useTheme();
 const primaryColor = computed(() => theme.current.value.colors.primary);
+
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
+
 const { index, itemProps, tooltip, btn_image } = defineProps({
   index: { type: Number, required: true },
   itemProps: { type: Object, required: true },
@@ -19,11 +21,51 @@ const { index, itemProps, tooltip, btn_image } = defineProps({
   btn_image: { type: String, required: true },
 });
 
+const buttonCoords = computed(() => {
+  const angle = (index / itemProps.totalItems) * 2 * Math.PI;
+  const dx = Math.cos(angle) * RADIUS;
+  const dy = Math.sin(angle) * RADIUS;
+  const size = 40;
+  return {
+    x: menuStore.containerLeft + menuStore.menuX + dx - size / 2,
+    y: menuStore.containerTop + menuStore.menuY + dy - size / 2,
+    width: size,
+    height: size,
+  };
+});
+
+const { adaptiveStyles } = useAdaptiveStyles(buttonCoords);
+
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const treeviewStore = useTreeviewStore();
+const isOverTreeview = computed(() => {
+  const hasAdditional = treeviewStore.opened_views.some(v => v.id !== "main");
+  const hasMain = treeviewStore.opened_views.some(v => v.id === "main");
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  const treeviewWidth = 10 + 48 + firstColWidth + secondColWidth + 20;
+  return buttonCoords.value.x < treeviewWidth;
+});
+
+const computedItemStyles = computed(() => {
+  if (isOverTreeview.value) {
+    return {
+      "--adaptive-blur": "15px",
+      "--adaptive-opacity": 0.85,
+      "--adaptive-brightness": 1.15,
+    };
+  }
+  return adaptiveStyles.value;
+});
+
 const is_active = computed(() => menuStore.active_item_index === index);
 const optionsRef = ref(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
-const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
+const maxCardHeight = computed(() =>
+  Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
+);
 
 const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
@@ -38,8 +80,12 @@ const optionsStyle = computed(() => {
 
   if (absoluteButtonY - height / 2 < margin) {
     offsetY = margin - (absoluteButtonY - height / 2);
-  } else if (absoluteButtonY + height / 2 > menuStore.containerHeight - margin) {
-    offsetY = menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
+  } else if (
+    absoluteButtonY + height / 2 >
+    menuStore.containerHeight - margin
+  ) {
+    offsetY =
+      menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
   }
   return { top: `calc(50% + ${offsetY}px)` };
 });
@@ -49,11 +95,14 @@ const optionsClass = computed(() => {
   const margin = MARGIN;
   const radius = RADIUS;
   if (loc === "right") {
-    return menuStore.menuX + radius + margin + CARD_WIDTH > menuStore.containerWidth
+    return menuStore.menuX + radius + margin + CARD_WIDTH >
+      menuStore.containerWidth
       ? "options-left"
       : "options-right";
   }
-  return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
+  return menuStore.menuX - radius - margin - CARD_WIDTH < 0
+    ? "options-right"
+    : "options-left";
 });
 
 function toggleOptions() {
@@ -62,17 +111,28 @@ function toggleOptions() {
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">
-    <v-tooltip :location="itemProps.tooltip_location" :origin="itemProps.tooltip_origin">
+    <v-tooltip
+      :location="itemProps.tooltip_location"
+      :origin="itemProps.tooltip_origin"
+    >
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
+          ref="itemBtnRef"
           icon
+          variant="outlined"
           :active="is_active"
           @click.stop="toggleOptions"
           v-bind="tooltipProps"
-          class="menu-btn bg-white border"
+          class="menu-btn"
           elevation="2"
+          :style="computedItemStyles"
         >
-          <v-img :src="btn_image" height="28" width="28" />
+          <v-img
+            :src="btn_image"
+            height="28"
+            width="28"
+            style="pointer-events: none; object-fit: contain"
+          />
         </v-btn>
       </template>
       <span>{{ tooltip }}</span>
@@ -98,7 +158,10 @@ function toggleOptions() {
         style="overflow: hidden; display: flex; flex-direction: column"
       >
         <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
+        <v-card-text
+          class="pa-5"
+          style="overflow-y: auto; flex: 1; min-height: 0"
+        >
           <slot name="options" />
         </v-card-text>
       </GlassCard>
@@ -120,13 +183,36 @@ function toggleOptions() {
 }
 
 .menu-btn {
+  background: transparent !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  position: relative;
+  overflow: hidden;
   transition: all 0.2s ease;
-  border-color: rgba(0, 0, 0, 0.1) !important;
+}
+
+.menu-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.2s ease,
+    backdrop-filter 0.2s ease;
 }
 
 .menu-btn:hover {
   transform: scale(1.1);
-  background-color: #e3f2fd !important;
+}
+
+.menu-btn:hover::before {
+  background: rgba(255, 255, 255, calc(var(--adaptive-opacity, 0.15) + 0.15));
 }
 
 .menu-btn.v-btn--active {
@@ -134,6 +220,12 @@ function toggleOptions() {
   color: white !important;
 }
 
+.menu-btn.v-btn--active::before {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
 .menu-btn.v-btn--active ::v-deep(.v-img__img) {
   filter: invert(100%);
 }
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index c7a49a120..b433a7ca9 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,10 +1,12 @@
 <script setup>
+import { ref, getCurrentInstance } from "vue";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const { displayMenu, containerWidth, containerHeight } = defineProps({
@@ -20,23 +22,131 @@ const viewerStore = useViewerStore();
 const menuStore = useMenuStore();
 const dataItems = dataStore.refAllItems();
 
+const displayIntermediate = ref(false);
+const intermediateItems = ref([]);
+const intermediateMenuX = ref(0);
+const intermediateMenuY = ref(0);
+let resolveIntermediate = undefined;
+
+function getIntermediateMenuStyle() {
+  return {
+    position: "fixed",
+    left: `${intermediateMenuX.value}px`,
+    top: `${intermediateMenuY.value}px`,
+  };
+}
+
+function selectIntermediateItem(item) {
+  if (resolveIntermediate) {
+    resolveIntermediate(item);
+    resolveIntermediate = undefined;
+  }
+}
+
+function handleIntermediateMenuUpdate(val) {
+  if (!val && resolveIntermediate) {
+    resolveIntermediate(undefined);
+    resolveIntermediate = undefined;
+  }
+}
+
 async function get_viewer_id(x, y) {
   const activeIds = new Set(dataItems.value.map((item) => item.id));
-  const ids = Object.keys(dataStyleStore.styles).filter((styleId) => activeIds.has(styleId));
+  const ids = Object.keys(dataStyleStore.styles).filter((styleId) =>
+    activeIds.has(styleId),
+  );
 
   let result = { id: undefined, viewer_id: undefined };
+  let pickedResponse = undefined;
+
   await viewerStore.request(
     viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
     { x, y, ids },
     {
       response_function: (response) => {
-        const { array_ids, viewer_id } = response;
-        const [first_id] = array_ids;
-        result = { id: first_id, viewer_id };
+        pickedResponse = response;
       },
     },
   );
-  return result;
+
+  if (
+    !pickedResponse ||
+    !pickedResponse.array_ids ||
+    pickedResponse.array_ids.length === 0
+  ) {
+    return result;
+  }
+
+  const { array_ids, viewer_id, picked_data } = pickedResponse;
+
+  const pickedList = [];
+  if (picked_data && picked_data.length > 0) {
+    pickedList.push(...picked_data);
+  } else {
+    for (const pickId of array_ids) {
+      pickedList.push({ id: pickId, viewer_id });
+    }
+  }
+
+  if (pickedList.length <= 1) {
+    result = { id: pickedList[0]?.id, viewer_id: pickedList[0]?.viewer_id };
+    return result;
+  }
+
+  const proposedItems = [];
+  for (const pick of pickedList) {
+    try {
+      const item = await dataStore.item(pick.id);
+      let displayName = item.name || pick.id;
+      if (item.viewer_type === "model" && pick.viewer_id !== undefined) {
+        const component = await dataStore.getComponentByViewerId(pick.id, pick.viewer_id);
+        if (component && component.name) {
+          displayName = `${displayName} - ${component.name}`;
+        }
+      }
+      proposedItems.push({
+        id: pick.id,
+        viewer_id: pick.viewer_id,
+        name: displayName,
+        viewer_type: item.viewer_type,
+        geode_object_type: item.geode_object_type,
+      });
+    } catch (e) {
+      proposedItems.push({
+        id: pick.id,
+        viewer_id: pick.viewer_id,
+        name: pick.id,
+        viewer_type: undefined,
+        geode_object_type: undefined,
+      });
+    }
+  }
+
+  intermediateItems.value = proposedItems;
+
+  const yUI = containerHeight - y;
+  const instance = getCurrentInstance();
+  const containerRect = instance?.proxy?.$el
+    ?.closest?.('[data-testid="hybridViewer"]')
+    ?.getBoundingClientRect() ||
+    document
+      .querySelector('[data-testid="hybridViewer"]')
+      ?.getBoundingClientRect() || { left: 0, top: 0 };
+
+  intermediateMenuX.value = containerRect.left + x;
+  intermediateMenuY.value = containerRect.top + yUI;
+  displayIntermediate.value = true;
+
+  return new Promise((resolve) => {
+    resolveIntermediate = (chosenResult) => {
+      displayIntermediate.value = false;
+      resolve(
+        chosenResult
+          ? { id: chosenResult.id, viewer_id: chosenResult.viewer_id }
+          : { id: undefined, viewer_id: undefined },
+      );
+    };
+  });
 }
 
 defineExpose({ get_viewer_id });
@@ -56,6 +166,68 @@ defineExpose({ get_viewer_id });
     :container-height="containerHeight"
   />
 
+  <!-- Premium Glassmorphic Intermediate Selection Pre-Menu -->
+  <v-menu
+    :model-value="displayIntermediate"
+    :close-on-content-click="true"
+    :style="getIntermediateMenuStyle()"
+    :overlay="false"
+    @update:model-value="handleIntermediateMenuUpdate"
+  >
+    <GlassCard
+      variant="panel"
+      padding="pa-0"
+      rounded="lg"
+      class="elevation-12"
+      min-width="260"
+      max-width="340"
+    >
+      <v-card-title class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis">
+        <v-icon icon="mdi-layers-triple" size="small" class="mr-2" color="secondary" />
+        Overlapping objects
+      </v-card-title>
+      
+      <v-divider />
+      
+      <v-list class="py-1 bg-transparent" density="compact">
+        <v-list-item
+          v-for="item in intermediateItems"
+          :key="`${item.id}-${item.viewer_id}`"
+          class="intermediate-picker-item px-3 py-2"
+          @click="selectIntermediateItem(item)"
+        >
+          <template #prepend>
+             <v-avatar
+              v-if="geode_objects[item.geode_object_type]?.image"
+              size="24"
+              rounded="0"
+              class="mr-3"
+            >
+              <v-img
+                :src="geode_objects[item.geode_object_type].image"
+                style="object-fit: contain;"
+              />
+            </v-avatar>
+            <v-icon
+              v-else
+              icon="mdi-cube-outline"
+              size="24"
+              color="secondary"
+              class="mr-3"
+            />
+          </template>
+          
+          <v-list-item-title class="font-weight-medium text-body-2 text-truncate">
+            {{ item.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle class="text-caption text-truncate text-medium-emphasis">
+            {{ item.geode_object_type }}
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </GlassCard>
+  </v-menu>
+
   <v-fade-transition>
     <div
       v-if="viewerStore.picking_mode"
@@ -103,4 +275,15 @@ defineExpose({ get_viewer_id });
 .pick-pulse {
   animation: pulse-ring 1.5s ease-out infinite;
 }
+
+.intermediate-picker-item {
+  transition: all 0.2s ease;
+  border-radius: 8px !important;
+  margin: 2px 6px;
+}
+
+.intermediate-picker-item:hover {
+  background: rgba(var(--v-theme-secondary), 0.1) !important;
+  transform: translateX(4px);
+}
 </style>
diff --git a/app/composables/project_manager.js b/app/composables/project_manager.js
index 28765ca1a..69f79c434 100644
--- a/app/composables/project_manager.js
+++ b/app/composables/project_manager.js
@@ -12,87 +12,89 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-async function exportProject() {
-  console.log("[export triggered]");
-  const appStore = useAppStore();
-  const geodeStore = useGeodeStore();
-  const snapshot = await appStore.exportStores();
-  const schema = back_schemas.opengeodeweb_back.export_project;
-  const defaultName = "project.vease";
-
-  const result = await $fetch(schema.$id, {
-    baseURL: geodeStore.base_url,
-    method: schema.methods.find((method) => method !== "OPTIONS"),
-    body: { snapshot, filename: defaultName },
-  });
-  fileDownload(result, defaultName);
-  return { result };
-}
-
-async function importProject(project) {
-  const geodeStore = useGeodeStore();
-  const dataStyleStore = useDataStyleStore();
-  const viewerStore = useViewerStore();
-  const dataStore = useDataStore();
-  const treeviewStore = useTreeviewStore();
-  const hybridViewerStore = useHybridViewerStore();
-
-  await viewerStore.ws_connect();
-
-  const { client } = viewerStore;
-  if (client && client.getConnection && client.getConnection().getSession) {
-    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
-  }
-
-  await viewerStore.request(
-    viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
-    {},
-    undefined,
-  );
-
-  treeviewStore.clear();
-  dataStore.clear();
-  hybridViewerStore.clear();
-
-  const schemaImport = back_schemas.opengeodeweb_back.import_project;
-  const form = new FormData();
-  const originalFileName = project && project.name ? project.name : "project.vease";
-  if (!originalFileName.toLowerCase().endsWith(".vease")) {
-    throw new Error("Uploaded file must be a .vease");
-  }
-  form.append("file", project, originalFileName);
-
-  const result = await $fetch(schemaImport.$id, {
-    baseURL: geodeStore.base_url,
-    method: "POST",
-    body: form,
-  });
-  const snapshot = result && result.snapshot ? result.snapshot : {};
-
-  treeviewStore.isImporting = true;
-
-  const { client: client2 } = viewerStore;
-  if (client2 && client2.getConnection && client2.getConnection().getSession) {
-    await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
+export function useProjectManager() {
+  async function exportProject() {
+    console.log("[export triggered]");
+    const appStore = useAppStore();
+    const geodeStore = useGeodeStore();
+    const snapshot = await appStore.exportStores();
+    const schema = back_schemas.opengeodeweb_back.export_project;
+    const defaultName = "project.vease";
+
+    const result = await $fetch(schema.$id, {
+      baseURL: geodeStore.base_url,
+      method: schema.methods.find((method) => method !== "OPTIONS"),
+      body: { snapshot, filename: defaultName },
+    });
+    fileDownload(result, defaultName);
+    return { result };
   }
 
-  await treeviewStore.importStores(snapshot.treeview || {});
-  await hybridViewerStore.initHybridViewer();
-  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-
-  const items = snapshot?.data?.items || [];
-
-  await importWorkflowFromSnapshot(items);
-  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-  {
-    await dataStyleStore.importStores(snapshot.dataStyle || {});
-  }
-  {
-    await dataStyleStore.applyAllStylesFromState();
+  async function importProjectFile(file) {
+    const geodeStore = useGeodeStore();
+    const dataStyleStore = useDataStyleStore();
+    const viewerStore = useViewerStore();
+    const dataStore = useDataStore();
+    const treeviewStore = useTreeviewStore();
+    const hybridViewerStore = useHybridViewerStore();
+
+    await viewerStore.ws_connect();
+
+    const { client } = viewerStore;
+    if (client && client.getConnection && client.getConnection().getSession) {
+      await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
+    }
+
+    await viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
+      {},
+      undefined,
+    );
+
+    treeviewStore.clear();
+    dataStore.clear();
+    hybridViewerStore.clear();
+
+    const schemaImport = back_schemas.opengeodeweb_back.import_project;
+    const form = new FormData();
+    const originalFileName = file && file.name ? file.name : "project.vease";
+    if (!originalFileName.toLowerCase().endsWith(".vease")) {
+      throw new Error("Uploaded file must be a .vease");
+    }
+    form.append("file", file, originalFileName);
+
+    const result = await $fetch(schemaImport.$id, {
+      baseURL: geodeStore.base_url,
+      method: "POST",
+      body: form,
+    });
+    const snapshot = result && result.snapshot ? result.snapshot : {};
+
+    treeviewStore.isImporting = true;
+
+    const { client: client2 } = viewerStore;
+    if (client2 && client2.getConnection && client2.getConnection().getSession) {
+      await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
+    }
+
+    await treeviewStore.importStores(snapshot.treeview || {});
+    await hybridViewerStore.initHybridViewer();
+    await hybridViewerStore.importStores(snapshot.hybridViewer || {});
+
+    const items = snapshot?.data?.items || [];
+
+    await importWorkflowFromSnapshot(items);
+    await hybridViewerStore.importStores(snapshot.hybridViewer || {});
+    {
+      await dataStyleStore.importStores(snapshot.dataStyle || {});
+    }
+    {
+      await dataStyleStore.applyAllStylesFromState();
+    }
+
+    treeviewStore.finalizeImportSelection();
+    treeviewStore.isImporting = false;
   }
 
-  treeviewStore.finalizeImportSelection();
-  treeviewStore.isImporting = false;
+  return { exportProject, importProjectFile };
 }
-
-export { exportProject, importProject };
diff --git a/app/composables/use_adaptive_styles.js b/app/composables/use_adaptive_styles.js
index fd4cb4b23..3533aa14e 100644
--- a/app/composables/use_adaptive_styles.js
+++ b/app/composables/use_adaptive_styles.js
@@ -9,15 +9,37 @@ const MIN_BLUR = 8;
 const MAX_BLUR = 25;
 
 const MIN_OPACITY = 0;
-const MAX_OPACITY = 0.5;
+const MAX_OPACITY = 0.85;
 
 const MIN_BOOST = 1;
 const MAX_BOOST = 1.2;
 const ADAPTIVE_REFRESH_RATE = 150;
 
-export function useAdaptiveStyles(targetRef) {
+export function useAdaptiveStyles(target) {
   const hybridViewerStore = useHybridViewerStore();
-  const { x, y, width, height } = useElementBounding(targetRef);
+  
+  let x, y, width, height;
+  if (target && (target.value !== undefined || typeof target === "function" || target.x !== undefined)) {
+    const unwrapped = computed(() => {
+      const val = typeof target === "function" ? target() : (target.value !== undefined ? target.value : target);
+      return {
+        x: typeof val?.x === "object" && val.x !== null && val.x.value !== undefined ? val.x.value : (val?.x ?? 0),
+        y: typeof val?.y === "object" && val.y !== null && val.y.value !== undefined ? val.y.value : (val?.y ?? 0),
+        width: typeof val?.width === "object" && val.width !== null && val.width.value !== undefined ? val.width.value : (val?.width ?? 0),
+        height: typeof val?.height === "object" && val.height !== null && val.height.value !== undefined ? val.height.value : (val?.height ?? 0),
+      };
+    });
+    x = computed(() => unwrapped.value.x);
+    y = computed(() => unwrapped.value.y);
+    width = computed(() => unwrapped.value.width);
+    height = computed(() => unwrapped.value.height);
+  } else {
+    const bounding = useElementBounding(target);
+    x = bounding.x;
+    y = bounding.y;
+    width = bounding.width;
+    height = bounding.height;
+  }
   const brightness = ref(LUMINANCE_THRESHOLD);
 
   const updateBrightness = useThrottleFn(() => {
diff --git a/internal/stores/hybrid_viewer.js b/internal/stores/hybrid_viewer.js
index ff539e708..f83ce53bc 100644
--- a/internal/stores/hybrid_viewer.js
+++ b/internal/stores/hybrid_viewer.js
@@ -41,7 +41,13 @@ function computeAverageBrightness(rect, options) {
   if (!canvas) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
+  if (rect.width <= 0 || rect.height <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
   const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
+  if (relW <= 0 || relH <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
   try {

From f65c0dfa1632159f832d823081b076b1f7cdef24 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 18 May 2026 17:50:10 +0200
Subject: [PATCH 02/24] Adaptative background

---
 app/components/Viewer/ContextMenu.vue     | 86 ++++++++++++++++++++---
 app/components/Viewer/ContextMenuItem.vue |  2 +-
 app/components/Viewer/Ui.vue              | 56 ++++++++++-----
 app/composables/use_adaptive_styles.js    | 19 +++--
 4 files changed, 127 insertions(+), 36 deletions(-)

diff --git a/app/components/Viewer/ContextMenu.vue b/app/components/Viewer/ContextMenu.vue
index 36eabe4c7..cc8b02696 100644
--- a/app/components/Viewer/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu.vue
@@ -27,6 +27,21 @@ const { id, x, y, containerWidth, containerHeight } = defineProps({
 
 const meta_data = computed(() => menuStore.current_meta_data || {});
 
+function cleanItemName(fullName, id) {
+  if (!fullName) return "";
+  if (id && fullName.endsWith(` - ${id}`)) {
+    return fullName.substring(0, fullName.length - ` - ${id}`.length);
+  }
+  const uuidRegex = / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return fullName.replace(uuidRegex, "");
+}
+
+const cleanName = computed(() => {
+  const meta = menuStore.current_meta_data;
+  if (!meta) return "Unnamed Object";
+  return cleanItemName(meta.name, meta.id) || "Unnamed Object";
+});
+
 const show_menu = ref(true);
 const isDragging = ref(false);
 const dragStartX = ref(0);
@@ -81,6 +96,24 @@ let dragStartClientX = 0;
 let dragStartClientY = 0;
 const showName = ref(false);
 
+const copied = ref(false);
+function copyId(id) {
+  if (!id) return;
+  navigator.clipboard.writeText(id).then(() => {
+    copied.value = true;
+    setTimeout(() => {
+      copied.value = false;
+    }, 1500);
+  });
+}
+
+const formattedId = computed(() => {
+  const id = meta_data.value?.id;
+  if (!id) return "";
+  if (id.length <= 15) return id;
+  return `${id.substring(0, 8)}...${id.substring(id.length - 7)}`;
+});
+
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const treeviewStore = useTreeviewStore();
@@ -94,7 +127,7 @@ const isOverTreeview = computed(() => {
 });
 
 const activatorBtn = ref(undefined);
-const { adaptiveStyles } = useAdaptiveStyles(activatorBtn);
+const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, { maxOpacity: 0.85 });
 
 const computedItemStyles = computed(() => {
   if (isOverTreeview.value) {
@@ -281,19 +314,22 @@ function getItemStyle(index) {
                 class="text-subtitle-2 font-weight-bold text-truncate text-white"
                 style="line-height: 1.3"
               >
-                {{ meta_data.name || "Unnamed Object" }}
+                {{ cleanName }}
               </div>
               <div
-                class="text-grey-lighten-1 mt-1"
-                style="
-                  font-family: monospace;
-                  font-size: 0.6rem;
-                  opacity: 0.7;
-                  word-break: break-all;
-                  line-height: 1.2;
-                "
+                v-if="meta_data.id"
+                class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
+                @click.stop="copyId(meta_data.id)"
               >
-                ID: {{ meta_data.id }}
+                <span class="id-text">
+                  {{ copied ? "COPIED!" : formattedId }}
+                </span>
+                <v-icon
+                  :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+                  size="10"
+                  :color="copied ? 'success' : 'white'"
+                  class="ml-1"
+                />
               </div>
             </GlassCard>
           </div>
@@ -382,4 +418,32 @@ function getItemStyle(index) {
   transform: translateX(-50%);
   z-index: 10;
 }
+
+.id-badge-container {
+  font-family: monospace;
+  font-size: 0.6rem;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  opacity: 0.8;
+}
+
+.id-badge-container:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.35);
+  opacity: 1;
+  transform: scale(1.03);
+}
+
+.id-badge-container:active {
+  transform: scale(0.97);
+}
+
+.id-text {
+  letter-spacing: 0.5px;
+  color: rgba(255, 255, 255, 0.85);
+}
 </style>
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index c71e07ae6..de4278259 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -34,7 +34,7 @@ const buttonCoords = computed(() => {
   };
 });
 
-const { adaptiveStyles } = useAdaptiveStyles(buttonCoords);
+const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, { maxOpacity: 0.85 });
 
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index b433a7ca9..326d1266b 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -49,6 +49,20 @@ function handleIntermediateMenuUpdate(val) {
     resolveIntermediate = undefined;
   }
 }
+function cleanItemName(fullName, id) {
+  if (!fullName) return "";
+  if (id && fullName.endsWith(` - ${id}`)) {
+    return fullName.substring(0, fullName.length - ` - ${id}`.length);
+  }
+  const uuidRegex = / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  return fullName.replace(uuidRegex, "");
+}
+
+function formatListId(id) {
+  if (!id) return "";
+  if (id.length <= 16) return id;
+  return `${id.substring(0, 8)}...${id.substring(id.length - 8)}`;
+}
 
 async function get_viewer_id(x, y) {
   const activeIds = new Set(dataItems.value.map((item) => item.id));
@@ -97,17 +111,17 @@ async function get_viewer_id(x, y) {
   for (const pick of pickedList) {
     try {
       const item = await dataStore.item(pick.id);
-      let displayName = item.name || pick.id;
+      let cleanName = cleanItemName(item.name, pick.id) || "Unnamed Object";
       if (item.viewer_type === "model" && pick.viewer_id !== undefined) {
         const component = await dataStore.getComponentByViewerId(pick.id, pick.viewer_id);
         if (component && component.name) {
-          displayName = `${displayName} - ${component.name}`;
+          cleanName = `${cleanName} - ${component.name}`;
         }
       }
       proposedItems.push({
         id: pick.id,
         viewer_id: pick.viewer_id,
-        name: displayName,
+        name: cleanName,
         viewer_type: item.viewer_type,
         geode_object_type: item.geode_object_type,
       });
@@ -115,7 +129,7 @@ async function get_viewer_id(x, y) {
       proposedItems.push({
         id: pick.id,
         viewer_id: pick.viewer_id,
-        name: pick.id,
+        name: "Unnamed Object",
         viewer_type: undefined,
         geode_object_type: undefined,
       });
@@ -133,8 +147,13 @@ async function get_viewer_id(x, y) {
       .querySelector('[data-testid="hybridViewer"]')
       ?.getBoundingClientRect() || { left: 0, top: 0 };
 
-  intermediateMenuX.value = containerRect.left + x;
-  intermediateMenuY.value = containerRect.top + yUI;
+  const MENU_WIDTH = 340;
+  const MENU_HEIGHT = 280;
+  const clampedX = Math.min(Math.max(x, 10), containerWidth - MENU_WIDTH - 10);
+  const clampedY = Math.min(Math.max(yUI, 10), containerHeight - MENU_HEIGHT - 10);
+
+  intermediateMenuX.value = containerRect.left + clampedX;
+  intermediateMenuY.value = containerRect.top + clampedY;
   displayIntermediate.value = true;
 
   return new Promise((resolve) => {
@@ -197,31 +216,30 @@ defineExpose({ get_viewer_id });
           @click="selectIntermediateItem(item)"
         >
           <template #prepend>
-             <v-avatar
+            <v-img
               v-if="geode_objects[item.geode_object_type]?.image"
-              size="24"
-              rounded="0"
+              :src="geode_objects[item.geode_object_type].image"
+              height="24"
+              width="24"
+              max-width="24"
               class="mr-3"
-            >
-              <v-img
-                :src="geode_objects[item.geode_object_type].image"
-                style="object-fit: contain;"
-              />
-            </v-avatar>
+              style="object-fit: contain; filter: brightness(0) invert(1);"
+            />
             <v-icon
               v-else
               icon="mdi-cube-outline"
               size="24"
-              color="secondary"
+              color="white"
               class="mr-3"
             />
           </template>
           
-          <v-list-item-title class="font-weight-medium text-body-2 text-truncate">
+          <v-list-item-title class="font-weight-bold text-body-2 text-truncate text-white">
             {{ item.name }}
           </v-list-item-title>
-          <v-list-item-subtitle class="text-caption text-truncate text-medium-emphasis">
-            {{ item.geode_object_type }}
+          <v-list-item-subtitle class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center">
+            <span class="font-weight-medium mr-1">{{ item.geode_object_type }}</span>
+            <span style="font-family: monospace; opacity: 0.65; font-size: 0.72rem;">&middot; {{ formatListId(item.id) }}</span>
           </v-list-item-subtitle>
         </v-list-item>
       </v-list>
diff --git a/app/composables/use_adaptive_styles.js b/app/composables/use_adaptive_styles.js
index 3533aa14e..1945ac86b 100644
--- a/app/composables/use_adaptive_styles.js
+++ b/app/composables/use_adaptive_styles.js
@@ -9,17 +9,25 @@ const MIN_BLUR = 8;
 const MAX_BLUR = 25;
 
 const MIN_OPACITY = 0;
-const MAX_OPACITY = 0.85;
+const MAX_OPACITY = 0.5;
 
 const MIN_BOOST = 1;
 const MAX_BOOST = 1.2;
 const ADAPTIVE_REFRESH_RATE = 150;
 
-export function useAdaptiveStyles(target) {
+export function useAdaptiveStyles(target, options = {}) {
   const hybridViewerStore = useHybridViewerStore();
-  
+
+  const isCoordinates = 
+    target && 
+    (
+      typeof target === "function" || 
+      (target.value !== undefined && target.value !== null && target.value.x !== undefined) || 
+      (target.x !== undefined && target.value === undefined)
+    );
+
   let x, y, width, height;
-  if (target && (target.value !== undefined || typeof target === "function" || target.x !== undefined)) {
+  if (isCoordinates) {
     const unwrapped = computed(() => {
       const val = typeof target === "function" ? target() : (target.value !== undefined ? target.value : target);
       return {
@@ -60,7 +68,8 @@ export function useAdaptiveStyles(target) {
     const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
 
     const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
-    const opacity = MIN_OPACITY + darkFactor * (MAX_OPACITY - MIN_OPACITY);
+    const maxOpacity = options.maxOpacity ?? MAX_OPACITY;
+    const opacity = MIN_OPACITY + darkFactor * (maxOpacity - MIN_OPACITY);
     const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
 
     return {

From c346207c6035ea326fff8f6856f0d071cb9b79ff Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 18 May 2026 17:58:38 +0200
Subject: [PATCH 03/24] test adapt

---
 tests/unit/composables/project_manager.nuxt.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/unit/composables/project_manager.nuxt.test.js b/tests/unit/composables/project_manager.nuxt.test.js
index 7b47c0a46..b65b39913 100644
--- a/tests/unit/composables/project_manager.nuxt.test.js
+++ b/tests/unit/composables/project_manager.nuxt.test.js
@@ -4,8 +4,8 @@
 // Third party imports
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
-// Local imports
-import { exportProject, importProject } from "@ogw_front/composables/project_manager";
+import { useProjectManager } from "@ogw_front/composables/project_manager";
+const { exportProject, importProjectFile: importProject } = useProjectManager();
 import { appMode } from "@ogw_front/utils/local/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";
 

From 443dee06267472cfd8b28051025c18bae3e25e76 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 10:19:25 +0200
Subject: [PATCH 04/24] card order labels

---
 app/components/Viewer/ContextMenu.vue         | 110 ++++++++++-----
 app/components/Viewer/ContextMenuItem.vue     |  22 +--
 app/components/Viewer/Ui.vue                  | 130 +++++++++++-------
 app/composables/use_adaptive_styles.js        |  57 +++++---
 .../composables/project_manager.nuxt.test.js  |   4 +-
 5 files changed, 209 insertions(+), 114 deletions(-)

diff --git a/app/components/Viewer/ContextMenu.vue b/app/components/Viewer/ContextMenu.vue
index cc8b02696..2ef25596b 100644
--- a/app/components/Viewer/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu.vue
@@ -1,8 +1,9 @@
 <script setup>
-import { useEventListener } from "@vueuse/core";
-import { useMenuStore } from "@ogw_front/stores/menu";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
+import { useEventListener } from "@vueuse/core";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const RADIUS = 80;
 const MARGIN_OFFSET = 40;
@@ -15,9 +16,27 @@ const ANGLE_225 = 225;
 const ANGLE_315 = 315;
 const CLOSE_DELAY = 100;
 
+const COPIED_TIMEOUT = 1500;
+const MAX_SHORT_ID_LENGTH = 15;
+const ID_SLICE_START = 8;
+const ID_SLICE_END_OFFSET = 7;
+const TREEVIEW_MARGIN_LEFT = 10;
+const TREEVIEW_ICON_WIDTH = 48;
+const TREEVIEW_MARGIN_RIGHT = 20;
+const ADAPTIVE_BLUR_VAL = "15px";
+const ADAPTIVE_OPACITY_VAL = 0.85;
+const ADAPTIVE_BRIGHTNESS_VAL = 1.15;
+const DRAG_THRESHOLD_VAL = 3;
+
 const menuStore = useMenuStore();
 
-const { id, x, y, containerWidth, containerHeight } = defineProps({
+const {
+  id: propId,
+  x,
+  y,
+  containerWidth,
+  containerHeight,
+} = defineProps({
   id: { type: String, required: true },
   x: { type: Number, required: true },
   y: { type: Number, required: true },
@@ -27,18 +46,23 @@ const { id, x, y, containerWidth, containerHeight } = defineProps({
 
 const meta_data = computed(() => menuStore.current_meta_data || {});
 
-function cleanItemName(fullName, id) {
-  if (!fullName) return "";
-  if (id && fullName.endsWith(` - ${id}`)) {
-    return fullName.substring(0, fullName.length - ` - ${id}`.length);
+function cleanItemName(fullName, itemId) {
+  if (!fullName) {
+    return "";
   }
-  const uuidRegex = / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  if (itemId && fullName.endsWith(` - ${itemId}`)) {
+    return fullName.slice(0, fullName.length - ` - ${itemId}`.length);
+  }
+  const uuidRegex =
+    / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/iu;
   return fullName.replace(uuidRegex, "");
 }
 
 const cleanName = computed(() => {
   const meta = menuStore.current_meta_data;
-  if (!meta) return "Unnamed Object";
+  if (!meta) {
+    return "Unnamed Object";
+  }
   return cleanItemName(meta.name, meta.id) || "Unnamed Object";
 });
 
@@ -91,50 +115,66 @@ watch(
 const menuItemCount = computed(() => menu_items.value.length);
 
 let dragMoved = false;
-const dragThreshold = 3;
+const dragThreshold = DRAG_THRESHOLD_VAL;
 let dragStartClientX = 0;
 let dragStartClientY = 0;
 const showName = ref(false);
 
 const copied = ref(false);
-function copyId(id) {
-  if (!id) return;
-  navigator.clipboard.writeText(id).then(() => {
+async function copyId(targetId) {
+  if (!targetId) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(targetId);
     copied.value = true;
     setTimeout(() => {
       copied.value = false;
-    }, 1500);
-  });
+    }, COPIED_TIMEOUT);
+  } catch (error) {
+    console.error("Failed to copy ID:", error);
+  }
 }
 
 const formattedId = computed(() => {
-  const id = meta_data.value?.id;
-  if (!id) return "";
-  if (id.length <= 15) return id;
-  return `${id.substring(0, 8)}...${id.substring(id.length - 7)}`;
+  const metaId = meta_data.value?.id;
+  if (!metaId) {
+    return "";
+  }
+  if (metaId.length <= MAX_SHORT_ID_LENGTH) {
+    return metaId;
+  }
+  return `${metaId.slice(0, ID_SLICE_START)}...${metaId.slice(metaId.length - ID_SLICE_END_OFFSET)}`;
 });
 
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
 const treeviewStore = useTreeviewStore();
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(v => v.id !== "main");
-  const hasMain = treeviewStore.opened_views.some(v => v.id === "main");
+  const hasAdditional = treeviewStore.opened_views.some(
+    (view) => view.id !== "main",
+  );
+  const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
-  const treeviewWidth = 10 + 48 + firstColWidth + secondColWidth + 20;
+  const treeviewWidth =
+    TREEVIEW_MARGIN_LEFT +
+    TREEVIEW_ICON_WIDTH +
+    firstColWidth +
+    secondColWidth +
+    TREEVIEW_MARGIN_RIGHT;
   return menuX.value < treeviewWidth;
 });
 
 const activatorBtn = ref(undefined);
-const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, { maxOpacity: 0.85 });
+const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
+  maxOpacity: 0.85,
+});
 
 const computedItemStyles = computed(() => {
   if (isOverTreeview.value) {
     return {
-      "--adaptive-blur": "15px",
-      "--adaptive-opacity": 0.85,
-      "--adaptive-brightness": 1.15,
+      "--adaptive-blur": ADAPTIVE_BLUR_VAL,
+      "--adaptive-opacity": ADAPTIVE_OPACITY_VAL,
+      "--adaptive-brightness": ADAPTIVE_BRIGHTNESS_VAL,
     };
   }
   return adaptiveStyles.value;
@@ -160,7 +200,7 @@ function clampPosition(posX, posY) {
 function handleDrag(event) {
   const deltaX = event.clientX - dragStartClientX;
   const deltaY = event.clientY - dragStartClientY;
-  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+  const distance = Math.hypot(deltaX, deltaY);
 
   if (distance > dragThreshold) {
     dragMoved = true;
@@ -304,18 +344,18 @@ function getItemStyle(index) {
               min-width="140"
               max-width="250"
             >
-              <div
-                class="text-caption font-weight-black text-uppercase text-secondary"
-                style="font-size: 0.68rem; line-height: 1.2"
-              >
-                {{ meta_data.geode_object_type }}
-              </div>
               <div
                 class="text-subtitle-2 font-weight-bold text-truncate text-white"
                 style="line-height: 1.3"
               >
                 {{ cleanName }}
               </div>
+              <div
+                class="text-caption font-weight-black text-uppercase text-secondary"
+                style="font-size: 0.68rem; line-height: 1.2"
+              >
+                {{ meta_data.geode_object_type }}
+              </div>
               <div
                 v-if="meta_data.id"
                 class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index de4278259..a6e0a73f0 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -1,7 +1,9 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 500;
 const MARGIN = 60;
@@ -12,7 +14,6 @@ const menuStore = useMenuStore();
 const theme = useTheme();
 const primaryColor = computed(() => theme.current.value.colors.primary);
 
-import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
 const { index, itemProps, tooltip, btn_image } = defineProps({
   index: { type: Number, required: true },
@@ -23,12 +24,12 @@ const { index, itemProps, tooltip, btn_image } = defineProps({
 
 const buttonCoords = computed(() => {
   const angle = (index / itemProps.totalItems) * 2 * Math.PI;
-  const dx = Math.cos(angle) * RADIUS;
-  const dy = Math.sin(angle) * RADIUS;
+  const deltaX = Math.cos(angle) * RADIUS;
+  const deltaY = Math.sin(angle) * RADIUS;
   const size = 40;
   return {
-    x: menuStore.containerLeft + menuStore.menuX + dx - size / 2,
-    y: menuStore.containerTop + menuStore.menuY + dy - size / 2,
+    x: menuStore.containerLeft + menuStore.menuX + deltaX - size / 2,
+    y: menuStore.containerTop + menuStore.menuY + deltaY - size / 2,
     width: size,
     height: size,
   };
@@ -36,15 +37,18 @@ const buttonCoords = computed(() => {
 
 const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, { maxOpacity: 0.85 });
 
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const TREEVIEW_MARGIN_LEFT = 10;
+const TREEVIEW_MARGIN_RIGHT = 20;
+const TREEVIEW_ICON_WIDTH = 48;
 
 const treeviewStore = useTreeviewStore();
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(v => v.id !== "main");
-  const hasMain = treeviewStore.opened_views.some(v => v.id === "main");
+  const hasAdditional = treeviewStore.opened_views.some(view => view.id !== "main");
+  const hasMain = treeviewStore.opened_views.some(view => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
-  const treeviewWidth = 10 + 48 + firstColWidth + secondColWidth + 20;
+  const treeviewWidth = TREEVIEW_MARGIN_LEFT + TREEVIEW_ICON_WIDTH + firstColWidth + secondColWidth + TREEVIEW_MARGIN_RIGHT;
   return buttonCoords.value.x < treeviewWidth;
 });
 
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 326d1266b..bd1577fbf 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,14 +1,18 @@
 <script setup>
-import { ref, getCurrentInstance } from "vue";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import { geode_objects } from "@ogw_front/assets/geode_objects";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+const MAX_SHORT_ID_LENGTH = 16;
+const ID_SLICE_START = 8;
+const ID_SLICE_END_OFFSET = 8;
+const CLAMP_MARGIN = 10;
+
 const { displayMenu, containerWidth, containerHeight } = defineProps({
   displayMenu: { type: Boolean, required: true },
   containerWidth: { type: Number, required: true },
@@ -49,19 +53,53 @@ function handleIntermediateMenuUpdate(val) {
     resolveIntermediate = undefined;
   }
 }
+
 function cleanItemName(fullName, id) {
-  if (!fullName) return "";
+  if (!fullName) {
+    return "";
+  }
   if (id && fullName.endsWith(` - ${id}`)) {
-    return fullName.substring(0, fullName.length - ` - ${id}`.length);
+    return fullName.slice(0, fullName.length - ` - ${id}`.length);
   }
-  const uuidRegex = / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+  const uuidRegex =
+    / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/iu;
   return fullName.replace(uuidRegex, "");
 }
 
 function formatListId(id) {
-  if (!id) return "";
-  if (id.length <= 16) return id;
-  return `${id.substring(0, 8)}...${id.substring(id.length - 8)}`;
+  if (!id) {
+    return "";
+  }
+  if (id.length <= MAX_SHORT_ID_LENGTH) {
+    return id;
+  }
+  return `${id.slice(0, ID_SLICE_START)}...${id.slice(id.length - ID_SLICE_END_OFFSET)}`;
+}
+
+function fetchProposedItems(pickedList) {
+  return Promise.all(
+    pickedList.map(async (pick) => {
+      try {
+        const item = await dataStore.item(pick.id);
+        const cleanName = cleanItemName(item.name, pick.id) || "Unnamed Object";
+        return {
+          id: pick.id,
+          viewer_id: pick.viewer_id,
+          name: cleanName,
+          viewer_type: item.viewer_type,
+          geode_object_type: item.geode_object_type,
+        };
+      } catch {
+        return {
+          id: pick.id,
+          viewer_id: pick.viewer_id,
+          name: "Unnamed Object",
+          viewer_type: undefined,
+          geode_object_type: undefined,
+        };
+      }
+    }),
+  );
 }
 
 async function get_viewer_id(x, y) {
@@ -107,34 +145,7 @@ async function get_viewer_id(x, y) {
     return result;
   }
 
-  const proposedItems = [];
-  for (const pick of pickedList) {
-    try {
-      const item = await dataStore.item(pick.id);
-      let cleanName = cleanItemName(item.name, pick.id) || "Unnamed Object";
-      if (item.viewer_type === "model" && pick.viewer_id !== undefined) {
-        const component = await dataStore.getComponentByViewerId(pick.id, pick.viewer_id);
-        if (component && component.name) {
-          cleanName = `${cleanName} - ${component.name}`;
-        }
-      }
-      proposedItems.push({
-        id: pick.id,
-        viewer_id: pick.viewer_id,
-        name: cleanName,
-        viewer_type: item.viewer_type,
-        geode_object_type: item.geode_object_type,
-      });
-    } catch (e) {
-      proposedItems.push({
-        id: pick.id,
-        viewer_id: pick.viewer_id,
-        name: "Unnamed Object",
-        viewer_type: undefined,
-        geode_object_type: undefined,
-      });
-    }
-  }
+  const proposedItems = await fetchProposedItems(pickedList);
 
   intermediateItems.value = proposedItems;
 
@@ -149,13 +160,20 @@ async function get_viewer_id(x, y) {
 
   const MENU_WIDTH = 340;
   const MENU_HEIGHT = 280;
-  const clampedX = Math.min(Math.max(x, 10), containerWidth - MENU_WIDTH - 10);
-  const clampedY = Math.min(Math.max(yUI, 10), containerHeight - MENU_HEIGHT - 10);
+  const clampedX = Math.min(
+    Math.max(x, CLAMP_MARGIN),
+    containerWidth - MENU_WIDTH - CLAMP_MARGIN,
+  );
+  const clampedY = Math.min(
+    Math.max(yUI, CLAMP_MARGIN),
+    containerHeight - MENU_HEIGHT - CLAMP_MARGIN,
+  );
 
   intermediateMenuX.value = containerRect.left + clampedX;
   intermediateMenuY.value = containerRect.top + clampedY;
   displayIntermediate.value = true;
 
+  /* eslint-disable-next-line promise/avoid-new */
   return new Promise((resolve) => {
     resolveIntermediate = (chosenResult) => {
       displayIntermediate.value = false;
@@ -201,13 +219,20 @@ defineExpose({ get_viewer_id });
       min-width="260"
       max-width="340"
     >
-      <v-card-title class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis">
-        <v-icon icon="mdi-layers-triple" size="small" class="mr-2" color="secondary" />
+      <v-card-title
+        class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis"
+      >
+        <v-icon
+          icon="mdi-layers-triple"
+          size="small"
+          class="mr-2"
+          color="secondary"
+        />
         Overlapping objects
       </v-card-title>
-      
+
       <v-divider />
-      
+
       <v-list class="py-1 bg-transparent" density="compact">
         <v-list-item
           v-for="item in intermediateItems"
@@ -223,7 +248,7 @@ defineExpose({ get_viewer_id });
               width="24"
               max-width="24"
               class="mr-3"
-              style="object-fit: contain; filter: brightness(0) invert(1);"
+              style="object-fit: contain; filter: brightness(0) invert(1)"
             />
             <v-icon
               v-else
@@ -233,13 +258,22 @@ defineExpose({ get_viewer_id });
               class="mr-3"
             />
           </template>
-          
-          <v-list-item-title class="font-weight-bold text-body-2 text-truncate text-white">
+
+          <v-list-item-title
+            class="font-weight-bold text-body-2 text-truncate text-white"
+          >
             {{ item.name }}
           </v-list-item-title>
-          <v-list-item-subtitle class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center">
-            <span class="font-weight-medium mr-1">{{ item.geode_object_type }}</span>
-            <span style="font-family: monospace; opacity: 0.65; font-size: 0.72rem;">&middot; {{ formatListId(item.id) }}</span>
+          <v-list-item-subtitle
+            class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center"
+          >
+            <span class="font-weight-medium mr-1">{{
+              item.geode_object_type
+            }}</span>
+            <span
+              style="font-family: monospace; opacity: 0.65; font-size: 0.72rem"
+              >&middot; {{ formatListId(item.id) }}</span
+            >
           </v-list-item-subtitle>
         </v-list-item>
       </v-list>
diff --git a/app/composables/use_adaptive_styles.js b/app/composables/use_adaptive_styles.js
index 1945ac86b..e985a2a4a 100644
--- a/app/composables/use_adaptive_styles.js
+++ b/app/composables/use_adaptive_styles.js
@@ -15,6 +15,13 @@ const MIN_BOOST = 1;
 const MAX_BOOST = 1.2;
 const ADAPTIVE_REFRESH_RATE = 150;
 
+function getValue(val) {
+  if (typeof val === "object" && val !== null && val.value !== undefined) {
+    return val.value;
+  }
+  return val ?? 0;
+}
+
 export function useAdaptiveStyles(target, options = {}) {
   const hybridViewerStore = useHybridViewerStore();
 
@@ -26,28 +33,38 @@ export function useAdaptiveStyles(target, options = {}) {
       (target.x !== undefined && target.value === undefined)
     );
 
-  let x, y, width, height;
-  if (isCoordinates) {
-    const unwrapped = computed(() => {
-      const val = typeof target === "function" ? target() : (target.value !== undefined ? target.value : target);
+  const bounding = useElementBounding(isCoordinates ? undefined : target);
+
+  const unwrapped = computed(() => {
+    if (isCoordinates) {
+      let val = undefined;
+      if (typeof target === "function") {
+        val = target();
+      } else if (target.value === undefined) {
+        val = target;
+      } else {
+        val = target.value;
+      }
       return {
-        x: typeof val?.x === "object" && val.x !== null && val.x.value !== undefined ? val.x.value : (val?.x ?? 0),
-        y: typeof val?.y === "object" && val.y !== null && val.y.value !== undefined ? val.y.value : (val?.y ?? 0),
-        width: typeof val?.width === "object" && val.width !== null && val.width.value !== undefined ? val.width.value : (val?.width ?? 0),
-        height: typeof val?.height === "object" && val.height !== null && val.height.value !== undefined ? val.height.value : (val?.height ?? 0),
+        x: getValue(val?.x),
+        y: getValue(val?.y),
+        width: getValue(val?.width),
+        height: getValue(val?.height),
       };
-    });
-    x = computed(() => unwrapped.value.x);
-    y = computed(() => unwrapped.value.y);
-    width = computed(() => unwrapped.value.width);
-    height = computed(() => unwrapped.value.height);
-  } else {
-    const bounding = useElementBounding(target);
-    x = bounding.x;
-    y = bounding.y;
-    width = bounding.width;
-    height = bounding.height;
-  }
+    }
+    return {
+      x: bounding.x.value,
+      y: bounding.y.value,
+      width: bounding.width.value,
+      height: bounding.height.value,
+    };
+  });
+
+  const x = computed(() => unwrapped.value.x);
+  const y = computed(() => unwrapped.value.y);
+  const width = computed(() => unwrapped.value.width);
+  const height = computed(() => unwrapped.value.height);
+
   const brightness = ref(LUMINANCE_THRESHOLD);
 
   const updateBrightness = useThrottleFn(() => {
diff --git a/tests/unit/composables/project_manager.nuxt.test.js b/tests/unit/composables/project_manager.nuxt.test.js
index b65b39913..0f9ed639b 100644
--- a/tests/unit/composables/project_manager.nuxt.test.js
+++ b/tests/unit/composables/project_manager.nuxt.test.js
@@ -4,10 +4,10 @@
 // Third party imports
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
-import { useProjectManager } from "@ogw_front/composables/project_manager";
-const { exportProject, importProjectFile: importProject } = useProjectManager();
 import { appMode } from "@ogw_front/utils/local/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";
+import { useProjectManager } from "@ogw_front/composables/project_manager";
+const { exportProject, importProjectFile: importProject } = useProjectManager();
 
 // Constants
 const PANEL_WIDTH = 300;

From 4866d3e4d07203bda20ae832470020d624c83035 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 11:33:14 +0200
Subject: [PATCH 05/24] clean code

---
 app/components/Viewer/ContextMenu.vue         |  14 +-
 .../Viewer/OverlappingObjectsPicker.vue       | 112 +++++++
 app/components/Viewer/Ui.vue                  | 274 ++----------------
 app/composables/use_overlapping_picker.js     | 157 ++++++++++
 app/utils/name_cleaner.js                     |  20 ++
 5 files changed, 316 insertions(+), 261 deletions(-)
 create mode 100644 app/components/Viewer/OverlappingObjectsPicker.vue
 create mode 100644 app/composables/use_overlapping_picker.js
 create mode 100644 app/utils/name_cleaner.js

diff --git a/app/components/Viewer/ContextMenu.vue b/app/components/Viewer/ContextMenu.vue
index 2ef25596b..3643a1cc5 100644
--- a/app/components/Viewer/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu.vue
@@ -46,24 +46,12 @@ const {
 
 const meta_data = computed(() => menuStore.current_meta_data || {});
 
-function cleanItemName(fullName, itemId) {
-  if (!fullName) {
-    return "";
-  }
-  if (itemId && fullName.endsWith(` - ${itemId}`)) {
-    return fullName.slice(0, fullName.length - ` - ${itemId}`.length);
-  }
-  const uuidRegex =
-    / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/iu;
-  return fullName.replace(uuidRegex, "");
-}
-
 const cleanName = computed(() => {
   const meta = menuStore.current_meta_data;
   if (!meta) {
     return "Unnamed Object";
   }
-  return cleanItemName(meta.name, meta.id) || "Unnamed Object";
+  return meta.name || "Unnamed Object";
 });
 
 const show_menu = ref(true);
diff --git a/app/components/Viewer/OverlappingObjectsPicker.vue b/app/components/Viewer/OverlappingObjectsPicker.vue
new file mode 100644
index 000000000..1338831ab
--- /dev/null
+++ b/app/components/Viewer/OverlappingObjectsPicker.vue
@@ -0,0 +1,112 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { formatListId } from "@ogw_front/utils/name_cleaner";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+
+const { displayIntermediate, intermediateItems, menuStyle } = defineProps({
+  displayIntermediate: { type: Boolean, required: true },
+  intermediateItems: { type: Array, required: true },
+  menuStyle: { type: Object, required: true },
+});
+
+const emit = defineEmits(["select", "update:displayIntermediate"]);
+
+function selectItem(item) {
+  emit("select", item);
+}
+
+function handleUpdate(val) {
+  emit("update:displayIntermediate", val);
+}
+</script>
+
+<template>
+  <v-menu
+    :model-value="displayIntermediate"
+    :close-on-content-click="true"
+    :style="menuStyle"
+    :overlay="false"
+    @update:model-value="handleUpdate"
+  >
+    <GlassCard
+      variant="panel"
+      padding="pa-0"
+      rounded="lg"
+      class="elevation-12"
+      min-width="260"
+      max-width="340"
+    >
+      <v-card-title
+        class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis"
+      >
+        <v-icon
+          icon="mdi-layers-triple"
+          size="small"
+          class="mr-2"
+          color="secondary"
+        />
+        Overlapping objects
+      </v-card-title>
+
+      <v-divider />
+
+      <v-list class="py-1 bg-transparent" density="compact">
+        <v-list-item
+          v-for="item in intermediateItems"
+          :key="`${item.id}-${item.viewer_id}`"
+          class="intermediate-picker-item px-3 py-2"
+          @click="selectItem(item)"
+        >
+          <template #prepend>
+            <v-img
+              v-if="geode_objects[item.geode_object_type]?.image"
+              :src="geode_objects[item.geode_object_type].image"
+              height="24"
+              width="24"
+              max-width="24"
+              class="mr-3"
+              style="object-fit: contain; filter: brightness(0) invert(1)"
+            />
+            <v-icon
+              v-else
+              icon="mdi-cube-outline"
+              size="24"
+              color="white"
+              class="mr-3"
+            />
+          </template>
+
+          <v-list-item-title
+            class="font-weight-bold text-body-2 text-truncate text-white"
+          >
+            {{ item.name }}
+          </v-list-item-title>
+          <v-list-item-subtitle
+            class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center"
+          >
+            <span class="font-weight-medium mr-1">{{
+              item.geode_object_type
+            }}</span>
+            <span
+              style="font-family: monospace; opacity: 0.65; font-size: 0.72rem"
+              >&middot; {{ formatListId(item.id) }}</span
+            >
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </GlassCard>
+  </v-menu>
+</template>
+
+<style scoped>
+.intermediate-picker-item {
+  transition: all 0.2s ease;
+  border-radius: 8px !important;
+  margin: 2px 6px;
+}
+
+.intermediate-picker-item:hover {
+  background: rgba(var(--v-theme-secondary), 0.1) !important;
+  transform: translateX(4px);
+}
+</style>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index bd1577fbf..5e2e055ae 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,17 +1,11 @@
 <script setup>
+import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
-import { geode_objects } from "@ogw_front/assets/geode_objects";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { getCurrentInstance } from "vue";
 import { useMenuStore } from "@ogw_front/stores/menu";
+import { useOverlappingPicker } from "@ogw_front/composables/use_overlapping_picker";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-const MAX_SHORT_ID_LENGTH = 16;
-const ID_SLICE_START = 8;
-const ID_SLICE_END_OFFSET = 8;
-const CLAMP_MARGIN = 10;
 
 const { displayMenu, containerWidth, containerHeight } = defineProps({
   displayMenu: { type: Boolean, required: true },
@@ -20,136 +14,19 @@ const { displayMenu, containerWidth, containerHeight } = defineProps({
 });
 
 const emit = defineEmits(["show-menu"]);
-const dataStore = useDataStore();
-const dataStyleStore = useDataStyleStore();
-const viewerStore = useViewerStore();
 const menuStore = useMenuStore();
-const dataItems = dataStore.refAllItems();
-
-const displayIntermediate = ref(false);
-const intermediateItems = ref([]);
-const intermediateMenuX = ref(0);
-const intermediateMenuY = ref(0);
-let resolveIntermediate = undefined;
-
-function getIntermediateMenuStyle() {
-  return {
-    position: "fixed",
-    left: `${intermediateMenuX.value}px`,
-    top: `${intermediateMenuY.value}px`,
-  };
-}
-
-function selectIntermediateItem(item) {
-  if (resolveIntermediate) {
-    resolveIntermediate(item);
-    resolveIntermediate = undefined;
-  }
-}
-
-function handleIntermediateMenuUpdate(val) {
-  if (!val && resolveIntermediate) {
-    resolveIntermediate(undefined);
-    resolveIntermediate = undefined;
-  }
-}
-
-function cleanItemName(fullName, id) {
-  if (!fullName) {
-    return "";
-  }
-  if (id && fullName.endsWith(` - ${id}`)) {
-    return fullName.slice(0, fullName.length - ` - ${id}`.length);
-  }
-  const uuidRegex =
-    / - [0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/iu;
-  return fullName.replace(uuidRegex, "");
-}
-
-function formatListId(id) {
-  if (!id) {
-    return "";
-  }
-  if (id.length <= MAX_SHORT_ID_LENGTH) {
-    return id;
-  }
-  return `${id.slice(0, ID_SLICE_START)}...${id.slice(id.length - ID_SLICE_END_OFFSET)}`;
-}
-
-function fetchProposedItems(pickedList) {
-  return Promise.all(
-    pickedList.map(async (pick) => {
-      try {
-        const item = await dataStore.item(pick.id);
-        const cleanName = cleanItemName(item.name, pick.id) || "Unnamed Object";
-        return {
-          id: pick.id,
-          viewer_id: pick.viewer_id,
-          name: cleanName,
-          viewer_type: item.viewer_type,
-          geode_object_type: item.geode_object_type,
-        };
-      } catch {
-        return {
-          id: pick.id,
-          viewer_id: pick.viewer_id,
-          name: "Unnamed Object",
-          viewer_type: undefined,
-          geode_object_type: undefined,
-        };
-      }
-    }),
-  );
-}
-
-async function get_viewer_id(x, y) {
-  const activeIds = new Set(dataItems.value.map((item) => item.id));
-  const ids = Object.keys(dataStyleStore.styles).filter((styleId) =>
-    activeIds.has(styleId),
-  );
-
-  let result = { id: undefined, viewer_id: undefined };
-  let pickedResponse = undefined;
-
-  await viewerStore.request(
-    viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
-    { x, y, ids },
-    {
-      response_function: (response) => {
-        pickedResponse = response;
-      },
-    },
-  );
-
-  if (
-    !pickedResponse ||
-    !pickedResponse.array_ids ||
-    pickedResponse.array_ids.length === 0
-  ) {
-    return result;
-  }
-
-  const { array_ids, viewer_id, picked_data } = pickedResponse;
-
-  const pickedList = [];
-  if (picked_data && picked_data.length > 0) {
-    pickedList.push(...picked_data);
-  } else {
-    for (const pickId of array_ids) {
-      pickedList.push({ id: pickId, viewer_id });
-    }
-  }
-
-  if (pickedList.length <= 1) {
-    result = { id: pickedList[0]?.id, viewer_id: pickedList[0]?.viewer_id };
-    return result;
-  }
-
-  const proposedItems = await fetchProposedItems(pickedList);
+const viewerStore = useViewerStore();
 
-  intermediateItems.value = proposedItems;
+const {
+  displayIntermediate,
+  intermediateItems,
+  getIntermediateMenuStyle,
+  selectIntermediateItem,
+  handleIntermediateMenuUpdate,
+  get_viewer_id: trigger_picker,
+} = useOverlappingPicker();
 
-  const yUI = containerHeight - y;
+function get_viewer_id(x, y) {
   const instance = getCurrentInstance();
   const containerRect = instance?.proxy?.$el
     ?.closest?.('[data-testid="hybridViewer"]')
@@ -158,31 +35,12 @@ async function get_viewer_id(x, y) {
       .querySelector('[data-testid="hybridViewer"]')
       ?.getBoundingClientRect() || { left: 0, top: 0 };
 
-  const MENU_WIDTH = 340;
-  const MENU_HEIGHT = 280;
-  const clampedX = Math.min(
-    Math.max(x, CLAMP_MARGIN),
-    containerWidth - MENU_WIDTH - CLAMP_MARGIN,
-  );
-  const clampedY = Math.min(
-    Math.max(yUI, CLAMP_MARGIN),
-    containerHeight - MENU_HEIGHT - CLAMP_MARGIN,
-  );
-
-  intermediateMenuX.value = containerRect.left + clampedX;
-  intermediateMenuY.value = containerRect.top + clampedY;
-  displayIntermediate.value = true;
-
-  /* eslint-disable-next-line promise/avoid-new */
-  return new Promise((resolve) => {
-    resolveIntermediate = (chosenResult) => {
-      displayIntermediate.value = false;
-      resolve(
-        chosenResult
-          ? { id: chosenResult.id, viewer_id: chosenResult.viewer_id }
-          : { id: undefined, viewer_id: undefined },
-      );
-    };
+  return trigger_picker({
+    x,
+    y,
+    containerWidth,
+    containerHeight,
+    containerRect,
   });
 }
 
@@ -203,82 +61,13 @@ defineExpose({ get_viewer_id });
     :container-height="containerHeight"
   />
 
-  <!-- Premium Glassmorphic Intermediate Selection Pre-Menu -->
-  <v-menu
-    :model-value="displayIntermediate"
-    :close-on-content-click="true"
-    :style="getIntermediateMenuStyle()"
-    :overlay="false"
-    @update:model-value="handleIntermediateMenuUpdate"
-  >
-    <GlassCard
-      variant="panel"
-      padding="pa-0"
-      rounded="lg"
-      class="elevation-12"
-      min-width="260"
-      max-width="340"
-    >
-      <v-card-title
-        class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis"
-      >
-        <v-icon
-          icon="mdi-layers-triple"
-          size="small"
-          class="mr-2"
-          color="secondary"
-        />
-        Overlapping objects
-      </v-card-title>
-
-      <v-divider />
-
-      <v-list class="py-1 bg-transparent" density="compact">
-        <v-list-item
-          v-for="item in intermediateItems"
-          :key="`${item.id}-${item.viewer_id}`"
-          class="intermediate-picker-item px-3 py-2"
-          @click="selectIntermediateItem(item)"
-        >
-          <template #prepend>
-            <v-img
-              v-if="geode_objects[item.geode_object_type]?.image"
-              :src="geode_objects[item.geode_object_type].image"
-              height="24"
-              width="24"
-              max-width="24"
-              class="mr-3"
-              style="object-fit: contain; filter: brightness(0) invert(1)"
-            />
-            <v-icon
-              v-else
-              icon="mdi-cube-outline"
-              size="24"
-              color="white"
-              class="mr-3"
-            />
-          </template>
-
-          <v-list-item-title
-            class="font-weight-bold text-body-2 text-truncate text-white"
-          >
-            {{ item.name }}
-          </v-list-item-title>
-          <v-list-item-subtitle
-            class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center"
-          >
-            <span class="font-weight-medium mr-1">{{
-              item.geode_object_type
-            }}</span>
-            <span
-              style="font-family: monospace; opacity: 0.65; font-size: 0.72rem"
-              >&middot; {{ formatListId(item.id) }}</span
-            >
-          </v-list-item-subtitle>
-        </v-list-item>
-      </v-list>
-    </GlassCard>
-  </v-menu>
+  <OverlappingObjectsPicker
+    :display-intermediate="displayIntermediate"
+    :intermediate-items="intermediateItems"
+    :menu-style="getIntermediateMenuStyle()"
+    @select="selectIntermediateItem"
+    @update:display-intermediate="handleIntermediateMenuUpdate"
+  />
 
   <v-fade-transition>
     <div
@@ -327,15 +116,4 @@ defineExpose({ get_viewer_id });
 .pick-pulse {
   animation: pulse-ring 1.5s ease-out infinite;
 }
-
-.intermediate-picker-item {
-  transition: all 0.2s ease;
-  border-radius: 8px !important;
-  margin: 2px 6px;
-}
-
-.intermediate-picker-item:hover {
-  background: rgba(var(--v-theme-secondary), 0.1) !important;
-  transform: translateX(4px);
-}
 </style>
diff --git a/app/composables/use_overlapping_picker.js b/app/composables/use_overlapping_picker.js
new file mode 100644
index 000000000..0c0d09a83
--- /dev/null
+++ b/app/composables/use_overlapping_picker.js
@@ -0,0 +1,157 @@
+import { ref } from "vue";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+export function useOverlappingPicker() {
+  const dataStore = useDataStore();
+  const dataStyleStore = useDataStyleStore();
+  const viewerStore = useViewerStore();
+  const dataItems = dataStore.refAllItems();
+
+  const displayIntermediate = ref(false);
+  const intermediateItems = ref([]);
+  const intermediateMenuX = ref(0);
+  const intermediateMenuY = ref(0);
+  let resolveIntermediate = undefined;
+
+  function fetchProposedItems(pickedList) {
+    return Promise.all(
+      pickedList.map(async (pick) => {
+        try {
+          const item = await dataStore.item(pick.id);
+          return {
+            id: pick.id,
+            viewer_id: pick.viewer_id,
+            name: item.name || "Unnamed Object",
+            viewer_type: item.viewer_type,
+            geode_object_type: item.geode_object_type,
+          };
+        } catch {
+          return {
+            id: pick.id,
+            viewer_id: pick.viewer_id,
+            name: "Unnamed Object",
+            viewer_type: undefined,
+            geode_object_type: undefined,
+          };
+        }
+      }),
+    );
+  }
+
+  function getIntermediateMenuStyle() {
+    return {
+      position: "fixed",
+      left: `${intermediateMenuX.value}px`,
+      top: `${intermediateMenuY.value}px`,
+    };
+  }
+
+  function selectIntermediateItem(item) {
+    if (resolveIntermediate) {
+      resolveIntermediate(item);
+      resolveIntermediate = undefined;
+    }
+  }
+
+  function handleIntermediateMenuUpdate(val) {
+    if (!val && resolveIntermediate) {
+      resolveIntermediate(undefined);
+      resolveIntermediate = undefined;
+    }
+  }
+
+  async function get_viewer_id({
+    x,
+    y,
+    containerWidth,
+    containerHeight,
+    containerRect,
+  }) {
+    const activeIds = new Set(dataItems.value.map((item) => item.id));
+    const ids = Object.keys(dataStyleStore.styles).filter((styleId) =>
+      activeIds.has(styleId),
+    );
+
+    const result = { id: undefined, viewer_id: undefined };
+    let pickedResponse = undefined;
+
+    await viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
+      { x, y, ids },
+      {
+        response_function: (response) => {
+          pickedResponse = response;
+        },
+      },
+    );
+
+    if (
+      !pickedResponse ||
+      !pickedResponse.array_ids ||
+      pickedResponse.array_ids.length === 0
+    ) {
+      return result;
+    }
+
+    const { array_ids, viewer_id, picked_data } = pickedResponse;
+
+    const pickedList = [];
+    if (picked_data && picked_data.length > 0) {
+      pickedList.push(...picked_data);
+    } else {
+      for (const pickId of array_ids) {
+        pickedList.push({ id: pickId, viewer_id });
+      }
+    }
+
+    if (pickedList.length <= 1) {
+      return { id: pickedList[0]?.id, viewer_id: pickedList[0]?.viewer_id };
+    }
+
+    const proposedItems = await fetchProposedItems(pickedList);
+    intermediateItems.value = proposedItems;
+
+    const yUI = containerHeight - y;
+    const MENU_WIDTH = 340;
+    const MENU_HEIGHT = 280;
+    const CLAMP_MARGIN = 10;
+    const clampedX = Math.min(
+      Math.max(x, CLAMP_MARGIN),
+      containerWidth - MENU_WIDTH - CLAMP_MARGIN,
+    );
+    const clampedY = Math.min(
+      Math.max(yUI, CLAMP_MARGIN),
+      containerHeight - MENU_HEIGHT - CLAMP_MARGIN,
+    );
+
+    intermediateMenuX.value = containerRect.left + clampedX;
+    intermediateMenuY.value = containerRect.top + clampedY;
+    displayIntermediate.value = true;
+
+    /* eslint-disable-next-line promise/avoid-new */
+    return new Promise((resolve) => {
+      resolveIntermediate = (chosenResult) => {
+        displayIntermediate.value = false;
+        resolve(
+          chosenResult
+            ? { id: chosenResult.id, viewer_id: chosenResult.viewer_id }
+            : { id: undefined, viewer_id: undefined },
+        );
+      };
+    });
+  }
+
+  return {
+    displayIntermediate,
+    intermediateItems,
+    intermediateMenuX,
+    intermediateMenuY,
+    getIntermediateMenuStyle,
+    selectIntermediateItem,
+    handleIntermediateMenuUpdate,
+    get_viewer_id,
+  };
+}
diff --git a/app/utils/name_cleaner.js b/app/utils/name_cleaner.js
new file mode 100644
index 000000000..07c6e8fde
--- /dev/null
+++ b/app/utils/name_cleaner.js
@@ -0,0 +1,20 @@
+const DEFAULT_MAX_LENGTH = 16;
+const DEFAULT_SLICE_START = 8;
+const DEFAULT_SLICE_END_OFFSET = 8;
+
+function formatListId(
+  id,
+  maxLength = DEFAULT_MAX_LENGTH,
+  sliceStart = DEFAULT_SLICE_START,
+  sliceEndOffset = DEFAULT_SLICE_END_OFFSET,
+) {
+  if (!id) {
+    return "";
+  }
+  if (id.length <= maxLength) {
+    return id;
+  }
+  return `${id.slice(0, sliceStart)}...${id.slice(id.length - sliceEndOffset)}`;
+}
+
+export { formatListId };

From 9031ff5ab0cbc113899c9d23d16fd21ac120d8f4 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 19 May 2026 09:43:17 +0000
Subject: [PATCH 06/24] Apply prepare changes

---
 app/components/Viewer/ContextMenu.vue         | 22 ++-------
 app/components/Viewer/ContextMenuItem.vue     | 48 +++++++------------
 .../Viewer/OverlappingObjectsPicker.vue       | 26 ++--------
 app/components/Viewer/Ui.vue                  |  7 +--
 app/composables/use_adaptive_styles.js        | 12 ++---
 app/composables/use_overlapping_picker.js     | 18 ++-----
 commitlint.config.js                          |  1 +
 7 files changed, 40 insertions(+), 94 deletions(-)

diff --git a/app/components/Viewer/ContextMenu.vue b/app/components/Viewer/ContextMenu.vue
index 3643a1cc5..616e63012 100644
--- a/app/components/Viewer/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu.vue
@@ -137,9 +137,7 @@ const formattedId = computed(() => {
 
 const treeviewStore = useTreeviewStore();
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(
-    (view) => view.id !== "main",
-  );
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
@@ -258,10 +256,7 @@ function getItemStyle(index) {
     transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
     transition: "opacity 0.2s ease, transform 0.2s ease",
     position: "absolute",
-    zIndex:
-      menuStore.active_item_index === index
-        ? Z_INDEX_ACTIVE_ITEM
-        : Z_INDEX_BASE_ITEM,
+    zIndex: menuStore.active_item_index === index ? Z_INDEX_ACTIVE_ITEM : Z_INDEX_BASE_ITEM,
   };
 }
 </script>
@@ -318,12 +313,7 @@ function getItemStyle(index) {
 
         <!-- Direct local name display (no teleportation, no lag!) -->
         <transition name="fade-scale">
-          <div
-            v-if="showName"
-            class="object-name-popover"
-            @mousedown.stop
-            @click.stop
-          >
+          <div v-if="showName" class="object-name-popover" @mousedown.stop @click.stop>
             <GlassCard
               variant="panel"
               padding="pa-2 px-3"
@@ -418,10 +408,8 @@ function getItemStyle(index) {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index a6e0a73f0..f78ad9fe9 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -14,7 +14,6 @@ const menuStore = useMenuStore();
 const theme = useTheme();
 const primaryColor = computed(() => theme.current.value.colors.primary);
 
-
 const { index, itemProps, tooltip, btn_image } = defineProps({
   index: { type: Number, required: true },
   itemProps: { type: Object, required: true },
@@ -37,18 +36,22 @@ const buttonCoords = computed(() => {
 
 const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, { maxOpacity: 0.85 });
 
-
 const TREEVIEW_MARGIN_LEFT = 10;
 const TREEVIEW_MARGIN_RIGHT = 20;
 const TREEVIEW_ICON_WIDTH = 48;
 
 const treeviewStore = useTreeviewStore();
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(view => view.id !== "main");
-  const hasMain = treeviewStore.opened_views.some(view => view.id === "main");
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
+  const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
-  const treeviewWidth = TREEVIEW_MARGIN_LEFT + TREEVIEW_ICON_WIDTH + firstColWidth + secondColWidth + TREEVIEW_MARGIN_RIGHT;
+  const treeviewWidth =
+    TREEVIEW_MARGIN_LEFT +
+    TREEVIEW_ICON_WIDTH +
+    firstColWidth +
+    secondColWidth +
+    TREEVIEW_MARGIN_RIGHT;
   return buttonCoords.value.x < treeviewWidth;
 });
 
@@ -67,9 +70,7 @@ const is_active = computed(() => menuStore.active_item_index === index);
 const optionsRef = ref(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
-const maxCardHeight = computed(() =>
-  Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
-);
+const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
 
 const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
@@ -84,12 +85,8 @@ const optionsStyle = computed(() => {
 
   if (absoluteButtonY - height / 2 < margin) {
     offsetY = margin - (absoluteButtonY - height / 2);
-  } else if (
-    absoluteButtonY + height / 2 >
-    menuStore.containerHeight - margin
-  ) {
-    offsetY =
-      menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
+  } else if (absoluteButtonY + height / 2 > menuStore.containerHeight - margin) {
+    offsetY = menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
   }
   return { top: `calc(50% + ${offsetY}px)` };
 });
@@ -99,14 +96,11 @@ const optionsClass = computed(() => {
   const margin = MARGIN;
   const radius = RADIUS;
   if (loc === "right") {
-    return menuStore.menuX + radius + margin + CARD_WIDTH >
-      menuStore.containerWidth
+    return menuStore.menuX + radius + margin + CARD_WIDTH > menuStore.containerWidth
       ? "options-left"
       : "options-right";
   }
-  return menuStore.menuX - radius - margin - CARD_WIDTH < 0
-    ? "options-right"
-    : "options-left";
+  return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
 });
 
 function toggleOptions() {
@@ -115,10 +109,7 @@ function toggleOptions() {
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">
-    <v-tooltip
-      :location="itemProps.tooltip_location"
-      :origin="itemProps.tooltip_origin"
-    >
+    <v-tooltip :location="itemProps.tooltip_location" :origin="itemProps.tooltip_origin">
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
           ref="itemBtnRef"
@@ -162,10 +153,7 @@ function toggleOptions() {
         style="overflow: hidden; display: flex; flex-direction: column"
       >
         <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text
-          class="pa-5"
-          style="overflow-y: auto; flex: 1; min-height: 0"
-        >
+        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
@@ -199,10 +187,8 @@ function toggleOptions() {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/OverlappingObjectsPicker.vue b/app/components/Viewer/OverlappingObjectsPicker.vue
index 1338831ab..918adb4f8 100644
--- a/app/components/Viewer/OverlappingObjectsPicker.vue
+++ b/app/components/Viewer/OverlappingObjectsPicker.vue
@@ -39,12 +39,7 @@ function handleUpdate(val) {
       <v-card-title
         class="d-flex align-center py-2 px-3 text-caption text-uppercase font-weight-black text-medium-emphasis"
       >
-        <v-icon
-          icon="mdi-layers-triple"
-          size="small"
-          class="mr-2"
-          color="secondary"
-        />
+        <v-icon icon="mdi-layers-triple" size="small" class="mr-2" color="secondary" />
         Overlapping objects
       </v-card-title>
 
@@ -67,28 +62,17 @@ function handleUpdate(val) {
               class="mr-3"
               style="object-fit: contain; filter: brightness(0) invert(1)"
             />
-            <v-icon
-              v-else
-              icon="mdi-cube-outline"
-              size="24"
-              color="white"
-              class="mr-3"
-            />
+            <v-icon v-else icon="mdi-cube-outline" size="24" color="white" class="mr-3" />
           </template>
 
-          <v-list-item-title
-            class="font-weight-bold text-body-2 text-truncate text-white"
-          >
+          <v-list-item-title class="font-weight-bold text-body-2 text-truncate text-white">
             {{ item.name }}
           </v-list-item-title>
           <v-list-item-subtitle
             class="text-caption text-truncate text-medium-emphasis mt-0.5 d-flex align-center"
           >
-            <span class="font-weight-medium mr-1">{{
-              item.geode_object_type
-            }}</span>
-            <span
-              style="font-family: monospace; opacity: 0.65; font-size: 0.72rem"
+            <span class="font-weight-medium mr-1">{{ item.geode_object_type }}</span>
+            <span style="font-family: monospace; opacity: 0.65; font-size: 0.72rem"
               >&middot; {{ formatListId(item.id) }}</span
             >
           </v-list-item-subtitle>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 5e2e055ae..655ad2190 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -31,9 +31,10 @@ function get_viewer_id(x, y) {
   const containerRect = instance?.proxy?.$el
     ?.closest?.('[data-testid="hybridViewer"]')
     ?.getBoundingClientRect() ||
-    document
-      .querySelector('[data-testid="hybridViewer"]')
-      ?.getBoundingClientRect() || { left: 0, top: 0 };
+    document.querySelector('[data-testid="hybridViewer"]')?.getBoundingClientRect() || {
+      left: 0,
+      top: 0,
+    };
 
   return trigger_picker({
     x,
diff --git a/app/composables/use_adaptive_styles.js b/app/composables/use_adaptive_styles.js
index e985a2a4a..c3f728387 100644
--- a/app/composables/use_adaptive_styles.js
+++ b/app/composables/use_adaptive_styles.js
@@ -25,13 +25,11 @@ function getValue(val) {
 export function useAdaptiveStyles(target, options = {}) {
   const hybridViewerStore = useHybridViewerStore();
 
-  const isCoordinates = 
-    target && 
-    (
-      typeof target === "function" || 
-      (target.value !== undefined && target.value !== null && target.value.x !== undefined) || 
-      (target.x !== undefined && target.value === undefined)
-    );
+  const isCoordinates =
+    target &&
+    (typeof target === "function" ||
+      (target.value !== undefined && target.value !== null && target.value.x !== undefined) ||
+      (target.x !== undefined && target.value === undefined));
 
   const bounding = useElementBounding(isCoordinates ? undefined : target);
 
diff --git a/app/composables/use_overlapping_picker.js b/app/composables/use_overlapping_picker.js
index 0c0d09a83..bd449c5f6 100644
--- a/app/composables/use_overlapping_picker.js
+++ b/app/composables/use_overlapping_picker.js
@@ -63,17 +63,9 @@ export function useOverlappingPicker() {
     }
   }
 
-  async function get_viewer_id({
-    x,
-    y,
-    containerWidth,
-    containerHeight,
-    containerRect,
-  }) {
+  async function get_viewer_id({ x, y, containerWidth, containerHeight, containerRect }) {
     const activeIds = new Set(dataItems.value.map((item) => item.id));
-    const ids = Object.keys(dataStyleStore.styles).filter((styleId) =>
-      activeIds.has(styleId),
-    );
+    const ids = Object.keys(dataStyleStore.styles).filter((styleId) => activeIds.has(styleId));
 
     const result = { id: undefined, viewer_id: undefined };
     let pickedResponse = undefined;
@@ -88,11 +80,7 @@ export function useOverlappingPicker() {
       },
     );
 
-    if (
-      !pickedResponse ||
-      !pickedResponse.array_ids ||
-      pickedResponse.array_ids.length === 0
-    ) {
+    if (!pickedResponse || !pickedResponse.array_ids || pickedResponse.array_ids.length === 0) {
       return result;
     }
 
diff --git a/commitlint.config.js b/commitlint.config.js
index 0055b515b..0c07c2645 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -14,6 +14,7 @@ const Configuration = {
     "type-empty": [0],
     "type-enum": [2, "always", ["feat", "fix", "perf"]],
   },
+  defaultIgnores: false,
 };
 
 export default Configuration;

From 3d5f54113866dcf9883d7daedc313f2d933fc26c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 12:01:23 +0200
Subject: [PATCH 07/24] oxcgo

---
 app/components/Viewer/ContextMenuItem.vue     |   1 +
 app/composables/project_manager.js            | 160 +++++++++---------
 .../composables/project_manager.nuxt.test.js  |   1 +
 3 files changed, 82 insertions(+), 80 deletions(-)

diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenuItem.vue
index f78ad9fe9..78f23c03c 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenuItem.vue
@@ -4,6 +4,7 @@ import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
 const CARD_WIDTH = 320;
 const CARD_HEIGHT = 500;
 const MARGIN = 60;
diff --git a/app/composables/project_manager.js b/app/composables/project_manager.js
index 69f79c434..59b647dbc 100644
--- a/app/composables/project_manager.js
+++ b/app/composables/project_manager.js
@@ -12,89 +12,89 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-export function useProjectManager() {
-  async function exportProject() {
-    console.log("[export triggered]");
-    const appStore = useAppStore();
-    const geodeStore = useGeodeStore();
-    const snapshot = await appStore.exportStores();
-    const schema = back_schemas.opengeodeweb_back.export_project;
-    const defaultName = "project.vease";
-
-    const result = await $fetch(schema.$id, {
-      baseURL: geodeStore.base_url,
-      method: schema.methods.find((method) => method !== "OPTIONS"),
-      body: { snapshot, filename: defaultName },
-    });
-    fileDownload(result, defaultName);
-    return { result };
+async function exportProject() {
+  console.log("[export triggered]");
+  const appStore = useAppStore();
+  const geodeStore = useGeodeStore();
+  const snapshot = await appStore.exportStores();
+  const schema = back_schemas.opengeodeweb_back.export_project;
+  const defaultName = "project.vease";
+
+  const result = await $fetch(schema.$id, {
+    baseURL: geodeStore.base_url,
+    method: schema.methods.find((method) => method !== "OPTIONS"),
+    body: { snapshot, filename: defaultName },
+  });
+  fileDownload(result, defaultName);
+  return { result };
+}
+
+async function importProjectFile(file) {
+  const geodeStore = useGeodeStore();
+  const dataStyleStore = useDataStyleStore();
+  const viewerStore = useViewerStore();
+  const dataStore = useDataStore();
+  const treeviewStore = useTreeviewStore();
+  const hybridViewerStore = useHybridViewerStore();
+
+  await viewerStore.ws_connect();
+
+  const { client } = viewerStore;
+  if (client && client.getConnection && client.getConnection().getSession) {
+    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
   }
 
-  async function importProjectFile(file) {
-    const geodeStore = useGeodeStore();
-    const dataStyleStore = useDataStyleStore();
-    const viewerStore = useViewerStore();
-    const dataStore = useDataStore();
-    const treeviewStore = useTreeviewStore();
-    const hybridViewerStore = useHybridViewerStore();
-
-    await viewerStore.ws_connect();
-
-    const { client } = viewerStore;
-    if (client && client.getConnection && client.getConnection().getSession) {
-      await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
-    }
-
-    await viewerStore.request(
-      viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
-      {},
-      undefined,
-    );
-
-    treeviewStore.clear();
-    dataStore.clear();
-    hybridViewerStore.clear();
-
-    const schemaImport = back_schemas.opengeodeweb_back.import_project;
-    const form = new FormData();
-    const originalFileName = file && file.name ? file.name : "project.vease";
-    if (!originalFileName.toLowerCase().endsWith(".vease")) {
-      throw new Error("Uploaded file must be a .vease");
-    }
-    form.append("file", file, originalFileName);
-
-    const result = await $fetch(schemaImport.$id, {
-      baseURL: geodeStore.base_url,
-      method: "POST",
-      body: form,
-    });
-    const snapshot = result && result.snapshot ? result.snapshot : {};
-
-    treeviewStore.isImporting = true;
-
-    const { client: client2 } = viewerStore;
-    if (client2 && client2.getConnection && client2.getConnection().getSession) {
-      await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
-    }
-
-    await treeviewStore.importStores(snapshot.treeview || {});
-    await hybridViewerStore.initHybridViewer();
-    await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-
-    const items = snapshot?.data?.items || [];
-
-    await importWorkflowFromSnapshot(items);
-    await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-    {
-      await dataStyleStore.importStores(snapshot.dataStyle || {});
-    }
-    {
-      await dataStyleStore.applyAllStylesFromState();
-    }
-
-    treeviewStore.finalizeImportSelection();
-    treeviewStore.isImporting = false;
+  await viewerStore.request(
+    viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
+    {},
+    undefined,
+  );
+
+  treeviewStore.clear();
+  dataStore.clear();
+  hybridViewerStore.clear();
+
+  const schemaImport = back_schemas.opengeodeweb_back.import_project;
+  const form = new FormData();
+  const originalFileName = file && file.name ? file.name : "project.vease";
+  if (!originalFileName.toLowerCase().endsWith(".vease")) {
+    throw new Error("Uploaded file must be a .vease");
+  }
+  form.append("file", file, originalFileName);
+
+  const result = await $fetch(schemaImport.$id, {
+    baseURL: geodeStore.base_url,
+    method: "POST",
+    body: form,
+  });
+  const snapshot = result && result.snapshot ? result.snapshot : {};
+
+  treeviewStore.isImporting = true;
+
+  const { client: client2 } = viewerStore;
+  if (client2 && client2.getConnection && client2.getConnection().getSession) {
+    await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
   }
 
+  await treeviewStore.importStores(snapshot.treeview || {});
+  await hybridViewerStore.initHybridViewer();
+  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
+
+  const items = snapshot?.data?.items || [];
+
+  await importWorkflowFromSnapshot(items);
+  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
+  {
+    await dataStyleStore.importStores(snapshot.dataStyle || {});
+  }
+  {
+    await dataStyleStore.applyAllStylesFromState();
+  }
+
+  treeviewStore.finalizeImportSelection();
+  treeviewStore.isImporting = false;
+}
+
+export function useProjectManager() {
   return { exportProject, importProjectFile };
 }
diff --git a/tests/unit/composables/project_manager.nuxt.test.js b/tests/unit/composables/project_manager.nuxt.test.js
index 0f9ed639b..d05312901 100644
--- a/tests/unit/composables/project_manager.nuxt.test.js
+++ b/tests/unit/composables/project_manager.nuxt.test.js
@@ -7,6 +7,7 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
 import { appMode } from "@ogw_front/utils/local/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";
 import { useProjectManager } from "@ogw_front/composables/project_manager";
+
 const { exportProject, importProjectFile: importProject } = useProjectManager();
 
 // Constants

From f962cdb3cd1f01dacd35d78be0386594e1bc1a4c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 14:10:05 +0200
Subject: [PATCH 08/24] split responsabilities

---
 app/components/Viewer/ContextMenu.vue         | 465 ------------------
 .../Viewer/ContextMenu/CenterButton.vue       | 114 +++++
 .../Viewer/ContextMenu/CircularItems.vue      |  89 ++++
 .../Viewer/ContextMenu/ContextMenu.vue        | 211 ++++++++
 .../{ => ContextMenu}/ContextMenuItem.vue     |  43 +-
 .../Viewer/ContextMenu/InfoCard.vue           | 195 ++++++++
 .../EdgedCurve/SpecificEdgesOptions.vue       |   2 +-
 .../Viewer/Generic/Mesh/CellsOptions.vue      |   2 +-
 .../Viewer/Generic/Mesh/EdgesOptions.vue      |   2 +-
 .../Viewer/Generic/Mesh/PointsOptions.vue     |   2 +-
 .../Viewer/Generic/Mesh/PolygonsOptions.vue   |   2 +-
 .../Viewer/Generic/Mesh/PolyhedraOptions.vue  |   2 +-
 .../Viewer/Generic/Model/EdgesOptions.vue     |   2 +-
 .../Generic/Model/ModelStyleOptions.vue       |   2 +-
 .../Viewer/Generic/Model/PointsOptions.vue    |   2 +-
 .../Viewer/PointSet/SpecificPointsOptions.vue |   2 +-
 .../Viewer/Solid/SpecificPolyhedraOptions.vue |   2 +-
 .../Viewer/Surface/PolygonsOptions.vue        |   2 +-
 app/components/Viewer/Ui.vue                  |   2 +-
 app/composables/use_overlapping_picker.js     |  14 +-
 20 files changed, 665 insertions(+), 492 deletions(-)
 delete mode 100644 app/components/Viewer/ContextMenu.vue
 create mode 100644 app/components/Viewer/ContextMenu/CenterButton.vue
 create mode 100644 app/components/Viewer/ContextMenu/CircularItems.vue
 create mode 100644 app/components/Viewer/ContextMenu/ContextMenu.vue
 rename app/components/Viewer/{ => ContextMenu}/ContextMenuItem.vue (84%)
 create mode 100644 app/components/Viewer/ContextMenu/InfoCard.vue

diff --git a/app/components/Viewer/ContextMenu.vue b/app/components/Viewer/ContextMenu.vue
deleted file mode 100644
index 616e63012..000000000
--- a/app/components/Viewer/ContextMenu.vue
+++ /dev/null
@@ -1,465 +0,0 @@
-<script setup>
-import { geode_objects } from "@ogw_front/assets/geode_objects";
-import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
-import { useEventListener } from "@vueuse/core";
-import { useMenuStore } from "@ogw_front/stores/menu";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const RADIUS = 80;
-const MARGIN_OFFSET = 40;
-const Z_INDEX_ACTIVE_ITEM = 10;
-const Z_INDEX_BASE_ITEM = 1;
-const FULL_ANGLE = 360;
-const ANGLE_45 = 45;
-const ANGLE_135 = 135;
-const ANGLE_225 = 225;
-const ANGLE_315 = 315;
-const CLOSE_DELAY = 100;
-
-const COPIED_TIMEOUT = 1500;
-const MAX_SHORT_ID_LENGTH = 15;
-const ID_SLICE_START = 8;
-const ID_SLICE_END_OFFSET = 7;
-const TREEVIEW_MARGIN_LEFT = 10;
-const TREEVIEW_ICON_WIDTH = 48;
-const TREEVIEW_MARGIN_RIGHT = 20;
-const ADAPTIVE_BLUR_VAL = "15px";
-const ADAPTIVE_OPACITY_VAL = 0.85;
-const ADAPTIVE_BRIGHTNESS_VAL = 1.15;
-const DRAG_THRESHOLD_VAL = 3;
-
-const menuStore = useMenuStore();
-
-const {
-  id: propId,
-  x,
-  y,
-  containerWidth,
-  containerHeight,
-} = defineProps({
-  id: { type: String, required: true },
-  x: { type: Number, required: true },
-  y: { type: Number, required: true },
-  containerWidth: { type: Number, required: true },
-  containerHeight: { type: Number, required: true },
-});
-
-const meta_data = computed(() => menuStore.current_meta_data || {});
-
-const cleanName = computed(() => {
-  const meta = menuStore.current_meta_data;
-  if (!meta) {
-    return "Unnamed Object";
-  }
-  return meta.name || "Unnamed Object";
-});
-
-const show_menu = ref(true);
-const isDragging = ref(false);
-const dragStartX = ref(0);
-const dragStartY = ref(0);
-const menuX = ref(x);
-const menuY = ref(y);
-
-watch(
-  () => [x, y, containerWidth, containerHeight],
-  ([newX, newY]) => {
-    const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
-    menuX.value = clampedX;
-    menuY.value = clampedY;
-    menuStore.setMenuPosition(clampedX, clampedY);
-  },
-  { immediate: true },
-);
-
-useEventListener(
-  globalThis,
-  "mousemove",
-  (event) => {
-    if (!isDragging.value) {
-      return;
-    }
-    handleDrag(event);
-  },
-  { passive: true },
-);
-
-useEventListener(globalThis, "mouseup", (event) => {
-  if (!isDragging.value) {
-    return;
-  }
-  stopDrag(event);
-});
-
-const menu_items = shallowRef([]);
-watch(
-  () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
-  ([viewer_type, geode_object_type]) => {
-    menu_items.value = menuStore.getMenuItems(viewer_type, geode_object_type);
-  },
-  { immediate: true },
-);
-
-const menuItemCount = computed(() => menu_items.value.length);
-
-let dragMoved = false;
-const dragThreshold = DRAG_THRESHOLD_VAL;
-let dragStartClientX = 0;
-let dragStartClientY = 0;
-const showName = ref(false);
-
-const copied = ref(false);
-async function copyId(targetId) {
-  if (!targetId) {
-    return;
-  }
-  try {
-    await navigator.clipboard.writeText(targetId);
-    copied.value = true;
-    setTimeout(() => {
-      copied.value = false;
-    }, COPIED_TIMEOUT);
-  } catch (error) {
-    console.error("Failed to copy ID:", error);
-  }
-}
-
-const formattedId = computed(() => {
-  const metaId = meta_data.value?.id;
-  if (!metaId) {
-    return "";
-  }
-  if (metaId.length <= MAX_SHORT_ID_LENGTH) {
-    return metaId;
-  }
-  return `${metaId.slice(0, ID_SLICE_START)}...${metaId.slice(metaId.length - ID_SLICE_END_OFFSET)}`;
-});
-
-const treeviewStore = useTreeviewStore();
-const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
-  const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
-  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
-  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
-  const treeviewWidth =
-    TREEVIEW_MARGIN_LEFT +
-    TREEVIEW_ICON_WIDTH +
-    firstColWidth +
-    secondColWidth +
-    TREEVIEW_MARGIN_RIGHT;
-  return menuX.value < treeviewWidth;
-});
-
-const activatorBtn = ref(undefined);
-const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
-  maxOpacity: 0.85,
-});
-
-const computedItemStyles = computed(() => {
-  if (isOverTreeview.value) {
-    return {
-      "--adaptive-blur": ADAPTIVE_BLUR_VAL,
-      "--adaptive-opacity": ADAPTIVE_OPACITY_VAL,
-      "--adaptive-brightness": ADAPTIVE_BRIGHTNESS_VAL,
-    };
-  }
-  return adaptiveStyles.value;
-});
-
-function startDrag(event) {
-  isDragging.value = true;
-  dragMoved = false;
-  dragStartX.value = event.clientX - menuX.value;
-  dragStartY.value = event.clientY - menuY.value;
-  dragStartClientX = event.clientX;
-  dragStartClientY = event.clientY;
-}
-
-function clampPosition(posX, posY) {
-  const margin = RADIUS + MARGIN_OFFSET;
-  return {
-    x: Math.min(Math.max(posX, margin), containerWidth - margin),
-    y: Math.min(Math.max(posY, margin), containerHeight - margin),
-  };
-}
-
-function handleDrag(event) {
-  const deltaX = event.clientX - dragStartClientX;
-  const deltaY = event.clientY - dragStartClientY;
-  const distance = Math.hypot(deltaX, deltaY);
-
-  if (distance > dragThreshold) {
-    dragMoved = true;
-  }
-
-  const { x: clampedX, y: clampedY } = clampPosition(
-    event.clientX - dragStartX.value,
-    event.clientY - dragStartY.value,
-  );
-  menuX.value = clampedX;
-  menuY.value = clampedY;
-  menuStore.setMenuPosition(clampedX, clampedY);
-}
-
-function stopDrag(event) {
-  isDragging.value = false;
-  event.stopPropagation();
-  menuStore.setMenuPosition(menuX.value, menuY.value);
-}
-
-function onCenterClick(event) {
-  event.stopPropagation();
-  if (!dragMoved) {
-    showName.value = !showName.value;
-  }
-}
-
-function getMenuStyle() {
-  return {
-    position: "fixed",
-    left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
-    top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
-  };
-}
-
-function getTooltipLocation(index) {
-  const angle = (index / menuItemCount.value) * FULL_ANGLE;
-  if (angle < ANGLE_45 || angle >= ANGLE_315) {
-    return "right";
-  }
-  if (angle >= ANGLE_45 && angle < ANGLE_135) {
-    return "top";
-  }
-  if (angle >= ANGLE_135 && angle < ANGLE_225) {
-    return "left";
-  }
-  return "bottom";
-}
-
-function getTooltipOrigin(index) {
-  const angle = (index / menuItemCount.value) * FULL_ANGLE;
-  if (angle < ANGLE_45 || angle >= ANGLE_315) {
-    return "left";
-  }
-  if (angle >= ANGLE_45 && angle < ANGLE_135) {
-    return "bottom";
-  }
-  if (angle >= ANGLE_135 && angle < ANGLE_225) {
-    return "right";
-  }
-  return "top";
-}
-
-function getItemStyle(index) {
-  const angle = (index / menuItemCount.value) * 2 * Math.PI;
-  return {
-    transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
-    transition: "opacity 0.2s ease, transform 0.2s ease",
-    position: "absolute",
-    zIndex: menuStore.active_item_index === index ? Z_INDEX_ACTIVE_ITEM : Z_INDEX_BASE_ITEM,
-  };
-}
-</script>
-
-<template>
-  <v-menu
-    v-model="show_menu"
-    content-class="circular-menu-container"
-    :style="getMenuStyle()"
-    :close-on-content-click="false"
-    :close-delay="CLOSE_DELAY"
-    :overlay="false"
-  >
-    <div class="circular-menu-drag-handle" @mousedown.stop="startDrag">
-      <div
-        class="circular-menu-items"
-        :style="{ width: `${RADIUS * 2}px`, height: `${RADIUS * 2}px` }"
-      >
-        <component
-          v-for="(item, index) in menu_items"
-          :is="item"
-          :key="index"
-          :index="index"
-          :itemProps="{
-            id: id,
-            meta_data,
-            tooltip_location: getTooltipLocation(index),
-            tooltip_origin: getTooltipOrigin(index),
-            totalItems: menuItemCount,
-          }"
-          class="menu-item-wrapper"
-          :style="getItemStyle(index)"
-          @mousedown.stop
-        />
-
-        <!-- Active Object Central Indicator -->
-        <v-btn
-          ref="activatorBtn"
-          icon
-          variant="outlined"
-          class="central-selector-btn elevation-6"
-          style="width: 52px; height: 52px; z-index: 5"
-          :style="computedItemStyles"
-          @mousedown="startDrag"
-          @click.stop="onCenterClick"
-        >
-          <v-icon
-            icon="mdi-information-outline"
-            size="28"
-            color="primary"
-            style="pointer-events: none"
-          />
-        </v-btn>
-
-        <!-- Direct local name display (no teleportation, no lag!) -->
-        <transition name="fade-scale">
-          <div v-if="showName" class="object-name-popover" @mousedown.stop @click.stop>
-            <GlassCard
-              variant="panel"
-              padding="pa-2 px-3"
-              rounded="lg"
-              class="elevation-12 text-center border-thin"
-              min-width="140"
-              max-width="250"
-            >
-              <div
-                class="text-subtitle-2 font-weight-bold text-truncate text-white"
-                style="line-height: 1.3"
-              >
-                {{ cleanName }}
-              </div>
-              <div
-                class="text-caption font-weight-black text-uppercase text-secondary"
-                style="font-size: 0.68rem; line-height: 1.2"
-              >
-                {{ meta_data.geode_object_type }}
-              </div>
-              <div
-                v-if="meta_data.id"
-                class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
-                @click.stop="copyId(meta_data.id)"
-              >
-                <span class="id-text">
-                  {{ copied ? "COPIED!" : formattedId }}
-                </span>
-                <v-icon
-                  :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
-                  size="10"
-                  :color="copied ? 'success' : 'white'"
-                  class="ml-1"
-                />
-              </div>
-            </GlassCard>
-          </div>
-        </transition>
-      </div>
-    </div>
-  </v-menu>
-</template>
-
-<style scoped>
-:deep(.circular-menu-container) {
-  overflow: visible !important;
-  box-shadow: none !important;
-  border: none !important;
-  background: transparent !important;
-  contain: none !important;
-}
-
-.circular-menu-drag-handle {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  cursor: grab;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.circular-menu-drag-handle:active {
-  cursor: grabbing;
-}
-
-.circular-menu-items {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: transparent;
-  border: none;
-}
-
-.menu-item-wrapper {
-  position: absolute;
-  transform-origin: center;
-  will-change: transform, opacity;
-}
-
-.central-selector-btn {
-  background: transparent !important;
-  border: 2px solid rgba(var(--v-theme-primary), 0.35) !important;
-  position: relative;
-  overflow: hidden;
-  transition: all 0.2s ease;
-}
-
-.central-selector-btn::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
-  z-index: 0;
-  pointer-events: none;
-  border-radius: inherit;
-  transition:
-    background-color 0.2s ease,
-    backdrop-filter 0.2s ease;
-}
-
-.central-selector-btn:hover {
-  transform: scale(1.08);
-  border-color: rgba(var(--v-theme-primary), 0.85) !important;
-}
-
-.central-selector-btn:hover::before {
-  background: rgba(255, 255, 255, calc(var(--adaptive-opacity, 0.15) + 0.15));
-}
-
-.object-name-popover {
-  position: absolute;
-  bottom: 110px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-}
-
-.id-badge-container {
-  font-family: monospace;
-  font-size: 0.6rem;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 4px;
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.2s ease;
-  opacity: 0.8;
-}
-
-.id-badge-container:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.35);
-  opacity: 1;
-  transform: scale(1.03);
-}
-
-.id-badge-container:active {
-  transform: scale(0.97);
-}
-
-.id-text {
-  letter-spacing: 0.5px;
-  color: rgba(255, 255, 255, 0.85);
-}
-</style>
diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
new file mode 100644
index 000000000..f812cf73c
--- /dev/null
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
+
+const { isOverTreeview } = defineProps({
+  isOverTreeview: { type: Boolean, required: true },
+});
+
+const emit = defineEmits(["drag", "click"]);
+
+const ADAPTIVE_BLUR_VAL = "15px";
+const ADAPTIVE_OPACITY_VAL = 0.85;
+const ADAPTIVE_BRIGHTNESS_VAL = 1.15;
+const dragThreshold = 3;
+
+const activatorBtn = ref(undefined);
+const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
+  maxOpacity: 0.85,
+});
+
+const computedItemStyles = computed(() => {
+  if (isOverTreeview) {
+    return {
+      "--adaptive-blur": ADAPTIVE_BLUR_VAL,
+      "--adaptive-opacity": ADAPTIVE_OPACITY_VAL,
+      "--adaptive-brightness": ADAPTIVE_BRIGHTNESS_VAL,
+    };
+  }
+  return adaptiveStyles.value;
+});
+
+let dragMoved = false;
+let dragStartClientX = 0;
+let dragStartClientY = 0;
+
+function onMouseDown(event) {
+  dragMoved = false;
+  dragStartClientX = event.clientX;
+  dragStartClientY = event.clientY;
+  emit("drag", event);
+}
+
+function onMouseUp(event) {
+  const deltaX = event.clientX - dragStartClientX;
+  const deltaY = event.clientY - dragStartClientY;
+  if (Math.hypot(deltaX, deltaY) > dragThreshold) {
+    dragMoved = true;
+  }
+}
+
+function onCenterClick(event) {
+  event.stopPropagation();
+  if (!dragMoved) {
+    emit("click", event);
+  }
+}
+</script>
+
+<template>
+  <v-btn
+    ref="activatorBtn"
+    icon
+    variant="outlined"
+    class="central-selector-btn elevation-6"
+    style="width: 52px; height: 52px; z-index: 5"
+    :style="computedItemStyles"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+    @click.stop="onCenterClick"
+  >
+    <v-icon
+      icon="mdi-information-outline"
+      size="28"
+      color="primary"
+      style="pointer-events: none"
+    />
+  </v-btn>
+</template>
+
+<style scoped>
+.central-selector-btn {
+  background: transparent !important;
+  border: 2px solid rgba(var(--v-theme-primary), 0.35) !important;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.central-selector-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.2s ease,
+    backdrop-filter 0.2s ease;
+}
+
+.central-selector-btn:hover {
+  transform: scale(1.08);
+  border-color: rgba(var(--v-theme-primary), 0.85) !important;
+}
+
+.central-selector-btn:hover::before {
+  background: rgba(255, 255, 255, calc(var(--adaptive-opacity, 0.15) + 0.15));
+}
+</style>
diff --git a/app/components/Viewer/ContextMenu/CircularItems.vue b/app/components/Viewer/ContextMenu/CircularItems.vue
new file mode 100644
index 000000000..3325c83b9
--- /dev/null
+++ b/app/components/Viewer/ContextMenu/CircularItems.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const { menuItems, id, metaData, menuItemCount } = defineProps({
+  menuItems: { type: Array, required: true },
+  id: { type: String, required: true },
+  metaData: { type: Object, required: true },
+  menuItemCount: { type: Number, required: true },
+});
+
+const RADIUS = 80;
+const Z_INDEX_ACTIVE_ITEM = 10;
+const Z_INDEX_BASE_ITEM = 1;
+const FULL_ANGLE = 360;
+const ANGLE_45 = 45;
+const ANGLE_135 = 135;
+const ANGLE_225 = 225;
+const ANGLE_315 = 315;
+
+const menuStore = useMenuStore();
+
+function getItemStyle(index) {
+  const angle = (index / menuItemCount) * 2 * Math.PI;
+  return {
+    transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
+    transition: "opacity 0.2s ease, transform 0.2s ease",
+    position: "absolute",
+    zIndex:
+      menuStore.active_item_index === index
+        ? Z_INDEX_ACTIVE_ITEM
+        : Z_INDEX_BASE_ITEM,
+  };
+}
+
+function getTooltipLocation(index) {
+  const angle = (index / menuItemCount) * FULL_ANGLE;
+  if (angle < ANGLE_45 || angle >= ANGLE_315) {
+    return "right";
+  }
+  if (angle >= ANGLE_45 && angle < ANGLE_135) {
+    return "top";
+  }
+  if (angle >= ANGLE_135 && angle < ANGLE_225) {
+    return "left";
+  }
+  return "bottom";
+}
+
+function getTooltipOrigin(index) {
+  const angle = (index / menuItemCount) * FULL_ANGLE;
+  if (angle < ANGLE_45 || angle >= ANGLE_315) {
+    return "left";
+  }
+  if (angle >= ANGLE_45 && angle < ANGLE_135) {
+    return "bottom";
+  }
+  if (angle >= ANGLE_135 && angle < ANGLE_225) {
+    return "right";
+  }
+  return "top";
+}
+</script>
+
+<template>
+  <component
+    v-for="(item, index) in menuItems"
+    :is="item"
+    :key="index"
+    :index="index"
+    :itemProps="{
+      id: id,
+      meta_data: metaData,
+      tooltip_location: getTooltipLocation(index),
+      tooltip_origin: getTooltipOrigin(index),
+      totalItems: menuItemCount,
+    }"
+    class="menu-item-wrapper"
+    :style="getItemStyle(index)"
+    @mousedown.stop
+  />
+</template>
+
+<style scoped>
+.menu-item-wrapper {
+  position: absolute;
+  transform-origin: center;
+  will-change: transform, opacity;
+}
+</style>
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
new file mode 100644
index 000000000..e8347903d
--- /dev/null
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -0,0 +1,211 @@
+<script setup>
+import { computed, ref, shallowRef, watch } from "vue";
+import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton";
+import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems";
+import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard";
+import { useEventListener } from "@vueuse/core";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const {
+  id,
+  x,
+  y,
+  containerWidth,
+  containerHeight,
+} = defineProps({
+  id: { type: String, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true },
+  containerWidth: { type: Number, required: true },
+  containerHeight: { type: Number, required: true },
+});
+
+const RADIUS = 80;
+const MARGIN_OFFSET = 40;
+const CLOSE_DELAY = 100;
+const TREEVIEW_MARGIN_LEFT = 10;
+const TREEVIEW_ICON_WIDTH = 48;
+const TREEVIEW_MARGIN_RIGHT = 20;
+
+const menuStore = useMenuStore();
+const treeviewStore = useTreeviewStore();
+
+const meta_data = computed(() => menuStore.current_meta_data || {});
+
+const show_menu = ref(true);
+const showName = ref(false);
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const menuX = ref(x);
+const menuY = ref(y);
+
+watch(
+  () => [x, y, containerWidth, containerHeight],
+  ([newX, newY]) => {
+    const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
+    menuX.value = clampedX;
+    menuY.value = clampedY;
+    menuStore.setMenuPosition(clampedX, clampedY);
+  },
+  { immediate: true },
+);
+
+useEventListener(
+  globalThis,
+  "mousemove",
+  (event) => {
+    if (!isDragging.value) {
+      return;
+    }
+    handleDrag(event);
+  },
+  { passive: true },
+);
+
+useEventListener(globalThis, "mouseup", (event) => {
+  if (!isDragging.value) {
+    return;
+  }
+  stopDrag(event);
+});
+
+const menu_items = shallowRef([]);
+watch(
+  () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
+  ([viewer_type, geode_object_type]) => {
+    menu_items.value = menuStore.getMenuItems(viewer_type, geode_object_type);
+  },
+  { immediate: true },
+);
+
+const menuItemCount = computed(() => menu_items.value.length);
+
+const isOverTreeview = computed(() => {
+  const hasAdditional = treeviewStore.opened_views.some(
+    (view) => view.id !== "main",
+  );
+  const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  const treeviewWidth =
+    TREEVIEW_MARGIN_LEFT +
+    TREEVIEW_ICON_WIDTH +
+    firstColWidth +
+    secondColWidth +
+    TREEVIEW_MARGIN_RIGHT;
+  return menuX.value < treeviewWidth;
+});
+
+function startDrag(event) {
+  isDragging.value = true;
+  dragStartX.value = event.clientX - menuX.value;
+  dragStartY.value = event.clientY - menuY.value;
+}
+
+function clampPosition(posX, posY) {
+  const margin = RADIUS + MARGIN_OFFSET;
+  return {
+    x: Math.min(Math.max(posX, margin), containerWidth - margin),
+    y: Math.min(Math.max(posY, margin), containerHeight - margin),
+  };
+}
+
+function handleDrag(event) {
+  const { x: clampedX, y: clampedY } = clampPosition(
+    event.clientX - dragStartX.value,
+    event.clientY - dragStartY.value,
+  );
+  menuX.value = clampedX;
+  menuY.value = clampedY;
+  menuStore.setMenuPosition(clampedX, clampedY);
+}
+
+function stopDrag(event) {
+  isDragging.value = false;
+  event.stopPropagation();
+  menuStore.setMenuPosition(menuX.value, menuY.value);
+}
+
+function getMenuStyle() {
+  return {
+    position: "fixed",
+    left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
+    top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
+  };
+}
+
+function toggleShowName() {
+  showName.value = !showName.value;
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="show_menu"
+    content-class="circular-menu-container"
+    :style="getMenuStyle()"
+    :close-on-content-click="false"
+    :close-delay="CLOSE_DELAY"
+    :overlay="false"
+  >
+    <div class="circular-menu-drag-handle" @mousedown.stop="startDrag">
+      <div
+        class="circular-menu-items"
+        :style="{ width: `${RADIUS * 2}px`, height: `${RADIUS * 2}px` }"
+      >
+        <CircularItems
+          :menu-items="menu_items"
+          :id="id"
+          :meta-data="meta_data"
+          :menu-item-count="menuItemCount"
+        />
+
+        <CenterButton
+          :is-over-treeview="isOverTreeview"
+          @drag="startDrag"
+          @click="toggleShowName"
+        />
+
+        <InfoCard
+          v-model:show="showName"
+          :meta-data="meta_data"
+        />
+      </div>
+    </div>
+  </v-menu>
+</template>
+
+<style scoped>
+:deep(.circular-menu-container) {
+  overflow: visible !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: transparent !important;
+  contain: none !important;
+}
+
+.circular-menu-drag-handle {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.circular-menu-drag-handle:active {
+  cursor: grabbing;
+}
+
+.circular-menu-items {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: transparent;
+  border: none;
+}
+</style>
diff --git a/app/components/Viewer/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
similarity index 84%
rename from app/components/Viewer/ContextMenuItem.vue
rename to app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 78f23c03c..baaef168a 100644
--- a/app/components/Viewer/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -35,7 +35,9 @@ const buttonCoords = computed(() => {
   };
 });
 
-const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, { maxOpacity: 0.85 });
+const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, {
+  maxOpacity: 0.85,
+});
 
 const TREEVIEW_MARGIN_LEFT = 10;
 const TREEVIEW_MARGIN_RIGHT = 20;
@@ -43,7 +45,9 @@ const TREEVIEW_ICON_WIDTH = 48;
 
 const treeviewStore = useTreeviewStore();
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
+  const hasAdditional = treeviewStore.opened_views.some(
+    (view) => view.id !== "main",
+  );
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
@@ -71,7 +75,9 @@ const is_active = computed(() => menuStore.active_item_index === index);
 const optionsRef = ref(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
-const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
+const maxCardHeight = computed(() =>
+  Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
+);
 
 const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
@@ -86,8 +92,12 @@ const optionsStyle = computed(() => {
 
   if (absoluteButtonY - height / 2 < margin) {
     offsetY = margin - (absoluteButtonY - height / 2);
-  } else if (absoluteButtonY + height / 2 > menuStore.containerHeight - margin) {
-    offsetY = menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
+  } else if (
+    absoluteButtonY + height / 2 >
+    menuStore.containerHeight - margin
+  ) {
+    offsetY =
+      menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
   }
   return { top: `calc(50% + ${offsetY}px)` };
 });
@@ -97,11 +107,14 @@ const optionsClass = computed(() => {
   const margin = MARGIN;
   const radius = RADIUS;
   if (loc === "right") {
-    return menuStore.menuX + radius + margin + CARD_WIDTH > menuStore.containerWidth
+    return menuStore.menuX + radius + margin + CARD_WIDTH >
+      menuStore.containerWidth
       ? "options-left"
       : "options-right";
   }
-  return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
+  return menuStore.menuX - radius - margin - CARD_WIDTH < 0
+    ? "options-right"
+    : "options-left";
 });
 
 function toggleOptions() {
@@ -110,7 +123,10 @@ function toggleOptions() {
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">
-    <v-tooltip :location="itemProps.tooltip_location" :origin="itemProps.tooltip_origin">
+    <v-tooltip
+      :location="itemProps.tooltip_location"
+      :origin="itemProps.tooltip_origin"
+    >
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
           ref="itemBtnRef"
@@ -154,7 +170,10 @@ function toggleOptions() {
         style="overflow: hidden; display: flex; flex-direction: column"
       >
         <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
+        <v-card-text
+          class="pa-5"
+          style="overflow-y: auto; flex: 1; min-height: 0"
+        >
           <slot name="options" />
         </v-card-text>
       </GlassCard>
@@ -188,8 +207,10 @@ function toggleOptions() {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
new file mode 100644
index 000000000..103c9bf4a
--- /dev/null
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -0,0 +1,195 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import GlassCard from "@ogw_front/components/GlassCard";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useMenuStore } from "@ogw_front/stores/menu";
+
+const { show, metaData } = defineProps({
+  show: { type: Boolean, required: true },
+  metaData: { type: Object, required: true },
+});
+
+const emit = defineEmits(["update:show"]);
+
+const COPIED_TIMEOUT = 1500;
+const MAX_SHORT_ID_LENGTH = 15;
+const ID_SLICE_START = 8;
+const ID_SLICE_END_OFFSET = 7;
+
+const menuStore = useMenuStore();
+const dataStore = useDataStore();
+
+const componentName = ref("");
+
+watch(
+  () => menuStore.current_meta_data,
+  async (newMeta) => {
+    componentName.value = "";
+    if (!newMeta) {
+      return;
+    }
+
+    if (
+      newMeta.viewer_type === "model_component" &&
+      newMeta.modelId &&
+      newMeta.pickedComponentId
+    ) {
+      try {
+        const comp = await dataStore.getComponentByViewerId(
+          newMeta.modelId,
+          newMeta.pickedComponentId,
+        );
+        if (comp && comp.name) {
+          componentName.value = comp.name;
+        } else {
+          componentName.value = newMeta.pickedComponentId;
+        }
+      } catch {
+        componentName.value = newMeta.pickedComponentId;
+      }
+    } else if (newMeta.id && newMeta.pickedComponentId) {
+      try {
+        const comp = await dataStore.getComponentByViewerId(
+          newMeta.id,
+          newMeta.pickedComponentId,
+        );
+        if (comp && comp.name) {
+          componentName.value = comp.name;
+        }
+      } catch {
+        // Component not found in DB, fallback to default name
+      }
+    }
+  },
+  { immediate: true },
+);
+
+const cleanName = computed(() => {
+  const meta = menuStore.current_meta_data;
+  if (!meta) {
+    return "Unnamed Object";
+  }
+  if (componentName.value) {
+    return componentName.value;
+  }
+  return meta.name || "Unnamed Object";
+});
+
+const copied = ref(false);
+async function copyId(targetId) {
+  if (!targetId) {
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(targetId);
+    copied.value = true;
+    setTimeout(() => {
+      copied.value = false;
+    }, COPIED_TIMEOUT);
+  } catch (error) {
+    console.error("Failed to copy ID:", error);
+  }
+}
+
+const formattedId = computed(() => {
+  const metaId = metaData?.id;
+  if (!metaId) {
+    return "";
+  }
+  if (metaId.length <= MAX_SHORT_ID_LENGTH) {
+    return metaId;
+  }
+  return `${metaId.slice(0, ID_SLICE_START)}...${metaId.slice(metaId.length - ID_SLICE_END_OFFSET)}`;
+});
+</script>
+
+<template>
+  <!-- Direct local name display (no teleportation, no lag!) -->
+  <v-fade-transition>
+    <v-sheet
+      v-if="show"
+      class="object-name-popover bg-transparent"
+      @mousedown.stop
+      @click.stop
+    >
+      <GlassCard
+        variant="panel"
+        padding="pa-2 px-3"
+        rounded="lg"
+        class="elevation-12 text-center border-thin"
+        min-width="140"
+        max-width="250"
+      >
+        <v-row no-gutters class="flex-column align-center">
+          <v-col
+            class="text-subtitle-2 font-weight-bold text-truncate text-white w-100 pa-0"
+            cols="auto"
+            style="line-height: 1.3"
+          >
+            {{ cleanName }}
+          </v-col>
+          <v-col
+            class="text-caption font-weight-black text-uppercase text-secondary pa-0"
+            style="font-size: 0.68rem; line-height: 1.2"
+          >
+            {{ metaData.geode_object_type }}
+          </v-col>
+          <v-col
+            v-if="metaData.id"
+            class="id-badge-container mt-1 d-inline-flex align-center px-2 py-0.5"
+            @click.stop="copyId(metaData.id)"
+          >
+            <span class="id-text">
+              {{ copied ? "COPIED!" : formattedId }}
+            </span>
+            <v-icon
+              :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+              size="10"
+              :color="copied ? 'success' : 'white'"
+              class="ml-1"
+            />
+          </v-col>
+        </v-row>
+      </GlassCard>
+    </v-sheet>
+  </v-fade-transition>
+</template>
+
+<style scoped>
+.id-badge-container {
+  font-family: monospace;
+  font-size: 0.6rem;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  opacity: 0.8;
+}
+
+.id-badge-container:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.35);
+  opacity: 1;
+  transform: scale(1.03);
+}
+
+.id-badge-container:active {
+  transform: scale(0.97);
+}
+
+.id-text {
+  letter-spacing: 0.5px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.object-name-popover {
+  position: absolute;
+  bottom: 110px; /* Positions it beautifully above the circular menu */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  pointer-events: auto;
+}
+</style>
diff --git a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
index 7718d061c..4a2ed14af 100644
--- a/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
+++ b/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue
@@ -1,6 +1,6 @@
 <script setup>
 import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
diff --git a/app/components/Viewer/Generic/Mesh/CellsOptions.vue b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
index 8f2113121..b71b6b038 100644
--- a/app/components/Viewer/Generic/Mesh/CellsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/CellsOptions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
index 7c5f06fa8..b58bab084 100644
--- a/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/EdgesOptions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
diff --git a/app/components/Viewer/Generic/Mesh/PointsOptions.vue b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
index 515243c7d..e588588b8 100644
--- a/app/components/Viewer/Generic/Mesh/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PointsOptions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
diff --git a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
index 312792e69..aa54c0f80 100644
--- a/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
index 54ca1a04b..02fd35dad 100644
--- a/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
+++ b/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/Generic/Model/EdgesOptions.vue b/app/components/Viewer/Generic/Model/EdgesOptions.vue
index 8461d40c7..df74cfcbc 100644
--- a/app/components/Viewer/Generic/Model/EdgesOptions.vue
+++ b/app/components/Viewer/Generic/Model/EdgesOptions.vue
@@ -1,6 +1,6 @@
 <script setup>
 import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
diff --git a/app/components/Viewer/Generic/Model/ModelStyleOptions.vue b/app/components/Viewer/Generic/Model/ModelStyleOptions.vue
index 591bf2fd1..f92ba98d8 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleOptions.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleOptions.vue
@@ -1,7 +1,7 @@
 <script setup>
 import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
 import ModelStyleCard from "./ModelStyleCard.vue";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 
 const { itemProps } = defineProps({
   itemProps: { type: Object, required: true },
diff --git a/app/components/Viewer/Generic/Model/PointsOptions.vue b/app/components/Viewer/Generic/Model/PointsOptions.vue
index 55ae3da18..5779497b5 100644
--- a/app/components/Viewer/Generic/Model/PointsOptions.vue
+++ b/app/components/Viewer/Generic/Model/PointsOptions.vue
@@ -1,6 +1,6 @@
 <script setup>
 import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/PointSet/SpecificPointsOptions.vue b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
index 18b96b84a..3f54bfe47 100644
--- a/app/components/Viewer/PointSet/SpecificPointsOptions.vue
+++ b/app/components/Viewer/PointSet/SpecificPointsOptions.vue
@@ -1,6 +1,6 @@
 <script setup>
 import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
index 0bc177c41..7f41db964 100644
--- a/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
+++ b/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue
@@ -1,6 +1,6 @@
 <script setup>
 import SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/Surface/PolygonsOptions.vue b/app/components/Viewer/Surface/PolygonsOptions.vue
index 3aef9dad5..5cf0e00cf 100644
--- a/app/components/Viewer/Surface/PolygonsOptions.vue
+++ b/app/components/Viewer/Surface/PolygonsOptions.vue
@@ -1,6 +1,6 @@
 <script setup>
 import PolygonalSurfacePolygons from "@ogw_front/assets/viewer_svgs/surface_triangles.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 655ad2190..85acf4420 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,6 +1,6 @@
 <script setup>
 import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker";
-import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
+import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import { getCurrentInstance } from "vue";
 import { useMenuStore } from "@ogw_front/stores/menu";
diff --git a/app/composables/use_overlapping_picker.js b/app/composables/use_overlapping_picker.js
index bd449c5f6..2ea2647b4 100644
--- a/app/composables/use_overlapping_picker.js
+++ b/app/composables/use_overlapping_picker.js
@@ -104,14 +104,22 @@ export function useOverlappingPicker() {
 
     const yUI = containerHeight - y;
     const MENU_WIDTH = 340;
-    const MENU_HEIGHT = 280;
+    const MENU_BASE_HEIGHT = 55;
+    const MENU_ITEM_HEIGHT = 48;
+    const MENU_HEIGHT = MENU_BASE_HEIGHT + proposedItems.length * MENU_ITEM_HEIGHT;
     const CLAMP_MARGIN = 10;
     const clampedX = Math.min(
       Math.max(x, CLAMP_MARGIN),
       containerWidth - MENU_WIDTH - CLAMP_MARGIN,
     );
-    const clampedY = Math.min(
-      Math.max(yUI, CLAMP_MARGIN),
+    let clampedY = yUI;
+    if (yUI + MENU_HEIGHT > containerHeight - CLAMP_MARGIN) {
+      clampedY = Math.max(yUI - MENU_HEIGHT, CLAMP_MARGIN);
+    } else {
+      clampedY = Math.max(yUI, CLAMP_MARGIN);
+    }
+    clampedY = Math.min(
+      Math.max(clampedY, CLAMP_MARGIN),
       containerHeight - MENU_HEIGHT - CLAMP_MARGIN,
     );
 

From 71824289427746182c3007b278d5029394d46904 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 19 May 2026 12:10:45 +0000
Subject: [PATCH 09/24] Apply prepare changes

---
 .../Viewer/ContextMenu/CenterButton.vue       | 13 ++-----
 .../Viewer/ContextMenu/CircularItems.vue      |  5 +--
 .../Viewer/ContextMenu/ContextMenu.vue        | 17 ++------
 .../Viewer/ContextMenu/ContextMenuItem.vue    | 39 +++++--------------
 .../Viewer/ContextMenu/InfoCard.vue           | 18 ++-------
 5 files changed, 20 insertions(+), 72 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index f812cf73c..4f333a322 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -68,12 +68,7 @@ function onCenterClick(event) {
     @mouseup="onMouseUp"
     @click.stop="onCenterClick"
   >
-    <v-icon
-      icon="mdi-information-outline"
-      size="28"
-      color="primary"
-      style="pointer-events: none"
-    />
+    <v-icon icon="mdi-information-outline" size="28" color="primary" style="pointer-events: none" />
   </v-btn>
 </template>
 
@@ -91,10 +86,8 @@ function onCenterClick(event) {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/ContextMenu/CircularItems.vue b/app/components/Viewer/ContextMenu/CircularItems.vue
index 3325c83b9..81ef991d0 100644
--- a/app/components/Viewer/ContextMenu/CircularItems.vue
+++ b/app/components/Viewer/ContextMenu/CircularItems.vue
@@ -25,10 +25,7 @@ function getItemStyle(index) {
     transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
     transition: "opacity 0.2s ease, transform 0.2s ease",
     position: "absolute",
-    zIndex:
-      menuStore.active_item_index === index
-        ? Z_INDEX_ACTIVE_ITEM
-        : Z_INDEX_BASE_ITEM,
+    zIndex: menuStore.active_item_index === index ? Z_INDEX_ACTIVE_ITEM : Z_INDEX_BASE_ITEM,
   };
 }
 
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index e8347903d..b939b8486 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -7,13 +7,7 @@ import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const {
-  id,
-  x,
-  y,
-  containerWidth,
-  containerHeight,
-} = defineProps({
+const { id, x, y, containerWidth, containerHeight } = defineProps({
   id: { type: String, required: true },
   x: { type: Number, required: true },
   y: { type: Number, required: true },
@@ -83,9 +77,7 @@ watch(
 const menuItemCount = computed(() => menu_items.value.length);
 
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(
-    (view) => view.id !== "main",
-  );
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
@@ -168,10 +160,7 @@ function toggleShowName() {
           @click="toggleShowName"
         />
 
-        <InfoCard
-          v-model:show="showName"
-          :meta-data="meta_data"
-        />
+        <InfoCard v-model:show="showName" :meta-data="meta_data" />
       </div>
     </div>
   </v-menu>
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index baaef168a..cca8a126e 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -45,9 +45,7 @@ const TREEVIEW_ICON_WIDTH = 48;
 
 const treeviewStore = useTreeviewStore();
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(
-    (view) => view.id !== "main",
-  );
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
@@ -75,9 +73,7 @@ const is_active = computed(() => menuStore.active_item_index === index);
 const optionsRef = ref(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
-const maxCardHeight = computed(() =>
-  Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
-);
+const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
 
 const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
@@ -92,12 +88,8 @@ const optionsStyle = computed(() => {
 
   if (absoluteButtonY - height / 2 < margin) {
     offsetY = margin - (absoluteButtonY - height / 2);
-  } else if (
-    absoluteButtonY + height / 2 >
-    menuStore.containerHeight - margin
-  ) {
-    offsetY =
-      menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
+  } else if (absoluteButtonY + height / 2 > menuStore.containerHeight - margin) {
+    offsetY = menuStore.containerHeight - margin - (absoluteButtonY + height / 2);
   }
   return { top: `calc(50% + ${offsetY}px)` };
 });
@@ -107,14 +99,11 @@ const optionsClass = computed(() => {
   const margin = MARGIN;
   const radius = RADIUS;
   if (loc === "right") {
-    return menuStore.menuX + radius + margin + CARD_WIDTH >
-      menuStore.containerWidth
+    return menuStore.menuX + radius + margin + CARD_WIDTH > menuStore.containerWidth
       ? "options-left"
       : "options-right";
   }
-  return menuStore.menuX - radius - margin - CARD_WIDTH < 0
-    ? "options-right"
-    : "options-left";
+  return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
 });
 
 function toggleOptions() {
@@ -123,10 +112,7 @@ function toggleOptions() {
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">
-    <v-tooltip
-      :location="itemProps.tooltip_location"
-      :origin="itemProps.tooltip_origin"
-    >
+    <v-tooltip :location="itemProps.tooltip_location" :origin="itemProps.tooltip_origin">
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
           ref="itemBtnRef"
@@ -170,10 +156,7 @@ function toggleOptions() {
         style="overflow: hidden; display: flex; flex-direction: column"
       >
         <v-card-title>{{ tooltip }}</v-card-title>
-        <v-card-text
-          class="pa-5"
-          style="overflow-y: auto; flex: 1; min-height: 0"
-        >
+        <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>
       </GlassCard>
@@ -207,10 +190,8 @@ function toggleOptions() {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index 103c9bf4a..84b5f3c26 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -29,11 +29,7 @@ watch(
       return;
     }
 
-    if (
-      newMeta.viewer_type === "model_component" &&
-      newMeta.modelId &&
-      newMeta.pickedComponentId
-    ) {
+    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
       try {
         const comp = await dataStore.getComponentByViewerId(
           newMeta.modelId,
@@ -49,10 +45,7 @@ watch(
       }
     } else if (newMeta.id && newMeta.pickedComponentId) {
       try {
-        const comp = await dataStore.getComponentByViewerId(
-          newMeta.id,
-          newMeta.pickedComponentId,
-        );
+        const comp = await dataStore.getComponentByViewerId(newMeta.id, newMeta.pickedComponentId);
         if (comp && comp.name) {
           componentName.value = comp.name;
         }
@@ -106,12 +99,7 @@ const formattedId = computed(() => {
 <template>
   <!-- Direct local name display (no teleportation, no lag!) -->
   <v-fade-transition>
-    <v-sheet
-      v-if="show"
-      class="object-name-popover bg-transparent"
-      @mousedown.stop
-      @click.stop
-    >
+    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
       <GlassCard
         variant="panel"
         padding="pa-2 px-3"

From a8c95a976dac1ff3a6ec082945e972a8aa15b651 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 15:16:40 +0200
Subject: [PATCH 10/24] rm useless ref

---
 app/components/Viewer/ContextMenu/ContextMenuItem.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index cca8a126e..da309aa7c 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -115,7 +115,6 @@ function toggleOptions() {
     <v-tooltip :location="itemProps.tooltip_location" :origin="itemProps.tooltip_origin">
       <template v-slot:activator="{ props: tooltipProps }">
         <v-btn
-          ref="itemBtnRef"
           icon
           variant="outlined"
           :active="is_active"

From cc67efa4427b65a2f071d345c46c1fecdfae05e3 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 15:18:28 +0200
Subject: [PATCH 11/24] rm useless imports

---
 .../Viewer/ContextMenu/CenterButton.vue       | 14 ++++++++++----
 .../Viewer/ContextMenu/ContextMenu.vue        |  5 +++--
 .../Viewer/ContextMenu/InfoCard.vue           | 19 +++++++++++++++----
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 4f333a322..22e1beb0f 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, ref } from "vue";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
 const { isOverTreeview } = defineProps({
@@ -68,7 +67,12 @@ function onCenterClick(event) {
     @mouseup="onMouseUp"
     @click.stop="onCenterClick"
   >
-    <v-icon icon="mdi-information-outline" size="28" color="primary" style="pointer-events: none" />
+    <v-icon
+      icon="mdi-information-outline"
+      size="28"
+      color="primary"
+      style="pointer-events: none"
+    />
   </v-btn>
 </template>
 
@@ -86,8 +90,10 @@ function onCenterClick(event) {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur))
+    brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index b939b8486..c1ae65baa 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, ref, shallowRef, watch } from "vue";
 import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton";
 import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems";
 import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard";
@@ -77,7 +76,9 @@ watch(
 const menuItemCount = computed(() => menu_items.value.length);
 
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
+  const hasAdditional = treeviewStore.opened_views.some(
+    (view) => view.id !== "main",
+  );
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index 84b5f3c26..eda599a62 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, ref, watch } from "vue";
 import GlassCard from "@ogw_front/components/GlassCard";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useMenuStore } from "@ogw_front/stores/menu";
@@ -29,7 +28,11 @@ watch(
       return;
     }
 
-    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
+    if (
+      newMeta.viewer_type === "model_component" &&
+      newMeta.modelId &&
+      newMeta.pickedComponentId
+    ) {
       try {
         const comp = await dataStore.getComponentByViewerId(
           newMeta.modelId,
@@ -45,7 +48,10 @@ watch(
       }
     } else if (newMeta.id && newMeta.pickedComponentId) {
       try {
-        const comp = await dataStore.getComponentByViewerId(newMeta.id, newMeta.pickedComponentId);
+        const comp = await dataStore.getComponentByViewerId(
+          newMeta.id,
+          newMeta.pickedComponentId,
+        );
         if (comp && comp.name) {
           componentName.value = comp.name;
         }
@@ -99,7 +105,12 @@ const formattedId = computed(() => {
 <template>
   <!-- Direct local name display (no teleportation, no lag!) -->
   <v-fade-transition>
-    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
+    <v-sheet
+      v-if="show"
+      class="object-name-popover bg-transparent"
+      @mousedown.stop
+      @click.stop
+    >
       <GlassCard
         variant="panel"
         padding="pa-2 px-3"

From 7c8bde4cce7144e52281621e025f9162b5f1453a Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 19 May 2026 13:19:58 +0000
Subject: [PATCH 12/24] Apply prepare changes

---
 .../Viewer/ContextMenu/CenterButton.vue        | 13 +++----------
 .../Viewer/ContextMenu/ContextMenu.vue         |  4 +---
 app/components/Viewer/ContextMenu/InfoCard.vue | 18 +++---------------
 3 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 22e1beb0f..9dfe6e843 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -67,12 +67,7 @@ function onCenterClick(event) {
     @mouseup="onMouseUp"
     @click.stop="onCenterClick"
   >
-    <v-icon
-      icon="mdi-information-outline"
-      size="28"
-      color="primary"
-      style="pointer-events: none"
-    />
+    <v-icon icon="mdi-information-outline" size="28" color="primary" style="pointer-events: none" />
   </v-btn>
 </template>
 
@@ -90,10 +85,8 @@ function onCenterClick(event) {
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, var(--adaptive-opacity));
-  backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
-  -webkit-backdrop-filter: blur(var(--adaptive-blur))
-    brightness(var(--adaptive-brightness));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
   z-index: 0;
   pointer-events: none;
   border-radius: inherit;
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index c1ae65baa..26617a0bf 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -76,9 +76,7 @@ watch(
 const menuItemCount = computed(() => menu_items.value.length);
 
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(
-    (view) => view.id !== "main",
-  );
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index eda599a62..c767b3bd2 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -28,11 +28,7 @@ watch(
       return;
     }
 
-    if (
-      newMeta.viewer_type === "model_component" &&
-      newMeta.modelId &&
-      newMeta.pickedComponentId
-    ) {
+    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
       try {
         const comp = await dataStore.getComponentByViewerId(
           newMeta.modelId,
@@ -48,10 +44,7 @@ watch(
       }
     } else if (newMeta.id && newMeta.pickedComponentId) {
       try {
-        const comp = await dataStore.getComponentByViewerId(
-          newMeta.id,
-          newMeta.pickedComponentId,
-        );
+        const comp = await dataStore.getComponentByViewerId(newMeta.id, newMeta.pickedComponentId);
         if (comp && comp.name) {
           componentName.value = comp.name;
         }
@@ -105,12 +98,7 @@ const formattedId = computed(() => {
 <template>
   <!-- Direct local name display (no teleportation, no lag!) -->
   <v-fade-transition>
-    <v-sheet
-      v-if="show"
-      class="object-name-popover bg-transparent"
-      @mousedown.stop
-      @click.stop
-    >
+    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
       <GlassCard
         variant="panel"
         padding="pa-2 px-3"

From 73583a291ca3d2a2f20b53e52b1ba65ad7fc0d5d Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 15:21:27 +0200
Subject: [PATCH 13/24] isOverToolbar

---
 app/components/ViewToolbar.vue                  |  2 +-
 .../Viewer/ContextMenu/CenterButton.vue         |  5 +++--
 .../Viewer/ContextMenu/ContextMenu.vue          | 17 +++++++++++++++++
 .../Viewer/ContextMenu/ContextMenuItem.vue      | 15 ++++++++++++++-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index 9856f2fd1..3921e38f1 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -135,7 +135,7 @@ const camera_options = computed(() => [
 </script>
 
 <template>
-  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
+  <v-container :class="[$style.floatToolbar, 'pa-0', 'view-toolbar']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <v-menu v-if="camera_option.menu" location="start" :close-on-content-click="false">
diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 22e1beb0f..515ef428e 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -1,8 +1,9 @@
 <script setup>
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
-const { isOverTreeview } = defineProps({
+const { isOverTreeview, isOverToolbar } = defineProps({
   isOverTreeview: { type: Boolean, required: true },
+  isOverToolbar: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(["drag", "click"]);
@@ -18,7 +19,7 @@ const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
 });
 
 const computedItemStyles = computed(() => {
-  if (isOverTreeview) {
+  if (isOverTreeview || isOverToolbar) {
     return {
       "--adaptive-blur": ADAPTIVE_BLUR_VAL,
       "--adaptive-opacity": ADAPTIVE_OPACITY_VAL,
diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index c1ae65baa..e4875155c 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -91,6 +91,22 @@ const isOverTreeview = computed(() => {
   return menuX.value < treeviewWidth;
 });
 
+const isOverToolbar = computed(() => {
+  const toolbarEl = document.querySelector(".view-toolbar");
+  if (!toolbarEl) return false;
+  const rect = toolbarEl.getBoundingClientRect();
+  const btnX = menuStore.containerLeft + menuX.value - 26;
+  const btnY = menuStore.containerTop + menuY.value - 26;
+  const btnWidth = 52;
+  const btnHeight = 52;
+  return (
+    btnX < rect.right &&
+    btnX + btnWidth > rect.left &&
+    btnY < rect.bottom &&
+    btnY + btnHeight > rect.top
+  );
+});
+
 function startDrag(event) {
   isDragging.value = true;
   dragStartX.value = event.clientX - menuX.value;
@@ -157,6 +173,7 @@ function toggleShowName() {
 
         <CenterButton
           :is-over-treeview="isOverTreeview"
+          :is-over-toolbar="isOverToolbar"
           @drag="startDrag"
           @click="toggleShowName"
         />
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index da309aa7c..b7f428582 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -58,8 +58,21 @@ const isOverTreeview = computed(() => {
   return buttonCoords.value.x < treeviewWidth;
 });
 
+const isOverToolbar = computed(() => {
+  const toolbarEl = document.querySelector(".view-toolbar");
+  if (!toolbarEl) return false;
+  const rect = toolbarEl.getBoundingClientRect();
+  const btn = buttonCoords.value;
+  return (
+    btn.x < rect.right &&
+    btn.x + btn.width > rect.left &&
+    btn.y < rect.bottom &&
+    btn.y + btn.height > rect.top
+  );
+});
+
 const computedItemStyles = computed(() => {
-  if (isOverTreeview.value) {
+  if (isOverTreeview.value || isOverToolbar.value) {
     return {
       "--adaptive-blur": "15px",
       "--adaptive-opacity": 0.85,

From 999e1eec1fcb5f28537db0dbaa2f5a1ca8428dd2 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 15:26:07 +0200
Subject: [PATCH 14/24] oxlint

---
 .../Viewer/ContextMenu/ContextMenu.vue         | 18 ++++++++++++------
 .../Viewer/ContextMenu/ContextMenuItem.vue     |  4 +++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index 3785d821a..1455ccdd3 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -20,6 +20,8 @@ const CLOSE_DELAY = 100;
 const TREEVIEW_MARGIN_LEFT = 10;
 const TREEVIEW_ICON_WIDTH = 48;
 const TREEVIEW_MARGIN_RIGHT = 20;
+const CENTER_BUTTON_SIZE = 52;
+const CENTER_BUTTON_HALF_SIZE = 26;
 
 const menuStore = useMenuStore();
 const treeviewStore = useTreeviewStore();
@@ -76,7 +78,9 @@ watch(
 const menuItemCount = computed(() => menu_items.value.length);
 
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
+  const hasAdditional = treeviewStore.opened_views.some(
+    (view) => view.id !== "main",
+  );
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
@@ -91,12 +95,14 @@ const isOverTreeview = computed(() => {
 
 const isOverToolbar = computed(() => {
   const toolbarEl = document.querySelector(".view-toolbar");
-  if (!toolbarEl) return false;
+  if (!toolbarEl) {
+    return false;
+  }
   const rect = toolbarEl.getBoundingClientRect();
-  const btnX = menuStore.containerLeft + menuX.value - 26;
-  const btnY = menuStore.containerTop + menuY.value - 26;
-  const btnWidth = 52;
-  const btnHeight = 52;
+  const btnX = menuStore.containerLeft + menuX.value - CENTER_BUTTON_HALF_SIZE;
+  const btnY = menuStore.containerTop + menuY.value - CENTER_BUTTON_HALF_SIZE;
+  const btnWidth = CENTER_BUTTON_SIZE;
+  const btnHeight = CENTER_BUTTON_SIZE;
   return (
     btnX < rect.right &&
     btnX + btnWidth > rect.left &&
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index b7f428582..979a7f1db 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -60,7 +60,9 @@ const isOverTreeview = computed(() => {
 
 const isOverToolbar = computed(() => {
   const toolbarEl = document.querySelector(".view-toolbar");
-  if (!toolbarEl) return false;
+  if (!toolbarEl) {
+    return false;
+  }
   const rect = toolbarEl.getBoundingClientRect();
   const btn = buttonCoords.value;
   return (

From 3f3aded83be0061df93431d29a432e4ea181af29 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 19 May 2026 13:27:29 +0000
Subject: [PATCH 15/24] Apply prepare changes

---
 app/components/Viewer/ContextMenu/ContextMenu.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/ContextMenu.vue b/app/components/Viewer/ContextMenu/ContextMenu.vue
index 1455ccdd3..9dd800576 100644
--- a/app/components/Viewer/ContextMenu/ContextMenu.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenu.vue
@@ -78,9 +78,7 @@ watch(
 const menuItemCount = computed(() => menu_items.value.length);
 
 const isOverTreeview = computed(() => {
-  const hasAdditional = treeviewStore.opened_views.some(
-    (view) => view.id !== "main",
-  );
+  const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;

From 7c1bc45ed12f0757efb75389dea292161983b76c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 16:15:30 +0200
Subject: [PATCH 16/24] color button

---
 app/components/Viewer/ContextMenu/CenterButton.vue    | 3 ++-
 app/components/Viewer/ContextMenu/ContextMenuItem.vue | 3 ++-
 app/composables/use_adaptive_styles.js                | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 837167bfb..65715702a 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -15,7 +15,8 @@ const dragThreshold = 3;
 
 const activatorBtn = ref(undefined);
 const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
-  maxOpacity: 0.85,
+  minOpacity: 0.15,
+  maxOpacity: 1.0,
 });
 
 const computedItemStyles = computed(() => {
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index 979a7f1db..d89b7beb1 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -36,7 +36,8 @@ const buttonCoords = computed(() => {
 });
 
 const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, {
-  maxOpacity: 0.85,
+  minOpacity: 0.15,
+  maxOpacity: 1.0,
 });
 
 const TREEVIEW_MARGIN_LEFT = 10;
diff --git a/app/composables/use_adaptive_styles.js b/app/composables/use_adaptive_styles.js
index c3f728387..a3f41e291 100644
--- a/app/composables/use_adaptive_styles.js
+++ b/app/composables/use_adaptive_styles.js
@@ -83,8 +83,9 @@ export function useAdaptiveStyles(target, options = {}) {
     const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
 
     const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
+    const minOpacity = options.minOpacity ?? MIN_OPACITY;
     const maxOpacity = options.maxOpacity ?? MAX_OPACITY;
-    const opacity = MIN_OPACITY + darkFactor * (maxOpacity - MIN_OPACITY);
+    const opacity = minOpacity + darkFactor * (maxOpacity - minOpacity);
     const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
 
     return {

From 6f8d4efb2f1a15ac27ef726e3a22682109b033a1 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 16:57:57 +0200
Subject: [PATCH 17/24] oxc fix

---
 app/components/Viewer/ContextMenu/CenterButton.vue    | 2 +-
 app/components/Viewer/ContextMenu/ContextMenuItem.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index 65715702a..d74fe9cb4 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -16,7 +16,7 @@ const dragThreshold = 3;
 const activatorBtn = ref(undefined);
 const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
   minOpacity: 0.15,
-  maxOpacity: 1.0,
+  maxOpacity: 1,
 });
 
 const computedItemStyles = computed(() => {
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index d89b7beb1..cab09085e 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -37,7 +37,7 @@ const buttonCoords = computed(() => {
 
 const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, {
   minOpacity: 0.15,
-  maxOpacity: 1.0,
+  maxOpacity: 1,
 });
 
 const TREEVIEW_MARGIN_LEFT = 10;

From 437af352906beb9d1bc1b92c9067347b59f9cd7c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 17:24:58 +0200
Subject: [PATCH 18/24] center button

---
 .../Viewer/ContextMenu/CenterButton.vue         | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index d74fe9cb4..cc7182500 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
+import { useMenuStore } from "@ogw_front/stores/menu";
 
 const { isOverTreeview, isOverToolbar } = defineProps({
   isOverTreeview: { type: Boolean, required: true },
@@ -13,8 +14,19 @@ const ADAPTIVE_OPACITY_VAL = 0.85;
 const ADAPTIVE_BRIGHTNESS_VAL = 1.15;
 const dragThreshold = 3;
 
-const activatorBtn = ref(undefined);
-const { adaptiveStyles } = useAdaptiveStyles(activatorBtn, {
+const menuStore = useMenuStore();
+
+const centerButtonCoords = computed(() => {
+  const size = 52;
+  return {
+    x: menuStore.containerLeft + menuStore.menuX - size / 2,
+    y: menuStore.containerTop + menuStore.menuY - size / 2,
+    width: size,
+    height: size,
+  };
+});
+
+const { adaptiveStyles } = useAdaptiveStyles(centerButtonCoords, {
   minOpacity: 0.15,
   maxOpacity: 1,
 });
@@ -59,7 +71,6 @@ function onCenterClick(event) {
 
 <template>
   <v-btn
-    ref="activatorBtn"
     icon
     variant="outlined"
     class="central-selector-btn elevation-6"

From 1c0e4746bacca80372830e347091ccacc14bee13 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 19 May 2026 17:45:06 +0200
Subject: [PATCH 19/24] name troncate

---
 .../Viewer/ContextMenu/InfoCard.vue           | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index c767b3bd2..efaa5424b 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
+import { middleTruncate } from "@ogw_front/utils/string";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
@@ -14,6 +15,9 @@ const COPIED_TIMEOUT = 1500;
 const MAX_SHORT_ID_LENGTH = 15;
 const ID_SLICE_START = 8;
 const ID_SLICE_END_OFFSET = 7;
+const TRUNCATE_MAX_LENGTH = 22;
+const TRUNCATE_START_CHARS = 12;
+const TRUNCATE_END_CHARS = 7;
 
 const menuStore = useMenuStore();
 const dataStore = useDataStore();
@@ -28,7 +32,11 @@ watch(
       return;
     }
 
-    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
+    if (
+      newMeta.viewer_type === "model_component" &&
+      newMeta.modelId &&
+      newMeta.pickedComponentId
+    ) {
       try {
         const comp = await dataStore.getComponentByViewerId(
           newMeta.modelId,
@@ -44,7 +52,10 @@ watch(
       }
     } else if (newMeta.id && newMeta.pickedComponentId) {
       try {
-        const comp = await dataStore.getComponentByViewerId(newMeta.id, newMeta.pickedComponentId);
+        const comp = await dataStore.getComponentByViewerId(
+          newMeta.id,
+          newMeta.pickedComponentId,
+        );
         if (comp && comp.name) {
           componentName.value = comp.name;
         }
@@ -67,6 +78,19 @@ const cleanName = computed(() => {
   return meta.name || "Unnamed Object";
 });
 
+const displayTitle = computed(() => {
+  const name = cleanName.value;
+  if (!name) {
+    return "";
+  }
+  return middleTruncate(
+    name,
+    TRUNCATE_MAX_LENGTH,
+    TRUNCATE_START_CHARS,
+    TRUNCATE_END_CHARS,
+  );
+});
+
 const copied = ref(false);
 async function copyId(targetId) {
   if (!targetId) {
@@ -96,9 +120,13 @@ const formattedId = computed(() => {
 </script>
 
 <template>
-  <!-- Direct local name display (no teleportation, no lag!) -->
   <v-fade-transition>
-    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
+    <v-sheet
+      v-if="show"
+      class="object-name-popover bg-transparent"
+      @mousedown.stop
+      @click.stop
+    >
       <GlassCard
         variant="panel"
         padding="pa-2 px-3"
@@ -113,7 +141,7 @@ const formattedId = computed(() => {
             cols="auto"
             style="line-height: 1.3"
           >
-            {{ cleanName }}
+            {{ displayTitle }}
           </v-col>
           <v-col
             class="text-caption font-weight-black text-uppercase text-secondary pa-0"

From 3f55026da6c05f71e63863627369394ce7b29e38 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 19 May 2026 15:46:04 +0000
Subject: [PATCH 20/24] Apply prepare changes

---
 .../Viewer/ContextMenu/InfoCard.vue           | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index efaa5424b..f6ec8718e 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -32,11 +32,7 @@ watch(
       return;
     }
 
-    if (
-      newMeta.viewer_type === "model_component" &&
-      newMeta.modelId &&
-      newMeta.pickedComponentId
-    ) {
+    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
       try {
         const comp = await dataStore.getComponentByViewerId(
           newMeta.modelId,
@@ -52,10 +48,7 @@ watch(
       }
     } else if (newMeta.id && newMeta.pickedComponentId) {
       try {
-        const comp = await dataStore.getComponentByViewerId(
-          newMeta.id,
-          newMeta.pickedComponentId,
-        );
+        const comp = await dataStore.getComponentByViewerId(newMeta.id, newMeta.pickedComponentId);
         if (comp && comp.name) {
           componentName.value = comp.name;
         }
@@ -83,12 +76,7 @@ const displayTitle = computed(() => {
   if (!name) {
     return "";
   }
-  return middleTruncate(
-    name,
-    TRUNCATE_MAX_LENGTH,
-    TRUNCATE_START_CHARS,
-    TRUNCATE_END_CHARS,
-  );
+  return middleTruncate(name, TRUNCATE_MAX_LENGTH, TRUNCATE_START_CHARS, TRUNCATE_END_CHARS);
 });
 
 const copied = ref(false);
@@ -121,12 +109,7 @@ const formattedId = computed(() => {
 
 <template>
   <v-fade-transition>
-    <v-sheet
-      v-if="show"
-      class="object-name-popover bg-transparent"
-      @mousedown.stop
-      @click.stop
-    >
+    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
       <GlassCard
         variant="panel"
         padding="pa-2 px-3"

From a2932c18b8ca0f1ee082e0510fad58d607d73f11 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 20 May 2026 10:27:45 +0200
Subject: [PATCH 21/24] opacity

---
 app/components/Viewer/ContextMenu/CenterButton.vue   |  2 +-
 .../Viewer/ContextMenu/ContextMenuItem.vue           |  2 +-
 app/components/Viewer/ContextMenu/InfoCard.vue       | 12 ------------
 app/stores/data.js                                   |  5 +++++
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/app/components/Viewer/ContextMenu/CenterButton.vue b/app/components/Viewer/ContextMenu/CenterButton.vue
index cc7182500..6e355de9a 100644
--- a/app/components/Viewer/ContextMenu/CenterButton.vue
+++ b/app/components/Viewer/ContextMenu/CenterButton.vue
@@ -27,7 +27,7 @@ const centerButtonCoords = computed(() => {
 });
 
 const { adaptiveStyles } = useAdaptiveStyles(centerButtonCoords, {
-  minOpacity: 0.15,
+  minOpacity: 0.35,
   maxOpacity: 1,
 });
 
diff --git a/app/components/Viewer/ContextMenu/ContextMenuItem.vue b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
index cab09085e..532c0d08c 100644
--- a/app/components/Viewer/ContextMenu/ContextMenuItem.vue
+++ b/app/components/Viewer/ContextMenu/ContextMenuItem.vue
@@ -36,7 +36,7 @@ const buttonCoords = computed(() => {
 });
 
 const { adaptiveStyles } = useAdaptiveStyles(buttonCoords, {
-  minOpacity: 0.15,
+  minOpacity: 0.35,
   maxOpacity: 1,
 });
 
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index efaa5424b..a6d379cee 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -50,18 +50,6 @@ watch(
       } catch {
         componentName.value = newMeta.pickedComponentId;
       }
-    } else if (newMeta.id && newMeta.pickedComponentId) {
-      try {
-        const comp = await dataStore.getComponentByViewerId(
-          newMeta.id,
-          newMeta.pickedComponentId,
-        );
-        if (comp && comp.name) {
-          componentName.value = comp.name;
-        }
-      } catch {
-        // Component not found in DB, fallback to default name
-      }
     }
   },
   { immediate: true },
diff --git a/app/stores/data.js b/app/stores/data.js
index 12d5e4c1f..7dd9dfb88 100644
--- a/app/stores/data.js
+++ b/app/stores/data.js
@@ -24,6 +24,10 @@ export const useDataStore = defineStore("data", () => {
     return data_item;
   }
 
+  async function allItems() {
+    return await data_db.toArray();
+  }
+
   function refItem(id) {
     return useObservable(
       liveQuery(() => data_db.get(id)),
@@ -276,6 +280,7 @@ export const useDataStore = defineStore("data", () => {
   return {
     refAllItems,
     item,
+    allItems,
     refItem,
     meshComponentType,
     formatedMeshComponents,

From 7be4dec6807c269c16c400d132a356787bac2f5c Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 20 May 2026 08:28:52 +0000
Subject: [PATCH 22/24] Apply prepare changes

---
 .oxlintrc.json                                | 12 +++++------
 .../Viewer/ContextMenu/InfoCard.vue           | 20 +++----------------
 2 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/.oxlintrc.json b/.oxlintrc.json
index b895962c0..e7d7249e2 100644
--- a/.oxlintrc.json
+++ b/.oxlintrc.json
@@ -21,7 +21,7 @@
     "unicorn/prefer-ternary": "off",
     "oxc/no-async-await": "off",
     "oxc/no-rest-spread-properties": "off", // Enable if older browser support is needed
-    "eslint/max-statements": ["off", 20],
+    "eslint/max-statements": ["warn", 20],
     "eslint/id-length": [
       "error",
       {
@@ -29,7 +29,7 @@
         "min": 3
       }
     ],
-    "eslint/no-console": "off", // Disable for debugging. Disable later to not have browser logs
+    "eslint/no-console": "warn", // Disable for debugging. Disable later to not have browser logs
     "sort-imports": [
       "error",
       {
@@ -46,13 +46,13 @@
       }
     ],
     "import/max-dependencies": [
-      "off",
+      "warn",
       {
         "max": 10
       }
     ],
     "max-lines-per-function": [
-      "off",
+      "warn",
       {
         "max": 50,
         "skipBlankLines": true,
@@ -80,7 +80,7 @@
     "vitest/require-hook": "off",
     "import/unambiguous": "off",
     "max-params": [
-      "off",
+      "warn",
       {
         "max": 4
       }
@@ -129,7 +129,7 @@
         "max-statements": "off",
         "vitest/prefer-to-be-truthy": "off",
         "vitest/prefer-to-be-falsy": "off",
-        "vitest/require-test-timeout": "off",
+        "vitest/require-test-timeout": "warn",
         "vitest/prefer-importing-vitest-globals": "off",
         "jest/consistent-test-it": "off",
         "vitest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
diff --git a/app/components/Viewer/ContextMenu/InfoCard.vue b/app/components/Viewer/ContextMenu/InfoCard.vue
index a6d379cee..cf2b934ce 100644
--- a/app/components/Viewer/ContextMenu/InfoCard.vue
+++ b/app/components/Viewer/ContextMenu/InfoCard.vue
@@ -32,11 +32,7 @@ watch(
       return;
     }
 
-    if (
-      newMeta.viewer_type === "model_component" &&
-      newMeta.modelId &&
-      newMeta.pickedComponentId
-    ) {
+    if (newMeta.viewer_type === "model_component" && newMeta.modelId && newMeta.pickedComponentId) {
       try {
         const comp = await dataStore.getComponentByViewerId(
           newMeta.modelId,
@@ -71,12 +67,7 @@ const displayTitle = computed(() => {
   if (!name) {
     return "";
   }
-  return middleTruncate(
-    name,
-    TRUNCATE_MAX_LENGTH,
-    TRUNCATE_START_CHARS,
-    TRUNCATE_END_CHARS,
-  );
+  return middleTruncate(name, TRUNCATE_MAX_LENGTH, TRUNCATE_START_CHARS, TRUNCATE_END_CHARS);
 });
 
 const copied = ref(false);
@@ -109,12 +100,7 @@ const formattedId = computed(() => {
 
 <template>
   <v-fade-transition>
-    <v-sheet
-      v-if="show"
-      class="object-name-popover bg-transparent"
-      @mousedown.stop
-      @click.stop
-    >
+    <v-sheet v-if="show" class="object-name-popover bg-transparent" @mousedown.stop @click.stop>
       <GlassCard
         variant="panel"
         padding="pa-2 px-3"

From ed07f72ce7f78ba196bbb89f2a022f34e174206c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 20 May 2026 10:31:41 +0200
Subject: [PATCH 23/24] rename

---
 app/composables/project_manager.js                  | 4 ++--
 tests/unit/composables/project_manager.nuxt.test.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/composables/project_manager.js b/app/composables/project_manager.js
index 59b647dbc..304895f52 100644
--- a/app/composables/project_manager.js
+++ b/app/composables/project_manager.js
@@ -29,7 +29,7 @@ async function exportProject() {
   return { result };
 }
 
-async function importProjectFile(file) {
+async function importProject(file) {
   const geodeStore = useGeodeStore();
   const dataStyleStore = useDataStyleStore();
   const viewerStore = useViewerStore();
@@ -96,5 +96,5 @@ async function importProjectFile(file) {
 }
 
 export function useProjectManager() {
-  return { exportProject, importProjectFile };
+  return { exportProject, importProject };
 }
diff --git a/tests/unit/composables/project_manager.nuxt.test.js b/tests/unit/composables/project_manager.nuxt.test.js
index d05312901..4985945e1 100644
--- a/tests/unit/composables/project_manager.nuxt.test.js
+++ b/tests/unit/composables/project_manager.nuxt.test.js
@@ -8,7 +8,7 @@ import { appMode } from "@ogw_front/utils/local/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";
 import { useProjectManager } from "@ogw_front/composables/project_manager";
 
-const { exportProject, importProjectFile: importProject } = useProjectManager();
+const { exportProject, importProject } = useProjectManager();
 
 // Constants
 const PANEL_WIDTH = 300;

From 52d39df4250675d9a8de7ca4900e1dcb777143d9 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 20 May 2026 10:36:08 +0200
Subject: [PATCH 24/24] fix projects

---
 app/composables/project_manager.js                  | 4 +---
 tests/unit/composables/project_manager.nuxt.test.js | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app/composables/project_manager.js b/app/composables/project_manager.js
index 304895f52..75525783d 100644
--- a/app/composables/project_manager.js
+++ b/app/composables/project_manager.js
@@ -95,6 +95,4 @@ async function importProject(file) {
   treeviewStore.isImporting = false;
 }
 
-export function useProjectManager() {
-  return { exportProject, importProject };
-}
+export { exportProject, importProject };
diff --git a/tests/unit/composables/project_manager.nuxt.test.js b/tests/unit/composables/project_manager.nuxt.test.js
index 4985945e1..11cc01575 100644
--- a/tests/unit/composables/project_manager.nuxt.test.js
+++ b/tests/unit/composables/project_manager.nuxt.test.js
@@ -4,11 +4,9 @@
 // Third party imports
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
+import { exportProject, importProject } from "@ogw_front/composables/project_manager";
 import { appMode } from "@ogw_front/utils/local/app_mode";
 import { setupActivePinia } from "@ogw_tests/utils";
-import { useProjectManager } from "@ogw_front/composables/project_manager";
-
-const { exportProject, importProject } = useProjectManager();
 
 // Constants
 const PANEL_WIDTH = 300;