Replace React state (useState + re-render) with direct DOM manipulation
for the breadcrumb title visibility. IntersectionObserver now toggles a
data-title-hidden attribute on the bar element, and CSS handles shadow
+ title visibility. This avoids re-rendering the heavy BlockNote editor
on every scroll intersection change.
Fixes: shadow always appears when title is hidden (CSS-driven, no race),
scroll is smooth (zero React re-renders during scroll).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
When a note has no emoji icon, the NoteIcon area was occupying horizontal
space in the title row, pushing the title text to the right. Fix: render
NoteIcon in a separate div above the title row when no emoji is set, so
the title starts flush with the left margin. When an emoji is present,
the original inline-left layout is preserved.
Apply theme CSS variables to the editor scroll area so the title section
uses the same max-width as the BlockNote editor. Add matching margin-left
to the title row/separator for body text alignment. Move NoteIcon inside
the title row unconditionally so top margin is constant regardless of
emoji presence.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove reserved left space when note has no emoji icon (conditional render)
- Move "Add icon" button above the title row (Notion-style hover reveal)
- Increase title font size to 32px and top padding to 32px for proper H1 weight
- Update smoke test to validate no-emoji layout and new hover target
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Wrap NoteIcon + TitleField in a flex row container so the emoji
renders inline-left of the title instead of stacked vertically.
Add fallback values for H1 CSS variables (28px, 700 weight).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
TitleField now uses var(--headings-h1-font-size/weight/line-height/letter-spacing)
instead of hardcoded 28px, matching the editor H1 exactly. Added margin-left: 8px
to align with BlockNote's bn-block-content offset. Fixed bn-editor max-width to
use the same CSS var as the title-section for consistent horizontal alignment.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Move title-section inside a shared .editor-scroll-area wrapper so both
title and editor content center within the same scrollable context,
fixing alignment drift at wide widths caused by scrollbar offset.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Every note can now have an optional emoji icon (frontmatter `icon` field).
The icon is displayed in the editor header, note list, search results,
and Quick Open. Includes command palette commands "Set Note Icon" and
"Remove Note Icon", plus full test coverage (Vitest + Playwright).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Adds a TitleField component between the breadcrumb bar and BlockNote
editor that serves as the primary title editing surface. The H1 block
inside BlockNote is hidden via CSS. The title field:
- Shows the note title in a prominent input field
- Displays the expected filename when it differs from the current one
- Triggers onTitleSync on blur/Enter to rename the file
- Responds to laputa:focus-editor selectTitle events for new notes
- Reverts on Escape or empty input
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Root cause: Tauri's dragDropEnabled (default: true) intercepts drag events
at the webview level, preventing HTML5 DnD from working for tab reorder
and BlockNote block handle drag. Setting dragDropEnabled: false lets all
drag events flow through the standard DOM API.
Image drops now use the HTML5 drop handler + uploadImageFile (same as
paste-upload) instead of Tauri's onDragDropEvent + copyImageToVault.
Removed the useInternalDragFlag workaround and padding hack.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Three fixes for the image drop overlay interference:
1. Block handle clipping: Add padding (0 4px) to editor container so
BlockNote's side menu (42px) fits within the overflow clip edge.
overflow-y:auto forces overflow-x:auto (CSS spec), which was clipping
the menu 2px past the container's left boundary.
2. Block handle click interference: Extract isInteractiveTarget() to
exclude .bn-side-menu from handleContainerClick — prevents the
container from stealing focus when clicking drag handle or add button.
3. Internal drag isolation: Track document-level dragstart/dragend to
flag internal HTML5 drags (tabs, blocks). Tauri onDragDropEvent
handler skips entirely during internal drags to prevent interference.
Extract useInternalDragFlag() and handleTauriDrop() to keep
useImageDrop under CodeScene complexity threshold.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Clicking anywhere in the editor container (including empty space below the
last block) now focuses the editor and places the cursor at the end of the
last block. This matches the behavior of Notion, Bear, and Obsidian.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
BlockNote's internal CSS sets `.bn-editor { background-color: var(--bn-colors-editor-background); }`
using its own hardcoded variables (#ffffff light, #1f1f1f dark). Our `.bn-container` rule set
`background: var(--bg-primary)` but this didn't cascade to `.bn-editor` which has its own rule.
Override the BlockNote internal CSS variables (`--bn-colors-editor-background` etc.) on
`.bn-container` so BlockNote's own rules pick up our vault theme colors. CSS custom properties
cascade normally, and our selector specificity (2 classes) matches BlockNote's dark theme rule
(1 class + 1 attribute) — source order wins since our CSS loads after BlockNote's.
Fixes: editor content area now seamlessly blends with sidebar and container in any vault theme.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Extract uploadImageFile to shared hook, add useImageDrop hook that
handles dragover/dragleave/drop events on the editor container.
Drops image files (jpg, png, gif, webp), uploads them via the existing
save_image flow, and inserts BlockNote image blocks at the drop position.
Visual feedback via drop overlay and dashed border.
Refactored Editor.tsx uploadFile to use the shared function.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Wikilinks in the editor now show the accent color of the target note's
type (Project=red, Person=yellow, Topic=green, etc.) instead of always
being blue. Broken links (target not found) show muted text with a
dashed underline.
- Extract wikilink color resolution to src/utils/wikilinkColors.ts
- Use getTypeColor from typeColors.ts (single source of truth)
- Support alias and pipe-syntax matching in findEntryByTarget
- Add wikilink--broken CSS class for non-existent targets
- Add 17 unit tests covering all color resolution cases
- Update mock data with wikilinks to various note types + broken link
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The BlockNote editor container (.bn-container) had no explicit width,
so it sized based on content. With short or empty document titles,
the editor collapsed to a very small width.
Fix: set width: 100% on .bn-container and .bn-editor so the editor
always fills available space. Added margin: 0 auto on .bn-editor to
keep the 760px text column centered.
Also adds an E2E test verifying editor width stays above 300px.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Fix editor scroll (min-height: 0 + overflow)
- Properties panel extends full height
- Moved Diff button to git-branch icon in breadcrumb bar
- Minor CSS fixes for app layout
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>
- Custom 'wikilink' inline content type via createReactInlineContentSpec
- Extended BlockNote schema with wikilink spec
- Suggestion menu triggered by [[ showing all vault entries
- Markdown round-trip: [[target]] → placeholder tokens → wikilink inline content
- Click handler on .wikilink elements for navigation
- Removed old hack (regex preprocessing to wikilink.internal URLs + DOM click interception on <a> tags)
- Added .wikilink CSS styles
- Passed entries prop from App.tsx to Editor for suggestion menu
Three CSS fixes for the codemirror-live-markdown live preview:
1. Remove header underlines (border-bottom: none on .cm-heading-line)
2. Heading markers (## etc) positioned absolutely in left gutter area
so they never push heading text horizontally when revealed
3. List bullets always occupy fixed width (font-size: 1em, not collapsed),
showing • when inactive and source char (-) when active
Verified via Playwright: 0px horizontal shift on both headings and bullets.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Editor tab bar shows Edit/Diff toggle button when viewing a modified file.
Diff view renders git diff output with green (added), red (removed), and
gray (context) line coloring. Uses `get_file_diff` Tauri command.
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>
- Replace single selectedNote with tabs state in App (open/close/switch)
- Tab bar above editor: title + x close button, active tab highlighted
- Clicking note opens new tab or switches to existing
- Closing active tab switches to adjacent tab
- Fix race condition: editor re-creates when tab content loads async
- Add Playwright test verifying multi-tab behavior
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Install CM6 packages (state, view, lang-markdown, theme-one-dark, commands, language)
- Replace Editor placeholder with real CodeMirror 6 instance
- Add realistic markdown content to all mock entries in mock-tauri.ts
- Wire up note selection: clicking a note in NoteList loads its content in the editor
- Dark theme matching app colors, line numbers, active line highlighting, line wrapping
- Update NoteList with selected state styling
- Update Playwright screenshot test to capture editor with note selected
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
