Four frames showing collapse states:
1. All panels visible (default with collapse button)
2. Sidebar collapsed (note list + editor)
3. Editor only (⌥1)
4. Editor + notes (⌥2)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows sort dropdown with direction arrows (↑/↓) per option,
active state highlighting, and header button reflecting current direction.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copied from ui-design.pen as template. Contains existing 4-panel layout
frames showing sidebar, note list, editor, and inspector — the areas
where property sync and wikilink updates are now reflected immediately.
Note: Pencil app not available for interactive editing. Two logical
frames to call out:
1. Property sync: Inspector change → immediate sidebar/notelist update
2. Wikilink sync: rename → open tabs show updated wikilinks
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Four frames covering the GitHub vault modal flow:
1. Modal empty state — initial view with Clone/Create tabs
2. Clone repo list — browsing user repos with search
3. Create new repo — name input, visibility toggle, local path
4. Clone in progress — spinner, progress bar, status text
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Settings modal with header, 3 API key input fields (Anthropic, OpenAI,
Google AI), masked key display with clear button, and footer with
Cmd+, hint and Save button.
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>
Two frames added to design/git-history.pen:
- "Git History — Commit List": shows inspector panel with clickable
hashes (primary color, underlined), relative dates, commit messages,
and author name (muted, small) on each commit row
- "Git History — Diff Open": shows diff view with breadcrumb bar
displaying file path and commit badge, plus colored diff lines
(red for removed, green for added)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two frames added:
- "Note Creation — Before (dialog)" — old flow with CreateNoteDialog
- "Note Creation — After (immediate)" — new flow with instant Untitled note
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing the tab rename interaction:
1. Normal tab state (double-click hint)
2. Editing mode (inline input with ring border, text selected)
3. Saved state (new title, file renamed, wiki links updated)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing drag interaction flow:
1. Default sidebar with grip-vertical drag handles on section headers
2. Mid-drag state with blue drop indicator line and floating section overlay
3. After-drop state showing reordered sections
Order persisted as "order" property in Type document frontmatter.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames added to design/draggable-tabs.pen:
1. Default state — tabs with grab cursor hint
2. Dragging state — tab at 0.5 opacity, 2px primary-color drop indicator
3. After drop — reordered tabs, localStorage persistence note
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows sort control UI for relationship subsection headers:
- Default state: sort icon + current sort label in header bar
- Open state: dropdown popover with options (Modified, Created, Title, Status)
- Selected option highlighted with check icon
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Added 4 frames to design/trash-notes.pen:
- Sidebar filter showing Trash with count badge and destructive color
- Note list view with TRASHED badge and 30-day warning state
- Relationship indicator with trash icon prefix for trashed refs
- 30-day auto-delete warning banner
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing the feature flow:
1. Button placement — "Customize sections" link above section groups
2. Popover open — toggles for each type section (People & Events OFF)
3. Result — sidebar with hidden sections removed entirely
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Four frames added to design/color-icon-for-types.pen:
1. Right-click context menu on sidebar section group headers
2. Icon & color picker popover (color swatches + icon grid)
3. Sidebar with custom icons & colors applied
4. Frontmatter persistence model (icon/color in type YAML)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing:
- Before: vertical list of plain text items
- After: horizontal wrapped pills with × remove and + add button
- Pill states: normal, hover (darker bg, red ×), + button, add input active
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows before/after states:
- Before: Properties icon in separate 40px collapsed panel sliver
- After: Properties icon moved into BreadcrumbBar toolbar icons
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two frames showing tab switching shortcuts (Cmd+Opt+Left/Right in Tauri,
Cmd+Shift+Left/Right in browser) and note list navigation (Cmd+Opt+Up/Down
replaces current tab).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three wireframe sections:
1. Create Type Dialog — simple modal with name field, triggered by + on Types section
2. Dynamic Sidebar Sections — custom types auto-appear as new sidebar sections
3. Updated Create Note Dialog — type selector includes custom types with blue accent
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
