Fix/treeview minimize

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 {

app/components/Viewer/ObjectTree/Base/Controls.vue

@@ -25,7 +25,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"
@@ -124,7 +124,7 @@ watch(
 
 <style scoped>
 .controls-capsule {
-  height: 40px;
+  height: 32px;
   border: 1px solid transparent;
   transition: all 0.3s ease;
   width: fit-content;
@@ -144,12 +144,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>

app/components/Viewer/ObjectTree/Base/ItemLabel.vue

@@ -1,13 +1,46 @@
 <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 },
 });
 
 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 {

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 {

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;