From 38938c2961918960da22b0dfa06d5ff75fc7e05f Mon Sep 17 00:00:00 2001
From: Jeffrey Smith <jasafpro@gmail.com>
Date: Sun, 29 Mar 2026 11:58:42 +0000
Subject: [PATCH] Fix folder dropdown to show nested hierarchy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The editor folder select was a flat list making it impossible to
distinguish subfolder nesting. Now builds a tree and renders with
└ prefix indentation (e.g. "  └ Projects" under "Work").

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/notes/js/main.js | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/notes/js/main.js b/packages/notes/js/main.js
index 5f4933f..f7f0cd7 100644
--- a/packages/notes/js/main.js
+++ b/packages/notes/js/main.js
@@ -368,6 +368,40 @@
 
     var previewHtml = useMemo(function() { return renderMarkdown(body); }, [body]);
 
+    // build indented folder list for the select dropdown
+    var folderOptions = useMemo(function() {
+      var list = folders || [];
+      var byId = {};
+      var roots = [];
+      for (var i = 0; i < list.length; i++) {
+        byId[list[i].id] = { folder: list[i], children: [] };
+      }
+      for (var i = 0; i < list.length; i++) {
+        var f = list[i];
+        if (f.parent_id && byId[f.parent_id]) {
+          byId[f.parent_id].children.push(byId[f.id]);
+        } else {
+          roots.push(byId[f.id]);
+        }
+      }
+      var flat = [];
+      function walk(nodes, depth) {
+        nodes.sort(function(a, b) {
+          if (a.folder.sort_order !== b.folder.sort_order) return a.folder.sort_order - b.folder.sort_order;
+          return (a.folder.name || '').localeCompare(b.folder.name || '');
+        });
+        for (var j = 0; j < nodes.length; j++) {
+          var prefix = '';
+          for (var k = 0; k < depth; k++) prefix += '\u00A0\u00A0';
+          if (depth > 0) prefix += '\u2514 ';
+          flat.push({ id: nodes[j].folder.id, label: prefix + nodes[j].folder.name });
+          walk(nodes[j].children, depth + 1);
+        }
+      }
+      walk(roots, 0);
+      return flat;
+    }, [folders]);
+
     if (!note) {
       return html`<div class="notes-editor__empty">Select a note or create a new one</div>`;
     }
@@ -386,8 +420,8 @@
                 onRefresh();
               }}>
               <option value="">Unfiled</option>
-              ${(folders || []).map(function(f) {
-                return html`<option key=${f.id} value=${f.id}>${f.name}</option>`;
+              ${folderOptions.map(function(f) {
+                return html`<option key=${f.id} value=${f.id}>${f.label}</option>`;
               })}
             </select>
             <span class=${dirty ? 'notes-saved notes-saved--dirty' : 'notes-saved'}>