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:
@@ -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'}>
|
||||||
|
|||||||
Reference in New Issue
Block a user