chore: update docs and .claude-done summary

- ARCHITECTURE.md: document modified note indicators in NoteList, TabBar, StatusBar
- .claude-done: task completion summary

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-23 21:21:33 +01:00
parent 0f3b6801d1
commit 61d279ba9e
2 changed files with 19 additions and 17 deletions

View File

@@ -1,18 +1,20 @@
Task: performance-note-list
Summary: Implemented virtual list rendering for NoteList using react-virtuoso.
Task: modified-notes-indicator
Summary: Implemented visual indicators for uncommitted modified notes across the UI.
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
- NoteItem: Orange dot (accent-orange) before title for notes in git modified/added state
- TabBar: Orange dot between title and close button for tabs with uncommitted changes
- StatusBar: "N pending" counter with CircleDot icon when modified files exist
- useEditorSave: Added onAfterSave callback to refresh modified files list after save
- mock-tauri: Dynamically tracks saved files as modified, clears on commit
- Design file: 3 frames showing NoteList, TabBar, and StatusBar indicator states
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
- Used accent-orange (#D9730D) for the indicator dot to stand out from type-colored icons
- Dot appears before title in NoteList (consistent with how editors show file state)
- Dot appears between title and close button in TabBar (visible but non-intrusive)
- StatusBar shows "N pending" text (not just a number) for clarity
- Indicators disappear after git commit (mockHasChanges + mockSavedPaths cleared)
Tests: 12 new tests covering NoteList (4), TabBar (3), StatusBar (3), useEditorSave (2)
All 543 tests pass. Build succeeds. Code health gates passed.

View File

@@ -69,13 +69,13 @@ Laputa is a personal knowledge and life management desktop app. It reads a vault
│Events │ │ │ │
│Topics │ │ │ │
├────────┴─────────────┴─────────────────────────┴────────────┤
│ StatusBar: v0.4.2 │ main │ Synced 2m ago 1,247 notes│
│ StatusBar: v0.4.2 │ main │ Synced 2m ago │ 3 pending notes│
└─────────────────────────────────────────────────────────────┘
```
- **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. 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.
- **Note List** (200-500px, resizable): Filtered list of notes matching the sidebar selection. Shows snippets, modified dates, relationship groups, and orange dot indicators for uncommitted modified notes.
- **Editor** (flex, fills remaining space): Tab bar (with orange modified dots on dirty tabs), 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.
Panels are separated by `ResizeHandle` components that support drag-to-resize.