Fix folder dropdown to show nested hierarchy

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>
This commit is contained in:
2026-03-29 11:58:42 +00:00
parent 70404ff070
commit 38938c2961

View File

@@ -368,6 +368,40 @@
var previewHtml = useMemo(function() { return renderMarkdown(body); }, [body]); 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) { if (!note) {
return html`<div class="notes-editor__empty">Select a note or create a new one</div>`; return html`<div class="notes-editor__empty">Select a note or create a new one</div>`;
} }
@@ -386,8 +420,8 @@
onRefresh(); onRefresh();
}}> }}>
<option value="">Unfiled</option> <option value="">Unfiled</option>
${(folders || []).map(function(f) { ${folderOptions.map(function(f) {
return html`<option key=${f.id} value=${f.id}>${f.name}</option>`; return html`<option key=${f.id} value=${f.id}>${f.label}</option>`;
})} })}
</select> </select>
<span class=${dirty ? 'notes-saved notes-saved--dirty' : 'notes-saved'}> <span class=${dirty ? 'notes-saved notes-saved--dirty' : 'notes-saved'}>