Three issues found in review, all around switching to a different note
while the editor is already open (via a note-link or backlink chip):
- TiptapEditor's onTransaction/onUpdate had no guard against writing
state after the component is torn down. Removing a focused editor's
DOM node fires a native blur, which ProseMirror turns into one last
transaction synchronously during that same teardown pass, crashing
with state_unsafe_mutation. Deferred the onTransaction write to a
microtask (checked against a destroyed flag) so it lands after
Svelte's current pass finishes; guarded onUpdate synchronously.
- openEditor/openNoteById in NotesView.svelte awaited a network fetch
before ever showing the editor, for every note open (not just
link-driven navigation) — a regression for an offline-first app, and
the source of a real race: two rapid note-link clicks left two
fetches in flight with no ordering guarantee, so whichever resolved
last won, not whichever was clicked last. Reverted to opening
instantly from local/IndexedDB data (with a request-id guard against
the residual race), and instead fetch backlinks lazily in
NoteEditor.svelte only if not already present — mirroring the
existing attachments-fetch pattern already in that file. Also
applied the same post-teardown guard to that pre-existing attachments
effect, since remounting on note-switch newly exposes it to the same
class of race.
- FormattingToolbar's closeDropdowns() cleared search results but never
cancelled the pending debounce timer, so a stale query could
repopulate results after the dropdown had already closed. Added the
missing clearTimeout, plus a try/catch around the search fetch for
consistency with the pattern used elsewhere in the app.
Verified: pnpm check (0 errors), full unit suite (316/316), and the
existing e2e suite including all note-linking scenarios (19/19) all
pass against these changes.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Separates --hover-wash from --border so the softened dark-mode border grey
no longer collapses hover/active tint washes to near-invisibility (measured
5% wash on --bg-surface: 4.7 -> 17.0 RGB distance). Light mode is unaffected
since --hover-wash falls back to var(--border) in :root.
Also fixes stale/incorrect claims surfaced by the final review: the
checkbox rule and missing CSS variables in CLAUDE.md, the "warm parchment"
description of dark mode in FEATURES.md, the chip contrast claim in the
palette design doc (chips are 3:1 UI, not 4:1 text), and adds a measured
lightness-floor test guarding against chips regressing to card lightness.
The mobile editor is fullscreen with no backdrop to tap, so the Android
back button / iOS back swipe now dismisses it instead of leaving the
page. The editor pushes a shallow-routing history entry on mount and
closes when it is popped; UI closes pop the entry themselves so history
stays clean. NotesView's hash rewriting now goes through SvelteKit's
replaceState so the router keeps handling popstate.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01C1N5Vi12zTez7LNqRvYjUD
Restore portal dropdown test IDs so the formatting e2e suite can
find heading and link controls again.
Let the mobile formatting toolbar pan horizontally, keep dropdown
portals from drifting by closing them on scroll or resize, and use
visualViewport height for keyboard-aware positioning.
Remove the app-wide maximum-scale lock, keep editor focus targets at
16px on mobile to avoid input auto-zoom, and move toolbar scrollbar
styling to a top-level scoped style block.
Align the remove-link action with the destructive design token, use
the standard 150ms editor slide-up animation, and replace
save/restore body overflow locking with a resilient body class.
Make editor full-screen natively on mobile with back button. Add
visualViewport tracking to keep bottom toolbars above the software keyboard.
disable pull-to-refresh for native PWA feel
prevent auto-zoom on input focus in mobile Safari
prevent background scrolling when editor is open
prevent touch scroll on editor toolbars to stop background scrolling
hide visual gap at bottom of editor when iOS keyboard opens
move note actions to top-right menu on mobile devices
wrap background colors in mobile menu to reduce width
make formatting toolbar scrollable on mobile and extract dropdowns
remove empty else block causing svelte compilation error
add missing data-dropdown attributes to fix click interception in toolbar portals
keep mobile keyboard open when using toolbar menus and prevent right-edge overflow
Co-authored-by: Google Gemini <gemini@google.com>
On installed PWAs, closing the editor by tapping the overlay would cause
the browser's delayed synthetic click to land on the NoteCard underneath,
immediately reopening a different note. Fixed by keeping a transparent
shield in the DOM for 400ms after close to absorb the ghost click.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Two issues fixed:
1. Attachment operations (upload, feature, remove) only updated the local
editor state, not the notes store. Before auto-save, this was masked
because saveAndClose always called updateNote, whose PATCH response
refreshed the store. With auto-save skipping redundant saves, the store
was never updated with attachment changes. Now attachment handlers
update the store directly.
2. TiptapEditor fires onUpdate on init with round-tripped markdown that
can differ from the original. Added an autoSaveReady guard to absorb
this initial normalization as the baseline, preventing spurious saves
when reopening existing notes.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Snapshot fields at start of performSave to avoid race with user edits
during async save (fields could change between await and lastSaved update)
- Only update lastSaved tracking on successful save, so failed saves
are retried on the next debounce cycle
- Stop restoring title after Untitled fallback in autoSave(), which was
re-triggering the auto-save effect
- Capture note count before opening editor in empty-note e2e test
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Notes are now automatically saved 2 seconds after the user stops editing,
preventing data loss when the browser tab is closed without closing the
editor first. A beforeunload handler provides an additional safety net.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add a reusable `use:tooltip` Svelte action as a drop-in replacement for
native title attributes. Styled to match the retro parchment theme with
JetBrains Mono font, dark background, and 400ms hover delay.
Replace all title attributes in NoteEditor, NoteCard, and NotesView
with the custom tooltip. The action supports top/bottom positioning
and auto-clamps to viewport edges.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add a checkbox icon next to the "Add a crumb..." button that opens a new
note directly in checklist mode, similar to Google Keep's quick-create
bar. The NoteEditor accepts a new initialChecklistMode prop.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add vertical dots (⋮) overflow menu to NoteEditor bottom action bar
- New checklist actions: "Delete checked" and "Uncheck all"
- Move secondary actions to menu: checklist toggle, markdown toggle,
version history, move to trash
- Promote archive to the action bar for quick access
- Keep in bar: color picker, image upload, share, archive, ⋮, close
- Menu renders as fixed-position portal to escape card overflow-hidden
- Click-outside handler closes the menu
- Update e2e tests to use overflow menu for checklist/markdown toggles
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Switch NoteCard, NoteEditor, and ColorPicker from static NOTE_COLORS
lookups to getNoteColor(color, getIsDarkMode()), so inline background
styles react to the active theme. Also fix the theme preference button
type cast in settings/preferences to resolve the svelte-check error.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Create SharingIndicator component with Globe/Users icon priority
- NoteCard shows Globe icon (gold) for public shares, Users for collabs
- NoteEditor share button reflects public link state
- Share token propagated through store on create/revoke
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
On mobile, tapping a note card could trigger action buttons in the
editor that rendered at the same coordinates (ghost click). Suppress
pointer events on both toolbars for 150ms after mount — matching the
pop-in animation — so the synthetic click passes harmlessly.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The editor card's onpointerdown stopPropagation prevented the
FormattingToolbar's document-level pointerdown listener from
detecting clicks outside the dropdown. Since both overlay handlers
already use e.target === e.currentTarget to ignore bubbled events,
no stopPropagation is needed on the card.
https://claude.ai/code/session_018DYwSysqysMmaRi5XkqTpo
Pointer events are never synthetically re-dispatched from touch
(unlike mouse events), so the tap that opened the editor cannot
ghost-click the overlay. This eliminates the mobile first-load bug
without relying on an arbitrary delay.
Both pointerdown and pointerup must target the overlay itself to
trigger close, which also handles the text-selection-outside-editor
edge case.
https://claude.ai/code/session_018DYwSysqysMmaRi5XkqTpo
On first page load on mobile, the synthetic mousedown from a tap can
arrive ~300ms after the touch event — well after a single
requestAnimationFrame (~16ms). Replace the rAF-based overlayReady
guard with a 400ms timestamp check from mount time to reliably
ignore stale synthetic events on slow first loads.
https://claude.ai/code/session_018DYwSysqysMmaRi5XkqTpo
On mobile, tapping a NoteCard to open the editor produces synthetic mouse
events (mousedown → mouseup → click) at the original touch coordinates.
If those coordinates land on the overlay backdrop rather than the editor
card, the mousedown sets mousedownOnOverlay = true and the click
immediately closes the editor — causing a brief flicker.
Guard against this by deferring overlay readiness to the next animation
frame after mount, so any synthetic events from the originating tap are
ignored.
https://claude.ai/code/session_011C8bfgShjDSmDr3rUCb2gw
Track mousedown origin so click-outside-to-close only fires when both
mousedown and mouseup occur on the overlay backdrop, not when dragging a
text selection from inside the editor.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use flex-wrap instead of overflow-x-auto for the formatting toolbar —
scrolling clips absolutely-positioned dropdown popovers (CSS forces
both axes to auto). All buttons are now always visible, wrapping to a
second line on narrow screens. Remove the More dropdown entirely since
all items are top-level. Add overflow-hidden to the editor card to
prevent horizontal overflow.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Widen editor modal on desktop (max-w-xl → md:max-w-2xl)
- Extract text alignment from More into its own dropdown with contextual
icon reflecting the active alignment
- Promote undo/redo to top-level buttons on desktop (hidden on mobile,
still available in More dropdown)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Prevents default newline and focuses the content area (textarea or
TipTap editor) when pressing Enter in the title input.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create ShareDialog with user search autocomplete, collaborator list, and remove
- Create CollaboratorPopover for hover/click indicator on shared notes
- Add collaborator indicator to NoteCard (always visible Users icon)
- Replace trash with Leave action for non-owner shared notes
- Add share button to NoteEditor toolbar (UserPlus → Users when shared)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add svelte-ignore for intentional state_referenced_locally patterns
- Wrap clickable images in button elements for keyboard accessibility
- Add proper ARIA roles (dialog, textbox) with tabindex and focus management
- Fix lightbox Escape key handling to not close parent editor overlay
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use opacity-based visibility (max-md:opacity-100) for image hover
actions so they're always accessible on touch devices
- Always show ImageUpload with delete/star when attachments exist,
not just when in image upload mode
- Replace drag-and-drop zone with compact "Add images" button on mobile
- Add showDropZone prop to ImageUpload for conditional drop zone display
- Clean up unused lightbox state from NoteEditor
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Images are hidden from card thumbnails by default. Users explicitly
feature images via a star toggle in the upload panel, and only featured
images appear in the card header strip.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Clicking a thumbnail in the editor, closed-panel view, or note card
opens a full-screen overlay with the full-size image. Closes on Escape,
background click, or X button. Escape is scoped so it won't close the
editor underneath.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Instead of disabling the image button for unsaved notes, clicking it
now auto-saves the note first (with title "Untitled" if empty), then
opens the upload panel. This removes friction from the upload flow.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Import ImageUpload into NoteEditor with attachment state management
- Add $effect to fetch attachments for existing notes loaded from IDB
- Add upload/remove handlers and image toggle button in toolbar
- Show ImageUpload panel between content and formatting toolbar
- Add full-bleed thumbnail strip at top of NoteCard (up to 3 images)
- Use &thumb=1 URL for card previews with lazy loading
- Show +N badge when more than 3 attachments
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Increase gap between checkbox and text input (gap-1 → gap-2)
- Disable markdown toggle button in checklist mode
- Default to raw markdown mode when opening checklist notes as text
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Create (auth) and (app) layout groups to isolate login/setup pages
from the main app chrome (header, sidebar, footer)
- Use window.location.href instead of goto() after login/setup to
ensure clean full-page load across layout groups
- Add reusable TagChip component, used in TagFilter and NoteCard
- Add fade-in/pop-in entrance animation to note editor overlay
- Add persistent clickable pin indicator on pinned cards (top-right
bookmark icon, replaces hover-only pin button for pinned notes)
- Improve "Add a crumb..." button with + icon and dashed border
- Update CLAUDE.md with retro parchment design system guidelines
- Add /.claude/ to .gitignore
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Checklist toggle: SquareCheck (→ checklist) / Type (→ text).
Markdown toggle: FileCode (→ markdown) / FileText (→ rich text).
Icons now show what you'll switch to, not the current state.
Remove active color highlight since icon swap communicates state.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Change color picker popup from top-full to bottom-full so it appears
above the toolbar instead of overflowing below the editor.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Wrap editor content in a scrollable container with max-h-[60vh] so long
notes scroll within the editor instead of pushing it off-screen. Also make
the overlay itself scrollable with bottom padding for small viewports.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Markdown toggle: Eye (rich text) / Code (raw MD, highlighted).
Checklist toggle: List (text mode) / ListChecks (checklist, highlighted).
Icons now change on toggle so the active state is visually clear.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Constrain color picker popup width to viewport minus padding with a
max-width, preventing horizontal overflow on small screens.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Swap every inline SVG across Header, SearchBar, NoteCard, NoteEditor,
Checklist, and ImageUpload for Lucide components. Use Palette for the
color picker icon instead of the paintbrush. Zero inline SVGs remain.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the default dark/white theme with a warm parchment aesthetic
using CSS custom properties, retro pixel overlay, and JetBrains Mono
monospace font across all components. Bump version to 0.1.7.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace all user-facing "note(s)" with "crumb(s)" — sidebar, search
placeholder, editor placeholders, empty states. Use Lucide icons
(StickyNote, Archive, Trash2, Tag) in sidebar for consistency.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove ThemeToggle component, theme store, dark: Tailwind variants,
and dark color values from NOTE_COLORS. Simplify color logic to use
a single bg property. Delete dark mode e2e tests.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add a tick counter that increments on every TipTap transaction,
propagated from TiptapEditor through NoteEditor to FormattingToolbar.
This forces Svelte 5 to re-evaluate canUndo/canRedo state in the
template since plain object method calls aren't tracked reactively.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace plain text toolbar labels with Lucide SVG icons. Group heading,
list, and alignment options into dropdown menus to reduce toolbar width.
Replace window.prompt link insertion with an inline popover (input, apply,
open, remove). Add underline and text-align TipTap extensions. Remove
task list from TipTap editor (broken styling). Fix task list bullet
rendering in note card preview. Increase editor min-height for markdown
mode.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add TipTap WYSIWYG editor (headless @tiptap/core) with StarterKit,
TaskList, TaskItem, Link, Placeholder, and tiptap-markdown extensions
- Always-visible formatting toolbar with undo/redo, H1-H3, bold, italic,
strikethrough, inline code, code block, blockquote, bullet/ordered/task
lists, horizontal rule, and link
- Raw markdown toggle for power users
- Render rich text (HTML) on note cards instead of stripped plain text
- Update all e2e tests for TipTap contenteditable editor
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
