From 61d279ba9edaa418b3ed6af8b4fa3d1d47719c3c Mon Sep 17 00:00:00 2001 From: lucaronin Date: Mon, 23 Feb 2026 21:21:33 +0100 Subject: [PATCH] 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 --- .claude-done | 30 ++++++++++++++++-------------- docs/ARCHITECTURE.md | 6 +++--- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/.claude-done b/.claude-done index 93c889f0..3a876c67 100644 --- a/.claude-done +++ b/.claude-done @@ -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 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. diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md index 754aa19d..fc420873 100644 --- a/docs/ARCHITECTURE.md +++ b/docs/ARCHITECTURE.md @@ -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.