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>
