side-notes/openspec/changes/sidepanel-ux-improvements/tasks.md

2.7 KiB
Raw Permalink Blame History

Tasks: Side panel UX improvements

1. Storage: caret/scroll fields on the note record

  • 1.1 Extend saveNote in shared/storage.js with an optional caret parameter ({ caretStart, caretEnd, scrollTop }); when provided, write those fields onto the record (both insert and update-in-place paths); when absent, preserve existing fields
  • 1.2 Verify old records without caret fields still load and save unchanged (no IndexedDB version bump)

2. Caret persistence in the side panel

  • 2.1 In sidepanel/sidepanel.js, pass current caret (selectionStart/selectionEnd) and scrollTop to saveNote in the existing autosave (doSave)
  • 2.2 Track caret-only movement via document selectionchange (filtered to the editor) and editor scroll; debounce ~800ms into a caret-only save that calls saveNote without broadcasting; skip it while a content autosave is pending
  • 2.3 Flush any pending caret-only save on editor blur and on visibilitychange → hidden

3. Focus and caret/scroll restore

  • 3.1 In loadNoteForTab, after setting editor.value, restore caret via setSelectionRange with offsets clamped to content length (default 0 for legacy records), restore scrollTop (in requestAnimationFrame if layout timing clamps it), and call editor.focus()
  • 3.2 Make reloadFromDB skip the editor.value assignment when fetched content is identical, so remote saves never move the local caret unnecessarily
  • 3.3 Manually verify focus lands when the panel opens via toolbar action and via keyboard shortcut; caret restore works on panel open, tab switch, and SPA navigation

4. Adjustable font size

  • 4.1 Add A- and A+ buttons to the header in sidepanel/sidepanel.html before the ☰ button; style them like #open-list in sidepanel/sidepanel.css
  • 4.2 In sidepanel/sidepanel.js, implement font-size state: default 16px, range 10–24px, step 1px; apply via editor.style.fontSize; load from localStorage (side-notes:fontSize) at init and persist on every change
  • 4.3 Wire the two buttons to decrease/increase with clamping
  • 4.4 Add keyboard shortcuts in the existing keydown handler: Ctrl/Cmd+= (and + variant) increase, Ctrl/Cmd+- decrease, Ctrl/Cmd+0 reset to 16px, all with preventDefault()
  • 4.5 Verify the find match scrolling (selectMatch) still scrolls correctly at min and max font sizes

5. Validation

  • 5.1 Load the unpacked extension and walk every scenario in specs/note-editor/spec.md and specs/notes-storage/spec.md
  • 5.2 Two-panel test: same note in two tabs — caret-only movement in A does not disturb B's caret; content edit in A still refreshes B (immediately when unfocused, deferred until blur when focused)