From 5697f2273e421829485d52eeff2e0a9622341e2b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 14:48:13 +0200
Subject: [PATCH 01/31] feat(MultipleTreeview): Add a new system for objects
 tree, multiple trees

---
 app/components/Viewer/BreadCrumb.vue          |  49 ---
 .../Viewer/ObjectTree/Base/Controls.vue       |  58 ++++
 .../Viewer/ObjectTree/Base/ItemLabel.vue      |  44 +++
 app/components/Viewer/ObjectTree/Box.vue      |  49 +++
 app/components/Viewer/ObjectTree/Layout.vue   | 289 ++++++++++++++++++
 .../ObjectTree/Views/GlobalObjectsView.vue    |  95 ++++++
 .../ObjectTree/Views/ModelComponentsView.vue  |  91 ++++++
 app/components/Viewer/Tree/ObjectTree.vue     | 132 --------
 app/components/Viewer/TreeComponent.vue       | 170 -----------
 app/components/Viewer/TreeObject.vue          | 184 -----------
 app/components/Viewer/Ui.vue                  |  12 +-
 app/composables/useTreeFilter.js              |  70 +++++
 app/stores/treeview.js                        |  60 ++--
 13 files changed, 732 insertions(+), 571 deletions(-)
 delete mode 100644 app/components/Viewer/BreadCrumb.vue
 create mode 100644 app/components/Viewer/ObjectTree/Base/Controls.vue
 create mode 100644 app/components/Viewer/ObjectTree/Base/ItemLabel.vue
 create mode 100644 app/components/Viewer/ObjectTree/Box.vue
 create mode 100644 app/components/Viewer/ObjectTree/Layout.vue
 create mode 100644 app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
 create mode 100644 app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
 delete mode 100644 app/components/Viewer/Tree/ObjectTree.vue
 delete mode 100644 app/components/Viewer/TreeComponent.vue
 delete mode 100644 app/components/Viewer/TreeObject.vue
 create mode 100644 app/composables/useTreeFilter.js

diff --git a/app/components/Viewer/BreadCrumb.vue b/app/components/Viewer/BreadCrumb.vue
deleted file mode 100644
index cfd83957..00000000
--- a/app/components/Viewer/BreadCrumb.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { useDataStore } from "@ogw_front/stores/data";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const dataStore = useDataStore();
-const treeviewStore = useTreeviewStore();
-
-const selectedTree = computed(() => treeviewStore.selectedTree);
-
-function goBackToFileTree() {
-  treeviewStore.displayFileTree();
-}
-
-const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
-</script>
-
-<template>
-  <v-breadcrumbs class="mb-n10 breadcrumb-container">
-    <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
-      <template v-if="treeviewStore.isAdditionnalTreeDisplayed">
-        <v-btn icon variant="text" size="medium" @click.stop="goBackToFileTree">
-          <v-icon size="large">mdi-file-tree</v-icon>
-        </v-btn>
-        <span class="text-h5 font-weight-bold">/</span>
-        <v-icon size="large">
-          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
-        </v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Model Explorer ({{ metaDatas.name }})
-        </span>
-      </template>
-
-      <div v-else class="d-flex align-center gap-2">
-        <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
-      </div>
-    </div>
-  </v-breadcrumbs>
-</template>
-
-<style scoped>
-.breadcrumb-container {
-  position: relative;
-  z-index: 10;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-}
-</style>
diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
new file mode 100644
index 00000000..b04360f8
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -0,0 +1,58 @@
+<script setup>
+import SearchBar from "@ogw_front/components/SearchBar.vue";
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+
+const props = defineProps({
+  search: { type: String, required: true },
+  sortType: { type: String, required: true },
+  filterOptions: { type: Object, required: true },
+  availableFilterOptions: { type: Array, required: true },
+});
+
+const emit = defineEmits(["update:search", "toggle-sort"]);
+</script>
+
+<template>
+  <v-row dense align="center" class="pa-2">
+    <v-col>
+      <SearchBar
+        :model-value="search"
+        label="Search"
+        color="black"
+        base-color="black"
+        @update:model-value="emit('update:search', $event)"
+      />
+    </v-col>
+    <v-col cols="auto" class="d-flex align-center">
+      <ActionButton
+        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+        :icon="
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+        "
+        tooltipLocation="bottom"
+        @click="emit('toggle-sort')"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props: menuProps }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="menuProps"
+          />
+        </template>
+        <v-list class="mt-1">
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+            <v-checkbox
+              v-model="filterOptions[category_id]"
+              :label="category_id"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-col>
+  </v-row>
+</template>
diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
new file mode 100644
index 00000000..a916dde2
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true },
+  showTooltip: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["contextmenu"]);
+</script>
+
+<template>
+  <span
+    class="tree-item-label"
+    :class="{ 'inactive-item': item.is_active === false }"
+    @contextmenu.prevent.stop="emit('contextmenu', $event)"
+  >
+    {{ item.title }}
+
+    <v-tooltip v-if="showTooltip && item.category" activator="parent" location="right">
+      <div class="d-flex flex-column pa-1">
+        <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
+        <span v-if="item.title" class="text-caption"><strong>Name:</strong> {{ item.title }}</span>
+        <span class="text-caption font-italic border-t-sm d-flex align-center">
+          <strong class="mr-1">Status:</strong> {{ item.is_active ? "Active" : "Inactive" }}
+        </span>
+      </div>
+    </v-tooltip>
+  </span>
+</template>
+
+<style scoped>
+.tree-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.inactive-item {
+  opacity: 0.4;
+  font-style: italic;
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
new file mode 100644
index 00000000..ce0968ed
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -0,0 +1,49 @@
+<script setup>
+const props = defineProps({
+  title: { type: String, required: true },
+  closable: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["close"]);
+</script>
+
+<template>
+  <v-card variant="outlined" class="tree-box d-flex flex-column">
+    <v-card-title
+      class="tree-box-header pa-2 d-flex align-center"
+      :class="{ 'cursor-grab': closable }"
+      :draggable="closable"
+      @dragstart="emit('dragstart', $event)"
+    >
+      <v-icon v-if="closable" size="small" class="mr-2">mdi-drag-variant</v-icon>
+      <span class="text-subtitle-2 font-weight-bold">{{ title }}</span>
+      <v-spacer />
+      <v-btn
+        v-if="closable"
+        icon="mdi-close"
+        variant="text"
+        size="x-small"
+        @click="emit('close')"
+      />
+    </v-card-title>
+    <v-divider />
+    <v-card-text class="pa-0 flex-grow-1 overflow-y-auto overflow-x-hidden">
+      <slot />
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.tree-box {
+  height: 100%;
+  border-radius: 8px;
+  background-color: transparent !important;
+  backdrop-filter: blur(2px);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tree-box-header {
+  min-height: 40px;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
new file mode 100644
index 00000000..9b3bef47
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -0,0 +1,289 @@
+<script setup>
+import GlobalObjectsView from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue";
+import ModelComponentsView from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponentsView.vue";
+import TreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const WIDTH_MIN = 300;
+const HEIGHT_MIN = 150;
+
+const treeviewStore = useTreeviewStore();
+const emit = defineEmits(["show-menu"]);
+
+const mainView = computed(() => treeviewStore.opened_views[0]);
+const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
+
+const mainColWidth = ref(50); // percentage
+const rowHeights = ref([]); // percentages of the second column height
+const draggedIndex = ref(null);
+
+watch(
+  () => additionalViews.value.length,
+  (newLength) => {
+    if (newLength > 0 && rowHeights.value.length !== newLength) {
+      rowHeights.value = new Array(newLength).fill(100 / newLength);
+    }
+  },
+  { immediate: true },
+);
+
+function onDragStart(index) {
+  draggedIndex.value = index;
+}
+
+function onDragOver(event) {
+  event.preventDefault();
+}
+
+function onDrop(targetIndex) {
+  if (draggedIndex.value !== null && draggedIndex.value !== targetIndex) {
+    treeviewStore.moveView(draggedIndex.value, targetIndex);
+  }
+  draggedIndex.value = null;
+}
+
+function onResizeStart(event) {
+  const startWidth = treeviewStore.panelWidth;
+  const startX = event.clientX;
+  function resize(move_event) {
+    const deltaX = move_event.clientX - startX;
+    const maxWidth = window.innerWidth * 0.8;
+    const newWidth = Math.max(WIDTH_MIN, Math.min(startWidth + deltaX, maxWidth));
+    treeviewStore.setPanelWidth(newWidth);
+    document.body.style.userSelect = "none";
+  }
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+
+function onSplitResizeStart(event) {
+  const startX = event.clientX;
+  const startWidth = mainColWidth.value;
+  function resize(move_event) {
+    const deltaX = move_event.clientX - startX;
+    const deltaPercent = (deltaX / treeviewStore.panelWidth) * 100;
+    mainColWidth.value = Math.max(20, Math.min(startWidth + deltaPercent, 80));
+    document.body.style.userSelect = "none";
+  }
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+
+function onVerticalResizeStart(event, index) {
+  const startY = event.clientY;
+  const startHeight1 = rowHeights.value[index];
+  const startHeight2 = rowHeights.value[index + 1];
+  const containerHeight = event.currentTarget.parentElement.offsetHeight;
+
+  function resize(move_event) {
+    const deltaY = move_event.clientY - startY;
+    const deltaPercent = (deltaY / containerHeight) * 100;
+
+    let newH1 = startHeight1 + deltaPercent;
+    let newH2 = startHeight2 - deltaPercent;
+
+    const MIN_HEIGHT = 10; // percent
+    if (newH1 < MIN_HEIGHT) {
+      newH1 = MIN_HEIGHT;
+      newH2 = startHeight1 + startHeight2 - MIN_HEIGHT;
+    } else if (newH2 < MIN_HEIGHT) {
+      newH2 = MIN_HEIGHT;
+      newH1 = startHeight1 + startHeight2 - MIN_HEIGHT;
+    }
+
+    rowHeights.value[index] = newH1;
+    rowHeights.value[index + 1] = newH2;
+
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "ns-resize";
+  }
+
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+</script>
+
+<template>
+  <div
+    v-if="treeviewStore.items.length > 0"
+    class="treeview-container"
+    :style="{ width: `${treeviewStore.panelWidth}px` }"
+    @contextmenu.prevent
+    @mousedown.stop
+  >
+    <div class="layout-root">
+      <div
+        class="column main-column"
+        :style="{ width: additionalViews.length > 0 ? `${mainColWidth}%` : '100%' }"
+      >
+        <TreeBox :title="mainView.title">
+          <GlobalObjectsView @show-menu="emit('show-menu', $event)" />
+        </TreeBox>
+      </div>
+
+      <div
+        v-if="additionalViews.length > 0"
+        class="h-split-resizer"
+        @mousedown="onSplitResizeStart"
+      />
+
+      <div v-if="additionalViews.length > 0" class="column additional-column">
+        <template v-for="(view, index) in additionalViews" :key="view.id">
+          <div
+            class="view-wrapper"
+            :class="{ 'drag-over': draggedIndex !== null && draggedIndex !== index + 1 }"
+            :style="{ flex: `0 0 ${rowHeights[index]}%` }"
+            @dragover="onDragOver"
+            @drop="onDrop(index + 1)"
+          >
+            <TreeBox
+              :title="view.title"
+              closable
+              @close="treeviewStore.closeView(index + 1)"
+              @dragstart="onDragStart(index + 1)"
+            >
+              <ModelComponentsView
+                :id="view.id"
+                @show-menu="emit('show-menu', $event)"
+              />
+            </TreeBox>
+          </div>
+          <div
+            v-if="index < additionalViews.length - 1"
+            class="v-split-resizer"
+            @mousedown="onVerticalResizeStart($event, index)"
+          />
+        </template>
+      </div>
+    </div>
+    <div class="total-resizer" @mousedown="onResizeStart" />
+  </div>
+</template>
+
+<style scoped>
+.treeview-container {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  height: calc(100vh - 100px); /* Adjust based on your header height */
+  margin-top: 10px;
+  margin-left: 10px;
+  pointer-events: auto;
+}
+
+.layout-root {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.main-column {
+  flex-shrink: 0;
+}
+
+.additional-column {
+  flex: 1;
+}
+
+.view-wrapper {
+  overflow: hidden;
+  padding: 2px;
+  transition: transform 0.2s;
+}
+
+.view-wrapper.drag-over {
+  border: 2px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.h-split-resizer {
+  width: 6px;
+  position: relative;
+  cursor: ew-resize;
+  background-color: transparent;
+  z-index: 5;
+}
+
+.h-split-resizer::after {
+  content: "";
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+  left: 2px;
+  width: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+  transition: background-color 0.2s;
+}
+
+.h-split-resizer:hover::after {
+  background-color: rgba(0, 0, 0, 0.4);
+  width: 3px;
+  left: 1.5px;
+}
+
+.v-split-resizer {
+  height: 6px;
+  position: relative;
+  cursor: ns-resize;
+  background-color: transparent;
+  z-index: 5;
+}
+
+.v-split-resizer::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 10%;
+  right: 10%;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+  transition: background-color 0.2s;
+}
+
+.v-split-resizer:hover::after {
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 3px;
+  top: 1.5px;
+}
+
+.total-resizer {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 8px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 10;
+}
+
+.total-resizer:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
new file mode 100644
index 00000000..b5c9bf88
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+import { useTreeFilter } from "@ogw_front/composables/useTreeFilter";
+import { compareSelections } from "@ogw_front/utils/treeview";
+
+import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+
+const treeviewStore = useTreeviewStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const emit = defineEmits(["show-menu"]);
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+} = useTreeFilter(toRef(() => treeviewStore.items));
+
+watch(
+  () => treeviewStore.selection,
+  async (current, previous) => {
+    const oldSelection = previous || [];
+    if (current === oldSelection) return;
+
+    const { added, removed } = compareSelections(current, previous);
+    const updates = [
+      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
+    ];
+    await Promise.all(updates);
+    hybridViewerStore.remoteRender();
+  },
+);
+
+function isModel(item) {
+  return item.viewer_type === "model";
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <TreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      @toggle-sort="toggleSort"
+    />
+
+    <v-treeview
+      v-model:selected="treeviewStore.selection"
+      :items="processedItems"
+      :search="search"
+      :custom-filter="customFilter"
+      class="transparent-treeview"
+      item-value="id"
+      select-strategy="classic"
+      selectable
+    >
+      <template #title="{ item }">
+        <TreeItemLabel
+          :item="item"
+          @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
+        />
+      </template>
+
+      <template #append="{ item }">
+        <v-btn
+          v-if="isModel(item)"
+          icon="mdi-magnify-expand"
+          size="medium"
+          class="ml-8"
+          variant="text"
+          v-tooltip="'Model\'s mesh components'"
+          @click.stop="treeviewStore.displayAdditionalTree(item.id, item.title)"
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<style scoped>
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
+}
+</style>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
new file mode 100644
index 00000000..27d0ae59
--- /dev/null
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeFilter } from "@ogw_front/composables/useTreeFilter";
+import { compareSelections } from "@ogw_front/utils/treeview";
+
+import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+
+const { id } = defineProps({ id: { type: String, required: true } });
+const emit = defineEmits(["show-menu"]);
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const items = dataStore.refFormatedMeshComponents(toRef(() => id));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+} = useTreeFilter(items);
+
+async function onSelectionChange(current) {
+  const previous = mesh_components_selection.value;
+  const { added, removed } = compareSelections(current, previous);
+
+  if (added.length === 0 && removed.length === 0) return;
+
+  if (added.length > 0) {
+    await dataStyleStore.setModelComponentsVisibility(id, added, true);
+  }
+  if (removed.length > 0) {
+    await dataStyleStore.setModelComponentsVisibility(id, removed, false);
+  }
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <TreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      @toggle-sort="toggleSort"
+    />
+
+    <v-treeview
+      :selected="mesh_components_selection"
+      :items="processedItems"
+      :search="search"
+      :custom-filter="customFilter"
+      class="transparent-treeview"
+      item-value="id"
+      select-strategy="independent"
+      selectable
+      @update:selected="onSelectionChange"
+    >
+      <template #title="{ item }">
+        <TreeItemLabel
+          :item="item"
+          show-tooltip
+          @contextmenu="
+            emit('show-menu', {
+              event: $event,
+              itemId: item.id,
+              context_type: 'model_component',
+              modelId: id,
+            })
+          "
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<style scoped>
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
+}
+</style>
diff --git a/app/components/Viewer/Tree/ObjectTree.vue b/app/components/Viewer/Tree/ObjectTree.vue
deleted file mode 100644
index ce2fff80..00000000
--- a/app/components/Viewer/Tree/ObjectTree.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<script setup>
-import ViewerBreadCrumb from "@ogw_front/components/Viewer/BreadCrumb";
-import ViewerTreeComponent from "@ogw_front/components/Viewer/TreeComponent";
-import ViewerTreeObject from "@ogw_front/components/Viewer/TreeObject";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const WIDTH_MIN = 150;
-
-const treeviewStore = useTreeviewStore();
-const emit = defineEmits(["show-menu"]);
-
-function onResizeStart(event) {
-  const startWidth = treeviewStore.panelWidth;
-  const startX = event.clientX;
-  function resize(move_event) {
-    const deltaX = move_event.clientX - startX;
-    const newWidth = Math.max(WIDTH_MIN, Math.min(startWidth + deltaX, window.innerWidth));
-    treeviewStore.setPanelWidth(newWidth);
-    document.body.style.userSelect = "none";
-  }
-  function stopResize() {
-    document.removeEventListener("mousemove", resize);
-    document.removeEventListener("mouseup", stopResize);
-    document.body.style.userSelect = "";
-  }
-  document.addEventListener("mousemove", resize);
-  document.addEventListener("mouseup", stopResize);
-}
-</script>
-
-<template>
-  <v-container
-    class="treeview-container"
-    :style="{ width: `${treeviewStore.panelWidth}px` }"
-    @contextmenu.prevent
-    @mousedown.stop
-  >
-    <v-row class="resizable-panel" :style="{ width: `${treeviewStore.panelWidth}px` }">
-      <div class="scrollable-wrapper">
-        <v-sheet style="max-height: calc(85vh)" class="transparent-treeview scrollbar-hover">
-          <v-row v-if="treeviewStore.items.length > 0">
-            <v-col>
-              <ViewerBreadCrumb />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <ViewerTreeObject
-                v-if="!treeviewStore.isAdditionnalTreeDisplayed"
-                @show-menu="emit('show-menu', $event)"
-              />
-              <ViewerTreeComponent
-                v-else
-                @show-menu="emit('show-menu', $event)"
-                :id="treeviewStore.model_id"
-              />
-            </v-col>
-          </v-row>
-        </v-sheet>
-      </div>
-      <div class="resizer" @mousedown="onResizeStart"></div>
-    </v-row>
-  </v-container>
-</template>
-
-<style scoped>
-.treeview-container {
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  top: 0;
-  background-color: transparent;
-  border-radius: 16px;
-  padding: 8px;
-  display: flex;
-  box-sizing: border-box;
-}
-
-.resizable-panel {
-  display: flex;
-  height: 100%;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.scrollable-wrapper {
-  overflow-y: auto;
-  padding-right: 6px;
-  flex: 1;
-}
-
-.resizer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 6px;
-  height: 100%;
-  cursor: ew-resize;
-  background-color: transparent;
-  z-index: 15;
-}
-
-.resizer:hover {
-  background-color: #999;
-}
-
-.resizer:active {
-  background-color: #666;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-.scrollbar-hover {
-  overflow-x: hidden;
-}
-
-.scrollbar-hover::-webkit-scrollbar {
-  width: 5px;
-}
-
-.scrollbar-hover::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-.scrollbar-hover:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-}
-</style>
diff --git a/app/components/Viewer/TreeComponent.vue b/app/components/Viewer/TreeComponent.vue
deleted file mode 100644
index f3e06847..00000000
--- a/app/components/Viewer/TreeComponent.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<script setup>
-import ActionButton from "@ogw_front/components/ActionButton.vue";
-import SearchBar from "@ogw_front/components/SearchBar.vue";
-import { compareSelections } from "@ogw_front/utils/treeview";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-const dataStyleStore = useDataStyleStore();
-const dataStore = useDataStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const { id } = defineProps({ id: { type: String, required: true } });
-const emit = defineEmits(["show-menu"]);
-
-const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
-
-const search = ref("");
-const sortType = ref("name");
-const filterOptions = ref({
-  Corner: true,
-  Line: true,
-  Surface: true,
-  Block: true,
-});
-
-const processedItems = computed(() =>
-  items.value
-    .filter((category) => filterOptions.value[category.id])
-    .map((category) => {
-      const field = sortType.value === "name" ? "title" : "id";
-      const children = (category.children || []).toSorted((first, second) =>
-        first[field].localeCompare(second[field]),
-      );
-      return { id: category.id, title: category.title, children };
-    }),
-);
-
-const availableFilterOptions = computed(() => items.value.map((category) => category.id));
-
-function toggleSort() {
-  sortType.value = sortType.value === "name" ? "id" : "name";
-}
-
-function customFilter(value, searchQuery, item) {
-  if (!searchQuery) {
-    return true;
-  }
-  const query = searchQuery.toLowerCase();
-  return (
-    item.raw.title.toLowerCase().includes(query) ||
-    (item.raw.id && item.raw.id.toLowerCase().includes(query))
-  );
-}
-
-async function onSelectionChange(current) {
-  const previous = mesh_components_selection.value;
-  const { added, removed } = compareSelections(current, previous);
-
-  if (added.length === 0 && removed.length === 0) {
-    return;
-  }
-
-  if (added.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(id, added, true);
-  }
-  if (removed.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(id, removed, false);
-  }
-  hybridViewerStore.remoteRender();
-}
-</script>
-
-<template>
-  <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
-    <v-col>
-      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
-    </v-col>
-    <v-col cols="auto" class="d-flex align-center">
-      <ActionButton
-        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
-        :icon="
-          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
-        "
-        tooltipLocation="bottom"
-        @click="toggleSort"
-      />
-      <v-menu :close-on-content-click="false">
-        <template #activator="{ props }">
-          <ActionButton
-            tooltip="Filter options"
-            icon="mdi-filter-variant"
-            tooltipLocation="bottom"
-            class="ml-1"
-            v-bind="props"
-          />
-        </template>
-        <v-list class="mt-1">
-          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
-            <v-checkbox
-              v-model="filterOptions[category_id]"
-              :label="category_id"
-              hide-details
-              density="compact"
-            />
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </v-col>
-  </v-row>
-  <v-treeview
-    :selected="mesh_components_selection"
-    :items="processedItems"
-    :search="search"
-    :custom-filter="customFilter"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="independent"
-    selectable
-    @update:selected="onSelectionChange"
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        :class="{ 'inactive-item': item.is_active === false }"
-        @contextmenu.prevent.stop="
-          emit('show-menu', {
-            event: $event,
-            itemId: item.id,
-            context_type: 'model_component',
-            modelId: id,
-          })
-        "
-      >
-        {{ item.title }}
-        <v-tooltip v-if="item.category" activator="parent" location="right">
-          <div class="d-flex flex-column pa-1">
-            <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
-            <span v-if="item.title" class="text-caption"
-              ><strong>Name:</strong> {{ item.title }}</span
-            >
-            <span class="text-caption font-italic border-t-sm d-flex align-center">
-              <strong class="mr-1">Status:</strong> {{ item.is_active ? "Active" : "Inactive" }}
-            </span>
-          </div>
-        </v-tooltip>
-      </span>
-    </template>
-  </v-treeview>
-</template>
-
-<style scoped>
-.treeview-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-.inactive-item {
-  opacity: 0.4;
-  font-style: italic;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-</style>
diff --git a/app/components/Viewer/TreeObject.vue b/app/components/Viewer/TreeObject.vue
deleted file mode 100644
index 870f07cf..00000000
--- a/app/components/Viewer/TreeObject.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<script setup>
-import ActionButton from "@ogw_front/components/ActionButton.vue";
-import SearchBar from "@ogw_front/components/SearchBar.vue";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-import { compareSelections } from "@ogw_front/utils/treeview";
-
-const treeviewStore = useTreeviewStore();
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const emit = defineEmits(["show-menu"]);
-
-const search = ref("");
-const sortType = ref("name");
-const filterOptions = ref({});
-
-const processedItems = computed(() =>
-  treeviewStore.items
-    .filter((category) => filterOptions.value[category.title] !== false)
-    .map((category) => {
-      const field = sortType.value === "name" ? "title" : "id";
-      const children = (category.children || []).toSorted((first, second) =>
-        first[field].localeCompare(second[field], undefined, {
-          numeric: true,
-          sensitivity: "base",
-        }),
-      );
-      return { id: category.title, title: category.title, children };
-    }),
-);
-
-const availableFilterOptions = computed(() =>
-  treeviewStore.items.map((category) => category.title),
-);
-
-watch(
-  availableFilterOptions,
-  (newOptions) => {
-    for (const option of newOptions) {
-      if (filterOptions.value[option] === undefined) {
-        filterOptions.value[option] = true;
-      }
-    }
-  },
-  { immediate: true },
-);
-
-function toggleSort() {
-  sortType.value = sortType.value === "name" ? "id" : "name";
-}
-
-function customFilter(value, searchQuery, item) {
-  if (!searchQuery) {
-    return true;
-  }
-  const query = searchQuery.toLowerCase();
-  return (
-    item.raw.title.toLowerCase().includes(query) ||
-    (item.raw.id && item.raw.id.toLowerCase().includes(query))
-  );
-}
-
-function isLeafNode(item) {
-  return !item.children || item.children.length === 0;
-}
-
-watch(
-  () => treeviewStore.selection,
-  async (current, previous) => {
-    const oldSelection = previous || [];
-    if (current === oldSelection) {
-      return;
-    }
-    const { added, removed } = compareSelections(current, previous);
-    const updates = [
-      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
-      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
-    ];
-    await Promise.all(updates);
-    hybridViewerStore.remoteRender();
-  },
-);
-
-function isModel(item) {
-  return item.viewer_type === "model";
-}
-
-onMounted(() => {
-  const savedSelection = treeviewStore.selection;
-  if (savedSelection && savedSelection.length > 0) {
-    treeviewStore.selection = savedSelection;
-  }
-});
-</script>
-
-<template>
-  <v-row v-if="treeviewStore.items.length > 0" dense align="center" class="mr-1 ml-3 mt-2 pa-1">
-    <v-col>
-      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
-    </v-col>
-    <v-col cols="auto" class="d-flex align-center">
-      <ActionButton
-        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
-        :icon="
-          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
-        "
-        tooltipLocation="bottom"
-        @click="toggleSort"
-      />
-      <v-menu :close-on-content-click="false">
-        <template #activator="{ props }">
-          <ActionButton
-            tooltip="Filter options"
-            icon="mdi-filter-variant"
-            tooltipLocation="bottom"
-            class="ml-1"
-            v-bind="props"
-          />
-        </template>
-        <v-list class="mt-1">
-          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
-            <v-checkbox
-              v-model="filterOptions[category_id]"
-              :label="category_id"
-              hide-details
-              density="compact"
-            />
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </v-col>
-  </v-row>
-  <v-treeview
-    v-model:selected="treeviewStore.selection"
-    :items="processedItems"
-    :search="search"
-    :custom-filter="customFilter"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="classic"
-    selectable
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        @contextmenu.prevent.stop="
-          isLeafNode(item) ? emit('show-menu', { event: $event, itemId: item.id }) : null
-        "
-      >
-        {{ item.title }}
-      </span>
-    </template>
-
-    <template #append="{ item }">
-      <v-btn
-        v-if="isModel(item)"
-        icon="mdi-magnify-expand"
-        size="medium"
-        class="ml-8"
-        variant="text"
-        v-tooltip="'Model\'s mesh components'"
-        @click.stop="treeviewStore.displayAdditionalTree(item.id)"
-      />
-    </template>
-  </v-treeview>
-</template>
-
-<style scoped>
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-.treeview-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-</style>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index bb4869e2..7ae7c779 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,10 +1,6 @@
 <script setup>
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
-import ViewerTreeObjectTree from "@ogw_front/components/Viewer/Tree/ObjectTree";
-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 ViewerTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const { displayMenu, containerWidth, containerHeight } = defineProps({
@@ -23,7 +19,9 @@ const dataItems = dataStore.refAllItems();
 
 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 };
   await viewerStore.request(
@@ -44,7 +42,7 @@ defineExpose({ get_viewer_id });
 </script>
 
 <template>
-  <ViewerTreeObjectTree @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerTreeLayout @show-menu="(args) => emit('show-menu', args)" />
   <ViewerContextMenu
     v-if="displayMenu"
     :id="menuStore.current_id"
diff --git a/app/composables/useTreeFilter.js b/app/composables/useTreeFilter.js
new file mode 100644
index 00000000..c03f17a9
--- /dev/null
+++ b/app/composables/useTreeFilter.js
@@ -0,0 +1,70 @@
+import { ref, computed } from "vue";
+
+export function useTreeFilter(rawItems, options = {}) {
+  const search = ref("");
+  const sortType = ref(options.defaultSort || "name");
+  const filterOptions = ref(options.defaultFilters || {});
+
+  const availableFilterOptions = computed(() =>
+    rawItems.value.map((category) => category.title || category.id),
+  );
+
+  // Initialize filter options if they don't exist
+  watch(
+    availableFilterOptions,
+    (newOptions) => {
+      for (const option of newOptions) {
+        if (filterOptions.value[option] === undefined) {
+          filterOptions.value[option] = true;
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  const processedItems = computed(() => {
+    return rawItems.value
+      .filter((category) => {
+        const key = category.title || category.id;
+        return filterOptions.value[key] !== false;
+      })
+      .map((category) => {
+        const field = sortType.value === "name" ? "title" : "id";
+        const children = (category.children || []).toSorted((first, second) => {
+          const val1 = first[field] || "";
+          const val2 = second[field] || "";
+          return val1.localeCompare(val2, undefined, {
+            numeric: true,
+            sensitivity: "base",
+          });
+        });
+        return {
+          ...category,
+          title: category.title || category.id,
+          children,
+        };
+      });
+  });
+
+  function toggleSort() {
+    sortType.value = sortType.value === "name" ? "id" : "name";
+  }
+
+  function customFilter(_value, searchQuery, item) {
+    if (!searchQuery) return true;
+    const query = searchQuery.toLowerCase();
+    const title = (item.raw.title || "").toLowerCase();
+    const id = (item.raw.id || "").toLowerCase();
+    return title.includes(query) || id.includes(query);
+  }
+
+  return {
+    search,
+    sortType,
+    filterOptions,
+    processedItems,
+    availableFilterOptions,
+    toggleSort,
+    customFilter,
+  };
+}
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 5fb9c661..04014dbc 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -3,12 +3,8 @@ export const useTreeviewStore = defineStore("treeview", () => {
 
   const items = ref([]);
   const selection = ref([]);
-  const components_selection = ref([]);
-  const isAdditionnalTreeDisplayed = ref(false);
+  const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
   const panelWidth = ref(PANEL_WIDTH);
-  const model_id = ref("");
-  const isTreeCollection = ref(false);
-  const selectedTree = ref(undefined);
   const isImporting = ref(false);
   const pendingSelectionIds = ref([]);
 
@@ -39,20 +35,36 @@ export const useTreeviewStore = defineStore("treeview", () => {
     selection.value.push(id);
   }
 
-  function displayAdditionalTree(id) {
-    isAdditionnalTreeDisplayed.value = true;
-    model_id.value = id;
+  function displayAdditionalTree(id, title) {
+    if (opened_views.value.some((view) => view.id === id)) {
+      return;
+    }
+    opened_views.value.push({
+      type: "component",
+      id,
+      title: title || id,
+    });
   }
 
-  function displayFileTree() {
-    isAdditionnalTreeDisplayed.value = false;
+  function closeView(index) {
+    if (index > 0) {
+      opened_views.value.splice(index, 1);
+    }
+  }
+
+  function moveView(fromIndex, toIndex) {
+    if (fromIndex === 0 || toIndex === 0) {
+      return;
+    }
+    const element = opened_views.value.splice(fromIndex, 1)[0];
+    opened_views.value.splice(toIndex, 0, element);
   }
 
-  function toggleTreeView() {
-    isTreeCollection.value = !isTreeCollection.value;
-    console.log("Switched to", isTreeCollection.value ? "TreeCollection" : "TreeComponent");
+  function displayFileTree() {
+    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
   }
 
+
   function setPanelWidth(width) {
     panelWidth.value = width;
   }
@@ -60,21 +72,15 @@ export const useTreeviewStore = defineStore("treeview", () => {
   function exportStores() {
     const selectionIds = selection.value.map((store) => store.id);
     return {
-      isAdditionnalTreeDisplayed: isAdditionnalTreeDisplayed.value,
+      opened_views: opened_views.value,
       panelWidth: panelWidth.value,
-      model_id: model_id.value,
-      isTreeCollection: isTreeCollection.value,
-      selectedTree: selectedTree.value,
       selectionIds,
     };
   }
 
   function importStores(snapshot) {
-    isAdditionnalTreeDisplayed.value = snapshot?.isAdditionnalTreeDisplayed || false;
+    opened_views.value = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
-    model_id.value = snapshot?.model_id || "";
-    isTreeCollection.value = snapshot?.isTreeCollection || false;
-    selectedTree.value = snapshot?.selectedTree || undefined;
 
     pendingSelectionIds.value =
       snapshot?.selectionIds || (snapshot?.selection || []).map((store) => store.id) || [];
@@ -127,26 +133,22 @@ export const useTreeviewStore = defineStore("treeview", () => {
   function clear() {
     items.value = [];
     selection.value = [];
-    components_selection.value = [];
     pendingSelectionIds.value = [];
-    model_id.value = "";
-    selectedTree.value = undefined;
+    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
   }
 
   return {
     items,
     selection,
-    components_selection,
-    isAdditionnalTreeDisplayed,
+    opened_views,
     panelWidth,
-    model_id,
-    selectedTree,
     isImporting,
     addItem,
     removeItem,
     displayAdditionalTree,
+    closeView,
+    moveView,
     displayFileTree,
-    toggleTreeView,
     setPanelWidth,
     exportStores,
     importStores,

From fe6192d07c54877fcf484d377728a76a187025ea Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 14:48:29 +0200
Subject: [PATCH 02/31] import & other

---
 app/components/Viewer/ObjectTree/Layout.vue   |  1 +
 .../ObjectTree/Views/GlobalObjectsView.vue    | 21 +++++++++++++++++--
 .../ObjectTree/Views/ModelComponentsView.vue  | 13 ++++++++++++
 app/components/Viewer/Ui.vue                  |  4 ++++
 app/composables/useTreeFilter.js              |  2 +-
 app/stores/treeview.js                        | 15 +++++++------
 6 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 9b3bef47..fc6a3cf7 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed, watch } from "vue";
 import GlobalObjectsView from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue";
 import ModelComponentsView from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponentsView.vue";
 import TreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index b5c9bf88..1b50590f 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { watch, toRef } from "vue";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
@@ -31,9 +32,13 @@ watch(
     if (current === oldSelection) return;
 
     const { added, removed } = compareSelections(current, previous);
+    
+    // Get all valid object IDs from the tree to filter out category IDs
+    const allObjectIds = new Set(treeviewStore.items.flatMap(group => group.children.map(child => child.id)));
+
     const updates = [
-      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
-      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
+      ...added.filter(id => allObjectIds.has(id)).map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed.filter(id => allObjectIds.has(id)).map((id) => dataStyleStore.setVisibility(id, false)),
     ];
     await Promise.all(updates);
     hybridViewerStore.remoteRender();
@@ -92,4 +97,16 @@ function isModel(item) {
   background-color: transparent;
   margin: 4px 0;
 }
+
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0 !important;
+}
+
+:deep(.v-list-item:hover > .v-list-item__overlay) {
+  opacity: 0.1 !important;
+}
 </style>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
index 27d0ae59..459a6a5f 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { toRef } from "vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -88,4 +89,16 @@ async function onSelectionChange(current) {
   background-color: transparent;
   margin: 4px 0;
 }
+
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0 !important;
+}
+
+:deep(.v-list-item:hover > .v-list-item__overlay) {
+  opacity: 0.1 !important;
+}
 </style>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 7ae7c779..2c6043ed 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -2,6 +2,10 @@
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
 import ViewerTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useMenuStore } from "@ogw_front/stores/menu";
 
 const { displayMenu, containerWidth, containerHeight } = defineProps({
   displayMenu: { type: Boolean, required: true },
diff --git a/app/composables/useTreeFilter.js b/app/composables/useTreeFilter.js
index c03f17a9..495f620f 100644
--- a/app/composables/useTreeFilter.js
+++ b/app/composables/useTreeFilter.js
@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 export function useTreeFilter(rawItems, options = {}) {
   const search = ref("");
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 04014dbc..d50777c3 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -25,7 +25,11 @@ export const useTreeviewStore = defineStore("treeview", () => {
         return;
       }
     }
-    items.value.push({ title: geode_object_type, children: [child] });
+    items.value.push({
+      id: geode_object_type,
+      title: geode_object_type,
+      children: [child],
+    });
     items.value.sort((element1, element2) =>
       element1.title.localeCompare(element2.title, undefined, {
         numeric: true,
@@ -70,11 +74,10 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function exportStores() {
-    const selectionIds = selection.value.map((store) => store.id);
     return {
       opened_views: opened_views.value,
       panelWidth: panelWidth.value,
-      selectionIds,
+      selectionIds: selection.value,
     };
   }
 
@@ -83,7 +86,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
 
     pendingSelectionIds.value =
-      snapshot?.selectionIds || (snapshot?.selection || []).map((store) => store.id) || [];
+      snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
   }
 
   function finalizeImportSelection() {
@@ -99,7 +102,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
       for (const group of items.value) {
         for (const child of group.children) {
           if (ids.includes(child.id)) {
-            rebuilt.push(child);
+            rebuilt.push(child.id);
           }
         }
       }
@@ -120,7 +123,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
           items.value.splice(i, 1);
         }
 
-        const selectionIndex = selection.value.findIndex((item) => item.id === id);
+        const selectionIndex = selection.value.indexOf(id);
         if (selectionIndex !== -1) {
           selection.value.splice(selectionIndex, 1);
         }

From bc9d34f56071671a2c019c0705b5a04910770f0f Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 15:21:28 +0200
Subject: [PATCH 03/31] icon dynamic

---
 app/components/Viewer/ObjectTree/Box.vue      | 25 ++++++++++++++++---
 app/components/Viewer/ObjectTree/Layout.vue   |  3 ++-
 .../ObjectTree/Views/GlobalObjectsView.vue    |  2 +-
 app/stores/treeview.js                        |  5 ++--
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index ce0968ed..fbdb0506 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,10 +1,21 @@
 <script setup>
+import { computed } from "vue";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+
 const props = defineProps({
   title: { type: String, required: true },
   closable: { type: Boolean, default: false },
+  geode_object_type: { type: String, default: "" },
 });
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits(["close", "dragstart"]);
+
+const icon = computed(() => {
+  if (props.geode_object_type && geode_objects[props.geode_object_type]) {
+    return geode_objects[props.geode_object_type].image;
+  }
+  return undefined;
+});
 </script>
 
 <template>
@@ -15,7 +26,15 @@ const emit = defineEmits(["close"]);
       :draggable="closable"
       @dragstart="emit('dragstart', $event)"
     >
-      <v-icon v-if="closable" size="small" class="mr-2">mdi-drag-variant</v-icon>
+      <v-img
+        v-if="icon"
+        :src="icon"
+        width="24"
+        max-width="24"
+        class="mr-2"
+        style="filter: brightness(0)"
+      />
+      <v-icon v-else-if="closable" size="small" class="mr-2">mdi-drag-variant</v-icon>
       <span class="text-subtitle-2 font-weight-bold">{{ title }}</span>
       <v-spacer />
       <v-btn
@@ -36,7 +55,7 @@ const emit = defineEmits(["close"]);
 <style scoped>
 .tree-box {
   height: 100%;
-  border-radius: 8px;
+  border-radius: 16px;
   background-color: transparent !important;
   backdrop-filter: blur(2px);
   border: 1px solid rgba(0, 0, 0, 0.2);
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index fc6a3cf7..d2310608 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -155,6 +155,7 @@ function onVerticalResizeStart(event, index) {
           >
             <TreeBox
               :title="view.title"
+              :geode_object_type="view.geode_object_type"
               closable
               @close="treeviewStore.closeView(index + 1)"
               @dragstart="onDragStart(index + 1)"
@@ -218,7 +219,7 @@ function onVerticalResizeStart(event, index) {
 
 .view-wrapper.drag-over {
   border: 2px dashed rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
+  border-radius: 16px;
   background-color: rgba(0, 0, 0, 0.02);
 }
 
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index 1b50590f..4d50d276 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -85,7 +85,7 @@ function isModel(item) {
           class="ml-8"
           variant="text"
           v-tooltip="'Model\'s mesh components'"
-          @click.stop="treeviewStore.displayAdditionalTree(item.id, item.title)"
+          @click.stop="treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)"
         />
       </template>
     </v-treeview>
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index d50777c3..3ad00235 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -10,7 +10,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
 
   // /** Functions **/
   function addItem(geode_object_type, name, id, viewer_type) {
-    const child = { title: name, id, viewer_type };
+    const child = { title: name, id, viewer_type, geode_object_type };
 
     for (let i = 0; i < items.value.length; i += 1) {
       if (items.value[i].title === geode_object_type) {
@@ -39,7 +39,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     selection.value.push(id);
   }
 
-  function displayAdditionalTree(id, title) {
+  function displayAdditionalTree(id, title, geode_object_type) {
     if (opened_views.value.some((view) => view.id === id)) {
       return;
     }
@@ -47,6 +47,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
       type: "component",
       id,
       title: title || id,
+      geode_object_type,
     });
   }
 

From 60c57c7e4321ee48b5c780e05ed73be90deafeb0 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 15:24:52 +0200
Subject: [PATCH 04/31] rm comments

---
 .../ObjectTree/Views/GlobalObjectsView.vue    | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index 4d50d276..f8e6cfa7 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -32,13 +32,20 @@ watch(
     if (current === oldSelection) return;
 
     const { added, removed } = compareSelections(current, previous);
-    
-    // Get all valid object IDs from the tree to filter out category IDs
-    const allObjectIds = new Set(treeviewStore.items.flatMap(group => group.children.map(child => child.id)));
+
+    const allObjectIds = new Set(
+      treeviewStore.items.flatMap((group) =>
+        group.children.map((child) => child.id),
+      ),
+    );
 
     const updates = [
-      ...added.filter(id => allObjectIds.has(id)).map((id) => dataStyleStore.setVisibility(id, true)),
-      ...removed.filter(id => allObjectIds.has(id)).map((id) => dataStyleStore.setVisibility(id, false)),
+      ...added
+        .filter((id) => allObjectIds.has(id))
+        .map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed
+        .filter((id) => allObjectIds.has(id))
+        .map((id) => dataStyleStore.setVisibility(id, false)),
     ];
     await Promise.all(updates);
     hybridViewerStore.remoteRender();
@@ -85,7 +92,13 @@ function isModel(item) {
           class="ml-8"
           variant="text"
           v-tooltip="'Model\'s mesh components'"
-          @click.stop="treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)"
+          @click.stop="
+            treeviewStore.displayAdditionalTree(
+              item.id,
+              item.title,
+              item.geode_object_type,
+            )
+          "
         />
       </template>
     </v-treeview>

From b00bda58c1b8438836ff981156521d29dc1341c6 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Mon, 13 Apr 2026 13:25:41 +0000
Subject: [PATCH 05/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Layout.vue            |  5 +----
 .../Viewer/ObjectTree/Views/GlobalObjectsView.vue      | 10 ++--------
 app/components/Viewer/Ui.vue                           |  4 +---
 app/stores/treeview.js                                 |  5 +++--
 4 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index d2310608..26180c2f 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -160,10 +160,7 @@ function onVerticalResizeStart(event, index) {
               @close="treeviewStore.closeView(index + 1)"
               @dragstart="onDragStart(index + 1)"
             >
-              <ModelComponentsView
-                :id="view.id"
-                @show-menu="emit('show-menu', $event)"
-              />
+              <ModelComponentsView :id="view.id" @show-menu="emit('show-menu', $event)" />
             </TreeBox>
           </div>
           <div
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index f8e6cfa7..b4faa478 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -34,9 +34,7 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) =>
-        group.children.map((child) => child.id),
-      ),
+      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
     );
 
     const updates = [
@@ -93,11 +91,7 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-            )
+            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
           "
         />
       </template>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 2c6043ed..94706c5b 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -23,9 +23,7 @@ const dataItems = dataStore.refAllItems();
 
 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 };
   await viewerStore.request(
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 3ad00235..20f660ac 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -69,7 +69,6 @@ export const useTreeviewStore = defineStore("treeview", () => {
     opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
   }
 
-
   function setPanelWidth(width) {
     panelWidth.value = width;
   }
@@ -83,7 +82,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function importStores(snapshot) {
-    opened_views.value = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
+    opened_views.value = snapshot?.opened_views || [
+      { type: "object", id: "main", title: "Objects" },
+    ];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
 
     pendingSelectionIds.value =

From 706862a2c08bc080aa534439c1811566b07aba6d Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 15:26:02 +0200
Subject: [PATCH 06/31] rm comments

---
 app/components/Viewer/ObjectTree/Layout.vue | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index d2310608..7d35729b 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -14,8 +14,8 @@ const emit = defineEmits(["show-menu"]);
 const mainView = computed(() => treeviewStore.opened_views[0]);
 const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
 
-const mainColWidth = ref(50); // percentage
-const rowHeights = ref([]); // percentages of the second column height
+const mainColWidth = ref(50);
+const rowHeights = ref([]);
 const draggedIndex = ref(null);
 
 watch(
@@ -49,7 +49,10 @@ function onResizeStart(event) {
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
     const maxWidth = window.innerWidth * 0.8;
-    const newWidth = Math.max(WIDTH_MIN, Math.min(startWidth + deltaX, maxWidth));
+    const newWidth = Math.max(
+      WIDTH_MIN,
+      Math.min(startWidth + deltaX, maxWidth),
+    );
     treeviewStore.setPanelWidth(newWidth);
     document.body.style.userSelect = "none";
   }
@@ -93,7 +96,7 @@ function onVerticalResizeStart(event, index) {
     let newH1 = startHeight1 + deltaPercent;
     let newH2 = startHeight2 - deltaPercent;
 
-    const MIN_HEIGHT = 10; // percent
+    const MIN_HEIGHT = 10;
     if (newH1 < MIN_HEIGHT) {
       newH1 = MIN_HEIGHT;
       newH2 = startHeight1 + startHeight2 - MIN_HEIGHT;
@@ -131,7 +134,9 @@ function onVerticalResizeStart(event, index) {
     <div class="layout-root">
       <div
         class="column main-column"
-        :style="{ width: additionalViews.length > 0 ? `${mainColWidth}%` : '100%' }"
+        :style="{
+          width: additionalViews.length > 0 ? `${mainColWidth}%` : '100%',
+        }"
       >
         <TreeBox :title="mainView.title">
           <GlobalObjectsView @show-menu="emit('show-menu', $event)" />
@@ -148,7 +153,9 @@ function onVerticalResizeStart(event, index) {
         <template v-for="(view, index) in additionalViews" :key="view.id">
           <div
             class="view-wrapper"
-            :class="{ 'drag-over': draggedIndex !== null && draggedIndex !== index + 1 }"
+            :class="{
+              'drag-over': draggedIndex !== null && draggedIndex !== index + 1,
+            }"
             :style="{ flex: `0 0 ${rowHeights[index]}%` }"
             @dragover="onDragOver"
             @drop="onDrop(index + 1)"

From 66dc527f5953ba1e28375733e25fc4a4a657789d Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Mon, 13 Apr 2026 13:26:50 +0000
Subject: [PATCH 07/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Layout.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index eb89a35d..8b1df0f4 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -49,10 +49,7 @@ function onResizeStart(event) {
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
     const maxWidth = window.innerWidth * 0.8;
-    const newWidth = Math.max(
-      WIDTH_MIN,
-      Math.min(startWidth + deltaX, maxWidth),
-    );
+    const newWidth = Math.max(WIDTH_MIN, Math.min(startWidth + deltaX, maxWidth));
     treeviewStore.setPanelWidth(newWidth);
     document.body.style.userSelect = "none";
   }

From 9056114e4ba2211212257131b0b3e3f95c405bdd Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 16:00:06 +0200
Subject: [PATCH 08/31] on off btn

---
 .../Viewer/ObjectTree/Base/ItemLabel.vue      |  3 ++-
 app/components/Viewer/ObjectTree/Box.vue      | 19 ++++++++++++++-----
 app/components/Viewer/ObjectTree/Layout.vue   |  2 +-
 app/stores/treeview.js                        |  4 +++-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index a916dde2..d5c90fee 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -33,7 +33,8 @@ const emit = defineEmits(["contextmenu"]);
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 100%;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
 }
 
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index fbdb0506..ddfde087 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -6,6 +6,7 @@ const props = defineProps({
   title: { type: String, required: true },
   closable: { type: Boolean, default: false },
   geode_object_type: { type: String, default: "" },
+  mdiIcon: { type: String, default: "" },
 });
 
 const emit = defineEmits(["close", "dragstart"]);
@@ -21,7 +22,7 @@ const icon = computed(() => {
 <template>
   <v-card variant="outlined" class="tree-box d-flex flex-column">
     <v-card-title
-      class="tree-box-header pa-2 d-flex align-center"
+      class="tree-box-header d-flex align-center"
       :class="{ 'cursor-grab': closable }"
       :draggable="closable"
       @dragstart="emit('dragstart', $event)"
@@ -30,12 +31,19 @@ const icon = computed(() => {
         v-if="icon"
         :src="icon"
         width="24"
+        height="24"
         max-width="24"
         class="mr-2"
-        style="filter: brightness(0)"
+        style="filter: brightness(0); display: flex; align-items: center"
       />
-      <v-icon v-else-if="closable" size="small" class="mr-2">mdi-drag-variant</v-icon>
-      <span class="text-subtitle-2 font-weight-bold">{{ title }}</span>
+      <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <span
+        class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
+        style="height: 24px; line-height: 1"
+      >
+        {{ title }}
+      </span>
       <v-spacer />
       <v-btn
         v-if="closable"
@@ -62,7 +70,8 @@ const icon = computed(() => {
 }
 
 .tree-box-header {
-  min-height: 40px;
+  height: 40px !important;
+  padding: 0 8px !important;
   background-color: rgba(255, 255, 255, 0.1);
 }
 </style>
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index eb89a35d..9bdb8342 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -138,7 +138,7 @@ function onVerticalResizeStart(event, index) {
           width: additionalViews.length > 0 ? `${mainColWidth}%` : '100%',
         }"
       >
-        <TreeBox :title="mainView.title">
+        <TreeBox :title="mainView.title" mdi-icon="mdi-file-tree-outline">
           <GlobalObjectsView @show-menu="emit('show-menu', $event)" />
         </TreeBox>
       </div>
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 20f660ac..ac0b39ff 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -40,7 +40,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function displayAdditionalTree(id, title, geode_object_type) {
-    if (opened_views.value.some((view) => view.id === id)) {
+    const existingIndex = opened_views.value.findIndex((view) => view.id === id);
+    if (existingIndex !== -1) {
+      closeView(existingIndex);
       return;
     }
     opened_views.value.push({

From cf85f6e6c90e459eb5241649d706a2e88dbb633c Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 17:03:10 +0200
Subject: [PATCH 09/31] Size duplicate instead of split

---
 app/components/Viewer/ObjectTree/Layout.vue | 165 +++++++++++---------
 app/stores/treeview.js                      |   9 ++
 2 files changed, 97 insertions(+), 77 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 5ed83194..950ddb3e 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -14,7 +14,13 @@ const emit = defineEmits(["show-menu"]);
 const mainView = computed(() => treeviewStore.opened_views[0]);
 const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
 
-const mainColWidth = ref(50);
+const totalWidth = computed(() => {
+  const hasAdditional = additionalViews.value.length > 0;
+  const gap = hasAdditional ? 10 : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
+});
+
 const rowHeights = ref([]);
 const draggedIndex = ref(null);
 
@@ -48,8 +54,7 @@ function onResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    const maxWidth = window.innerWidth * 0.8;
-    const newWidth = Math.max(WIDTH_MIN, Math.min(startWidth + deltaX, maxWidth));
+    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
     treeviewStore.setPanelWidth(newWidth);
     document.body.style.userSelect = "none";
   }
@@ -62,13 +67,13 @@ function onResizeStart(event) {
   document.addEventListener("mouseup", stopResize);
 }
 
-function onSplitResizeStart(event) {
+function onAdditionalResizeStart(event) {
+  const startWidth = treeviewStore.additionalPanelWidth;
   const startX = event.clientX;
-  const startWidth = mainColWidth.value;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    const deltaPercent = (deltaX / treeviewStore.panelWidth) * 100;
-    mainColWidth.value = Math.max(20, Math.min(startWidth + deltaPercent, 80));
+    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    treeviewStore.setAdditionalPanelWidth(newWidth);
     document.body.style.userSelect = "none";
   }
   function stopResize() {
@@ -80,6 +85,7 @@ function onSplitResizeStart(event) {
   document.addEventListener("mouseup", stopResize);
 }
 
+
 function onVerticalResizeStart(event, index) {
   const startY = event.clientY;
   const startHeight1 = rowHeights.value[index];
@@ -89,17 +95,17 @@ function onVerticalResizeStart(event, index) {
   function resize(move_event) {
     const deltaY = move_event.clientY - startY;
     const deltaPercent = (deltaY / containerHeight) * 100;
+    const minHeightPercent = (HEIGHT_MIN / containerHeight) * 100;
 
     let newH1 = startHeight1 + deltaPercent;
     let newH2 = startHeight2 - deltaPercent;
 
-    const MIN_HEIGHT = 10;
-    if (newH1 < MIN_HEIGHT) {
-      newH1 = MIN_HEIGHT;
-      newH2 = startHeight1 + startHeight2 - MIN_HEIGHT;
-    } else if (newH2 < MIN_HEIGHT) {
-      newH2 = MIN_HEIGHT;
-      newH1 = startHeight1 + startHeight2 - MIN_HEIGHT;
+    if (newH1 < minHeightPercent) {
+      newH1 = minHeightPercent;
+      newH2 = startHeight1 + startHeight2 - minHeightPercent;
+    } else if (newH2 < minHeightPercent) {
+      newH2 = minHeightPercent;
+      newH1 = startHeight1 + startHeight2 - minHeightPercent;
     }
 
     rowHeights.value[index] = newH1;
@@ -123,59 +129,62 @@ function onVerticalResizeStart(event, index) {
 <template>
   <div
     v-if="treeviewStore.items.length > 0"
-    class="treeview-container"
-    :style="{ width: `${treeviewStore.panelWidth}px` }"
+    class="treeview-container d-flex"
+    :style="{ width: totalWidth }"
     @contextmenu.prevent
     @mousedown.stop
   >
-    <div class="layout-root">
-      <div
-        class="column main-column"
-        :style="{
-          width: additionalViews.length > 0 ? `${mainColWidth}%` : '100%',
-        }"
-      >
-        <TreeBox :title="mainView.title" mdi-icon="mdi-file-tree-outline">
-          <GlobalObjectsView @show-menu="emit('show-menu', $event)" />
-        </TreeBox>
-      </div>
-
-      <div
-        v-if="additionalViews.length > 0"
-        class="h-split-resizer"
-        @mousedown="onSplitResizeStart"
-      />
-
-      <div v-if="additionalViews.length > 0" class="column additional-column">
-        <template v-for="(view, index) in additionalViews" :key="view.id">
-          <div
-            class="view-wrapper"
-            :class="{
-              'drag-over': draggedIndex !== null && draggedIndex !== index + 1,
-            }"
-            :style="{ flex: `0 0 ${rowHeights[index]}%` }"
-            @dragover="onDragOver"
-            @drop="onDrop(index + 1)"
+    <div
+      class="column main-column"
+      :style="{
+        width: `${treeviewStore.panelWidth}px`,
+      }"
+    >
+      <TreeBox :title="mainView.title" mdi-icon="mdi-file-tree-outline">
+        <GlobalObjectsView @show-menu="emit('show-menu', $event)" />
+      </TreeBox>
+    </div>
+
+    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+
+    <div
+      v-if="additionalViews.length > 0"
+      class="column additional-column"
+      :style="{
+        width: `${treeviewStore.additionalPanelWidth}px`,
+      }"
+    >
+      <template v-for="(view, index) in additionalViews" :key="view.id">
+        <div
+          class="view-wrapper"
+          :class="{
+            'drag-over': draggedIndex !== null && draggedIndex !== index + 1,
+          }"
+          :style="{ flex: `0 0 ${rowHeights[index]}%` }"
+          @dragover="onDragOver"
+          @drop="onDrop(index + 1)"
+        >
+          <TreeBox
+            :title="view.title"
+            :geode_object_type="view.geode_object_type"
+            closable
+            @close="treeviewStore.closeView(index + 1)"
+            @dragstart="onDragStart(index + 1)"
           >
-            <TreeBox
-              :title="view.title"
-              :geode_object_type="view.geode_object_type"
-              closable
-              @close="treeviewStore.closeView(index + 1)"
-              @dragstart="onDragStart(index + 1)"
-            >
-              <ModelComponentsView :id="view.id" @show-menu="emit('show-menu', $event)" />
-            </TreeBox>
-          </div>
-          <div
-            v-if="index < additionalViews.length - 1"
-            class="v-split-resizer"
-            @mousedown="onVerticalResizeStart($event, index)"
-          />
-        </template>
-      </div>
+            <ModelComponentsView :id="view.id" @show-menu="emit('show-menu', $event)" />
+          </TreeBox>
+        </div>
+        <div
+          v-if="index < additionalViews.length - 1"
+          class="v-split-resizer"
+          @mousedown="onVerticalResizeStart($event, index)"
+        />
+      </template>
     </div>
-    <div class="total-resizer" @mousedown="onResizeStart" />
+    <div
+      class="total-resizer"
+      @mousedown="additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)"
+    />
   </div>
 </template>
 
@@ -189,19 +198,22 @@ function onVerticalResizeStart(event, index) {
   margin-top: 10px;
   margin-left: 10px;
   pointer-events: auto;
+  width: max-content;
+  min-width: min-content;
 }
 
 .layout-root {
   display: flex;
   height: 100%;
-  width: 100%;
 }
 
 .column {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
 }
 
 .main-column {
@@ -209,13 +221,14 @@ function onVerticalResizeStart(event, index) {
 }
 
 .additional-column {
-  flex: 1;
+  flex-shrink: 0;
 }
 
 .view-wrapper {
   overflow: hidden;
   padding: 2px;
   transition: transform 0.2s;
+  min-height: 150px;
 }
 
 .view-wrapper.drag-over {
@@ -224,15 +237,20 @@ function onVerticalResizeStart(event, index) {
   background-color: rgba(0, 0, 0, 0.02);
 }
 
-.h-split-resizer {
+.column-separator {
   width: 6px;
-  position: relative;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  margin: 0 2px;
   cursor: ew-resize;
-  background-color: transparent;
-  z-index: 5;
+  position: relative;
+}
+
+.column-separator:hover {
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
-.h-split-resizer::after {
+.column-separator::after {
   content: "";
   position: absolute;
   top: 10%;
@@ -241,13 +259,6 @@ function onVerticalResizeStart(event, index) {
   width: 2px;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 1px;
-  transition: background-color 0.2s;
-}
-
-.h-split-resizer:hover::after {
-  background-color: rgba(0, 0, 0, 0.4);
-  width: 3px;
-  left: 1.5px;
 }
 
 .v-split-resizer {
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index ac0b39ff..f3297f7a 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -5,6 +5,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   const selection = ref([]);
   const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
   const panelWidth = ref(PANEL_WIDTH);
+  const additionalPanelWidth = ref(PANEL_WIDTH);
   const isImporting = ref(false);
   const pendingSelectionIds = ref([]);
 
@@ -45,6 +46,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
       closeView(existingIndex);
       return;
     }
+    additionalPanelWidth.value = panelWidth.value;
     opened_views.value.push({
       type: "component",
       id,
@@ -74,11 +76,15 @@ export const useTreeviewStore = defineStore("treeview", () => {
   function setPanelWidth(width) {
     panelWidth.value = width;
   }
+  function setAdditionalPanelWidth(width) {
+    additionalPanelWidth.value = width;
+  }
 
   function exportStores() {
     return {
       opened_views: opened_views.value,
       panelWidth: panelWidth.value,
+      additionalPanelWidth: additionalPanelWidth.value,
       selectionIds: selection.value,
     };
   }
@@ -88,6 +94,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
       { type: "object", id: "main", title: "Objects" },
     ];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
+    additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
 
     pendingSelectionIds.value =
       snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
@@ -149,6 +156,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     selection,
     opened_views,
     panelWidth,
+    additionalPanelWidth,
     isImporting,
     addItem,
     removeItem,
@@ -157,6 +165,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     moveView,
     displayFileTree,
     setPanelWidth,
+    setAdditionalPanelWidth,
     exportStores,
     importStores,
     finalizeImportSelection,

From 96209e4d418c494d23e8b527f63095f202517ba3 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:03:56 +0000
Subject: [PATCH 10/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Layout.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 950ddb3e..c898b95d 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -85,7 +85,6 @@ function onAdditionalResizeStart(event) {
   document.addEventListener("mouseup", stopResize);
 }
 
-
 function onVerticalResizeStart(event, index) {
   const startY = event.clientY;
   const startHeight1 = rowHeights.value[index];
@@ -183,7 +182,9 @@ function onVerticalResizeStart(event, index) {
     </div>
     <div
       class="total-resizer"
-      @mousedown="additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)"
+      @mousedown="
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+      "
     />
   </div>
 </template>

From c47b12f8153c4fb01eb1f2408a13e18bb7eaf494 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 17:11:20 +0200
Subject: [PATCH 11/31] bigger smallest size

---
 app/components/Viewer/ObjectTree/Layout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 950ddb3e..7c854b26 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -5,7 +5,7 @@ import ModelComponentsView from "@ogw_front/components/Viewer/ObjectTree/Views/M
 import TreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const WIDTH_MIN = 300;
+const WIDTH_MIN = 200;
 const HEIGHT_MIN = 150;
 
 const treeviewStore = useTreeviewStore();

From 04abf14150fcb26d20bced40859c8cbd546db91b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 17:27:49 +0200
Subject: [PATCH 12/31] oxlint fix

---
 .../Viewer/ObjectTree/Base/Controls.vue       |  4 +-
 .../Viewer/ObjectTree/Base/ItemLabel.vue      |  2 +-
 app/components/Viewer/ObjectTree/Box.vue      |  6 +--
 app/components/Viewer/ObjectTree/Layout.vue   | 41 +++++++++++++------
 .../ObjectTree/Views/GlobalObjectsView.vue    | 15 +++----
 .../ObjectTree/Views/ModelComponentsView.vue  | 15 ++++---
 app/components/Viewer/Ui.vue                  |  4 +-
 7 files changed, 53 insertions(+), 34 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index b04360f8..41163d67 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -1,8 +1,8 @@
 <script setup>
-import SearchBar from "@ogw_front/components/SearchBar.vue";
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
 
-const props = defineProps({
+const { search, sortType, filterOptions, availableFilterOptions } = defineProps({
   search: { type: String, required: true },
   sortType: { type: String, required: true },
   filterOptions: { type: Object, required: true },
diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index d5c90fee..841b4db1 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -1,5 +1,5 @@
 <script setup>
-const props = defineProps({
+const { item, showTooltip } = defineProps({
   item: { type: Object, required: true },
   showTooltip: { type: Boolean, default: false },
 });
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index ddfde087..a9cb6d26 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 
-const props = defineProps({
+const { title, closable, geode_object_type, mdiIcon } = defineProps({
   title: { type: String, required: true },
   closable: { type: Boolean, default: false },
   geode_object_type: { type: String, default: "" },
@@ -12,8 +12,8 @@ const props = defineProps({
 const emit = defineEmits(["close", "dragstart"]);
 
 const icon = computed(() => {
-  if (props.geode_object_type && geode_objects[props.geode_object_type]) {
-    return geode_objects[props.geode_object_type].image;
+  if (geode_object_type && geode_objects[geode_object_type]) {
+    return geode_objects[geode_object_type].image;
   }
   return undefined;
 });
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 7e8b886c..5b8d9ccc 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { ref, computed, watch } from "vue";
 import GlobalObjectsView from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue";
 import ModelComponentsView from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponentsView.vue";
 import TreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
@@ -7,6 +6,10 @@ import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const WIDTH_MIN = 200;
 const HEIGHT_MIN = 150;
+const GAP_WIDTH = 10;
+const PERCENT_100 = 100;
+
+const TOTAL_PERCENT = 100;
 
 const treeviewStore = useTreeviewStore();
 const emit = defineEmits(["show-menu"]);
@@ -16,19 +19,21 @@ const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
 
 const totalWidth = computed(() => {
   const hasAdditional = additionalViews.value.length > 0;
-  const gap = hasAdditional ? 10 : 0;
+  const gap = hasAdditional ? GAP_WIDTH : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
   return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
 });
 
 const rowHeights = ref([]);
-const draggedIndex = ref(null);
+const draggedIndex = ref(undefined);
 
 watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      rowHeights.value = new Array(newLength).fill(100 / newLength);
+      rowHeights.value = Array.from({ length: newLength }).fill(
+        PERCENT_100 / newLength,
+      );
     }
   },
   { immediate: true },
@@ -43,10 +48,10 @@ function onDragOver(event) {
 }
 
 function onDrop(targetIndex) {
-  if (draggedIndex.value !== null && draggedIndex.value !== targetIndex) {
+  if (draggedIndex.value !== undefined && draggedIndex.value !== targetIndex) {
     treeviewStore.moveView(draggedIndex.value, targetIndex);
   }
-  draggedIndex.value = null;
+  draggedIndex.value = undefined;
 }
 
 function onResizeStart(event) {
@@ -93,8 +98,8 @@ function onVerticalResizeStart(event, index) {
 
   function resize(move_event) {
     const deltaY = move_event.clientY - startY;
-    const deltaPercent = (deltaY / containerHeight) * 100;
-    const minHeightPercent = (HEIGHT_MIN / containerHeight) * 100;
+    const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
+    const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
 
     let newH1 = startHeight1 + deltaPercent;
     let newH2 = startHeight2 - deltaPercent;
@@ -144,7 +149,11 @@ function onVerticalResizeStart(event, index) {
       </TreeBox>
     </div>
 
-    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+    <div
+      v-if="additionalViews.length > 0"
+      class="column-separator"
+      @mousedown="onResizeStart"
+    />
 
     <div
       v-if="additionalViews.length > 0"
@@ -157,7 +166,8 @@ function onVerticalResizeStart(event, index) {
         <div
           class="view-wrapper"
           :class="{
-            'drag-over': draggedIndex !== null && draggedIndex !== index + 1,
+            'drag-over':
+              draggedIndex !== undefined && draggedIndex !== index + 1,
           }"
           :style="{ flex: `0 0 ${rowHeights[index]}%` }"
           @dragover="onDragOver"
@@ -170,7 +180,10 @@ function onVerticalResizeStart(event, index) {
             @close="treeviewStore.closeView(index + 1)"
             @dragstart="onDragStart(index + 1)"
           >
-            <ModelComponentsView :id="view.id" @show-menu="emit('show-menu', $event)" />
+            <ModelComponentsView
+              :id="view.id"
+              @show-menu="emit('show-menu', $event)"
+            />
           </TreeBox>
         </div>
         <div
@@ -183,7 +196,9 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+        additionalViews.length > 0
+          ? onAdditionalResizeStart($event)
+          : onResizeStart($event)
       "
     />
   </div>
@@ -195,7 +210,7 @@ function onVerticalResizeStart(event, index) {
   z-index: 2;
   left: 0;
   top: 0;
-  height: calc(100vh - 100px); /* Adjust based on your header height */
+  height: calc(100vh - 100px);
   margin-top: 10px;
   margin-left: 10px;
   pointer-events: auto;
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index b4faa478..518b5b2c 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { watch, toRef } from "vue";
+import { toRef, watch } from "vue";
+import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useTreeFilter } from "@ogw_front/composables/useTreeFilter";
-import { compareSelections } from "@ogw_front/utils/treeview";
-
-import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
-import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const treeviewStore = useTreeviewStore();
 const dataStyleStore = useDataStyleStore();
@@ -29,7 +28,9 @@ watch(
   () => treeviewStore.selection,
   async (current, previous) => {
     const oldSelection = previous || [];
-    if (current === oldSelection) return;
+    if (current === oldSelection) {
+      return;
+    }
 
     const { added, removed } = compareSelections(current, previous);
 
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
index 459a6a5f..7a54281f 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
@@ -1,13 +1,12 @@
 <script setup>
+import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { toRef } from "vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeFilter } from "@ogw_front/composables/useTreeFilter";
-import { compareSelections } from "@ogw_front/utils/treeview";
-
-import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
-import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 
 const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
@@ -17,7 +16,9 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(
+  toRef(() => id),
+);
 
 const {
   search,
@@ -33,7 +34,9 @@ async function onSelectionChange(current) {
   const previous = mesh_components_selection.value;
   const { added, removed } = compareSelections(current, previous);
 
-  if (added.length === 0 && removed.length === 0) return;
+  if (added.length === 0 && removed.length === 0) {
+    return;
+  }
 
   if (added.length > 0) {
     await dataStyleStore.setModelComponentsVisibility(id, added, true);
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 94706c5b..4a080515 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,11 +1,11 @@
 <script setup>
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
 import ViewerTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useViewerStore } from "@ogw_front/stores/viewer";
 import { useMenuStore } from "@ogw_front/stores/menu";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const { displayMenu, containerWidth, containerHeight } = defineProps({
   displayMenu: { type: Boolean, required: true },

From a1708d59cf7033da316c5373e50e2e0170a817af Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:28:30 +0000
Subject: [PATCH 13/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Layout.vue   | 22 +++++--------------
 .../ObjectTree/Views/ModelComponentsView.vue  |  4 +---
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 5b8d9ccc..ebdb584f 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -31,9 +31,7 @@ watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      rowHeights.value = Array.from({ length: newLength }).fill(
-        PERCENT_100 / newLength,
-      );
+      rowHeights.value = Array.from({ length: newLength }).fill(PERCENT_100 / newLength);
     }
   },
   { immediate: true },
@@ -149,11 +147,7 @@ function onVerticalResizeStart(event, index) {
       </TreeBox>
     </div>
 
-    <div
-      v-if="additionalViews.length > 0"
-      class="column-separator"
-      @mousedown="onResizeStart"
-    />
+    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
 
     <div
       v-if="additionalViews.length > 0"
@@ -166,8 +160,7 @@ function onVerticalResizeStart(event, index) {
         <div
           class="view-wrapper"
           :class="{
-            'drag-over':
-              draggedIndex !== undefined && draggedIndex !== index + 1,
+            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
           }"
           :style="{ flex: `0 0 ${rowHeights[index]}%` }"
           @dragover="onDragOver"
@@ -180,10 +173,7 @@ function onVerticalResizeStart(event, index) {
             @close="treeviewStore.closeView(index + 1)"
             @dragstart="onDragStart(index + 1)"
           >
-            <ModelComponentsView
-              :id="view.id"
-              @show-menu="emit('show-menu', $event)"
-            />
+            <ModelComponentsView :id="view.id" @show-menu="emit('show-menu', $event)" />
           </TreeBox>
         </div>
         <div
@@ -196,9 +186,7 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0
-          ? onAdditionalResizeStart($event)
-          : onResizeStart($event)
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
       "
     />
   </div>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
index 7a54281f..530d7c9c 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
@@ -16,9 +16,7 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(
-  toRef(() => id),
-);
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
 
 const {
   search,

From 0d4e3d78881fb5d8cc9e08cbd0899a7b0a3bd1bb Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Mon, 13 Apr 2026 17:36:04 +0200
Subject: [PATCH 14/31] oxlint

---
 .../ObjectTree/Views/GlobalObjectsView.vue    |  13 +-
 .../ObjectTree/Views/ModelComponentsView.vue  |   3 +-
 app/composables/useTreeFilter.js              |  70 -----
 app/composables/use_tree_filter.js            |  79 ++++++
 app/stores/treeview.js                        | 261 +++++++-----------
 5 files changed, 194 insertions(+), 232 deletions(-)
 delete mode 100644 app/composables/useTreeFilter.js
 create mode 100644 app/composables/use_tree_filter.js

diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index 518b5b2c..4c660788 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -1,11 +1,10 @@
 <script setup>
-import { toRef, watch } from "vue";
 import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeFilter } from "@ogw_front/composables/useTreeFilter";
+import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const treeviewStore = useTreeviewStore();
@@ -35,7 +34,9 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
+      treeviewStore.items.flatMap((group) =>
+        group.children.map((child) => child.id),
+      ),
     );
 
     const updates = [
@@ -92,7 +93,11 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
+            treeviewStore.displayAdditionalTree(
+              item.id,
+              item.title,
+              item.geode_object_type,
+            )
           "
         />
       </template>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
index 7a54281f..c2bda141 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
@@ -2,11 +2,10 @@
 import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
-import { toRef } from "vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeFilter } from "@ogw_front/composables/useTreeFilter";
+import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
 
 const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
diff --git a/app/composables/useTreeFilter.js b/app/composables/useTreeFilter.js
deleted file mode 100644
index 495f620f..00000000
--- a/app/composables/useTreeFilter.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ref, computed, watch } from "vue";
-
-export function useTreeFilter(rawItems, options = {}) {
-  const search = ref("");
-  const sortType = ref(options.defaultSort || "name");
-  const filterOptions = ref(options.defaultFilters || {});
-
-  const availableFilterOptions = computed(() =>
-    rawItems.value.map((category) => category.title || category.id),
-  );
-
-  // Initialize filter options if they don't exist
-  watch(
-    availableFilterOptions,
-    (newOptions) => {
-      for (const option of newOptions) {
-        if (filterOptions.value[option] === undefined) {
-          filterOptions.value[option] = true;
-        }
-      }
-    },
-    { immediate: true },
-  );
-
-  const processedItems = computed(() => {
-    return rawItems.value
-      .filter((category) => {
-        const key = category.title || category.id;
-        return filterOptions.value[key] !== false;
-      })
-      .map((category) => {
-        const field = sortType.value === "name" ? "title" : "id";
-        const children = (category.children || []).toSorted((first, second) => {
-          const val1 = first[field] || "";
-          const val2 = second[field] || "";
-          return val1.localeCompare(val2, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          });
-        });
-        return {
-          ...category,
-          title: category.title || category.id,
-          children,
-        };
-      });
-  });
-
-  function toggleSort() {
-    sortType.value = sortType.value === "name" ? "id" : "name";
-  }
-
-  function customFilter(_value, searchQuery, item) {
-    if (!searchQuery) return true;
-    const query = searchQuery.toLowerCase();
-    const title = (item.raw.title || "").toLowerCase();
-    const id = (item.raw.id || "").toLowerCase();
-    return title.includes(query) || id.includes(query);
-  }
-
-  return {
-    search,
-    sortType,
-    filterOptions,
-    processedItems,
-    availableFilterOptions,
-    toggleSort,
-    customFilter,
-  };
-}
diff --git a/app/composables/use_tree_filter.js b/app/composables/use_tree_filter.js
new file mode 100644
index 00000000..709e6578
--- /dev/null
+++ b/app/composables/use_tree_filter.js
@@ -0,0 +1,79 @@
+import { computed, ref, watch } from "vue";
+
+function customFilter(_value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  const title = (item.raw.title || "").toLowerCase();
+  const id = (item.raw.id || "").toLowerCase();
+  return title.includes(query) || id.includes(query);
+}
+
+function sortAndFormatItems(items, sortType) {
+  const field = sortType === "name" ? "title" : "id";
+  return items.map((category) => {
+    const children = (category.children || []).toSorted((first, second) => {
+      const val1 = first[field] || "";
+      const val2 = second[field] || "";
+      return val1.localeCompare(val2, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      });
+    });
+    return {
+      id: category.id,
+      title: category.title || category.id,
+      geode_object_type: category.geode_object_type,
+      children,
+    };
+  });
+}
+
+function useTreeFilter(rawItems, options = {}) {
+  const search = ref("");
+  const sortType = ref(options.defaultSort || "name");
+  const filterOptions = ref(options.defaultFilters || {});
+
+  const availableFilterOptions = computed(() =>
+    rawItems.value.map((category) => category.title || category.id),
+  );
+
+  watch(
+    availableFilterOptions,
+    (newOptions) => {
+      for (const option of newOptions) {
+        if (filterOptions.value[option] === undefined) {
+          filterOptions.value[option] = true;
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  const processedItems = computed(() =>
+    sortAndFormatItems(
+      rawItems.value.filter((category) => {
+        const key = category.title || category.id;
+        return filterOptions.value[key] !== false;
+      }),
+      sortType.value,
+    ),
+  );
+
+  function toggleSort() {
+    sortType.value = sortType.value === "name" ? "id" : "name";
+  }
+
+  return {
+    search,
+    sortType,
+    filterOptions,
+    processedItems,
+    availableFilterOptions,
+    toggleSort,
+    customFilter,
+  };
+}
+
+export { customFilter, useTreeFilter };
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index f3297f7a..0d638376 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,174 +1,123 @@
-export const useTreeviewStore = defineStore("treeview", () => {
-  const PANEL_WIDTH = 300;
-
-  const items = ref([]);
-  const selection = ref([]);
-  const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
-  const panelWidth = ref(PANEL_WIDTH);
-  const additionalPanelWidth = ref(PANEL_WIDTH);
-  const isImporting = ref(false);
-  const pendingSelectionIds = ref([]);
-
-  // /** Functions **/
-  function addItem(geode_object_type, name, id, viewer_type) {
-    const child = { title: name, id, viewer_type, geode_object_type };
-
-    for (let i = 0; i < items.value.length; i += 1) {
-      if (items.value[i].title === geode_object_type) {
-        items.value[i].children.push(child);
-        items.value[i].children.sort((element1, element2) =>
-          element1.title.localeCompare(element2.title, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          }),
-        );
-        selection.value.push(id);
-        return;
-      }
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+const PANEL_WIDTH = 300;
+
+function addItemToItems(items, params) {
+  const { geodeObjectType, name, id, viewerType } = params;
+  const child = { title: name, id, viewerType, geode_object_type: geodeObjectType };
+  for (const item of items.value) {
+    if (item.title === geodeObjectType) {
+      item.children.push(child);
+      const opt = { numeric: true, sensitivity: "base" };
+      item.children.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, opt));
+      return;
     }
-    items.value.push({
-      id: geode_object_type,
-      title: geode_object_type,
-      children: [child],
-    });
-    items.value.sort((element1, element2) =>
-      element1.title.localeCompare(element2.title, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-    );
-    selection.value.push(id);
   }
-
-  function displayAdditionalTree(id, title, geode_object_type) {
-    const existingIndex = opened_views.value.findIndex((view) => view.id === id);
-    if (existingIndex !== -1) {
-      closeView(existingIndex);
+  items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
+  const sortOpt = { numeric: true, sensitivity: "base" };
+  items.value.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, sortOpt));
+}
+
+function removeItemFromItems(items, selection, id) {
+  for (let i = 0; i < items.value.length; i += 1) {
+    const group = items.value[i];
+    const childIndex = group.children.findIndex((child) => child.id === id);
+    if (childIndex !== -1) {
+      group.children.splice(childIndex, 1);
+      if (group.children.length === 0) {
+        items.value.splice(i, 1);
+      }
+      const sIdx = selection.value.indexOf(id);
+      if (sIdx !== -1) {
+        selection.value.splice(sIdx, 1);
+      }
       return;
     }
-    additionalPanelWidth.value = panelWidth.value;
-    opened_views.value.push({
-      type: "component",
-      id,
-      title: title || id,
-      geode_object_type,
-    });
   }
-
-  function closeView(index) {
-    if (index > 0) {
-      opened_views.value.splice(index, 1);
+}
+
+function processImport(snapshot) {
+  const views = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
+  const pWidth = snapshot?.panelWidth || PANEL_WIDTH;
+  const apWidth = snapshot?.additionalPanelWidth || PANEL_WIDTH;
+  const ids = snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
+  return { opened_views: views, panelWidth: pWidth, additionalPanelWidth: apWidth, ids };
+}
+
+function finalizeRebuild(items, ids) {
+  const rebuilt = [];
+  for (const group of items.value) {
+    for (const child of group.children) {
+      if (ids.length === 0 || ids.includes(child.id)) {
+        rebuilt.push(child.id || child);
+      }
     }
   }
+  return rebuilt;
+}
 
-  function moveView(fromIndex, toIndex) {
-    if (fromIndex === 0 || toIndex === 0) {
-      return;
+function createActions(state) {
+  const { items, selection, peek, panelWidth, additionalPanelWidth, pendingIds } = state;
+  function closeView(index) {
+    if (index > 0) {
+      peek.value.splice(index, 1);
     }
-    const element = opened_views.value.splice(fromIndex, 1)[0];
-    opened_views.value.splice(toIndex, 0, element);
-  }
-
-  function displayFileTree() {
-    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
-  }
-
-  function setPanelWidth(width) {
-    panelWidth.value = width;
-  }
-  function setAdditionalPanelWidth(width) {
-    additionalPanelWidth.value = width;
   }
-
-  function exportStores() {
-    return {
-      opened_views: opened_views.value,
-      panelWidth: panelWidth.value,
-      additionalPanelWidth: additionalPanelWidth.value,
-      selectionIds: selection.value,
-    };
-  }
-
-  function importStores(snapshot) {
-    opened_views.value = snapshot?.opened_views || [
-      { type: "object", id: "main", title: "Objects" },
-    ];
-    panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
-    additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
-
-    pendingSelectionIds.value =
-      snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
-  }
-
-  function finalizeImportSelection() {
-    const ids = pendingSelectionIds.value || [];
-    const rebuilt = [];
-    if (ids.length === 0) {
-      for (const group of items.value) {
-        for (const child of group.children) {
-          rebuilt.push(child);
-        }
+  return {
+    addItem: (geodeObjectType, name, id, viewerType) => {
+      addItemToItems(items, { geodeObjectType, name, id, viewerType });
+      selection.value.push(id);
+    },
+    displayAdditionalTree: (id, title, geodeObjectType) => {
+      const idx = peek.value.findIndex((view) => view.id === id);
+      if (idx !== -1) {
+        return closeView(idx);
       }
-    } else {
-      for (const group of items.value) {
-        for (const child of group.children) {
-          if (ids.includes(child.id)) {
-            rebuilt.push(child.id);
-          }
-        }
+      additionalPanelWidth.value = panelWidth.value;
+      peek.value.push({ type: "component", id, title: title || id, geode_object_type: geodeObjectType });
+    },
+    closeView,
+    moveView: (fromIdx, toIdx) => {
+      if (fromIdx !== 0 && toIdx !== 0) {
+        const [element] = peek.value.splice(fromIdx, 1);
+        peek.value.splice(toIdx, 0, element);
       }
-    }
-    selection.value = rebuilt;
-    pendingSelectionIds.value = [];
-  }
-
-  function removeItem(id) {
-    for (let i = 0; i < items.value.length; i += 1) {
-      const group = items.value[i];
-      const childIndex = group.children.findIndex((child) => child.id === id);
-
-      if (childIndex !== -1) {
-        group.children.splice(childIndex, 1);
-
-        if (group.children.length === 0) {
-          items.value.splice(i, 1);
-        }
-
-        const selectionIndex = selection.value.indexOf(id);
-        if (selectionIndex !== -1) {
-          selection.value.splice(selectionIndex, 1);
-        }
+    },
+    importStores: (snapshot) => {
+      const data = processImport(snapshot);
+      peek.value = data.opened_views; panelWidth.value = data.panelWidth;
+      additionalPanelWidth.value = data.additionalPanelWidth; pendingIds.value = data.ids;
+    },
+  };
+}
 
-        return;
-      }
-    }
-  }
+export const useTreeviewStore = defineStore("treeview", () => {
+  const items = ref([]);
+  const selection = ref([]);
+  const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
+  const panelWidth = ref(PANEL_WIDTH);
+  const additionalPanelWidth = ref(PANEL_WIDTH);
+  const isImporting = ref(false);
+  const pendingSelectionIds = ref([]);
 
-  function clear() {
-    items.value = [];
-    selection.value = [];
-    pendingSelectionIds.value = [];
-    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
-  }
+  const acts = createActions({ items, selection, peek: opened_views, panelWidth, additionalPanelWidth, pendingIds: pendingSelectionIds });
 
   return {
-    items,
-    selection,
-    opened_views,
-    panelWidth,
-    additionalPanelWidth,
-    isImporting,
-    addItem,
-    removeItem,
-    displayAdditionalTree,
-    closeView,
-    moveView,
-    displayFileTree,
-    setPanelWidth,
-    setAdditionalPanelWidth,
-    exportStores,
-    importStores,
-    finalizeImportSelection,
-    clear,
+    ...acts,
+    items, selection, opened_views, panelWidth, additionalPanelWidth, isImporting,
+    removeItem: (id) => removeItemFromItems(items, selection, id),
+    displayFileTree: () => (opened_views.value = [{ type: "object", id: "main", title: "Objects" }]),
+    setPanelWidth: (width) => (panelWidth.value = width),
+    setAdditionalPanelWidth: (width) => (additionalPanelWidth.value = width),
+    exportStores: () => ({ opened_views: opened_views.value, panelWidth: panelWidth.value, additionalPanelWidth: additionalPanelWidth.value, selectionIds: selection.value }),
+    finalizeImportSelection: () => {
+      selection.value = finalizeRebuild(items, pendingSelectionIds.value);
+      pendingSelectionIds.value = [];
+    },
+    clear: () => {
+      items.value = []; selection.value = []; pendingSelectionIds.value = [];
+      opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
+    },
   };
 });

From 3cca529b9ab2a71284918df4b9917eec784038a9 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Mon, 13 Apr 2026 15:37:15 +0000
Subject: [PATCH 15/31] Apply prepare changes

---
 .../ObjectTree/Views/GlobalObjectsView.vue    | 10 +---
 app/stores/treeview.js                        | 46 +++++++++++++++----
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
index 4c660788..c9dfc6f6 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
@@ -34,9 +34,7 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) =>
-        group.children.map((child) => child.id),
-      ),
+      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
     );
 
     const updates = [
@@ -93,11 +91,7 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-            )
+            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
           "
         />
       </template>
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 0d638376..bd064ec3 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -41,7 +41,8 @@ function processImport(snapshot) {
   const views = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
   const pWidth = snapshot?.panelWidth || PANEL_WIDTH;
   const apWidth = snapshot?.additionalPanelWidth || PANEL_WIDTH;
-  const ids = snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
+  const ids =
+    snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
   return { opened_views: views, panelWidth: pWidth, additionalPanelWidth: apWidth, ids };
 }
 
@@ -75,7 +76,12 @@ function createActions(state) {
         return closeView(idx);
       }
       additionalPanelWidth.value = panelWidth.value;
-      peek.value.push({ type: "component", id, title: title || id, geode_object_type: geodeObjectType });
+      peek.value.push({
+        type: "component",
+        id,
+        title: title || id,
+        geode_object_type: geodeObjectType,
+      });
     },
     closeView,
     moveView: (fromIdx, toIdx) => {
@@ -86,8 +92,10 @@ function createActions(state) {
     },
     importStores: (snapshot) => {
       const data = processImport(snapshot);
-      peek.value = data.opened_views; panelWidth.value = data.panelWidth;
-      additionalPanelWidth.value = data.additionalPanelWidth; pendingIds.value = data.ids;
+      peek.value = data.opened_views;
+      panelWidth.value = data.panelWidth;
+      additionalPanelWidth.value = data.additionalPanelWidth;
+      pendingIds.value = data.ids;
     },
   };
 }
@@ -101,22 +109,42 @@ export const useTreeviewStore = defineStore("treeview", () => {
   const isImporting = ref(false);
   const pendingSelectionIds = ref([]);
 
-  const acts = createActions({ items, selection, peek: opened_views, panelWidth, additionalPanelWidth, pendingIds: pendingSelectionIds });
+  const acts = createActions({
+    items,
+    selection,
+    peek: opened_views,
+    panelWidth,
+    additionalPanelWidth,
+    pendingIds: pendingSelectionIds,
+  });
 
   return {
     ...acts,
-    items, selection, opened_views, panelWidth, additionalPanelWidth, isImporting,
+    items,
+    selection,
+    opened_views,
+    panelWidth,
+    additionalPanelWidth,
+    isImporting,
     removeItem: (id) => removeItemFromItems(items, selection, id),
-    displayFileTree: () => (opened_views.value = [{ type: "object", id: "main", title: "Objects" }]),
+    displayFileTree: () =>
+      (opened_views.value = [{ type: "object", id: "main", title: "Objects" }]),
     setPanelWidth: (width) => (panelWidth.value = width),
     setAdditionalPanelWidth: (width) => (additionalPanelWidth.value = width),
-    exportStores: () => ({ opened_views: opened_views.value, panelWidth: panelWidth.value, additionalPanelWidth: additionalPanelWidth.value, selectionIds: selection.value }),
+    exportStores: () => ({
+      opened_views: opened_views.value,
+      panelWidth: panelWidth.value,
+      additionalPanelWidth: additionalPanelWidth.value,
+      selectionIds: selection.value,
+    }),
     finalizeImportSelection: () => {
       selection.value = finalizeRebuild(items, pendingSelectionIds.value);
       pendingSelectionIds.value = [];
     },
     clear: () => {
-      items.value = []; selection.value = []; pendingSelectionIds.value = [];
+      items.value = [];
+      selection.value = [];
+      pendingSelectionIds.value = [];
       opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
     },
   };

From 6485f65c89f87f974bb979c8c82574fbadfabce9 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 14 Apr 2026 15:46:08 +0200
Subject: [PATCH 16/31] changes comments

---
 .../Viewer/ObjectTree/Base/ItemLabel.vue      |  14 +-
 app/components/Viewer/ObjectTree/Layout.vue   |  18 +-
 ...lobalObjectsView.vue => GlobalObjects.vue} |   0
 ...ComponentsView.vue => ModelComponents.vue} |   0
 app/components/Viewer/Ui.vue                  |   8 +-
 app/composables/use_tree_filter.js            |   8 +-
 app/stores/treeview.js                        | 209 ++++++++----------
 7 files changed, 122 insertions(+), 135 deletions(-)
 rename app/components/Viewer/ObjectTree/Views/{GlobalObjectsView.vue => GlobalObjects.vue} (100%)
 rename app/components/Viewer/ObjectTree/Views/{ModelComponentsView.vue => ModelComponents.vue} (100%)

diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index 841b4db1..e28215af 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -14,13 +14,19 @@ const emit = defineEmits(["contextmenu"]);
     @contextmenu.prevent.stop="emit('contextmenu', $event)"
   >
     {{ item.title }}
-
-    <v-tooltip v-if="showTooltip && item.category" activator="parent" location="right">
+    <v-tooltip
+      v-if="showTooltip && item.category"
+      activator="parent"
+      location="right"
+    >
       <div class="d-flex flex-column pa-1">
         <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
-        <span v-if="item.title" class="text-caption"><strong>Name:</strong> {{ item.title }}</span>
+        <span v-if="item.title" class="text-caption"
+          ><strong>Name:</strong> {{ item.title }}</span
+        >
         <span class="text-caption font-italic border-t-sm d-flex align-center">
-          <strong class="mr-1">Status:</strong> {{ item.is_active ? "Active" : "Inactive" }}
+          <strong class="mr-1">Status:</strong>
+          {{ item.is_active ? "Active" : "Inactive" }}
         </span>
       </div>
     </v-tooltip>
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index ebdb584f..9419cb29 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,7 +1,7 @@
 <script setup>
-import GlobalObjectsView from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue";
-import ModelComponentsView from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponentsView.vue";
-import TreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
+import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
+import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
+import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const WIDTH_MIN = 200;
@@ -142,9 +142,9 @@ function onVerticalResizeStart(event, index) {
         width: `${treeviewStore.panelWidth}px`,
       }"
     >
-      <TreeBox :title="mainView.title" mdi-icon="mdi-file-tree-outline">
-        <GlobalObjectsView @show-menu="emit('show-menu', $event)" />
-      </TreeBox>
+      <ViewerObjectTreeBox :title="mainView.title" mdi-icon="mdi-file-tree-outline">
+        <GlobalObjects @show-menu="emit('show-menu', $event)" />
+      </ViewerObjectTreeBox>
     </div>
 
     <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
@@ -166,15 +166,15 @@ function onVerticalResizeStart(event, index) {
           @dragover="onDragOver"
           @drop="onDrop(index + 1)"
         >
-          <TreeBox
+          <ViewerObjectTreeBox
             :title="view.title"
             :geode_object_type="view.geode_object_type"
             closable
             @close="treeviewStore.closeView(index + 1)"
             @dragstart="onDragStart(index + 1)"
           >
-            <ModelComponentsView :id="view.id" @show-menu="emit('show-menu', $event)" />
-          </TreeBox>
+            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
+          </ViewerObjectTreeBox>
         </div>
         <div
           v-if="index < additionalViews.length - 1"
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
similarity index 100%
rename from app/components/Viewer/ObjectTree/Views/GlobalObjectsView.vue
rename to app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
similarity index 100%
rename from app/components/Viewer/ObjectTree/Views/ModelComponentsView.vue
rename to app/components/Viewer/ObjectTree/Views/ModelComponents.vue
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index 4a080515..ed4acb10 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -1,6 +1,6 @@
 <script setup>
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
-import ViewerTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
+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";
@@ -23,7 +23,9 @@ const dataItems = dataStore.refAllItems();
 
 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 };
   await viewerStore.request(
@@ -44,7 +46,7 @@ defineExpose({ get_viewer_id });
 </script>
 
 <template>
-  <ViewerTreeLayout @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerObjectTreeLayout @show-menu="(args) => emit('show-menu', args)" />
   <ViewerContextMenu
     v-if="displayMenu"
     :id="menuStore.current_id"
diff --git a/app/composables/use_tree_filter.js b/app/composables/use_tree_filter.js
index 709e6578..91ea4067 100644
--- a/app/composables/use_tree_filter.js
+++ b/app/composables/use_tree_filter.js
@@ -1,13 +1,11 @@
-import { computed, ref, watch } from "vue";
-
-function customFilter(_value, searchQuery, item) {
+function customFilter(value, searchQuery, item) {
   if (!searchQuery) {
     return true;
   }
   const query = searchQuery.toLowerCase();
   const title = (item.raw.title || "").toLowerCase();
-  const id = (item.raw.id || "").toLowerCase();
-  return title.includes(query) || id.includes(query);
+  const idValue = String(value || "").toLowerCase();
+  return title.includes(query) || idValue.includes(query);
 }
 
 function sortAndFormatItems(items, sortType) {
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index bd064ec3..33ba23eb 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,132 +1,120 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
-
 const PANEL_WIDTH = 300;
 
-function addItemToItems(items, params) {
-  const { geodeObjectType, name, id, viewerType } = params;
-  const child = { title: name, id, viewerType, geode_object_type: geodeObjectType };
-  for (const item of items.value) {
-    if (item.title === geodeObjectType) {
-      item.children.push(child);
-      const opt = { numeric: true, sensitivity: "base" };
-      item.children.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, opt));
-      return;
+export const useTreeviewStore = defineStore("treeview", () => {
+  const items = ref([]);
+  const selection = ref([]);
+  const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
+  const panelWidth = ref(PANEL_WIDTH);
+  const additionalPanelWidth = ref(PANEL_WIDTH);
+  const isImporting = ref(false);
+  const pendingSelectionIds = ref([]);
+
+  function closeView(index) {
+    if (index > 0) {
+      opened_views.value.splice(index, 1);
     }
   }
-  items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
-  const sortOpt = { numeric: true, sensitivity: "base" };
-  items.value.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, sortOpt));
-}
 
-function removeItemFromItems(items, selection, id) {
-  for (let i = 0; i < items.value.length; i += 1) {
-    const group = items.value[i];
-    const childIndex = group.children.findIndex((child) => child.id === id);
-    if (childIndex !== -1) {
-      group.children.splice(childIndex, 1);
-      if (group.children.length === 0) {
-        items.value.splice(i, 1);
+  function addItem(geodeObjectType, name, id, viewerType) {
+    const child = { title: name, id, viewerType, geode_object_type: geodeObjectType };
+    let found = false;
+    for (const item of items.value) {
+      if (item.title === geodeObjectType) {
+        item.children.push(child);
+        const opt = { numeric: true, sensitivity: "base" };
+        item.children.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, opt));
+        found = true;
+        break;
       }
-      const sIdx = selection.value.indexOf(id);
-      if (sIdx !== -1) {
-        selection.value.splice(sIdx, 1);
-      }
-      return;
     }
+    if (!found) {
+      items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
+      const sortOpt = { numeric: true, sensitivity: "base" };
+      items.value.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, sortOpt));
+    }
+    selection.value.push(id);
   }
-}
-
-function processImport(snapshot) {
-  const views = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
-  const pWidth = snapshot?.panelWidth || PANEL_WIDTH;
-  const apWidth = snapshot?.additionalPanelWidth || PANEL_WIDTH;
-  const ids =
-    snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
-  return { opened_views: views, panelWidth: pWidth, additionalPanelWidth: apWidth, ids };
-}
 
-function finalizeRebuild(items, ids) {
-  const rebuilt = [];
-  for (const group of items.value) {
-    for (const child of group.children) {
-      if (ids.length === 0 || ids.includes(child.id)) {
-        rebuilt.push(child.id || child);
+  function removeItem(id) {
+    for (let i = 0; i < items.value.length; i += 1) {
+      const group = items.value[i];
+      const childIndex = group.children.findIndex((child) => child.id === id);
+      if (childIndex !== -1) {
+        group.children.splice(childIndex, 1);
+        if (group.children.length === 0) {
+          items.value.splice(i, 1);
+        }
+        const sIdx = selection.value.indexOf(id);
+        if (sIdx !== -1) {
+          selection.value.splice(sIdx, 1);
+        }
+        return;
       }
     }
   }
-  return rebuilt;
-}
 
-function createActions(state) {
-  const { items, selection, peek, panelWidth, additionalPanelWidth, pendingIds } = state;
-  function closeView(index) {
-    if (index > 0) {
-      peek.value.splice(index, 1);
+  function displayAdditionalTree(id, title, geodeObjectType) {
+    const idx = opened_views.value.findIndex((view) => view.id === id);
+    if (idx !== -1) {
+      return closeView(idx);
     }
+    additionalPanelWidth.value = panelWidth.value;
+    opened_views.value.push({
+      type: "component",
+      id,
+      title: title || id,
+      geode_object_type: geodeObjectType,
+    });
   }
-  return {
-    addItem: (geodeObjectType, name, id, viewerType) => {
-      addItemToItems(items, { geodeObjectType, name, id, viewerType });
-      selection.value.push(id);
-    },
-    displayAdditionalTree: (id, title, geodeObjectType) => {
-      const idx = peek.value.findIndex((view) => view.id === id);
-      if (idx !== -1) {
-        return closeView(idx);
-      }
-      additionalPanelWidth.value = panelWidth.value;
-      peek.value.push({
-        type: "component",
-        id,
-        title: title || id,
-        geode_object_type: geodeObjectType,
-      });
-    },
-    closeView,
-    moveView: (fromIdx, toIdx) => {
-      if (fromIdx !== 0 && toIdx !== 0) {
-        const [element] = peek.value.splice(fromIdx, 1);
-        peek.value.splice(toIdx, 0, element);
-      }
-    },
-    importStores: (snapshot) => {
-      const data = processImport(snapshot);
-      peek.value = data.opened_views;
-      panelWidth.value = data.panelWidth;
-      additionalPanelWidth.value = data.additionalPanelWidth;
-      pendingIds.value = data.ids;
-    },
-  };
-}
 
-export const useTreeviewStore = defineStore("treeview", () => {
-  const items = ref([]);
-  const selection = ref([]);
-  const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
-  const panelWidth = ref(PANEL_WIDTH);
-  const additionalPanelWidth = ref(PANEL_WIDTH);
-  const isImporting = ref(false);
-  const pendingSelectionIds = ref([]);
+  function moveView(fromIdx, toIdx) {
+    if (fromIdx !== 0 && toIdx !== 0) {
+      const [element] = opened_views.value.splice(fromIdx, 1);
+      opened_views.value.splice(toIdx, 0, element);
+    }
+  }
 
-  const acts = createActions({
-    items,
-    selection,
-    peek: opened_views,
-    panelWidth,
-    additionalPanelWidth,
-    pendingIds: pendingSelectionIds,
-  });
+  function importStores(snapshot) {
+    opened_views.value = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
+    panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
+    additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
+    pendingSelectionIds.value =
+      snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
+  }
+
+  function finalizeImportSelection() {
+    const rebuilt = [];
+    for (const group of items.value) {
+      for (const child of group.children) {
+        if (pendingSelectionIds.value.length === 0 || pendingSelectionIds.value.includes(child.id)) {
+          rebuilt.push(child.id || child);
+        }
+      }
+    }
+    selection.value = rebuilt;
+    pendingSelectionIds.value = [];
+  }
+
+  function clear() {
+    items.value = [];
+    selection.value = [];
+    pendingSelectionIds.value = [];
+    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
+  }
 
   return {
-    ...acts,
     items,
     selection,
     opened_views,
     panelWidth,
     additionalPanelWidth,
     isImporting,
-    removeItem: (id) => removeItemFromItems(items, selection, id),
+    addItem,
+    removeItem,
+    displayAdditionalTree,
+    closeView,
+    moveView,
+    importStores,
     displayFileTree: () =>
       (opened_views.value = [{ type: "object", id: "main", title: "Objects" }]),
     setPanelWidth: (width) => (panelWidth.value = width),
@@ -137,15 +125,8 @@ export const useTreeviewStore = defineStore("treeview", () => {
       additionalPanelWidth: additionalPanelWidth.value,
       selectionIds: selection.value,
     }),
-    finalizeImportSelection: () => {
-      selection.value = finalizeRebuild(items, pendingSelectionIds.value);
-      pendingSelectionIds.value = [];
-    },
-    clear: () => {
-      items.value = [];
-      selection.value = [];
-      pendingSelectionIds.value = [];
-      opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
-    },
+    finalizeImportSelection,
+    clear,
   };
 });
+

From bbf4b711d741e9bc2ce813dc71f7468a37299cad Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 14 Apr 2026 13:46:59 +0000
Subject: [PATCH 17/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Base/ItemLabel.vue | 10 ++--------
 app/components/Viewer/Ui.vue                        |  4 +---
 app/stores/treeview.js                              | 10 +++++++---
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index e28215af..c3597739 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -14,16 +14,10 @@ const emit = defineEmits(["contextmenu"]);
     @contextmenu.prevent.stop="emit('contextmenu', $event)"
   >
     {{ item.title }}
-    <v-tooltip
-      v-if="showTooltip && item.category"
-      activator="parent"
-      location="right"
-    >
+    <v-tooltip v-if="showTooltip && item.category" activator="parent" location="right">
       <div class="d-flex flex-column pa-1">
         <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
-        <span v-if="item.title" class="text-caption"
-          ><strong>Name:</strong> {{ item.title }}</span
-        >
+        <span v-if="item.title" class="text-caption"><strong>Name:</strong> {{ item.title }}</span>
         <span class="text-caption font-italic border-t-sm d-flex align-center">
           <strong class="mr-1">Status:</strong>
           {{ item.is_active ? "Active" : "Inactive" }}
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index ed4acb10..407ce084 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -23,9 +23,7 @@ const dataItems = dataStore.refAllItems();
 
 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 };
   await viewerStore.request(
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 33ba23eb..37c98627 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -75,7 +75,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function importStores(snapshot) {
-    opened_views.value = snapshot?.opened_views || [{ type: "object", id: "main", title: "Objects" }];
+    opened_views.value = snapshot?.opened_views || [
+      { type: "object", id: "main", title: "Objects" },
+    ];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
     additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
     pendingSelectionIds.value =
@@ -86,7 +88,10 @@ export const useTreeviewStore = defineStore("treeview", () => {
     const rebuilt = [];
     for (const group of items.value) {
       for (const child of group.children) {
-        if (pendingSelectionIds.value.length === 0 || pendingSelectionIds.value.includes(child.id)) {
+        if (
+          pendingSelectionIds.value.length === 0 ||
+          pendingSelectionIds.value.includes(child.id)
+        ) {
           rebuilt.push(child.id || child);
         }
       }
@@ -129,4 +134,3 @@ export const useTreeviewStore = defineStore("treeview", () => {
     clear,
   };
 });
-

From d730bedbdda048cebc7f8a5831cad1f64e0c6e02 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 14 Apr 2026 15:53:48 +0200
Subject: [PATCH 18/31] apply changes comments

---
 app/components/Viewer/ObjectTree/Box.vue    | 18 +++++-------------
 app/components/Viewer/ObjectTree/Layout.vue |  3 ++-
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index a9cb6d26..2af37e5d 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,22 +1,12 @@
 <script setup>
-import { computed } from "vue";
-import { geode_objects } from "@ogw_front/assets/geode_objects";
-
-const { title, closable, geode_object_type, mdiIcon } = defineProps({
+const { title, closable, icon, mdiIcon } = defineProps({
   title: { type: String, required: true },
   closable: { type: Boolean, default: false },
-  geode_object_type: { type: String, default: "" },
+  icon: { type: String, default: "" },
   mdiIcon: { type: String, default: "" },
 });
 
 const emit = defineEmits(["close", "dragstart"]);
-
-const icon = computed(() => {
-  if (geode_object_type && geode_objects[geode_object_type]) {
-    return geode_objects[geode_object_type].image;
-  }
-  return undefined;
-});
 </script>
 
 <template>
@@ -37,7 +27,9 @@ const icon = computed(() => {
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2"
+        >mdi-drag-variant</v-icon
+      >
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 9419cb29..82a81c36 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -2,6 +2,7 @@
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const WIDTH_MIN = 200;
@@ -168,7 +169,7 @@ function onVerticalResizeStart(event, index) {
         >
           <ViewerObjectTreeBox
             :title="view.title"
-            :geode_object_type="view.geode_object_type"
+            :icon="geode_objects[view.geode_object_type]?.image"
             closable
             @close="treeviewStore.closeView(index + 1)"
             @dragstart="onDragStart(index + 1)"

From c7bc26167a2090e3fde0a3608d85cf790ff9e9cc Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 14 Apr 2026 13:54:45 +0000
Subject: [PATCH 19/31] Apply prepare changes

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

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 2af37e5d..407e8221 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -27,9 +27,7 @@ const emit = defineEmits(["close", "dragstart"]);
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2"
-        >mdi-drag-variant</v-icon
-      >
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"

From 0c999454e004418841a7cfe9d5a1182d53679f42 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Tue, 14 Apr 2026 17:20:15 +0200
Subject: [PATCH 20/31] rename, imports, and define funciton out of the return

---
 .../Viewer/ObjectTree/Views/GlobalObjects.vue | 18 ++++++---
 .../ObjectTree/Views/ModelComponents.vue      | 12 +++---
 app/stores/treeview.js                        | 39 +++++++++++++------
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index c9dfc6f6..f7f85c1a 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -1,6 +1,6 @@
 <script setup>
-import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
-import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -34,7 +34,9 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
+      treeviewStore.items.flatMap((group) =>
+        group.children.map((child) => child.id),
+      ),
     );
 
     const updates = [
@@ -57,7 +59,7 @@ function isModel(item) {
 
 <template>
   <div class="tree-view-container">
-    <TreeControls
+    <ObjectTreeControls
       v-model:search="search"
       :sort-type="sortType"
       :filter-options="filterOptions"
@@ -76,7 +78,7 @@ function isModel(item) {
       selectable
     >
       <template #title="{ item }">
-        <TreeItemLabel
+        <ObjectTreeItemLabel
           :item="item"
           @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
         />
@@ -91,7 +93,11 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
+            treeviewStore.displayAdditionalTree(
+              item.id,
+              item.title,
+              item.geode_object_type,
+            )
           "
         />
       </template>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index e3705566..81e3c8cd 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -1,6 +1,6 @@
 <script setup>
-import TreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
-import TreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -15,7 +15,9 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(
+  toRef(() => id),
+);
 
 const {
   search,
@@ -47,7 +49,7 @@ async function onSelectionChange(current) {
 
 <template>
   <div class="tree-view-container">
-    <TreeControls
+    <ObjectTreeControls
       v-model:search="search"
       :sort-type="sortType"
       :filter-options="filterOptions"
@@ -67,7 +69,7 @@ async function onSelectionChange(current) {
       @update:selected="onSelectionChange"
     >
       <template #title="{ item }">
-        <TreeItemLabel
+        <ObjectTreeItemLabel
           :item="item"
           show-tooltip
           @contextmenu="
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 37c98627..46ea5082 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -22,7 +22,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
       if (item.title === geodeObjectType) {
         item.children.push(child);
         const opt = { numeric: true, sensitivity: "base" };
-        item.children.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, opt));
+        item.children.sort((childA, childB) => childA.title.localeCompare(childB.title, undefined, opt));
         found = true;
         break;
       }
@@ -30,7 +30,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     if (!found) {
       items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
       const sortOpt = { numeric: true, sensitivity: "base" };
-      items.value.sort((el1, el2) => el1.title.localeCompare(el2.title, undefined, sortOpt));
+      items.value.sort((groupA, groupB) => groupA.title.localeCompare(groupB.title, undefined, sortOpt));
     }
     selection.value.push(id);
   }
@@ -107,6 +107,27 @@ export const useTreeviewStore = defineStore("treeview", () => {
     opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
   }
 
+  function displayFileTree() {
+    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
+  }
+
+  function setPanelWidth(width) {
+    panelWidth.value = width;
+  }
+
+  function setAdditionalPanelWidth(width) {
+    additionalPanelWidth.value = width;
+  }
+
+  function exportStores() {
+    return {
+      opened_views: opened_views.value,
+      panelWidth: panelWidth.value,
+      additionalPanelWidth: additionalPanelWidth.value,
+      selectionIds: selection.value,
+    };
+  }
+
   return {
     items,
     selection,
@@ -120,16 +141,10 @@ export const useTreeviewStore = defineStore("treeview", () => {
     closeView,
     moveView,
     importStores,
-    displayFileTree: () =>
-      (opened_views.value = [{ type: "object", id: "main", title: "Objects" }]),
-    setPanelWidth: (width) => (panelWidth.value = width),
-    setAdditionalPanelWidth: (width) => (additionalPanelWidth.value = width),
-    exportStores: () => ({
-      opened_views: opened_views.value,
-      panelWidth: panelWidth.value,
-      additionalPanelWidth: additionalPanelWidth.value,
-      selectionIds: selection.value,
-    }),
+    displayFileTree,
+    setPanelWidth,
+    setAdditionalPanelWidth,
+    exportStores,
     finalizeImportSelection,
     clear,
   };

From 72368b1555a5e8d715d07fe2c4c3b8db389874cd Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Tue, 14 Apr 2026 15:21:06 +0000
Subject: [PATCH 21/31] Apply prepare changes

---
 .../Viewer/ObjectTree/Views/GlobalObjects.vue          | 10 ++--------
 .../Viewer/ObjectTree/Views/ModelComponents.vue        |  4 +---
 app/stores/treeview.js                                 |  8 ++++++--
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index f7f85c1a..0dce6b20 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -34,9 +34,7 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) =>
-        group.children.map((child) => child.id),
-      ),
+      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
     );
 
     const updates = [
@@ -93,11 +91,7 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-            )
+            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
           "
         />
       </template>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 81e3c8cd..26e9e390 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -15,9 +15,7 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(
-  toRef(() => id),
-);
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
 
 const {
   search,
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 46ea5082..c78151c2 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -22,7 +22,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
       if (item.title === geodeObjectType) {
         item.children.push(child);
         const opt = { numeric: true, sensitivity: "base" };
-        item.children.sort((childA, childB) => childA.title.localeCompare(childB.title, undefined, opt));
+        item.children.sort((childA, childB) =>
+          childA.title.localeCompare(childB.title, undefined, opt),
+        );
         found = true;
         break;
       }
@@ -30,7 +32,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
     if (!found) {
       items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
       const sortOpt = { numeric: true, sensitivity: "base" };
-      items.value.sort((groupA, groupB) => groupA.title.localeCompare(groupB.title, undefined, sortOpt));
+      items.value.sort((groupA, groupB) =>
+        groupA.title.localeCompare(groupB.title, undefined, sortOpt),
+      );
     }
     selection.value.push(id);
   }

From 6cc622d2cdc8baa21e76c056d147de447f010d87 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 14:01:30 +0200
Subject: [PATCH 22/31] state of scroll and tree

---
 .../Viewer/ObjectTree/Base/ItemLabel.vue      |  22 +++-
 app/components/Viewer/ObjectTree/Box.vue      |  79 +++++++++++++-
 app/components/Viewer/ObjectTree/Layout.vue   |  23 +++-
 .../Viewer/ObjectTree/Views/GlobalObjects.vue |  14 ++-
 .../ObjectTree/Views/ModelComponents.vue      |  10 ++
 app/composables/use_tree_filter.js            |  12 +-
 app/stores/treeview.js                        | 103 +++++++++++++++---
 internal/database/base_database.js            |   1 +
 8 files changed, 226 insertions(+), 38 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index c3597739..ef7151c1 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -5,22 +5,32 @@ const { item, showTooltip } = defineProps({
 });
 
 const emit = defineEmits(["contextmenu"]);
+
+const actualItem = computed(() => item.raw || item);
 </script>
 
 <template>
   <span
     class="tree-item-label"
-    :class="{ 'inactive-item': item.is_active === false }"
+    :class="{ 'inactive-item': actualItem.is_active === false }"
     @contextmenu.prevent.stop="emit('contextmenu', $event)"
   >
-    {{ item.title }}
-    <v-tooltip v-if="showTooltip && item.category" activator="parent" location="right">
+    {{ actualItem.title }}
+    <v-tooltip
+      v-if="showTooltip && actualItem.category"
+      activator="parent"
+      location="right"
+    >
       <div class="d-flex flex-column pa-1">
-        <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
-        <span v-if="item.title" class="text-caption"><strong>Name:</strong> {{ item.title }}</span>
+        <span class="text-caption"
+          ><strong>ID:</strong> {{ actualItem.id }}</span
+        >
+        <span v-if="actualItem.title" class="text-caption"
+          ><strong>Name:</strong> {{ actualItem.title }}</span
+        >
         <span class="text-caption font-italic border-t-sm d-flex align-center">
           <strong class="mr-1">Status:</strong>
-          {{ item.is_active ? "Active" : "Inactive" }}
+          {{ actualItem.is_active ? "Active" : "Inactive" }}
         </span>
       </div>
     </v-tooltip>
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 407e8221..8313441e 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,12 +1,73 @@
 <script setup>
-const { title, closable, icon, mdiIcon } = defineProps({
+import { onMounted, onUnmounted, ref, watch } from "vue";
+
+const SCROLL_SYNC_DELAY = 50;
+const SCROLL_THRESHOLD = 1;
+const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
   title: { type: String, required: true },
   closable: { type: Boolean, default: false },
   icon: { type: String, default: "" },
   mdiIcon: { type: String, default: "" },
+  scrollTop: { type: Number, default: 0 },
 });
 
-const emit = defineEmits(["close", "dragstart"]);
+const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
+
+const scrollContainer = ref(undefined);
+let isApplyingScroll = false;
+let resizeObserver = undefined;
+
+function handleScroll(event) {
+  if (isApplyingScroll) {
+    return;
+  }
+  emit("update:scrollTop", event.target.scrollTop);
+}
+
+function applyScrollTop(val) {
+  if (scrollContainer.value) {
+    isApplyingScroll = true;
+    scrollContainer.value.scrollTop = val;
+    setTimeout(() => {
+      isApplyingScroll = false;
+    }, SCROLL_SYNC_DELAY);
+  }
+}
+
+onMounted(() => {
+  if (scrollContainer.value) {
+    applyScrollTop(scrollTop);
+
+    resizeObserver = new ResizeObserver(() => {
+      if (
+        scrollContainer.value &&
+        Math.abs(scrollContainer.value.scrollTop - scrollTop) > SCROLL_THRESHOLD
+      ) {
+        applyScrollTop(scrollTop);
+      }
+    });
+
+    resizeObserver.observe(scrollContainer.value);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+watch(
+  () => scrollTop,
+  (newVal) => {
+    if (
+      scrollContainer.value &&
+      Math.abs(scrollContainer.value.scrollTop - newVal) > SCROLL_THRESHOLD
+    ) {
+      applyScrollTop(newVal);
+    }
+  },
+);
 </script>
 
 <template>
@@ -27,7 +88,9 @@ const emit = defineEmits(["close", "dragstart"]);
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2"
+        >mdi-drag-variant</v-icon
+      >
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
@@ -44,8 +107,14 @@ const emit = defineEmits(["close", "dragstart"]);
       />
     </v-card-title>
     <v-divider />
-    <v-card-text class="pa-0 flex-grow-1 overflow-y-auto overflow-x-hidden">
-      <slot />
+    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column">
+      <div
+        ref="scrollContainer"
+        class="flex-grow-1 overflow-y-auto overflow-x-hidden"
+        @scroll="handleScroll"
+      >
+        <slot />
+      </div>
     </v-card-text>
   </v-card>
 </template>
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 82a81c36..9544858f 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed, ref, watch } from "vue";
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
@@ -25,14 +26,17 @@ const totalWidth = computed(() => {
   return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
 });
 
-const rowHeights = ref([]);
+const rowHeights = computed({
+  get: () => treeviewStore.rowHeights,
+  set: (val) => treeviewStore.setRowHeights(val),
+});
 const draggedIndex = ref(undefined);
 
 watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      rowHeights.value = Array.from({ length: newLength }).fill(PERCENT_100 / newLength);
+      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
     }
   },
   { immediate: true },
@@ -111,8 +115,10 @@ function onVerticalResizeStart(event, index) {
       newH1 = startHeight1 + startHeight2 - minHeightPercent;
     }
 
-    rowHeights.value[index] = newH1;
-    rowHeights.value[index + 1] = newH2;
+    const newHeights = [...rowHeights.value];
+    newHeights[index] = newH1;
+    newHeights[index + 1] = newH2;
+    treeviewStore.setRowHeights(newHeights);
 
     document.body.style.userSelect = "none";
     document.body.style.cursor = "ns-resize";
@@ -143,7 +149,12 @@ function onVerticalResizeStart(event, index) {
         width: `${treeviewStore.panelWidth}px`,
       }"
     >
-      <ViewerObjectTreeBox :title="mainView.title" mdi-icon="mdi-file-tree-outline">
+      <ViewerObjectTreeBox
+        :title="mainView.title"
+        mdi-icon="mdi-file-tree-outline"
+        :scroll-top="mainView.scrollTop"
+        @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
+      >
         <GlobalObjects @show-menu="emit('show-menu', $event)" />
       </ViewerObjectTreeBox>
     </div>
@@ -170,9 +181,11 @@ function onVerticalResizeStart(event, index) {
           <ViewerObjectTreeBox
             :title="view.title"
             :icon="geode_objects[view.geode_object_type]?.image"
+            :scroll-top="view.scrollTop"
             closable
             @close="treeviewStore.closeView(index + 1)"
             @dragstart="onDragStart(index + 1)"
+            @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
             <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
           </ViewerObjectTreeBox>
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index 0dce6b20..d3ce7a41 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { toRef, watch, computed } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
@@ -13,6 +14,12 @@ const hybridViewerStore = useHybridViewerStore();
 
 const emit = defineEmits(["show-menu"]);
 
+const mainView = computed(() => treeviewStore.opened_views[0]);
+const opened = computed({
+  get: () => mainView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(mainView.value.id, val),
+});
+
 const {
   search,
   sortType,
@@ -51,7 +58,11 @@ watch(
 );
 
 function isModel(item) {
-  return item.viewer_type === "model";
+  const actualItem = item.raw || item;
+  return (
+    actualItem.viewer_type === "model" ||
+    ["BRep", "Section"].includes(actualItem.geode_object_type)
+  );
 }
 </script>
 
@@ -67,6 +78,7 @@ function isModel(item) {
 
     <v-treeview
       v-model:selected="treeviewStore.selection"
+      v-model:opened="opened"
       :items="processedItems"
       :search="search"
       :custom-filter="customFilter"
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 26e9e390..5596ed6c 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { toRef, computed } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
@@ -6,6 +7,7 @@ import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const { id } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
@@ -13,6 +15,13 @@ const emit = defineEmits(["show-menu"]);
 const dataStore = useDataStore();
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
+const treeviewStore = useTreeviewStore();
+
+const currentView = computed(() => treeviewStore.opened_views.find((v) => v.id === id));
+const opened = computed({
+  get: () => currentView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(id, val),
+});
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => id));
 const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
@@ -57,6 +66,7 @@ async function onSelectionChange(current) {
 
     <v-treeview
       :selected="mesh_components_selection"
+      v-model:opened="opened"
       :items="processedItems"
       :search="search"
       :custom-filter="customFilter"
diff --git a/app/composables/use_tree_filter.js b/app/composables/use_tree_filter.js
index 91ea4067..e4d9f22c 100644
--- a/app/composables/use_tree_filter.js
+++ b/app/composables/use_tree_filter.js
@@ -1,3 +1,5 @@
+import { ref, computed, watch, toRef } from "vue";
+
 function customFilter(value, searchQuery, item) {
   if (!searchQuery) {
     return true;
@@ -11,18 +13,18 @@ function customFilter(value, searchQuery, item) {
 function sortAndFormatItems(items, sortType) {
   const field = sortType === "name" ? "title" : "id";
   return items.map((category) => {
-    const children = (category.children || []).toSorted((first, second) => {
-      const val1 = first[field] || "";
-      const val2 = second[field] || "";
-      return val1.localeCompare(val2, undefined, {
+    const children = (category.children || []).toSorted((itemA, itemB) => {
+      const valueA = itemA[field] || "";
+      const valueB = itemB[field] || "";
+      return valueA.localeCompare(valueB, undefined, {
         numeric: true,
         sensitivity: "base",
       });
     });
     return {
+      ...category,
       id: category.id,
       title: category.title || category.id,
-      geode_object_type: category.geode_object_type,
       children,
     };
   });
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index c78151c2..d8cf62bc 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,13 +1,52 @@
+import { defineStore } from "pinia";
+import { ref, watch, toRaw } from "vue";
+import { database } from "@ogw_internal/database/database";
 const PANEL_WIDTH = 300;
 
 export const useTreeviewStore = defineStore("treeview", () => {
   const items = ref([]);
   const selection = ref([]);
-  const opened_views = ref([{ type: "object", id: "main", title: "Objects" }]);
+  const opened_views = ref([
+    { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+  ]);
   const panelWidth = ref(PANEL_WIDTH);
   const additionalPanelWidth = ref(PANEL_WIDTH);
   const isImporting = ref(false);
   const pendingSelectionIds = ref([]);
+  const rowHeights = ref([]);
+
+  database.treeview_config.get("main").then((config) => {
+    if (config?.opened_views) {
+      opened_views.value = config.opened_views;
+    }
+    if (config?.panelWidth) {
+      panelWidth.value = config.panelWidth;
+    }
+    if (config?.additionalPanelWidth) {
+      additionalPanelWidth.value = config.additionalPanelWidth;
+    }
+    if (config?.selectionIds) {
+      selection.value = config.selectionIds;
+    }
+    if (config?.rowHeights) {
+      rowHeights.value = config.rowHeights;
+    }
+  });
+
+  watch(
+    [opened_views, panelWidth, additionalPanelWidth, selection, rowHeights],
+    () => {
+      database.treeview_config.put({
+        id: "main",
+        opened_views: toRaw(opened_views.value),
+        panelWidth: panelWidth.value,
+        additionalPanelWidth: additionalPanelWidth.value,
+        selectionIds: toRaw(selection.value),
+        rowHeights: toRaw(rowHeights.value),
+      });
+    },
+    { deep: true },
+  );
 
   function closeView(index) {
     if (index > 0) {
@@ -15,8 +54,8 @@ export const useTreeviewStore = defineStore("treeview", () => {
     }
   }
 
-  function addItem(geodeObjectType, name, id, viewerType) {
-    const child = { title: name, id, viewerType, geode_object_type: geodeObjectType };
+  function addItem(geodeObjectType, name, id, viewer_type) {
+    const child = { title: name, id, viewer_type, geode_object_type: geodeObjectType };
     let found = false;
     for (const item of items.value) {
       if (item.title === geodeObjectType) {
@@ -40,17 +79,17 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function removeItem(id) {
-    for (let i = 0; i < items.value.length; i += 1) {
-      const group = items.value[i];
+    for (let index = 0; index < items.value.length; index += 1) {
+      const group = items.value[index];
       const childIndex = group.children.findIndex((child) => child.id === id);
       if (childIndex !== -1) {
         group.children.splice(childIndex, 1);
         if (group.children.length === 0) {
-          items.value.splice(i, 1);
+          items.value.splice(index, 1);
         }
-        const sIdx = selection.value.indexOf(id);
-        if (sIdx !== -1) {
-          selection.value.splice(sIdx, 1);
+        const selectionIndex = selection.value.indexOf(id);
+        if (selectionIndex !== -1) {
+          selection.value.splice(selectionIndex, 1);
         }
         return;
       }
@@ -58,9 +97,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function displayAdditionalTree(id, title, geodeObjectType) {
-    const idx = opened_views.value.findIndex((view) => view.id === id);
-    if (idx !== -1) {
-      return closeView(idx);
+    const index = opened_views.value.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      return closeView(index);
     }
     additionalPanelWidth.value = panelWidth.value;
     opened_views.value.push({
@@ -68,6 +107,8 @@ export const useTreeviewStore = defineStore("treeview", () => {
       id,
       title: title || id,
       geode_object_type: geodeObjectType,
+      scrollTop: 0,
+      opened: [],
     });
   }
 
@@ -80,12 +121,15 @@ export const useTreeviewStore = defineStore("treeview", () => {
 
   function importStores(snapshot) {
     opened_views.value = snapshot?.opened_views || [
-      { type: "object", id: "main", title: "Objects" },
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
     ];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
     additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
+    rowHeights.value = snapshot?.rowHeights || [];
     pendingSelectionIds.value =
-      snapshot?.selectionIds || (snapshot?.selection || []).map((sel) => sel.id || sel) || [];
+      snapshot?.selectionIds ||
+      (snapshot?.selection || []).map((selectionItem) => selectionItem.id || selectionItem) ||
+      [];
   }
 
   function finalizeImportSelection() {
@@ -108,11 +152,15 @@ export const useTreeviewStore = defineStore("treeview", () => {
     items.value = [];
     selection.value = [];
     pendingSelectionIds.value = [];
-    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
+    opened_views.value = [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
   }
 
   function displayFileTree() {
-    opened_views.value = [{ type: "object", id: "main", title: "Objects" }];
+    opened_views.value = [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
   }
 
   function setPanelWidth(width) {
@@ -123,12 +171,31 @@ export const useTreeviewStore = defineStore("treeview", () => {
     additionalPanelWidth.value = width;
   }
 
+  function setScrollTop(id, scrollTop) {
+    const view = opened_views.value.find((v) => v.id === id);
+    if (view) {
+      view.scrollTop = scrollTop;
+    }
+  }
+
+  function setOpened(id, opened) {
+    const view = opened_views.value.find((v) => v.id === id);
+    if (view) {
+      view.opened = opened;
+    }
+  }
+
+  function setRowHeights(heights) {
+    rowHeights.value = heights;
+  }
+
   function exportStores() {
     return {
       opened_views: opened_views.value,
       panelWidth: panelWidth.value,
       additionalPanelWidth: additionalPanelWidth.value,
       selectionIds: selection.value,
+      rowHeights: rowHeights.value,
     };
   }
 
@@ -139,6 +206,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     panelWidth,
     additionalPanelWidth,
     isImporting,
+    rowHeights,
     addItem,
     removeItem,
     displayAdditionalTree,
@@ -148,6 +216,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
     displayFileTree,
     setPanelWidth,
     setAdditionalPanelWidth,
+    setScrollTop,
+    setOpened,
+    setRowHeights,
     exportStores,
     finalizeImportSelection,
     clear,
diff --git a/internal/database/base_database.js b/internal/database/base_database.js
index c541657c..4f5c1793 100644
--- a/internal/database/base_database.js
+++ b/internal/database/base_database.js
@@ -13,6 +13,7 @@ export class BaseDatabase extends Dexie {
       [dataStyleTable.name]: dataStyleTable.schema,
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+      treeview_config: "id",
     };
   }
 

From b85fa2396f62d287b1dd9c81b5902e4dbb5c5f2d Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 15 Apr 2026 12:02:23 +0000
Subject: [PATCH 23/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Base/ItemLabel.vue    | 10 ++--------
 app/components/Viewer/ObjectTree/Box.vue               |  4 +---
 .../Viewer/ObjectTree/Views/GlobalObjects.vue          |  3 +--
 3 files changed, 4 insertions(+), 13 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index ef7151c1..acbbce2f 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -16,15 +16,9 @@ const actualItem = computed(() => item.raw || item);
     @contextmenu.prevent.stop="emit('contextmenu', $event)"
   >
     {{ actualItem.title }}
-    <v-tooltip
-      v-if="showTooltip && actualItem.category"
-      activator="parent"
-      location="right"
-    >
+    <v-tooltip v-if="showTooltip && actualItem.category" activator="parent" location="right">
       <div class="d-flex flex-column pa-1">
-        <span class="text-caption"
-          ><strong>ID:</strong> {{ actualItem.id }}</span
-        >
+        <span class="text-caption"><strong>ID:</strong> {{ actualItem.id }}</span>
         <span v-if="actualItem.title" class="text-caption"
           ><strong>Name:</strong> {{ actualItem.title }}</span
         >
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 8313441e..93637380 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -88,9 +88,7 @@ watch(
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2"
-        >mdi-drag-variant</v-icon
-      >
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index d3ce7a41..f9321811 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -60,8 +60,7 @@ watch(
 function isModel(item) {
   const actualItem = item.raw || item;
   return (
-    actualItem.viewer_type === "model" ||
-    ["BRep", "Section"].includes(actualItem.geode_object_type)
+    actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
   );
 }
 </script>

From 5dfe9734af985c808af7b2de409dd5e911a03531 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 14:16:27 +0200
Subject: [PATCH 24/31] oxlint

---
 .../Viewer/ObjectTree/Views/GlobalObjects.vue |  2 +-
 .../ObjectTree/Views/ModelComponents.vue      | 18 +++----
 app/stores/treeview.js                        | 48 +++++++++++--------
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index d3ce7a41..8ebd126e 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { toRef, watch, computed } from "vue";
+import { computed, toRef, watch } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 5596ed6c..72cb1bdc 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { toRef, computed } from "vue";
+import { computed, toRef } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
@@ -9,7 +9,7 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const { id } = defineProps({ id: { type: String, required: true } });
+const { id: viewId } = defineProps({ id: { type: String, required: true } });
 const emit = defineEmits(["show-menu"]);
 
 const dataStore = useDataStore();
@@ -17,14 +17,14 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const treeviewStore = useTreeviewStore();
 
-const currentView = computed(() => treeviewStore.opened_views.find((v) => v.id === id));
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
 const opened = computed({
   get: () => currentView.value?.opened || [],
-  set: (val) => treeviewStore.setOpened(id, val),
+  set: (val) => treeviewStore.setOpened(viewId, val),
 });
 
-const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
+const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
 
 const {
   search,
@@ -45,10 +45,10 @@ async function onSelectionChange(current) {
   }
 
   if (added.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(id, added, true);
+    await dataStyleStore.setModelComponentsVisibility(viewId, added, true);
   }
   if (removed.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(id, removed, false);
+    await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
   }
   hybridViewerStore.remoteRender();
 }
@@ -85,7 +85,7 @@ async function onSelectionChange(current) {
               event: $event,
               itemId: item.id,
               context_type: 'model_component',
-              modelId: id,
+              modelId: viewId,
             })
           "
         />
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index d8cf62bc..1ed188c4 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref, watch, toRaw } from "vue";
+import { ref, toRaw, watch } from "vue";
 import { database } from "@ogw_internal/database/database";
 const PANEL_WIDTH = 300;
 
@@ -15,23 +15,29 @@ export const useTreeviewStore = defineStore("treeview", () => {
   const pendingSelectionIds = ref([]);
   const rowHeights = ref([]);
 
-  database.treeview_config.get("main").then((config) => {
-    if (config?.opened_views) {
-      opened_views.value = config.opened_views;
-    }
-    if (config?.panelWidth) {
-      panelWidth.value = config.panelWidth;
-    }
-    if (config?.additionalPanelWidth) {
-      additionalPanelWidth.value = config.additionalPanelWidth;
-    }
-    if (config?.selectionIds) {
-      selection.value = config.selectionIds;
-    }
-    if (config?.rowHeights) {
-      rowHeights.value = config.rowHeights;
+  async function loadConfig() {
+    try {
+      const config = await database.treeview_config.get("main");
+      if (config?.opened_views) {
+        opened_views.value = config.opened_views;
+      }
+      if (config?.panelWidth) {
+        panelWidth.value = config.panelWidth;
+      }
+      if (config?.additionalPanelWidth) {
+        additionalPanelWidth.value = config.additionalPanelWidth;
+      }
+      if (config?.selectionIds) {
+        selection.value = config.selectionIds;
+      }
+      if (config?.rowHeights) {
+        rowHeights.value = config.rowHeights;
+      }
+    } catch (error) {
+      console.error("Failed to load treeview config:", error);
     }
-  });
+  }
+  loadConfig();
 
   watch(
     [opened_views, panelWidth, additionalPanelWidth, selection, rowHeights],
@@ -171,15 +177,15 @@ export const useTreeviewStore = defineStore("treeview", () => {
     additionalPanelWidth.value = width;
   }
 
-  function setScrollTop(id, scrollTop) {
-    const view = opened_views.value.find((v) => v.id === id);
+  function setScrollTop(viewId, scrollTop) {
+    const view = opened_views.value.find((view) => view.id === viewId);
     if (view) {
       view.scrollTop = scrollTop;
     }
   }
 
-  function setOpened(id, opened) {
-    const view = opened_views.value.find((v) => v.id === id);
+  function setOpened(viewId, opened) {
+    const view = opened_views.value.find((view) => view.id === viewId);
     if (view) {
       view.opened = opened;
     }

From c1ae78aa2bfafb76e1b1a2d693b043d9741de5b4 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 14:20:48 +0200
Subject: [PATCH 25/31] oximport

---
 app/components/Viewer/ObjectTree/Box.vue      |  6 ++---
 app/components/Viewer/ObjectTree/Layout.vue   | 23 ++++++++++++++-----
 .../ObjectTree/Views/ModelComponents.vue      |  9 +++++---
 app/composables/use_tree_filter.js            |  2 --
 app/stores/treeview.js                        |  2 +-
 5 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 93637380..3c12f799 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from "vue";
-
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
 const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
@@ -88,7 +86,9 @@ watch(
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2"
+        >mdi-drag-variant</v-icon
+      >
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 9544858f..0329e4ef 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, ref, watch } from "vue";
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
@@ -36,7 +35,9 @@ watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
+      treeviewStore.setRowHeights(
+        Array.from({ length: newLength }).fill(PERCENT_100 / newLength),
+      );
     }
   },
   { immediate: true },
@@ -159,7 +160,11 @@ function onVerticalResizeStart(event, index) {
       </ViewerObjectTreeBox>
     </div>
 
-    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+    <div
+      v-if="additionalViews.length > 0"
+      class="column-separator"
+      @mousedown="onResizeStart"
+    />
 
     <div
       v-if="additionalViews.length > 0"
@@ -172,7 +177,8 @@ function onVerticalResizeStart(event, index) {
         <div
           class="view-wrapper"
           :class="{
-            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
+            'drag-over':
+              draggedIndex !== undefined && draggedIndex !== index + 1,
           }"
           :style="{ flex: `0 0 ${rowHeights[index]}%` }"
           @dragover="onDragOver"
@@ -187,7 +193,10 @@ function onVerticalResizeStart(event, index) {
             @dragstart="onDragStart(index + 1)"
             @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
-            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
+            <ModelComponents
+              :id="view.id"
+              @show-menu="emit('show-menu', $event)"
+            />
           </ViewerObjectTreeBox>
         </div>
         <div
@@ -200,7 +209,9 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+        additionalViews.length > 0
+          ? onAdditionalResizeStart($event)
+          : onResizeStart($event)
       "
     />
   </div>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 72cb1bdc..0eb0c3ef 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, toRef } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
@@ -17,14 +16,18 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const treeviewStore = useTreeviewStore();
 
-const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
+const currentView = computed(() =>
+  treeviewStore.opened_views.find((view) => view.id === viewId),
+);
 const opened = computed({
   get: () => currentView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(viewId, val),
 });
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(
+  toRef(() => viewId),
+);
 
 const {
   search,
diff --git a/app/composables/use_tree_filter.js b/app/composables/use_tree_filter.js
index e4d9f22c..ab62e2d4 100644
--- a/app/composables/use_tree_filter.js
+++ b/app/composables/use_tree_filter.js
@@ -1,5 +1,3 @@
-import { ref, computed, watch, toRef } from "vue";
-
 function customFilter(value, searchQuery, item) {
   if (!searchQuery) {
     return true;
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 1ed188c4..7500d848 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { ref, toRaw, watch } from "vue";
+
 import { database } from "@ogw_internal/database/database";
 const PANEL_WIDTH = 300;
 

From 4c4ded82c46a7f3e425139064b387c7df121e4ac Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 15 Apr 2026 12:21:49 +0000
Subject: [PATCH 26/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Box.vue      |  4 +---
 app/components/Viewer/ObjectTree/Layout.vue   | 22 +++++--------------
 .../ObjectTree/Views/ModelComponents.vue      |  8 ++-----
 3 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 3c12f799..60f30af8 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -86,9 +86,7 @@ watch(
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2"
-        >mdi-drag-variant</v-icon
-      >
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 0329e4ef..9188eaca 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -35,9 +35,7 @@ watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      treeviewStore.setRowHeights(
-        Array.from({ length: newLength }).fill(PERCENT_100 / newLength),
-      );
+      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
     }
   },
   { immediate: true },
@@ -160,11 +158,7 @@ function onVerticalResizeStart(event, index) {
       </ViewerObjectTreeBox>
     </div>
 
-    <div
-      v-if="additionalViews.length > 0"
-      class="column-separator"
-      @mousedown="onResizeStart"
-    />
+    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
 
     <div
       v-if="additionalViews.length > 0"
@@ -177,8 +171,7 @@ function onVerticalResizeStart(event, index) {
         <div
           class="view-wrapper"
           :class="{
-            'drag-over':
-              draggedIndex !== undefined && draggedIndex !== index + 1,
+            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
           }"
           :style="{ flex: `0 0 ${rowHeights[index]}%` }"
           @dragover="onDragOver"
@@ -193,10 +186,7 @@ function onVerticalResizeStart(event, index) {
             @dragstart="onDragStart(index + 1)"
             @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
-            <ModelComponents
-              :id="view.id"
-              @show-menu="emit('show-menu', $event)"
-            />
+            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
           </ViewerObjectTreeBox>
         </div>
         <div
@@ -209,9 +199,7 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0
-          ? onAdditionalResizeStart($event)
-          : onResizeStart($event)
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
       "
     />
   </div>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 0eb0c3ef..31630a53 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -16,18 +16,14 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const treeviewStore = useTreeviewStore();
 
-const currentView = computed(() =>
-  treeviewStore.opened_views.find((view) => view.id === viewId),
-);
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
 const opened = computed({
   get: () => currentView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(viewId, val),
 });
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(
-  toRef(() => viewId),
-);
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
 
 const {
   search,

From df115ea826bb191389ed9d946a03b7d892d2597b Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 14:27:12 +0200
Subject: [PATCH 27/31] oxliny

---
 app/stores/treeview.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 7500d848..096b3214 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -178,14 +178,14 @@ export const useTreeviewStore = defineStore("treeview", () => {
   }
 
   function setScrollTop(viewId, scrollTop) {
-    const view = opened_views.value.find((view) => view.id === viewId);
+    const view = opened_views.value.find((openedView) => openedView.id === viewId);
     if (view) {
       view.scrollTop = scrollTop;
     }
   }
 
   function setOpened(viewId, opened) {
-    const view = opened_views.value.find((view) => view.id === viewId);
+    const view = opened_views.value.find((openedView) => openedView.id === viewId);
     if (view) {
       view.opened = opened;
     }

From e3cfa3034933480630eb28706ec21989eddca42e Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 14:53:38 +0200
Subject: [PATCH 28/31] imports for tests

---
 app/components/Viewer/ObjectTree/Box.vue                   | 1 +
 app/components/Viewer/ObjectTree/Layout.vue                | 1 +
 app/components/Viewer/ObjectTree/Views/ModelComponents.vue | 1 +
 app/stores/treeview.js                                     | 1 +
 4 files changed, 4 insertions(+)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 60f30af8..e71b1e2e 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted, onUnmounted, ref, watch } from "vue";
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
 const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 9188eaca..9544858f 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed, ref, watch } from "vue";
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 31630a53..72cb1bdc 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { computed, toRef } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 096b3214..3f681ab2 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 
+import { ref, toRaw, watch } from "vue";
 import { database } from "@ogw_internal/database/database";
 const PANEL_WIDTH = 300;
 

From 01e1fd8eb14bafdf88cb85ec078fc96cde8cab8a Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 15:06:34 +0200
Subject: [PATCH 29/31] rm imports

---
 app/components/Viewer/ObjectTree/Box.vue      |  5 ++--
 app/components/Viewer/ObjectTree/Layout.vue   | 23 ++++++++++++++-----
 .../Viewer/ObjectTree/Views/GlobalObjects.vue | 14 +++++++----
 .../ObjectTree/Views/ModelComponents.vue      |  9 +++++---
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index e71b1e2e..3c12f799 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch } from "vue";
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
 const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
@@ -87,7 +86,9 @@ watch(
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
+      <v-icon v-else-if="closable" size="24" class="mr-2"
+        >mdi-drag-variant</v-icon
+      >
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 9544858f..0329e4ef 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, ref, watch } from "vue";
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
 import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
@@ -36,7 +35,9 @@ watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
+      treeviewStore.setRowHeights(
+        Array.from({ length: newLength }).fill(PERCENT_100 / newLength),
+      );
     }
   },
   { immediate: true },
@@ -159,7 +160,11 @@ function onVerticalResizeStart(event, index) {
       </ViewerObjectTreeBox>
     </div>
 
-    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+    <div
+      v-if="additionalViews.length > 0"
+      class="column-separator"
+      @mousedown="onResizeStart"
+    />
 
     <div
       v-if="additionalViews.length > 0"
@@ -172,7 +177,8 @@ function onVerticalResizeStart(event, index) {
         <div
           class="view-wrapper"
           :class="{
-            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
+            'drag-over':
+              draggedIndex !== undefined && draggedIndex !== index + 1,
           }"
           :style="{ flex: `0 0 ${rowHeights[index]}%` }"
           @dragover="onDragOver"
@@ -187,7 +193,10 @@ function onVerticalResizeStart(event, index) {
             @dragstart="onDragStart(index + 1)"
             @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
-            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
+            <ModelComponents
+              :id="view.id"
+              @show-menu="emit('show-menu', $event)"
+            />
           </ViewerObjectTreeBox>
         </div>
         <div
@@ -200,7 +209,9 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+        additionalViews.length > 0
+          ? onAdditionalResizeStart($event)
+          : onResizeStart($event)
       "
     />
   </div>
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index f9ad1bbd..ecbcb350 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, toRef, watch } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
@@ -41,7 +40,9 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
+      treeviewStore.items.flatMap((group) =>
+        group.children.map((child) => child.id),
+      ),
     );
 
     const updates = [
@@ -60,7 +61,8 @@ watch(
 function isModel(item) {
   const actualItem = item.raw || item;
   return (
-    actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
+    actualItem.viewer_type === "model" ||
+    ["BRep", "Section"].includes(actualItem.geode_object_type)
   );
 }
 </script>
@@ -102,7 +104,11 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
+            treeviewStore.displayAdditionalTree(
+              item.id,
+              item.title,
+              item.geode_object_type,
+            )
           "
         />
       </template>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 72cb1bdc..0eb0c3ef 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { computed, toRef } from "vue";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
@@ -17,14 +16,18 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const treeviewStore = useTreeviewStore();
 
-const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
+const currentView = computed(() =>
+  treeviewStore.opened_views.find((view) => view.id === viewId),
+);
 const opened = computed({
   get: () => currentView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(viewId, val),
 });
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(
+  toRef(() => viewId),
+);
 
 const {
   search,

From 14560bc176fe88249fde879620188b4b8e5488d6 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 15 Apr 2026 13:07:24 +0000
Subject: [PATCH 30/31] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Box.vue      |  4 +---
 app/components/Viewer/ObjectTree/Layout.vue   | 22 +++++--------------
 .../Viewer/ObjectTree/Views/GlobalObjects.vue | 13 +++--------
 .../ObjectTree/Views/ModelComponents.vue      |  8 ++-----
 4 files changed, 11 insertions(+), 36 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index 3c12f799..60f30af8 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -86,9 +86,7 @@ watch(
         style="filter: brightness(0); display: flex; align-items: center"
       />
       <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
-      <v-icon v-else-if="closable" size="24" class="mr-2"
-        >mdi-drag-variant</v-icon
-      >
+      <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
         style="height: 24px; line-height: 1"
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 0329e4ef..9188eaca 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -35,9 +35,7 @@ watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      treeviewStore.setRowHeights(
-        Array.from({ length: newLength }).fill(PERCENT_100 / newLength),
-      );
+      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
     }
   },
   { immediate: true },
@@ -160,11 +158,7 @@ function onVerticalResizeStart(event, index) {
       </ViewerObjectTreeBox>
     </div>
 
-    <div
-      v-if="additionalViews.length > 0"
-      class="column-separator"
-      @mousedown="onResizeStart"
-    />
+    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
 
     <div
       v-if="additionalViews.length > 0"
@@ -177,8 +171,7 @@ function onVerticalResizeStart(event, index) {
         <div
           class="view-wrapper"
           :class="{
-            'drag-over':
-              draggedIndex !== undefined && draggedIndex !== index + 1,
+            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
           }"
           :style="{ flex: `0 0 ${rowHeights[index]}%` }"
           @dragover="onDragOver"
@@ -193,10 +186,7 @@ function onVerticalResizeStart(event, index) {
             @dragstart="onDragStart(index + 1)"
             @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
-            <ModelComponents
-              :id="view.id"
-              @show-menu="emit('show-menu', $event)"
-            />
+            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
           </ViewerObjectTreeBox>
         </div>
         <div
@@ -209,9 +199,7 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0
-          ? onAdditionalResizeStart($event)
-          : onResizeStart($event)
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
       "
     />
   </div>
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index ecbcb350..b60eb311 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -40,9 +40,7 @@ watch(
     const { added, removed } = compareSelections(current, previous);
 
     const allObjectIds = new Set(
-      treeviewStore.items.flatMap((group) =>
-        group.children.map((child) => child.id),
-      ),
+      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
     );
 
     const updates = [
@@ -61,8 +59,7 @@ watch(
 function isModel(item) {
   const actualItem = item.raw || item;
   return (
-    actualItem.viewer_type === "model" ||
-    ["BRep", "Section"].includes(actualItem.geode_object_type)
+    actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
   );
 }
 </script>
@@ -104,11 +101,7 @@ function isModel(item) {
           variant="text"
           v-tooltip="'Model\'s mesh components'"
           @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-            )
+            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
           "
         />
       </template>
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 0eb0c3ef..31630a53 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -16,18 +16,14 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const treeviewStore = useTreeviewStore();
 
-const currentView = computed(() =>
-  treeviewStore.opened_views.find((view) => view.id === viewId),
-);
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
 const opened = computed({
   get: () => currentView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(viewId, val),
 });
 
 const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(
-  toRef(() => viewId),
-);
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
 
 const {
   search,

From a5d1b51eb9c0bea44d8ad4a72276ba5b48f2974e Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 15 Apr 2026 16:09:54 +0200
Subject: [PATCH 31/31] trigger