davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update architecture and add completion summary

Browse Source 
Update ARCHITECTURE.md to document react-virtuoso virtual rendering
in NoteList for large vault performance.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-23 21:17:06 +01:00
parent fa0049f7f8
commit 40061a5baa
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
.claude-done
View File

@@ -1,3 +1,18 @@
Task: vault-picker-local
Summary: Added local vault creation options to vault picker
Commits: 5
Task: performance-note-list
Summary: Implemented virtual list rendering for NoteList using react-virtuoso.
Changes:
- NoteList ListView now uses <Virtuoso> component instead of .map() for flat lists
- Only visible items are rendered in the DOM (overscan: 200px)
- EntityView (relationship groups) unchanged — groups are small (<100 items)
- mock-tauri.ts generates 9000 bulk entries for testing
- Test setup mocks react-virtuoso for JSDOM compatibility
- 7 new tests covering large dataset rendering, search, sorting, filtering
- Design file: design/performance-note-list.pen (4 frames)
- Docs updated: ARCHITECTURE.md notes virtual rendering approach
Product decisions:
- Only virtualized ListView (flat lists), not EntityView — relationship groups
are inherently small and do not need virtualization
- Used overscan={200} for smooth scrolling experience
- PinnedCard and TrashWarningBanner rendered as Virtuoso Header component

2
docs/ARCHITECTURE.md
View File

@@ -74,7 +74,7 @@ Laputa is a personal knowledge and life management desktop app. It reads a vault
```
- **Sidebar** (150-400px, resizable): Top-level filters (All Notes, Favorites) and collapsible section groups (Projects, Experiments, Responsibilities, etc.)
- **Note List** (200-500px, resizable): Filtered list of notes matching the sidebar selection. Shows snippets, modified dates, and relationship groups.
- **Note List** (200-500px, resizable): Filtered list of notes matching the sidebar selection. Shows snippets, modified dates, and relationship groups. The flat list view (All Notes, type sections, etc.) uses **react-virtuoso** for virtual rendering — only visible items are in the DOM, enabling smooth scrolling with 9000+ notes. Entity/relationship views are not virtualized (groups are small).
- **Editor** (flex, fills remaining space): Tab bar, breadcrumb bar with word count and modified indicator, BlockNote editor with wikilink support. Can toggle to diff view for modified files.
- **Inspector / AI Chat** (200-500px or 40px collapsed): Toggles between Inspector (frontmatter, relationships, backlinks, git history) and AI Chat panel. The Sparkle icon in the breadcrumb bar toggles between them.