fix: rm extra Root layer in table

web/src/components/Docker/DockerContainerManagement.vue

@@ -284,6 +284,9 @@ const isDetailsDisabled = computed(() => props.disabled || isSwitching.value);
         <USkeleton v-if="loading" class="h-6 w-full" :ui="{ rounded: 'rounded' }" />
         <DockerSidebarTree
           v-else
+          :containers="containers"
+          :flat-entries="flatEntries"
+          :root-folder-id="rootFolderId"
           :selected-ids="selectedIds"
           :active-id="activeId"
           :disabled="props.disabled || loading"

web/src/components/Docker/DockerContainersTable.vue

@@ -113,6 +113,8 @@ function toContainerTreeRow(
 const flatEntriesRef = computed(() => props.flatEntries);
 const containersRef = computed(() => props.containers);
 
+const rootFolderId = computed<string>(() => props.rootFolderId || 'root');
+
 const { treeData, entryParentById, folderChildrenIds, parentById, positionById, getRowById } =
   useTreeData<DockerContainer>({
     flatEntries: flatEntriesRef,
@@ -123,8 +125,6 @@ const { treeData, entryParentById, folderChildrenIds, parentById, positionById,
 const { visibleFolders, expandedFolders, toggleExpandFolder, setExpandedFolders } = useFolderTree({
   flatEntries: flatEntriesRef,
 });
-
-const rootFolderId = computed<string>(() => props.rootFolderId || 'root');
 const busyRowIds = ref<Set<string>>(new Set());
 
 function setRowsBusy(ids: string[], busy: boolean) {

web/src/components/Docker/DockerSidebarTree.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-
 import DockerContainersTable from '@/components/Docker/DockerContainersTable.vue';
 
+import type { DockerContainer, FlatOrganizerEntry } from '@/composables/gql/graphql';
+
 interface Emits {
   (e: 'item:click', item: { id: string; type: string; name: string }): void;
   (e: 'item:select', item: { id: string; type: string; name: string; selected: boolean }): void;
 }
 
 interface Props {
+  containers?: DockerContainer[];
+  flatEntries?: FlatOrganizerEntry[];
+  rootFolderId?: string;
   selectedIds?: string[];
   activeId?: string | null;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  containers: () => [],
+  flatEntries: undefined,
+  rootFolderId: 'root',
   selectedIds: () => [],
   activeId: null,
   disabled: false,
@@ -22,8 +28,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const containers = computed(() => []);
-
 function onRowClick(payload: {
   id: string;
   type: 'container' | 'folder';
@@ -56,7 +60,9 @@ function onRowSelect(payload: {
 <template>
   <div class="space-y-2">
     <DockerContainersTable
-      :containers="containers"
+      :containers="props.containers"
+      :flat-entries="props.flatEntries"
+      :root-folder-id="props.rootFolderId"
       compact
       :active-id="activeId"
       :selected-ids="selectedIds"

web/src/composables/useTreeData.ts

@@ -20,10 +20,11 @@ export interface TreeDataOptions<T> {
   flatEntries?: MaybeRef<FlatOrganizerEntry[] | undefined>;
   flatData?: MaybeRef<T[]>;
   buildFlatRow?: (item: T) => TreeRow<T>;
+  unwrapRootFolder?: MaybeRef<boolean | string>;
 }
 
 export function useTreeData<T = unknown>(options: TreeDataOptions<T>) {
-  const { flatEntries, flatData, buildFlatRow } = options;
+  const { flatEntries, flatData, buildFlatRow, unwrapRootFolder = true } = options;
 
   const treeData = computed<TreeRow<T>[]>(() => {
     const flat = unref(flatEntries);
@@ -58,6 +59,18 @@ export function useTreeData<T = unknown>(options: TreeDataOptions<T>) {
         }
       }
 
+      const unwrap = unref(unwrapRootFolder);
+      if (unwrap) {
+        const rootFolderId = typeof unwrap === 'string' ? unwrap : undefined;
+        if (
+          rootEntries.length === 1 &&
+          rootEntries[0].type === 'folder' &&
+          (!rootFolderId || rootEntries[0].id === rootFolderId)
+        ) {
+          return rootEntries[0].children || [];
+        }
+      }
+
       return rootEntries;
     }
 
@@ -71,9 +84,7 @@ export function useTreeData<T = unknown>(options: TreeDataOptions<T>) {
   const entryParentById = computed<Record<string, string>>(() => {
     const entries = unref(flatEntries);
     if (!entries) return {};
-    return Object.fromEntries(
-      entries.filter((e) => e.parentId).map((e) => [e.id, e.parentId!])
-    );
+    return Object.fromEntries(entries.filter((e) => e.parentId).map((e) => [e.id, e.parentId!]));
   });
 
   const folderChildrenIds = computed<Record<string, string[]>>(() => {
@@ -88,9 +99,7 @@ export function useTreeData<T = unknown>(options: TreeDataOptions<T>) {
     const entries = unref(flatEntries);
     if (!entries) return {};
     return Object.fromEntries(
-      entries
-        .filter((e) => e.type === 'folder' && e.parentId)
-        .map((e) => [e.id, e.parentId!])
+      entries.filter((e) => e.type === 'folder' && e.parentId).map((e) => [e.id, e.parentId!])
     );
   });