filemanager: implement tree view on the left

dashboard/src/components/FolderView.vue

@@ -6,7 +6,7 @@ const t = i18n.t;
 
 import { ref, onMounted, computed, useTemplateRef } from 'vue';
 import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
-import { fetcher, Dialog, DirectoryView, TopBar, Breadcrumb, Button, InputDialog, MainLayout, ButtonGroup, Notification, FileUploader, Spinner } from '@cloudron/pankow';
+import { fetcher, Dialog, DirectoryView, TreeView, TopBar, Breadcrumb, Button, InputDialog, MainLayout, ButtonGroup, Notification, FileUploader, Spinner } from '@cloudron/pankow';
 import { sanitize, sleep } from '@cloudron/pankow/utils';
 import { API_ORIGIN, BASE_URL, ISTATES } from '../constants.js';
 import PreviewPanel from '../components/PreviewPanel.vue';
@@ -159,6 +159,15 @@ function onActivateBreadcrumb(path) {
   router.push(`/home/${resourceType.value}/${resourceId.value}${sanitize(path)}`);
 }
 
+function onTreeNavigate(event) {
+  router.push(`/home/${resourceType.value}/${resourceId.value}${sanitize(event.path)}`);
+}
+
+function treeListFiles(path) {
+  if (!directoryModel) return [];
+  return directoryModel.listFiles(path);
+}
+
 async function onRefresh() {
   busyRefresh.value = true;
   await loadCwd();
@@ -529,6 +538,15 @@ onMounted(async () => {
     </template>
     <template #body>
       <div class="main-view">
+        <div class="main-view-col tree-view-col">
+          <TreeView
+            v-if="!busy"
+            :list-files="treeListFiles"
+            :active-path="cwd"
+            :fallback-icon="fallbackIcon"
+            @navigate="onTreeNavigate"
+          />
+        </div>
         <div class="main-view-col">
           <DirectoryView
             class="directory-view"
@@ -596,6 +614,14 @@ onMounted(async () => {
   flex-grow: 1;
 }
 
+.tree-view-col {
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 250px;
+  border-right: 1px solid var(--pankow-input-border-color);
+  overflow: auto;
+}
+
 .no-highlight {
   color: var(--pankow-color-text);
 }