From 40061a5baa6b4867eb75a6fbcd886c6abcd6bf8f Mon Sep 17 00:00:00 2001 From: lucaronin Date: Mon, 23 Feb 2026 21:17:06 +0100 Subject: [PATCH] docs: update architecture and add completion summary Update ARCHITECTURE.md to document react-virtuoso virtual rendering in NoteList for large vault performance. Co-Authored-By: Claude Opus 4.6 --- .claude-done | 21 ++++++++++++++++++--- docs/ARCHITECTURE.md | 2 +- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/.claude-done b/.claude-done index 0b0ce8fa..93c889f0 100644 --- a/.claude-done +++ b/.claude-done @@ -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 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 diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index d6e9393d..754aa19d 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -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.