From 627b1fe33fea78321c3ee2a201c33834fd1b4cb4 Mon Sep 17 00:00:00 2001
From: Girish Ramakrishnan <girish@cloudron.io>
Date: Thu, 12 Feb 2026 22:55:05 +0100
Subject: [PATCH] filemanager: implement tree view on the left

---
 CHANGES                                 |  2 ++
 dashboard/src/components/FolderView.vue | 28 ++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/CHANGES b/CHANGES
index cd0f4994e..1aee3d456 100644
--- a/CHANGES
+++ b/CHANGES
@@ -3139,3 +3139,5 @@
 * app passwords: add expiry
 * DO Spaces: add missing ATL1, BLR1, SYD1 regions
 * filemanager: the terminal button automatically cds into the cwd
+* filemanager: add a tree view
+
diff --git a/dashboard/src/components/FolderView.vue b/dashboard/src/components/FolderView.vue
index c815c583f..171c5e895 100644
--- a/dashboard/src/components/FolderView.vue
+++ b/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);
 }