From ab10e6e9406fda5d8b57132f18768e1b9a8d85f2 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Fri, 15 May 2026 10:09:36 +0200
Subject: [PATCH 1/4] size treeview

---
 .../Viewer/ObjectTree/Base/CommonTreeView.vue |   6 +-
 .../Viewer/ObjectTree/Base/Controls.vue       |   8 +-
 .../Viewer/ObjectTree/Base/ItemLabel.vue      |  38 +++++-
 .../Viewer/ObjectTree/Base/TreeRow.vue        |  12 +-
 app/components/Viewer/ObjectTree/Box.vue      |  58 ++-------
 app/components/Viewer/ObjectTree/Layout.vue   | 118 ++++++++++++++----
 .../Viewer/ObjectTree/Views/GlobalObjects.vue |   2 +-
 app/composables/use_adaptive_styles.js        |  55 ++++++++
 app/stores/treeview.js                        |  22 +++-
 app/utils/string.js                           |  26 ++++
 10 files changed, 255 insertions(+), 90 deletions(-)
 create mode 100644 app/composables/use_adaptive_styles.js
 create mode 100644 app/utils/string.js

diff --git a/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue b/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue
index a3ccaad26..a6a7b497c 100644
--- a/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue
+++ b/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue
@@ -163,10 +163,10 @@ const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
 }
 
 .tree-row-wrapper {
-  min-height: 44px !important;
+  min-height: 28px !important;
   cursor: pointer;
-  border-radius: 8px;
-  margin: 1px 4px;
+  border-radius: 4px;
+  margin: 0 2px;
 }
 
 .tree-row-wrapper.is-focused {
diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index 1ad9d0dd4..3fb0a3e5e 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -24,7 +24,7 @@ watch(
 </script>
 
 <template>
-  <v-row dense align="center" class="pa-2 py-1">
+  <v-row dense align="center" class="pa-1 py-0">
     <v-col cols="12">
       <div
         class="controls-capsule d-flex align-center rounded-pill px-1 overflow-hidden"
@@ -113,7 +113,7 @@ watch(
 
 <style scoped>
 .controls-capsule {
-  height: 40px;
+  height: 32px;
   border: 1px solid transparent;
   transition: all 0.3s ease;
   width: fit-content;
@@ -133,12 +133,12 @@ watch(
 :deep(.v-field__input) {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
-  min-height: 40px !important;
+  min-height: 32px !important;
   display: flex;
   align-items: center;
 }
 
 :deep(.v-field__field) {
-  height: 40px !important;
+  height: 32px !important;
 }
 </style>
diff --git a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
index 2818942fb..7c00c85e7 100644
--- a/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
+++ b/app/components/Viewer/ObjectTree/Base/ItemLabel.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { middleTruncate } from "@ogw_front/utils/string";
+
 const { item, isLeaf } = defineProps({
   item: { type: Object, required: true },
   isLeaf: { type: Boolean, required: false, default: undefined },
@@ -6,8 +8,39 @@ const { item, isLeaf } = defineProps({
 
 const emit = defineEmits(["contextmenu", "mouseenter", "mouseleave"]);
 
+const labelContainer = useTemplateRef("label-container");
+const { width: containerWidth } = useElementSize(labelContainer);
+
 const actualItem = computed(() => item.raw || item);
 
+const UUID_END_CHARS = 12;
+const ELLIPSIS_LENGTH = 3;
+const MIN_START_CHARS = 4;
+
+const displayTitle = computed(() => {
+  const { title } = actualItem.value;
+  if (!title) {
+    return "";
+  }
+
+  // Estimate max characters based on width (approx 9px per char for typical font)
+  // We subtract some padding/icon space
+  const estimatedCharWidth = 8.5;
+  const maxChars = Math.floor(containerWidth.value / estimatedCharWidth);
+
+  // Only truncate if the text is longer than what fits
+  if (title.length <= maxChars) {
+    return title;
+  }
+
+  // Calculate dynamic start/end based on available space
+  // For UUIDs, showing the last 12 characters is often useful
+  const endChars = Math.min(UUID_END_CHARS, Math.floor(maxChars / ELLIPSIS_LENGTH));
+  const startChars = Math.max(MIN_START_CHARS, maxChars - endChars - ELLIPSIS_LENGTH);
+
+  return middleTruncate(title, maxChars, startChars, endChars);
+});
+
 const tooltipDisabled = computed(() => {
   if (isLeaf !== undefined) {
     return !isLeaf;
@@ -17,7 +50,7 @@ const tooltipDisabled = computed(() => {
 </script>
 
 <template>
-  <div class="tree-item-label-container w-100">
+  <div ref="label-container" class="tree-item-label-container w-100">
     <v-tooltip :disabled="tooltipDisabled" location="right" open-delay="400">
       <template #activator="{ props: tooltipProps }">
         <span
@@ -28,7 +61,7 @@ const tooltipDisabled = computed(() => {
           @mouseenter="emit('mouseenter')"
           @mouseleave="emit('mouseleave')"
         >
-          {{ actualItem.title }}
+          {{ displayTitle }}
         </span>
       </template>
 
@@ -65,6 +98,7 @@ const tooltipDisabled = computed(() => {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
+  font-size: 0.8rem;
 }
 
 .inactive-item {
diff --git a/app/components/Viewer/ObjectTree/Base/TreeRow.vue b/app/components/Viewer/ObjectTree/Base/TreeRow.vue
index 7ce1fd8ec..aa1baba91 100644
--- a/app/components/Viewer/ObjectTree/Base/TreeRow.vue
+++ b/app/components/Viewer/ObjectTree/Base/TreeRow.vue
@@ -9,11 +9,11 @@ const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps
 
 defineEmits(["toggle-open", "toggle-select"]);
 
-const INDENT_STEP = 16;
+const INDENT_STEP = 10;
 </script>
 
 <template>
-  <div class="tree-row-content d-flex align-center px-4 ps-3 w-100">
+  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100">
     <div
       v-if="item.depth > 0"
       class="flex-shrink-0"
@@ -50,7 +50,11 @@ const INDENT_STEP = 16;
 
     <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">
       <slot name="title" :item="item.raw" :is-leaf="item.isLeaf">
-        <v-list-item-title :class="{ 'font-weight-bold': !item.isLeaf }" class="text-black">
+        <v-list-item-title
+          :class="{ 'font-weight-bold': !item.isLeaf }"
+          class="text-black"
+          style="font-size: 0.8rem !important"
+        >
           {{ item.raw[itemProps.title] || item.id }}
         </v-list-item-title>
       </slot>
@@ -64,7 +68,7 @@ const INDENT_STEP = 16;
 
 <style scoped>
 .tree-row-content {
-  min-height: 44px;
+  min-height: 28px;
 }
 
 .icon-placeholder {
diff --git a/app/components/Viewer/ObjectTree/Box.vue b/app/components/Viewer/ObjectTree/Box.vue
index ca5c6e542..91ff3b6ec 100644
--- a/app/components/Viewer/ObjectTree/Box.vue
+++ b/app/components/Viewer/ObjectTree/Box.vue
@@ -1,68 +1,27 @@
 <script setup>
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
-const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
+const { title, closable, icon, mdiIcon, scrollTop, borderRadius } = defineProps({
   title: { type: String, required: true },
   closable: { type: Boolean, required: false, default: false },
   icon: { type: String, required: false, default: "" },
   mdiIcon: { type: String, required: false, default: "" },
   scrollTop: { type: Number, required: false, default: 0 },
+  borderRadius: { type: String, required: false, default: "16px" },
+  borderLeft: { type: Boolean, required: false, default: true },
 });
 const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
 
 const scrollContainer = useTemplateRef("scroll-container");
 const treeviewBox = useTemplateRef("treeview-box");
-const hybridViewerStore = useHybridViewerStore();
 
-const LUMINANCE_THRESHOLD = 0.65;
-const ADAPTIVE_EXPONENT = 0.3;
-
-const MIN_BLUR = 8;
-const MAX_BLUR = 25;
-
-const MIN_OPACITY = 0;
-const MAX_OPACITY = 0.5;
-
-const MIN_BOOST = 1;
-const MAX_BOOST = 1.2;
-const ADAPTIVE_REFRESH_RATE = 150;
-
-const { x, y, width, height } = useElementBounding(treeviewBox);
-const brightness = ref(LUMINANCE_THRESHOLD);
-
-const updateBrightness = useThrottleFn(() => {
-  brightness.value = hybridViewerStore.getAverageBrightness({
-    x: x.value,
-    y: y.value,
-    width: width.value,
-    height: height.value,
-  });
-}, ADAPTIVE_REFRESH_RATE);
+const { adaptiveStyles } = useAdaptiveStyles(treeviewBox);
 
 let isApplyingScroll = false;
 let resizeObserver = undefined;
 
-watch([x, y, width, height, () => hybridViewerStore.latestImage], updateBrightness, {
-  immediate: true,
-});
-
-const adaptiveStyles = computed(() => {
-  const normalized = Math.min(1, brightness.value / LUMINANCE_THRESHOLD);
-  const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
-
-  const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
-  const opacity = MIN_OPACITY + darkFactor * (MAX_OPACITY - MIN_OPACITY);
-  const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
-
-  return {
-    "--adaptive-blur": `${blur}px`,
-    "--adaptive-opacity": opacity,
-    "--adaptive-brightness": brightnessBoost,
-  };
-});
-
 function handleScroll(event) {
   if (isApplyingScroll) {
     return;
@@ -121,7 +80,7 @@ watch(
     ref="treeview-box"
     variant="outlined"
     class="tree-box d-flex flex-column"
-    :style="adaptiveStyles"
+    :style="[adaptiveStyles, { borderRadius, borderLeft: borderLeft ? undefined : 'none' }]"
   >
     <v-card-title
       class="tree-box-header d-flex align-center"
@@ -181,7 +140,6 @@ watch(
 .tree-box {
   height: 100%;
   min-height: 0;
-  border-radius: 16px;
   background-color: transparent !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
@@ -214,8 +172,8 @@ watch(
 }
 
 .tree-box-header {
-  height: 40px !important;
-  padding: 0 12px !important;
+  height: 32px !important;
+  padding: 0 10px !important;
   background-color: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   flex-shrink: 0;
diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 3f8d4bbee..fb34801e5 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -3,15 +3,17 @@ import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalO
 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 { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const WIDTH_MIN = 200;
+const WIDTH_MIN = 100;
 const HEIGHT_MIN = 150;
-const GAP_WIDTH = 10;
+const GAP_WIDTH = 0;
 const PERCENT_100 = 100;
 
 const TOTAL_PERCENT = 100;
 const MAX_PANEL_WIDTH_RATIO = 0.8;
+const AUTO_CLOSE_THRESHOLD = 80;
 
 const { containerWidth } = defineProps({
   containerWidth: { type: Number, required: true },
@@ -20,16 +22,21 @@ const { containerWidth } = defineProps({
 const treeviewStore = useTreeviewStore();
 const emit = defineEmits(["show-menu"]);
 
+const activityBar = useTemplateRef("activity-bar");
+const { adaptiveStyles: activityBarAdaptiveStyles } = useAdaptiveStyles(activityBar);
+
 const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
 
-const mainView = computed(() => treeviewStore.opened_views[0]);
-const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
+const mainView = computed(() => treeviewStore.opened_views.find((view) => view.id === "main"));
+const additionalViews = computed(() => treeviewStore.opened_views.filter((view) => view.id !== "main"));
 
 const totalWidth = computed(() => {
   const hasAdditional = additionalViews.value.length > 0;
-  const gap = hasAdditional ? GAP_WIDTH : 0;
+  const hasMain = Boolean(mainView.value);
+  const gap = hasAdditional && hasMain ? GAP_WIDTH : 0;
+  const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
   const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
-  return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
+  return `${firstColWidth + secondColWidth + gap}px`;
 });
 
 const rowHeights = computed({
@@ -90,7 +97,7 @@ function onResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    let newWidth = startWidth + deltaX;
     const hasAdditional = additionalViews.value.length > 0;
     const gap = hasAdditional ? GAP_WIDTH : 0;
     const currentTotalWidth =
@@ -98,6 +105,12 @@ function onResizeStart(event) {
     if (currentTotalWidth > maxWidth.value) {
       newWidth = maxWidth.value - (hasAdditional ? treeviewStore.additionalPanelWidth : 0) - gap;
     }
+
+    if (newWidth < AUTO_CLOSE_THRESHOLD) {
+      treeviewStore.closeView("main");
+      return;
+    }
+
     treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
@@ -115,11 +128,13 @@ function onAdditionalResizeStart(event) {
   const startX = event.clientX;
   function resize(move_event) {
     const deltaX = move_event.clientX - startX;
-    let newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    const newWidth = startWidth + deltaX;
     const currentTotalWidth = treeviewStore.panelWidth + newWidth + GAP_WIDTH;
-    if (currentTotalWidth > maxWidth.value) {
-      newWidth = maxWidth.value - treeviewStore.panelWidth - GAP_WIDTH;
+    if (newWidth < AUTO_CLOSE_THRESHOLD) {
+      treeviewStore.closeView(additionalViews.value.at(-1).id);
+      return;
     }
+
     treeviewStore.setAdditionalPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
@@ -177,28 +192,51 @@ function onVerticalResizeStart(event, index) {
 <template>
   <div
     v-if="treeviewStore.items.length > 0"
-    class="treeview-container d-flex"
-    :style="{ width: totalWidth }"
+    class="treeview-layout d-flex"
     @contextmenu.prevent
     @mousedown.stop
   >
     <div
+      ref="activity-bar"
+      class="activity-bar d-flex flex-column align-center py-2"
+      :style="activityBarAdaptiveStyles"
+    >
+      <v-btn
+        icon="mdi-file-tree-outline"
+        variant="text"
+        :color="mainView ? 'primary' : 'black'"
+        class="mb-2"
+        v-tooltip="'Toggle Objects'"
+        @click="treeviewStore.toggleView('main')"
+      />
+    </div>
+
+    <div
+      class="treeview-container d-flex"
+      :style="{ width: totalWidth }"
+    >
+    <div
+      v-if="mainView"
       class="column main-column"
       :style="{
         width: `${treeviewStore.panelWidth}px`,
       }"
     >
       <ViewerObjectTreeBox
-        :title="mainView.title"
+        :title="mainView?.title || 'Objects'"
         mdi-icon="mdi-file-tree-outline"
-        :scroll-top="mainView.scrollTop"
-        @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
+        :scroll-top="mainView?.scrollTop || 0"
+        closable
+        :border-radius="additionalViews.length > 0 ? '0' : '0 16px 16px 0'"
+        :border-left="false"
+        @close="treeviewStore.closeView('main')"
+        @update:scroll-top="mainView && treeviewStore.setScrollTop(mainView.id, $event)"
       >
         <GlobalObjects data-testid="mainObjectTree" @show-menu="emit('show-menu', $event)" />
       </ViewerObjectTreeBox>
     </div>
 
-    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+    <div v-if="mainView && additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
 
     <div
       v-if="additionalViews.length > 0"
@@ -222,7 +260,9 @@ function onVerticalResizeStart(event, index) {
             :icon="geode_objects[view.geode_object_type]?.image"
             :scroll-top="view.scrollTop"
             closable
-            @close="treeviewStore.closeView(index + 1)"
+            :border-radius="index === additionalViews.length - 1 ? '0 16px 16px 0' : '0'"
+            :border-left="false"
+            @close="treeviewStore.closeView(view.id)"
             @dragstart="onDragStart(index + 1)"
             @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
           >
@@ -243,22 +283,57 @@ function onVerticalResizeStart(event, index) {
     <div
       class="total-resizer"
       @mousedown="
-        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : mainView ? onResizeStart($event) : undefined
       "
     />
+    </div>
   </div>
 </template>
 
 <style scoped>
-.treeview-container {
+.treeview-layout {
   position: absolute;
   z-index: 2;
   left: 0;
   top: 0;
   height: calc(100vh - 100px);
-  margin-top: 10px;
-  margin-left: 10px;
+  margin-top: 8px;
   pointer-events: auto;
+}
+
+.activity-bar {
+  width: 48px;
+  height: 100%;
+  border-radius: 16px 0 0 16px;
+  margin-left: 10px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.activity-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  mix-blend-mode: lighten;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.3s ease,
+    backdrop-filter 0.3s ease;
+}
+
+.activity-bar > * {
+  position: relative;
+  z-index: 1;
+}
+
+.treeview-container {
+  height: 100%;
   width: max-content;
   min-width: min-content;
 }
@@ -289,7 +364,6 @@ function onVerticalResizeStart(event, index) {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  padding: 2px;
   transition: transform 0.2s;
   min-height: 150px;
 }
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index aae3c2e6e..35d93686d 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -169,6 +169,6 @@ function handleHoverLeave({ item }) {
 
 .transparent-treeview {
   background-color: transparent;
-  margin: 4px 0;
+  margin: 2px 0;
 }
 </style>
diff --git a/app/composables/use_adaptive_styles.js b/app/composables/use_adaptive_styles.js
new file mode 100644
index 000000000..fd4cb4b23
--- /dev/null
+++ b/app/composables/use_adaptive_styles.js
@@ -0,0 +1,55 @@
+import { computed, ref, watch } from "vue";
+import { useElementBounding, useThrottleFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const LUMINANCE_THRESHOLD = 0.65;
+const ADAPTIVE_EXPONENT = 0.3;
+
+const MIN_BLUR = 8;
+const MAX_BLUR = 25;
+
+const MIN_OPACITY = 0;
+const MAX_OPACITY = 0.5;
+
+const MIN_BOOST = 1;
+const MAX_BOOST = 1.2;
+const ADAPTIVE_REFRESH_RATE = 150;
+
+export function useAdaptiveStyles(targetRef) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { x, y, width, height } = useElementBounding(targetRef);
+  const brightness = ref(LUMINANCE_THRESHOLD);
+
+  const updateBrightness = useThrottleFn(() => {
+    brightness.value = hybridViewerStore.getAverageBrightness({
+      x: x.value,
+      y: y.value,
+      width: width.value,
+      height: height.value,
+    });
+  }, ADAPTIVE_REFRESH_RATE);
+
+  watch([x, y, width, height, () => hybridViewerStore.latestImage], updateBrightness, {
+    immediate: true,
+  });
+
+  const adaptiveStyles = computed(() => {
+    const normalized = Math.min(1, brightness.value / LUMINANCE_THRESHOLD);
+    const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
+
+    const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
+    const opacity = MIN_OPACITY + darkFactor * (MAX_OPACITY - MIN_OPACITY);
+    const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
+
+    return {
+      "--adaptive-blur": `${blur}px`,
+      "--adaptive-opacity": opacity,
+      "--adaptive-brightness": brightnessBoost,
+    };
+  });
+
+  return {
+    adaptiveStyles,
+    brightness,
+  };
+}
diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 7300df77b..bd6c378d7 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -68,9 +68,22 @@ export const useTreeviewStore = defineStore("treeview", () => {
     }
   });
 
-  function closeView(index) {
-    if (index > 0) {
-      opened_views.value = opened_views.value.filter((view, view_index) => view_index !== index);
+  function closeView(id) {
+    opened_views.value = opened_views.value.filter((view) => view.id !== id);
+  }
+
+  function toggleView(id) {
+    const index = opened_views.value.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      closeView(id);
+    } else if (id === "main") {
+      opened_views.value.unshift({
+        type: "object",
+        id: "main",
+        title: "Objects",
+        scrollTop: 0,
+        opened: [],
+      });
     }
   }
 
@@ -116,7 +129,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
   function displayAdditionalTree(id, title, geodeObjectType) {
     const index = opened_views.value.findIndex((view) => view.id === id);
     if (index !== -1) {
-      return closeView(index);
+      return closeView(id);
     }
     additionalPanelWidth.value = panelWidth.value;
     opened_views.value.push({
@@ -228,6 +241,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     removeItem,
     displayAdditionalTree,
     closeView,
+    toggleView,
     moveView,
     importStores,
     displayFileTree,
diff --git a/app/utils/string.js b/app/utils/string.js
new file mode 100644
index 000000000..0b3a3cc08
--- /dev/null
+++ b/app/utils/string.js
@@ -0,0 +1,26 @@
+const DEFAULT_MAX_LENGTH = 20;
+const DEFAULT_START_CHARS = 8;
+const DEFAULT_END_CHARS = 6;
+
+/**
+ * Truncates a string in the middle.
+ * @param {string} text - The string to truncate.
+ * @param {number} maxLength - The maximum length of the string before truncation.
+ * @param {number} startChars - Number of characters to keep at the beginning.
+ * @param {number} endChars - Number of characters to keep at the end.
+ * @returns {string} The truncated string.
+ */
+export function middleTruncate(
+  text,
+  maxLength = DEFAULT_MAX_LENGTH,
+  startChars = DEFAULT_START_CHARS,
+  endChars = DEFAULT_END_CHARS,
+) {
+  if (!text || text.length <= maxLength) {
+    return text;
+  }
+
+  const start = text.slice(0, startChars);
+  const end = text.slice(-endChars);
+  return `${start}...${end}`;
+}

From 8f40ce62b0cf5cd2d0541a096aabd2878423277f Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Fri, 15 May 2026 11:31:01 +0200
Subject: [PATCH 2/4] sidebar

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

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index fb34801e5..2b741c537 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -281,6 +281,7 @@ function onVerticalResizeStart(event, index) {
       </template>
     </div>
     <div
+      v-if="treeviewStore.opened_views.length > 0"
       class="total-resizer"
       @mousedown="
         additionalViews.length > 0 ? onAdditionalResizeStart($event) : mainView ? onResizeStart($event) : undefined
@@ -435,6 +436,6 @@ function onVerticalResizeStart(event, index) {
 }
 
 .total-resizer:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: transparent;
 }
 </style>

From 965bf206769275a5551c44df3d0a7bd3fce4b4b8 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Fri, 15 May 2026 09:54:39 +0000
Subject: [PATCH 3/4] Apply prepare changes

---
 app/components/Viewer/ObjectTree/Layout.vue | 155 ++++++++++----------
 1 file changed, 81 insertions(+), 74 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Layout.vue b/app/components/Viewer/ObjectTree/Layout.vue
index 2b741c537..5fcd6c5d7 100644
--- a/app/components/Viewer/ObjectTree/Layout.vue
+++ b/app/components/Viewer/ObjectTree/Layout.vue
@@ -28,7 +28,9 @@ const { adaptiveStyles: activityBarAdaptiveStyles } = useAdaptiveStyles(activity
 const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
 
 const mainView = computed(() => treeviewStore.opened_views.find((view) => view.id === "main"));
-const additionalViews = computed(() => treeviewStore.opened_views.filter((view) => view.id !== "main"));
+const additionalViews = computed(() =>
+  treeviewStore.opened_views.filter((view) => view.id !== "main"),
+);
 
 const totalWidth = computed(() => {
   const hasAdditional = additionalViews.value.length > 0;
@@ -211,82 +213,87 @@ function onVerticalResizeStart(event, index) {
       />
     </div>
 
-    <div
-      class="treeview-container d-flex"
-      :style="{ width: totalWidth }"
-    >
-    <div
-      v-if="mainView"
-      class="column main-column"
-      :style="{
-        width: `${treeviewStore.panelWidth}px`,
-      }"
-    >
-      <ViewerObjectTreeBox
-        :title="mainView?.title || 'Objects'"
-        mdi-icon="mdi-file-tree-outline"
-        :scroll-top="mainView?.scrollTop || 0"
-        closable
-        :border-radius="additionalViews.length > 0 ? '0' : '0 16px 16px 0'"
-        :border-left="false"
-        @close="treeviewStore.closeView('main')"
-        @update:scroll-top="mainView && treeviewStore.setScrollTop(mainView.id, $event)"
+    <div class="treeview-container d-flex" :style="{ width: totalWidth }">
+      <div
+        v-if="mainView"
+        class="column main-column"
+        :style="{
+          width: `${treeviewStore.panelWidth}px`,
+        }"
       >
-        <GlobalObjects data-testid="mainObjectTree" @show-menu="emit('show-menu', $event)" />
-      </ViewerObjectTreeBox>
-    </div>
-
-    <div v-if="mainView && 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 !== undefined && draggedIndex !== index + 1,
-          }"
-          :style="{ flex: `0 0 ${rowHeights[index]}%` }"
-          @dragover="onDragOver"
-          @drop="onDrop(index + 1)"
+        <ViewerObjectTreeBox
+          :title="mainView?.title || 'Objects'"
+          mdi-icon="mdi-file-tree-outline"
+          :scroll-top="mainView?.scrollTop || 0"
+          closable
+          :border-radius="additionalViews.length > 0 ? '0' : '0 16px 16px 0'"
+          :border-left="false"
+          @close="treeviewStore.closeView('main')"
+          @update:scroll-top="mainView && treeviewStore.setScrollTop(mainView.id, $event)"
         >
-          <ViewerObjectTreeBox
-            :title="view.title"
-            :icon="geode_objects[view.geode_object_type]?.image"
-            :scroll-top="view.scrollTop"
-            closable
-            :border-radius="index === additionalViews.length - 1 ? '0 16px 16px 0' : '0'"
-            :border-left="false"
-            @close="treeviewStore.closeView(view.id)"
-            @dragstart="onDragStart(index + 1)"
-            @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
+          <GlobalObjects data-testid="mainObjectTree" @show-menu="emit('show-menu', $event)" />
+        </ViewerObjectTreeBox>
+      </div>
+
+      <div
+        v-if="mainView && 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 !== undefined && draggedIndex !== index + 1,
+            }"
+            :style="{ flex: `0 0 ${rowHeights[index]}%` }"
+            @dragover="onDragOver"
+            @drop="onDrop(index + 1)"
           >
-            <ModelComponents
-              data-testid="modelComponentsObjectTree"
-              :id="view.id"
-              @show-menu="emit('show-menu', $event)"
-            />
-          </ViewerObjectTreeBox>
-        </div>
-        <div
-          v-if="index < additionalViews.length - 1"
-          class="v-split-resizer"
-          @mousedown="onVerticalResizeStart($event, index)"
-        />
-      </template>
-    </div>
-    <div
-      v-if="treeviewStore.opened_views.length > 0"
-      class="total-resizer"
-      @mousedown="
-        additionalViews.length > 0 ? onAdditionalResizeStart($event) : mainView ? onResizeStart($event) : undefined
-      "
-    />
+            <ViewerObjectTreeBox
+              :title="view.title"
+              :icon="geode_objects[view.geode_object_type]?.image"
+              :scroll-top="view.scrollTop"
+              closable
+              :border-radius="index === additionalViews.length - 1 ? '0 16px 16px 0' : '0'"
+              :border-left="false"
+              @close="treeviewStore.closeView(view.id)"
+              @dragstart="onDragStart(index + 1)"
+              @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
+            >
+              <ModelComponents
+                data-testid="modelComponentsObjectTree"
+                :id="view.id"
+                @show-menu="emit('show-menu', $event)"
+              />
+            </ViewerObjectTreeBox>
+          </div>
+          <div
+            v-if="index < additionalViews.length - 1"
+            class="v-split-resizer"
+            @mousedown="onVerticalResizeStart($event, index)"
+          />
+        </template>
+      </div>
+      <div
+        v-if="treeviewStore.opened_views.length > 0"
+        class="total-resizer"
+        @mousedown="
+          additionalViews.length > 0
+            ? onAdditionalResizeStart($event)
+            : mainView
+              ? onResizeStart($event)
+              : undefined
+        "
+      />
     </div>
   </div>
 </template>

From 5e3d6ca9f1b49657ef7a1b61cb023bd8d7f089ce Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Fri, 15 May 2026 12:02:37 +0200
Subject: [PATCH 4/4] fix(TreeviewMinimize): Treeview minimize new sidebar