refactor: tree-ex ellipsis + listview style

Services/client/src/components/TreeExplorer.vue

@@ -3,6 +3,8 @@ import { storeToRefs } from 'pinia'
 import { useTreeDataStore, type TreeDataFolder } from '@/stores/tree-data'
 import { useSearchDataStore } from '@/stores/searched-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
+import { computed } from '@vue/reactivity'
+import FolderForm from './FolderForm.vue'
 
 const { isSearch } = storeToRefs(useSearchDataStore())
 const { isPreview } = storeToRefs(useFileInfoStore())
@@ -17,6 +19,8 @@ const props = withDefaults(
     level: 0,
   }
 )
+
+const MAX_NAME_LENGTH = 20
 </script>
 
 <template>
@@ -40,7 +44,12 @@ const props = withDefaults(
             ? 'inbox'
             : 'o_folder_open'
         "
-        :label="folder.name"
+        :label="
+          folder.name.length > MAX_NAME_LENGTH
+            ? folder.name.slice(0, MAX_NAME_LENGTH) + '...'
+            : folder.name
+        "
+        class="text-overflow-handle"
         v-model="folder.status"
       >
         <tree-explorer
@@ -61,4 +70,10 @@ const props = withDefaults(
 .q-item[aria-expanded='true'] .q-icon {
   color: $primary;
 }
+
+.text-overflow-handle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>