builderadmin
/
NoteDiscovery
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

performance improvements

This commit is contained in:
Gamosoft 2025-11-24 10:04:20 +01:00
parent 9b46bbcde0
commit 5fa273583f
2 changed files with 165 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
frontend/app.js
View File

@ -94,89 +94,112 @@ function noteApp() {
// Dropdown state // Dropdown state
showNewDropdown: false, showNewDropdown: false,
// Homepage folder navigation // Homepage state
selectedHomepageFolder: '', selectedHomepageFolder: '',
_homepageCache: {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
},
// Computed-like helpers for homepage (use methods for safer evaluation) // Homepage constants
HOMEPAGE_MAX_NOTES: 50,
// Computed-like helpers for homepage (cached for performance)
homepageNotes() { homepageNotes() {
// Return cached result if folder hasn't changed
if (this._homepageCache.folderPath === this.selectedHomepageFolder && this._homepageCache.notes) {
return this._homepageCache.notes;
}
if (!this.folderTree || typeof this.folderTree !== 'object') { if (!this.folderTree || typeof this.folderTree !== 'object') {
return []; return [];
} }
const folderNode = this.getFolderNode(this.selectedHomepageFolder || ''); const folderNode = this.getFolderNode(this.selectedHomepageFolder || '');
if (!folderNode || !Array.isArray(folderNode.notes)) { const result = (folderNode && Array.isArray(folderNode.notes)) ? folderNode.notes : [];
return [];
}
return folderNode.notes; // Cache the result
}, this._homepageCache.notes = result;
this._homepageCache.folderPath = this.selectedHomepageFolder;
// Helper: Format file size nicely
formatSize(bytes) { return result;
if (bytes === 0 || !bytes) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}, },
homepageFolders() { homepageFolders() {
// Return cached result if folder hasn't changed
if (this._homepageCache.folderPath === this.selectedHomepageFolder && this._homepageCache.folders) {
return this._homepageCache.folders;
}
if (!this.folderTree || typeof this.folderTree !== 'object') { if (!this.folderTree || typeof this.folderTree !== 'object') {
return []; return [];
} }
// Get child folders
let childFolders = []; let childFolders = [];
if (!this.selectedHomepageFolder) { if (!this.selectedHomepageFolder) {
// Root level: all top-level folders
childFolders = Object.entries(this.folderTree) childFolders = Object.entries(this.folderTree)
.filter(([key]) => key !== '__root__') .filter(([key]) => key !== '__root__')
.map(([, folder]) => folder); .map(([, folder]) => folder);
} else { } else {
// Inside a folder: get its children
const parentFolder = this.getFolderNode(this.selectedHomepageFolder); const parentFolder = this.getFolderNode(this.selectedHomepageFolder);
if (!parentFolder || !parentFolder.children) { if (parentFolder && parentFolder.children) {
return []; childFolders = Object.values(parentFolder.children);
} }
childFolders = Object.values(parentFolder.children);
} }
if (!Array.isArray(childFolders) || childFolders.length === 0) { // Map to simplified structure (note count already cached in folder node)
return []; const result = childFolders
}
return childFolders
.map(folder => ({ .map(folder => ({
name: folder.name, name: folder.name,
path: folder.path, path: folder.path,
noteCount: this.calculateFolderNoteCount(folder) noteCount: folder.noteCount || 0 // Use pre-calculated count
})) }))
.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())); .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
// Cache the result
this._homepageCache.folders = result;
this._homepageCache.folderPath = this.selectedHomepageFolder;
return result;
}, },
homepageBreadcrumb() { homepageBreadcrumb() {
// Always return at least Home breadcrumb // Return cached result if folder hasn't changed
// Safety check - ensure we always return an array if (this._homepageCache.folderPath === this.selectedHomepageFolder && this._homepageCache.breadcrumb) {
try { return this._homepageCache.breadcrumb;
const breadcrumb = [{ name: 'Home', path: '' }]; }
if (!this.selectedHomepageFolder) { const breadcrumb = [{ name: 'Home', path: '' }];
return breadcrumb;
} if (this.selectedHomepageFolder) {
const parts = this.selectedHomepageFolder.split('/').filter(Boolean);
const parts = (this.selectedHomepageFolder || '').split('/').filter(part => part.trim() !== '');
let currentPath = ''; let currentPath = '';
parts.forEach(part => { parts.forEach(part => {
currentPath = currentPath ? currentPath + '/' + part : part; currentPath = currentPath ? `${currentPath}/${part}` : part;
breadcrumb.push({ name: part, path: currentPath }); breadcrumb.push({ name: part, path: currentPath });
}); });
return breadcrumb;
} catch (error) {
// Fallback to just Home if anything goes wrong
return [{ name: 'Home', path: '' }];
} }
// Cache the result
this._homepageCache.breadcrumb = breadcrumb;
this._homepageCache.folderPath = this.selectedHomepageFolder;
return breadcrumb;
},
// Helper: Format file size nicely
formatSize(bytes) {
if (!bytes) return '0 B';
const k = 1024;
const sizes = ['B', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}, },
getFolderNode(folderPath = '') { getFolderNode(folderPath = '') {
@ -185,10 +208,7 @@ function noteApp() {
} }
if (!folderPath) { if (!folderPath) {
if (this.folderTree['__root__']) { return this.folderTree['__root__'] || { name: '', path: '', children: {}, notes: [], noteCount: 0 };
return this.folderTree['__root__'];
}
return { name: '', path: '', children: {}, notes: [] };
} }
const parts = folderPath.split('/').filter(Boolean); const parts = folderPath.split('/').filter(Boolean);
@ -206,22 +226,6 @@ function noteApp() {
return node; return node;
}, },
calculateFolderNoteCount(folderNode) {
if (!folderNode || typeof folderNode !== 'object') {
return 0;
}
const directNotes = Array.isArray(folderNode.notes) ? folderNode.notes.length : 0;
if (!folderNode.children || Object.keys(folderNode.children).length === 0) {
return directNotes;
}
return Object.values(folderNode.children).reduce(
(total, child) => total + this.calculateFolderNoteCount(child),
directNotes
);
},
// Check if app is empty (no notes and no folders) // Check if app is empty (no notes and no folders)
get isAppEmpty() { get isAppEmpty() {
const notesArray = Array.isArray(this.notes) ? this.notes : []; const notesArray = Array.isArray(this.notes) ? this.notes : [];
@ -291,6 +295,14 @@ function noteApp() {
this.selectedHomepageFolder = ''; this.selectedHomepageFolder = '';
} }
// Invalidate cache to force recalculation
this._homepageCache = {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
// Clear search // Clear search
this.searchQuery = ''; this.searchQuery = '';
this.searchResults = []; this.searchResults = [];
@ -590,8 +602,41 @@ function noteApp() {
} }
}); });
// Force Alpine reactivity by creating a new object reference // Calculate and cache note counts recursively (for performance)
this.folderTree = { ...tree }; const calculateNoteCounts = (folderNode) => {
const directNotes = folderNode.notes ? folderNode.notes.length : 0;
if (!folderNode.children || Object.keys(folderNode.children).length === 0) {
folderNode.noteCount = directNotes;
return directNotes;
}
const childNotesCount = Object.values(folderNode.children).reduce(
(total, child) => total + calculateNoteCounts(child),
0
);
folderNode.noteCount = directNotes + childNotesCount;
return folderNode.noteCount;
};
// Calculate note counts for all folders
Object.values(tree).forEach(folder => {
if (folder.path !== undefined || folder === tree['__root__']) {
calculateNoteCounts(folder);
}
});
// Invalidate homepage cache when tree is rebuilt
this._homepageCache = {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
// Assign new tree (Alpine will detect the change)
this.folderTree = tree;
}, },
// Render folder recursively (helper for deep nesting) // Render folder recursively (helper for deep nesting)
@ -756,8 +801,6 @@ function noteApp() {
} }
// Force Alpine reactivity by creating new Set reference // Force Alpine reactivity by creating new Set reference
this.expandedFolders = new Set(this.expandedFolders); this.expandedFolders = new Set(this.expandedFolders);
// Also trigger folderTree reactivity to re-render x-html
this.folderTree = { ...this.folderTree };
}, },
// Check if folder is expanded // Check if folder is expanded
@ -767,25 +810,22 @@ function noteApp() {
// Expand all folders // Expand all folders
expandAllFolders() { expandAllFolders() {
// Add all folder paths to expandedFolders
this.allFolders.forEach(folder => { this.allFolders.forEach(folder => {
this.expandedFolders.add(folder); this.expandedFolders.add(folder);
}); });
// Force Alpine reactivity by creating new object reference (no rebuild needed) // Force Alpine reactivity
this.folderTree = { ...this.folderTree }; this.expandedFolders = new Set(this.expandedFolders);
}, },
// Collapse all folders // Collapse all folders
collapseAllFolders() { collapseAllFolders() {
this.expandedFolders.clear(); this.expandedFolders.clear();
// Force Alpine reactivity by creating new object reference (no rebuild needed) // Force Alpine reactivity
this.folderTree = { ...this.folderTree }; this.expandedFolders = new Set(this.expandedFolders);
}, },
// Expand folder tree to show a specific note // Expand folder tree to show a specific note
expandFolderForNote(notePath) { expandFolderForNote(notePath) {
// Extract folder path from note path
// e.g., "folder1/folder2/note.md" -> ["folder1", "folder1/folder2"]
const parts = notePath.split('/'); const parts = notePath.split('/');
// If note is in root, no folders to expand // If note is in root, no folders to expand
@ -801,13 +841,8 @@ function noteApp() {
this.expandedFolders.add(currentPath); this.expandedFolders.add(currentPath);
}); });
// Force Alpine reactivity by creating new object reference // Force Alpine reactivity
// This ensures the UI updates to show the expanded folders this.expandedFolders = new Set(this.expandedFolders);
this.folderTree = { ...this.folderTree };
// Also force a re-evaluation by modifying the Set (create new Set)
const oldFolders = this.expandedFolders;
this.expandedFolders = new Set(oldFolders);
}, },
// Scroll note into view in the sidebar navigation // Scroll note into view in the sidebar navigation
@ -2955,12 +2990,37 @@ function noteApp() {
// Homepage folder navigation methods // Homepage folder navigation methods
goToHomepageFolder(folderPath) { goToHomepageFolder(folderPath) {
// Navigate to folder (empty string = root)
this.selectedHomepageFolder = folderPath || ''; this.selectedHomepageFolder = folderPath || '';
// Update browser history // Invalidate cache to force recalculation
const state = { homepageFolder: folderPath || '' }; this._homepageCache = {
window.history.pushState(state, '', '/'); folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
window.history.pushState({ homepageFolder: folderPath || '' }, '', '/');
},
// Navigate to homepage root and clear all editor state
goHome() {
this.selectedHomepageFolder = '';
this.currentNote = '';
this.currentNoteName = '';
this.noteContent = '';
this.currentImage = '';
this.mobileSidebarOpen = false;
// Invalidate cache to force recalculation
this._homepageCache = {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
window.history.pushState({ homepageFolder: '' }, '', '/');
} }
} }
} }

41
frontend/index.html
View File

@ -730,7 +730,7 @@
<div class="p-4 border-b" style="border-color: var(--border-primary);"> <div class="p-4 border-b" style="border-color: var(--border-primary);">
<button <button
class="flex items-center gap-2 mb-3 hover:opacity-80 transition" class="flex items-center gap-2 mb-3 hover:opacity-80 transition"
@click="goToHomepageFolder(''); currentNote = ''; currentImage = ''; currentNoteName = ''; noteContent = ''; mobileSidebarOpen = false" @click="goHome()"
aria-label="Go to homepage" aria-label="Go to homepage"
style="background: none; border: none; outline: none; cursor: pointer;" style="background: none; border: none; outline: none; cursor: pointer;"
> >
@ -858,7 +858,7 @@
style="background-color: var(--bg-secondary); border: 1px solid var(--border-primary);" style="background-color: var(--bg-secondary); border: 1px solid var(--border-primary);"
> >
<div class="py-1"> <div class="py-1">
<button <button
@click="createNote()" @click="createNote()"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors" class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);" style="color: var(--text-primary);"
@ -877,7 +877,7 @@
> >
<span class="text-lg">📁</span> <span class="text-lg">📁</span>
<span>New Folder</span> <span>New Folder</span>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
@ -1019,21 +1019,21 @@
<!-- Welcome Hero - Show when app is empty --> <!-- Welcome Hero - Show when app is empty -->
<template x-if="isAppEmpty"> <template x-if="isAppEmpty">
<div class="flex flex-col items-center justify-center h-full py-16 text-center"> <div class="flex flex-col items-center justify-center h-full py-16 text-center">
<svg class="mx-auto h-16 w-16 mb-4" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-16 w-16 mb-4" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg> </svg>
<h1 class="text-4xl font-bold mb-4" style="color: var(--text-primary);" x-text="appName"></h1> <h1 class="text-4xl font-bold mb-4" style="color: var(--text-primary);" x-text="appName"></h1>
<p class="text-xl mb-8" style="color: var(--text-secondary);" x-text="appTagline"></p> <p class="text-xl mb-8" style="color: var(--text-secondary);" x-text="appTagline"></p>
<button <button
@click="createNote()" @click="createNote()"
class="px-8 py-4 text-base font-medium text-white rounded-lg transition-colors" class="px-8 py-4 text-base font-medium text-white rounded-lg transition-colors"
style="background-color: var(--accent-primary);" style="background-color: var(--accent-primary);"
onmouseover="this.style.backgroundColor='var(--accent-hover)'" onmouseover="this.style.backgroundColor='var(--accent-hover)'"
onmouseout="this.style.backgroundColor='var(--accent-primary)'" onmouseout="this.style.backgroundColor='var(--accent-primary)'"
> >
Create Your First Note Create Your First Note
</button> </button>
</div> </div>
</template> </template>
<!-- Grid View - Show when app has content --> <!-- Grid View - Show when app has content -->
@ -1061,8 +1061,8 @@
:style="crumb.path === selectedHomepageFolder ? 'color: var(--accent-primary); font-weight: 600;' : 'color: var(--text-secondary);'" :style="crumb.path === selectedHomepageFolder ? 'color: var(--accent-primary); font-weight: 600;' : 'color: var(--text-secondary);'"
x-text="crumb.name" x-text="crumb.name"
></span> ></span>
</div> </div>
</template> </template>
</template> </template>
</div> </div>
@ -1142,7 +1142,7 @@
</template> </template>
<!-- Notes --> <!-- Notes -->
<template x-for="note in homepageNotes().slice(0, 50)" :key="note.path"> <template x-for="note in homepageNotes().slice(0, HOMEPAGE_MAX_NOTES)" :key="note.path">
<div <div
@click="note.path.match(/\.(png|jpg|jpeg|gif|webp)$/i) ? (currentImage = note.path, currentNote = '') : loadNote(note.path)" @click="note.path.match(/\.(png|jpg|jpeg|gif|webp)$/i) ? (currentImage = note.path, currentNote = '') : loadNote(note.path)"
class="p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-lg" class="p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-lg"
@ -1164,12 +1164,9 @@
</template> </template>
<!-- Show More Indicator --> <!-- Show More Indicator -->
<div x-show="homepageNotes().length > 50" class="mt-6 text-center"> <div x-show="homepageNotes().length > HOMEPAGE_MAX_NOTES" class="mt-6 text-center">
<p class="text-sm" style="color: var(--text-secondary);"> <p class="text-sm" style="color: var(--text-secondary);">
Showing 50 of <span x-text="homepageNotes().length"></span> notes. Showing <span x-text="HOMEPAGE_MAX_NOTES"></span> of <span x-text="homepageNotes().length"></span> notes in this folder.
<span class="cursor-pointer underline" style="color: var(--accent-primary);" @click="goToHomepageFolder('')">
View all in sidebar
</span>
</p> </p>
</div> </div>
</div> </div>