From 46e96f8e89276f01448bd85ca2a6639f71b1fd0e Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 16:31:37 +0200
Subject: [PATCH 1/5] fix(UI): Some changes on the actual UI

---
 app/components/Loading.vue             | 22 ++++++++++++++--------
 app/components/Loading/EcoMessages.vue |  6 +++---
 app/components/Loading/Header.vue      | 21 +++++++++++++++------
 app/components/Loading/Progress.vue    |  2 +-
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/app/components/Loading.vue b/app/components/Loading.vue
index b389e407..50f4eee9 100644
--- a/app/components/Loading.vue
+++ b/app/components/Loading.vue
@@ -44,7 +44,7 @@ onUnmounted(() => {
     <Teleport to="body">
       <div
         v-if="show"
-        class="d-flex align-center justify-center transition-swing"
+        class="transition-swing overflow-y-auto"
         style="
           position: fixed;
           inset: 0;
@@ -58,23 +58,29 @@ onUnmounted(() => {
       >
         <div
           style="
-            position: absolute;
+            position: fixed;
             inset: 0;
             background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
             background-size: 40px 40px;
             background-position: center;
             pointer-events: none;
+            z-index: -1;
           "
         />
 
         <div
-          class="d-flex flex-column align-center text-center"
-          style="max-width: 650px; width: 100%; padding: 0 24px; gap: 1.5rem"
+          class="d-flex align-center justify-center pa-6"
+          style="min-height: 100%"
         >
-          <LoadingHeader :logo="logo" />
-          <LoadingEcoMessages :app-name="appName" />
-          <LoadingProgress :progress="progress" />
-          <LoadingFooter />
+          <div
+            class="d-flex flex-column align-center text-center w-100"
+            style="max-width: 650px; gap: clamp(1rem, 4vh, 2rem)"
+          >
+            <LoadingHeader :logo="logo" />
+            <LoadingEcoMessages :app-name="appName" />
+            <LoadingProgress :progress="progress" />
+            <LoadingFooter />
+          </div>
         </div>
       </div>
     </Teleport>
diff --git a/app/components/Loading/EcoMessages.vue b/app/components/Loading/EcoMessages.vue
index 73e46bfb..59bc193b 100644
--- a/app/components/Loading/EcoMessages.vue
+++ b/app/components/Loading/EcoMessages.vue
@@ -40,18 +40,18 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <v-sheet color="transparent" height="160" class="position-relative overflow-visible mb-4">
+  <v-sheet color="transparent" min-height="160" class="position-relative overflow-visible mb-4">
     <v-scroll-y-reverse-transition mode="out-in">
       <v-card
         :key="currentMessage"
         rounded="lg"
-        class="pa-6 border mx-auto"
+        class="pa-4 pa-sm-6 border mx-auto"
         color="rgba(255, 255, 255, 0.05)"
         elevation="0"
         style="border-color: rgba(255, 255, 255, 0.1) !important"
       >
         <v-card-title
-          class="d-flex align-center ga-3 pa-0 mb-3 text-subtitle-1 font-weight-bold text-white text-wrap"
+          class="d-flex align-center ga-3 pa-0 mb-2 mb-sm-3 text-body-1 text-sm-subtitle-1 font-weight-bold text-white text-wrap"
         >
           <v-icon
             :icon="ecoMessages[currentMessage].icon"
diff --git a/app/components/Loading/Header.vue b/app/components/Loading/Header.vue
index 3e7b3f97..ed54e669 100644
--- a/app/components/Loading/Header.vue
+++ b/app/components/Loading/Header.vue
@@ -8,18 +8,17 @@ const { logo } = defineProps({
 </script>
 
 <template>
-  <v-row justify="center" class="mb-8">
+  <v-row justify="center" class="mb-4 mb-sm-8">
     <v-img
       :src="logo"
-      height="180"
-      width="180"
+      class="responsive-logo"
       style="filter: drop-shadow(0 0 20px rgba(var(--v-theme-primary), 0.4))"
     />
   </v-row>
 
-  <v-card color="transparent" elevation="0" class="mb-8 overflow-visible">
+  <v-card color="transparent" elevation="0" class="mb-4 mb-sm-8 overflow-visible">
     <v-card-title
-      class="text-h2 font-weight-black text-white text-wrap pa-0 d-block"
+      class="font-weight-black text-white text-wrap pa-0 d-block responsive-title"
       style="text-shadow: 0 0 20px rgba(255, 255, 255, 0.3)"
     >
       STARTING UP
@@ -35,7 +34,17 @@ const { logo } = defineProps({
 </template>
 
 <style scoped>
+.responsive-logo {
+  width: clamp(100px, 20vw, 180px);
+  height: clamp(100px, 20vw, 180px);
+}
+
+.responsive-title {
+  font-size: clamp(2rem, 8vw, 4rem) !important;
+  line-height: 1.1 !important;
+}
+
 .ls-widest {
-  letter-spacing: 0.6em !important;
+  letter-spacing: clamp(0.2em, 2vw, 0.6em) !important;
 }
 </style>
diff --git a/app/components/Loading/Progress.vue b/app/components/Loading/Progress.vue
index e4b4c9c7..85921c36 100644
--- a/app/components/Loading/Progress.vue
+++ b/app/components/Loading/Progress.vue
@@ -15,7 +15,7 @@ const { progress } = defineProps({
     rounded
     bg-color="white"
     bg-opacity="0.15"
-    class="custom-progress-glow mt-8"
+    class="custom-progress-glow mt-4 mt-sm-8"
   />
 </template>
 

From c6c963d49f86e34e79cfd3636f1a355dc99d0922 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 16:41:37 +0200
Subject: [PATCH 2/5] fix rename tab

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

diff --git a/app/stores/treeview.js b/app/stores/treeview.js
index 7300df77..353d6acd 100644
--- a/app/stores/treeview.js
+++ b/app/stores/treeview.js
@@ -216,6 +216,24 @@ export const useTreeviewStore = defineStore("treeview", () => {
     };
   }
 
+  function renameItem(id, newName) {
+    for (const group of items.value) {
+      const child = group.children.find((childItem) => childItem.id === id);
+      if (child) {
+        child.title = newName;
+        const options = { numeric: true, sensitivity: "base" };
+        group.children.sort((childA, childB) =>
+          childA.title.localeCompare(childB.title, undefined, options),
+        );
+        break;
+      }
+    }
+    const view = opened_views.value.find((openedView) => openedView.id === id);
+    if (view) {
+      view.title = newName;
+    }
+  }
+
   return {
     items,
     selection,
@@ -226,6 +244,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
     rowHeights,
     addItem,
     removeItem,
+    renameItem,
     displayAdditionalTree,
     closeView,
     moveView,

From 02f9334a5b5f6220bc8ff8980b47c35c6372152f Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 17:01:39 +0200
Subject: [PATCH 3/5] eyes changes

---
 .../Viewer/ObjectTree/Base/TreeRow.vue        | 28 +++++++++------
 app/composables/virtual_tree.js               | 34 +++++++++++++++----
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/TreeRow.vue b/app/components/Viewer/ObjectTree/Base/TreeRow.vue
index 7ce1fd8e..391e56fe 100644
--- a/app/components/Viewer/ObjectTree/Base/TreeRow.vue
+++ b/app/components/Viewer/ObjectTree/Base/TreeRow.vue
@@ -1,11 +1,12 @@
 <script setup>
-const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
-  item: { type: Object, required: true },
-  itemProps: { type: Object, required: true },
-  selection: { type: Object, required: true },
-  isSelected: { type: Function, required: true },
-  getIndeterminate: { type: Function, required: true },
-});
+const { item, itemProps, selection, isSelected, getIndeterminate } =
+  defineProps({
+    item: { type: Object, required: true },
+    itemProps: { type: Object, required: true },
+    selection: { type: Object, required: true },
+    isSelected: { type: Function, required: true },
+    getIndeterminate: { type: Function, required: true },
+  });
 
 defineEmits(["toggle-open", "toggle-select"]);
 
@@ -34,10 +35,10 @@ const INDENT_STEP = 16;
         v-if="selection.selectable"
         :icon="
           getIndeterminate(item.raw)
-            ? 'mdi-eye-minus'
+            ? 'mdi-eye-minus-outline'
             : isSelected(item.raw)
               ? 'mdi-eye'
-              : 'mdi-eye-off'
+              : 'mdi-eye-off-outline'
         "
         variant="text"
         density="compact"
@@ -48,9 +49,14 @@ const INDENT_STEP = 16;
       />
     </div>
 
-    <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">
+    <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"
+        >
           {{ item.raw[itemProps.title] || item.id }}
         </v-list-item-title>
       </slot>
diff --git a/app/composables/virtual_tree.js b/app/composables/virtual_tree.js
index 458e99ee..dc5cc42f 100644
--- a/app/composables/virtual_tree.js
+++ b/app/composables/virtual_tree.js
@@ -112,10 +112,6 @@ export function useVirtualTree(propsIn, emit) {
           : (item[actualItemProps.value.title] || "").toLowerCase().includes(lowerSearch) ||
             String(id).toLowerCase().includes(lowerSearch);
 
-        if (!hasChildren && !matches) {
-          continue;
-        }
-
         if (hasChildren) {
           const subtree = [];
           flattenTree(children, depth + 1, subtree);
@@ -127,10 +123,15 @@ export function useVirtualTree(propsIn, emit) {
             raw: item,
             id,
             depth,
-            isOpen: true,
+            isOpen,
             isLeaf: false,
           });
-          result.push(...subtree);
+          if (isOpen) {
+            result.push(...subtree);
+          }
+          continue;
+        }
+        if (!matches) {
           continue;
         }
       }
@@ -150,8 +151,29 @@ export function useVirtualTree(propsIn, emit) {
     return result;
   }
 
+  function traverse(itemsList, allIds) {
+    for (const item of itemsList) {
+      const children = item[actualItemProps.value.children];
+      if (children && children.length > 0) {
+        allIds.push(item[actualItemProps.value.value]);
+        traverse(children, allIds);
+      }
+    }
+  }
+
   const displayItems = computed(() => flattenTree(props.value.items || []));
 
+  watch(
+    () => props.value.search,
+    (newSearch, oldSearch) => {
+      if (newSearch && !oldSearch) {
+        const allIds = [];
+        traverse(props.value.items || [], allIds);
+        emit("update:opened", [...new Set([...(props.value.opened || []), ...allIds])]);
+      }
+    },
+  );
+
   return {
     actualItemProps,
     actualSelection,

From 42da9cfec262173de2ccc697f68892fee77b0522 Mon Sep 17 00:00:00 2001
From: SpliiT <spliitdev@gmail.com>
Date: Wed, 13 May 2026 17:10:59 +0200
Subject: [PATCH 4/5] expand all

---
 .../Viewer/ObjectTree/Base/Controls.vue       | 31 ++++++++++++++-----
 .../Viewer/ObjectTree/Views/GlobalObjects.vue | 16 ++++++++++
 .../ObjectTree/Views/ModelComponents.vue      | 16 ++++++++++
 3 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index 1ad9d0dd..671bf670 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -2,14 +2,21 @@
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
 
-const { search, sortType, filterOptions, availableFilterOptions } = defineProps({
-  search: { type: String, required: true },
-  sortType: { type: String, required: true },
-  filterOptions: { type: Object, required: true },
-  availableFilterOptions: { type: Array, required: true },
-});
+const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } =
+  defineProps({
+    search: { type: String, required: true },
+    sortType: { type: String, required: true },
+    filterOptions: { type: Object, required: true },
+    availableFilterOptions: { type: Array, required: true },
+    isCollapsed: { type: Boolean, required: false, default: false },
+  });
 
-const emit = defineEmits(["update:search", "toggle-sort", "collapse-all"]);
+const emit = defineEmits([
+  "update:search",
+  "toggle-sort",
+  "collapse-all",
+  "expand-all",
+]);
 
 const showSearch = ref(false);
 
@@ -98,6 +105,7 @@ watch(
             </v-list>
           </v-menu>
           <ActionButton
+            v-if="!isCollapsed"
             tooltip="Collapse All"
             icon="mdi-collapse-all-outline"
             variant="text"
@@ -105,6 +113,15 @@ watch(
             tooltipLocation="bottom"
             @click="emit('collapse-all')"
           />
+          <ActionButton
+            v-else
+            tooltip="Expand All"
+            icon="mdi-expand-all-outline"
+            variant="text"
+            color="black"
+            tooltipLocation="bottom"
+            @click="emit('expand-all')"
+          />
         </div>
       </div>
     </v-col>
diff --git a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
index aae3c2e6..5818eb89 100644
--- a/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
+++ b/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue
@@ -99,6 +99,20 @@ function handleHoverLeave({ item }) {
   }
   onHoverLeave(actualItem.id);
 }
+
+function expandAll() {
+  const allIds = [];
+  function traverse(itemsList) {
+    for (const item of itemsList) {
+      if (item.children && item.children.length > 0) {
+        allIds.push(item.id);
+        traverse(item.children);
+      }
+    }
+  }
+  traverse(treeviewStore.items);
+  opened.value = allIds;
+}
 </script>
 
 <template>
@@ -108,8 +122,10 @@ function handleHoverLeave({ item }) {
       :sort-type="sortType"
       :filter-options="filterOptions"
       :available-filter-options="availableFilterOptions"
+      :is-collapsed="opened.length === 0"
       @toggle-sort="toggleSort"
       @collapse-all="opened = []"
+      @expand-all="expandAll"
     />
 
     <CommonTreeView
diff --git a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
index 742787c4..c64c3b98 100644
--- a/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
+++ b/app/components/Viewer/ObjectTree/Views/ModelComponents.vue
@@ -109,6 +109,20 @@ function handleHoverEnter({ item, immediate = false }) {
 function handleHoverLeave() {
   onHoverLeave(id);
 }
+
+function expandAll() {
+  const allIds = [];
+  function traverse(itemsList) {
+    for (const item of itemsList) {
+      if (item.children && item.children.length > 0) {
+        allIds.push(item.id);
+        traverse(item.children);
+      }
+    }
+  }
+  traverse(itemsForTreeView.value);
+  opened.value = allIds;
+}
 </script>
 
 <template>
@@ -118,8 +132,10 @@ function handleHoverLeave() {
       :sort-type="sortType"
       :filter-options="filterOptions"
       :available-filter-options="availableFilterOptions"
+      :is-collapsed="opened.length === 0"
       @toggle-sort="toggleSort"
       @collapse-all="opened = []"
+      @expand-all="expandAll"
     />
 
     <FetchingData v-if="rawItems === undefined" :size="48" :width="4" text="" />

From 18fb6f4a37a2c39cbb1b54b0c5cb218c041cf907 Mon Sep 17 00:00:00 2001
From: SpliiT <106495600+SpliiT@users.noreply.github.com>
Date: Wed, 13 May 2026 15:13:56 +0000
Subject: [PATCH 5/5] Apply prepare changes

---
 app/components/Loading.vue                    |  5 +---
 .../Viewer/ObjectTree/Base/Controls.vue       | 22 +++++++----------
 .../Viewer/ObjectTree/Base/TreeRow.vue        | 24 +++++++------------
 3 files changed, 18 insertions(+), 33 deletions(-)

diff --git a/app/components/Loading.vue b/app/components/Loading.vue
index 50f4eee9..b3d4c733 100644
--- a/app/components/Loading.vue
+++ b/app/components/Loading.vue
@@ -68,10 +68,7 @@ onUnmounted(() => {
           "
         />
 
-        <div
-          class="d-flex align-center justify-center pa-6"
-          style="min-height: 100%"
-        >
+        <div class="d-flex align-center justify-center pa-6" style="min-height: 100%">
           <div
             class="d-flex flex-column align-center text-center w-100"
             style="max-width: 650px; gap: clamp(1rem, 4vh, 2rem)"
diff --git a/app/components/Viewer/ObjectTree/Base/Controls.vue b/app/components/Viewer/ObjectTree/Base/Controls.vue
index 671bf670..4a6f49d7 100644
--- a/app/components/Viewer/ObjectTree/Base/Controls.vue
+++ b/app/components/Viewer/ObjectTree/Base/Controls.vue
@@ -2,21 +2,15 @@
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import SearchBar from "@ogw_front/components/SearchBar.vue";
 
-const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } =
-  defineProps({
-    search: { type: String, required: true },
-    sortType: { type: String, required: true },
-    filterOptions: { type: Object, required: true },
-    availableFilterOptions: { type: Array, required: true },
-    isCollapsed: { type: Boolean, required: false, default: false },
-  });
+const { search, sortType, filterOptions, availableFilterOptions, isCollapsed } = defineProps({
+  search: { type: String, required: true },
+  sortType: { type: String, required: true },
+  filterOptions: { type: Object, required: true },
+  availableFilterOptions: { type: Array, required: true },
+  isCollapsed: { type: Boolean, required: false, default: false },
+});
 
-const emit = defineEmits([
-  "update:search",
-  "toggle-sort",
-  "collapse-all",
-  "expand-all",
-]);
+const emit = defineEmits(["update:search", "toggle-sort", "collapse-all", "expand-all"]);
 
 const showSearch = ref(false);
 
diff --git a/app/components/Viewer/ObjectTree/Base/TreeRow.vue b/app/components/Viewer/ObjectTree/Base/TreeRow.vue
index 391e56fe..d83ff1a4 100644
--- a/app/components/Viewer/ObjectTree/Base/TreeRow.vue
+++ b/app/components/Viewer/ObjectTree/Base/TreeRow.vue
@@ -1,12 +1,11 @@
 <script setup>
-const { item, itemProps, selection, isSelected, getIndeterminate } =
-  defineProps({
-    item: { type: Object, required: true },
-    itemProps: { type: Object, required: true },
-    selection: { type: Object, required: true },
-    isSelected: { type: Function, required: true },
-    getIndeterminate: { type: Function, required: true },
-  });
+const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
+  item: { type: Object, required: true },
+  itemProps: { type: Object, required: true },
+  selection: { type: Object, required: true },
+  isSelected: { type: Function, required: true },
+  getIndeterminate: { type: Function, required: true },
+});
 
 defineEmits(["toggle-open", "toggle-select"]);
 
@@ -49,14 +48,9 @@ const INDENT_STEP = 16;
       />
     </div>
 
-    <div
-      class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1"
-    >
+    <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">
           {{ item.raw[itemProps.title] || item.id }}
         </v-list-item-title>
       </slot>