From 52e3ad08c19fc043f8bf9c03687ea444448dd454 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 13 Aug 2025 23:45:37 +0800
Subject: [PATCH] feat: add placeholder for empty folder tree in download modal

---
 static/css/components/modal/download-modal.css |  2 +-
 static/js/components/FolderTreeManager.js      | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/static/css/components/modal/download-modal.css b/static/css/components/modal/download-modal.css
index 2699d697..a3d99641 100644
--- a/static/css/components/modal/download-modal.css
+++ b/static/css/components/modal/download-modal.css
@@ -351,8 +351,8 @@
     display: flex;
     gap: 8px;
     margin-left: 20px;
-    margin-top: 4px;
     align-items: center;
+    height: 21px;
 }
 
 .create-folder-form input {
diff --git a/static/js/components/FolderTreeManager.js b/static/js/components/FolderTreeManager.js
index 058bd2e1..f8a43219 100644
--- a/static/js/components/FolderTreeManager.js
+++ b/static/js/components/FolderTreeManager.js
@@ -175,7 +175,18 @@ export class FolderTreeManager {
     renderTree() {
         const folderTree = document.getElementById(this.getElementId('folderTree'));
         if (!folderTree) return;
-        
+
+        // Show placeholder if treeData is empty
+        if (!this.treeData || Object.keys(this.treeData).length === 0) {
+            folderTree.innerHTML = `
+                <div class="folder-tree-placeholder" style="padding:24px;text-align:center;color:var(--text-color);opacity:0.7;">
+                    <i class="fas fa-folder-open" style="font-size:2em;opacity:0.5;"></i>
+                    <div>No folders found.<br/>You can create a new folder using the button above.</div>
+                </div>
+            `;
+            return;
+        }
+
         folderTree.innerHTML = this.renderTreeNode(this.treeData, '');
     }