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
showNewDropdown: false,
// Homepage folder navigation
// Homepage state
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() {
// 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') {
return [];
}
const folderNode = this.getFolderNode(this.selectedHomepageFolder || '');
if (!folderNode || !Array.isArray(folderNode.notes)) {
return [];
}
const result = (folderNode && Array.isArray(folderNode.notes)) ? folderNode.notes : [];
return folderNode.notes;
},
// Helper: Format file size nicely
formatSize(bytes) {
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];
// Cache the result
this._homepageCache.notes = result;
this._homepageCache.folderPath = this.selectedHomepageFolder;
return result;
},
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') {
return [];
}
// Get child folders
let childFolders = [];
if (!this.selectedHomepageFolder) {
// Root level: all top-level folders
childFolders = Object.entries(this.folderTree)
.filter(([key]) => key !== '__root__')
.map(([, folder]) => folder);
} else {
// Inside a folder: get its children
const parentFolder = this.getFolderNode(this.selectedHomepageFolder);
if (!parentFolder || !parentFolder.children) {
return [];
if (parentFolder && parentFolder.children) {
childFolders = Object.values(parentFolder.children);
}
childFolders = Object.values(parentFolder.children);
}
if (!Array.isArray(childFolders) || childFolders.length === 0) {
return [];
}
return childFolders
// Map to simplified structure (note count already cached in folder node)
const result = childFolders
.map(folder => ({
name: folder.name,
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()));
// Cache the result
this._homepageCache.folders = result;
this._homepageCache.folderPath = this.selectedHomepageFolder;
return result;
},
homepageBreadcrumb() {
// Always return at least Home breadcrumb
// Safety check - ensure we always return an array
try {
const breadcrumb = [{ name: 'Home', path: '' }];
if (!this.selectedHomepageFolder) {
return breadcrumb;
}
const parts = (this.selectedHomepageFolder || '').split('/').filter(part => part.trim() !== '');
// Return cached result if folder hasn't changed
if (this._homepageCache.folderPath === this.selectedHomepageFolder && this._homepageCache.breadcrumb) {
return this._homepageCache.breadcrumb;
}
const breadcrumb = [{ name: 'Home', path: '' }];
if (this.selectedHomepageFolder) {
const parts = this.selectedHomepageFolder.split('/').filter(Boolean);
let currentPath = '';
parts.forEach(part => {
currentPath = currentPath ? currentPath + '/' + part : part;
currentPath = currentPath ? `${currentPath}/${part}` : part;
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 = '') {
@ -185,10 +208,7 @@ function noteApp() {
}
if (!folderPath) {
if (this.folderTree['__root__']) {
return this.folderTree['__root__'];
}
return { name: '', path: '', children: {}, notes: [] };
return this.folderTree['__root__'] || { name: '', path: '', children: {}, notes: [], noteCount: 0 };
}
const parts = folderPath.split('/').filter(Boolean);
@ -206,22 +226,6 @@ function noteApp() {
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)
get isAppEmpty() {
const notesArray = Array.isArray(this.notes) ? this.notes : [];
@ -291,6 +295,14 @@ function noteApp() {
this.selectedHomepageFolder = '';
}
// Invalidate cache to force recalculation
this._homepageCache = {
folderPath: null,
notes: null,
folders: null,
breadcrumb: null
};
// Clear search
this.searchQuery = '';
this.searchResults = [];
@ -590,8 +602,41 @@ function noteApp() {
}
});
// Force Alpine reactivity by creating a new object reference
this.folderTree = { ...tree };
// Calculate and cache note counts recursively (for performance)
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)
@ -756,8 +801,6 @@ function noteApp() {
}
// 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
@ -767,25 +810,22 @@ function noteApp() {
// Expand all folders
expandAllFolders() {
// Add all folder paths to expandedFolders
this.allFolders.forEach(folder => {
this.expandedFolders.add(folder);
});
// Force Alpine reactivity by creating new object reference (no rebuild needed)
this.folderTree = { ...this.folderTree };
// Force Alpine reactivity
this.expandedFolders = new Set(this.expandedFolders);
},
// Collapse all folders
collapseAllFolders() {
this.expandedFolders.clear();
// Force Alpine reactivity by creating new object reference (no rebuild needed)
this.folderTree = { ...this.folderTree };
// Force Alpine reactivity
this.expandedFolders = new Set(this.expandedFolders);
},
// Expand folder tree to show a specific note
expandFolderForNote(notePath) {
// Extract folder path from note path
// e.g., "folder1/folder2/note.md" -> ["folder1", "folder1/folder2"]
const parts = notePath.split('/');
// If note is in root, no folders to expand
@ -801,13 +841,8 @@ function noteApp() {
this.expandedFolders.add(currentPath);
});
// Force Alpine reactivity by creating new object reference
// This ensures the UI updates to show the expanded folders
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);
// Force Alpine reactivity
this.expandedFolders = new Set(this.expandedFolders);
},
// Scroll note into view in the sidebar navigation
@ -2955,12 +2990,37 @@ function noteApp() {
// Homepage folder navigation methods
goToHomepageFolder(folderPath) {
// Navigate to folder (empty string = root)
this.selectedHomepageFolder = folderPath || '';
// Update browser history
const state = { homepageFolder: folderPath || '' };
window.history.pushState(state, '', '/');
// Invalidate cache to force recalculation
this._homepageCache = {
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);">
<button
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"
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);"
>
<div class="py-1">
<button
<button
@click="createNote()"
class="w-full px-4 py-2.5 text-sm text-left flex items-center gap-3 transition-colors"
style="color: var(--text-primary);"
@ -877,7 +877,7 @@
>
<span class="text-lg">📁</span>
<span>New Folder</span>
</button>
</button>
</div>
</div>
</div>
@ -1019,21 +1019,21 @@
<!-- Welcome Hero - Show when app is empty -->
<template x-if="isAppEmpty">
<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">
<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 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>
</svg>
<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>
<button
<button
@click="createNote()"
class="px-8 py-4 text-base font-medium text-white rounded-lg transition-colors"
style="background-color: var(--accent-primary);"
onmouseover="this.style.backgroundColor='var(--accent-hover)'"
onmouseout="this.style.backgroundColor='var(--accent-primary)'"
>
Create Your First Note
</button>
</div>
style="background-color: var(--accent-primary);"
onmouseover="this.style.backgroundColor='var(--accent-hover)'"
onmouseout="this.style.backgroundColor='var(--accent-primary)'"
>
Create Your First Note
</button>
</div>
</template>
<!-- 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);'"
x-text="crumb.name"
></span>
</div>
</template>
</div>
</template>
</template>
</div>
@ -1142,7 +1142,7 @@
</template>
<!-- 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
@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"
@ -1164,12 +1164,9 @@
</template>
<!-- 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);">
Showing 50 of <span x-text="homepageNotes().length"></span> notes.
<span class="cursor-pointer underline" style="color: var(--accent-primary);" @click="goToHomepageFolder('')">
View all in sidebar
</span>
Showing <span x-text="HOMEPAGE_MAX_NOTES"></span> of <span x-text="homepageNotes().length"></span> notes in this folder.
</p>
</div>
</div>