diff --git a/frontend/app.js b/frontend/app.js index 70cd4cb..194b125 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -379,6 +379,132 @@ function noteApp() { this.folderTree = { ...tree }; }, + // Render folder recursively (helper for deep nesting) + renderFolderRecursive(folder, level = 0) { + if (!folder) return ''; + + let html = ''; + const baseIndent = level * 12; + + // First, render child folders (if any) + if (folder.children && Object.keys(folder.children).length > 0) { + const children = Object.entries(folder.children).sort((a, b) => + a[1].name.toLowerCase().localeCompare(b[1].name.toLowerCase()) + ); + + children.forEach(([childKey, childFolder]) => { + const isExpanded = this.expandedFolders.has(childFolder.path); + + // Folder header HTML (no margin - it's inside folder-contents which provides the indent) + html += ` +
+
+
+ + + ${childFolder.name} + ${childFolder.notes.length === 0 && (!childFolder.children || Object.keys(childFolder.children).length === 0) ? '(empty)' : ''} + +
+
+ + + + +
+
+ `; + + // If expanded, recursively render this folder's contents (notes + subfolders) + if (isExpanded) { + html += `
`; + html += this.renderFolderRecursive(childFolder, 0); // Reset level to 0 for relative positioning + html += `
`; + } + + html += `
`; + }); + } + + // Then, render notes in this folder (after subfolders) + if (folder.notes && folder.notes.length > 0) { + folder.notes.forEach(note => { + const isCurrentNote = this.currentNote === note.path; + html += ` +
+ ${note.name} + +
+ `; + }); + } + + return html; + }, + // Toggle folder expansion toggleFolder(folderPath) { if (this.expandedFolders.has(folderPath)) { @@ -386,6 +512,10 @@ function noteApp() { } else { this.expandedFolders.add(folderPath); } + // Force Alpine reactivity by creating new Set reference + this.expandedFolders = new Set(this.expandedFolders); + // Also trigger folderTree reactivity to re-render x-html + this.folderTree = { ...this.folderTree }; }, // Check if folder is expanded diff --git a/frontend/index.html b/frontend/index.html index 094bfbb..f1ceaa3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -687,10 +687,10 @@ - +