* feat: darken title bar headers for visual separation from content
Add --bg-titlebar (#EDECE9) CSS variable and apply it to all four
header bars (TabBar, SidebarTitleBar, NoteList header, Inspector
header) so the top drag region is subtly darker than the app content.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: add design file for titlebar-darker task
Single frame showing the three-tier color hierarchy:
title bar (#EDECE9) → sidebar (#F7F6F3) → content (#FFFFFF).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
- Extract icon registry to src/utils/iconRegistry.ts with 290 curated Phosphor icons
- Add real-time search field that filters icons by name substring
- Show "No icons found" empty state when search yields no results
- Scrollable icon grid (240px max height) for browsing all icons
- Add teal and pink accent colors to the palette (8 total)
- Widen popover from 264px to 280px for better search field fit
- Update tests: search filtering, empty state, icon count validation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Clicking "N pending" in the status bar or the "Changes" nav item in
the sidebar shows a filtered list of notes with uncommitted changes.
The view updates in real-time as files are saved or committed.
- Add 'changes' filter to SidebarSelection type
- Make StatusBar "N pending" indicator clickable
- Add "Changes" NavItem in sidebar (visible when modifiedCount > 0)
- Filter NoteList by modifiedFiles paths for changes view
- Show "No pending changes" empty state
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Wrap ref assignments in useEffect to fix refs-during-render in
useTabManagement, useKeyboardNavigation, and Editor
- Rewrite useAppKeyboard to define keyMap inside useEffect, eliminating
ref access during render
- Add eslint-disable for react-hooks/set-state-in-effect on legitimate
dialog reset patterns (CommitDialog, CreateNoteDialog, CreateTypeDialog,
QuickOpenPalette, AIChatPanel, useVaultLoader)
- Add eslint-disable for react-hooks/static-components on icon lookups
(NoteItem, NoteList PinnedCard) — stateless icon components from a
static map
- Add eslint-disable for react-hooks/purity on Date.now() in
NoteItem TrashDateLine — intentionally memoized on trashedAt
- Remove unused `model` param from buildSystemPrompt (ai-chat.ts) and
update callers
- Fix exhaustive-deps: suppress vault object dep in App.tsx git history
effect (vault object is unstable, loadGitHistory is the real dep)
- Remove unused `modifiedFiles` from useNoteListData params and caller
- Add missing `ref` to Sidebar useOutsideClick deps
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The macOS window frame (transparent title bar, 38px) and the sidebar
share the same background color (#F7F6F3), making them visually
indistinguishable. Replace the sidebar's paddingTop: 38 with a
dedicated spacer div that has a bottom border (1px solid var(--border)),
matching the border style used between all other panels. The spacer
also serves as a drag region for window movement.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove unused cn import from NoteList.tsx
- Fix SidebarSelection type narrowing in NoteList entity view
- Fix SortableSection onToggle type in Sidebar Omit type
- Fix TypeRow isA prop to accept null
- Align useEntryActions handleUpdateFrontmatter value type
- Add missing trashed/trashedAt/order to test mock VaultEntry objects
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Changed the sidebar section header from a button-style "Customize sections"
label with inline icon to a clean "Sections" heading with the settings icon
pushed to the far right. The settings icon still toggles the customize
popover — no functionality change.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix toggleSection to account for default collapsed state
(collapsed[type] ?? true, not just !prev[type])
- Update tests to expand sections before asserting item visibility
(sections start collapsed by default)
- Add tests for section ordering by Type entry order property
- Add test for drag handle rendering on section headers
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Wrap sidebar section groups in @dnd-kit sortable context
- Add grip-vertical drag handle visible on hover of section headers
- Sort sections by `order` property from Type document entries
- On drag end, compute new sequential order values and persist to
each Type document's frontmatter via handleReorderSections
- Add onReorderSections callback from Sidebar → App.tsx → vault
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Sidebar: replaced disabled Trash placeholder with active filter showing
count badge and destructive color when selected
- Sidebar: trashed notes excluded from section groups and All Notes count
- NoteList: trash filter shows only trashed entries with TRASHED badge
- NoteList: 30-day warning banner when expired trash notes exist
- NoteList: per-note warning text for notes past 30-day retention
- Inspector: trash icon shown before name in relationship pills for
trashed entries, with (trashed) label and dimmed styling
- Inspector: backlinks show trash icon for trashed entries
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a "Customize sections" button above section groups in the sidebar.
Clicking it opens a popover with per-type toggle switches. Hidden sections
disappear from the sidebar entirely but notes remain accessible via
All Notes and search. Visibility state is persisted in localStorage.
- New useSectionVisibility hook: manages hidden sections set in localStorage
- Sidebar: "Customize sections" button + popover with toggle UI
- Outside-click closes the popover
- allSectionGroups (built-in + custom) filtered by visibility before render
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add Archive filter in sidebar with count badge
- Hide archived notes from section groups and All Notes count
- Exclude archived notes from sectionGroup and topic filtering
- Show (archived) indicator on relationship chips and backlinks
- Show ARCHIVED badge on note list items
- Display 'Archive' header in NoteList when filter is active
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add TypeCustomizePopover component with color swatches (6 accent colors)
and icon grid (35 curated Phosphor icons)
- Add right-click context menu on sidebar section group headers with
"Customize icon & color…" option
- Sidebar renders custom icons/colors from type entry frontmatter
- NoteList uses custom icons/colors for type badges and pinned cards
- Wire up onCustomizeType in App.tsx to update type frontmatter
- Add updateEntry to useVaultLoader for instant in-memory updates
- Add --accent-orange-light CSS variable
- typeColors utility now accepts optional custom color key overrides
Product decision: Built-in types can also be customized (override their
defaults), not just custom types. The picker is a simple popover that
appears after right-click → "Customize icon & color…".
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Core implementation:
- CreateTypeDialog: simple dialog with name field for creating new types
- handleCreateType in useNoteActions: creates Type documents in type/ folder
- Dynamic sidebar sections: custom types (Recipe, Book, etc.) appear as new
sidebar sections after built-in ones, each with a + button for instances
- Updated CreateNoteDialog: accepts custom types, shows them with blue accent
- handleCreateNote now supports custom types (folder = lowercased type name)
Product decisions:
- The + on Types section opens CreateTypeDialog (not CreateNoteDialog)
- Custom type sections use FileText icon and blue accent color by default
- Section labels are pluralized (e.g., "Recipes", "Books")
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Each sidebar section header (Projects, People, Topics, etc.) now shows
a + button on hover. Clicking it opens the CreateNoteDialog pre-filled
with that section's type, so users can quickly create new items without
manually selecting the type.
- Add defaultType prop to CreateNoteDialog for pre-selecting type
- Add onCreateType callback to Sidebar with hover-visible + button
- Wire up in App.tsx with unified openCreateDialog handler
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Fix null-safety issues (string | null → string), add missing VaultEntry
fields in test fixtures, remove unused imports, and fix type assertion.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add Type to color maps (accent-blue) in typeColors.ts
- Add StackSimple icon for Type in NoteList, Inspector, and Sidebar
- Add "Types" section group to sidebar navigation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- font-mono-label: font-weight 500, remove letter-spacing
- NoteList: move timestamp below snippet in note items
- Sidebar: add border-r with sidebar-border color
- ResizeHandle: overlap sidebar border with -ml-1 (no visible gap)
- Sidebar items: text-muted-foreground for inactive group items
- NoteList: uniform 14px vertical padding across all note items
- NoteList header: fixed height 45px to match tab bar
Section group headers and nav items stay at font-weight 500 (medium).
Individual entity items under sections now use font-weight 400 (normal)
to create better visual hierarchy.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace inline color strings in SECTION_GROUPS and the string-replace
hack for light colors with the shared typeColors utility.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add requestAnimationFrame throttling to ResizeHandle so mouse move
events are batched per frame instead of triggering setState on every
pixel. Wrap Sidebar in React.memo so it skips re-rendering when only
the parent wrapper div width changes.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use titleBarStyle: Transparent for native window frame on top
- Add paddingTop: 38px to Sidebar to make room for title bar
- Keep solution simple: native traffic lights + dragging work out-of-the-box
- Removed custom traffic lights and drag handlers
- Remove .dark CSS variables block from index.css
- Remove theme toggle state and Cmd+Shift+T shortcut from Sidebar
- Remove dark class initialization from main.tsx
- Hardcode BlockNote theme to 'light' in Editor
- shadcn dark: classes left in place (harmless, no-op without .dark class)
Install Tailwind CSS v4 + shadcn/ui with Radix UI primitives. Migrate all
UI components (Sidebar, NoteList, Editor tabs, Inspector, dialogs, palette)
from BEM CSS to Tailwind utility classes and shadcn components (Button,
Input, Dialog, Badge, etc.). Map theme system to shadcn CSS variables while
preserving BlockNote editor styles untouched. Remove 8 old CSS files.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sidebar shows "Commit & Push" button when uncommitted changes exist.
Clicking opens a commit message dialog. After committing, auto-pushes and
shows success/error toast. Modified files count refreshes after commit.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
New "Changes" sidebar filter shows vault-wide uncommitted changes via
`get_modified_files` Tauri command (git status --porcelain). NoteList shows
modified files with M/A/D/? status indicators. Badge on sidebar shows count.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace all hardcoded colors across 10 CSS files with CSS variables defined
in index.css. Dark mode (default) uses the existing navy/purple palette,
light mode uses Notion-inspired warm neutrals from the design tokens
(--bg-primary: #FFFFFF, --bg-sidebar: #F7F6F3, --text-primary: #37352F).
Toggle button (sun/moon) in the sidebar header persists preference to
localStorage. An inline script in index.html applies the saved theme
before React mounts to prevent flash.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove native macOS titlebar via decorations:false + titleBarStyle:overlay.
Add -webkit-app-region:drag to panel headers (Sidebar, NoteList, Editor tab
bar, Inspector) with no-drag on interactive elements. Sidebar header gets
78px left padding for macOS traffic light buttons.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Flat list of Topic entities at the bottom of the sidebar,
separated from section groups by a border. Clicking a topic
fires onSelect with kind: 'topic'.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Each section is collapsible with expand/collapse toggle, shows entity count,
and has a + button. Entities are clickable. SidebarSelection type introduced
for managing navigation state across filters, section groups, entities, and topics.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
