32 lines
2.1 KiB
Markdown
32 lines
2.1 KiB
Markdown
|
# Proposal: Side panel UX improvements
|
||
|
|
|
||
|
|
## Why
|
||
|
|
|
||
|
|
Opening the side panel requires a manual click into the textarea before typing, the editor font is small (13px) with no way to adjust it, and the caret position is lost every time the panel closes or the tab switches — forcing users to scroll back to where they were.
|
||
|
|
|
||
|
|
## What Changes
|
||
|
|
|
||
|
|
- Focus the editor automatically when the side panel opens, restoring the caret to its last saved position (and scroll offset) instead of the top of the note.
|
||
|
|
- Persist caret position (`selectionStart`/`selectionEnd`) and `scrollTop` on the note record, written during autosave, on a debounce after caret-only movement, and flushed on blur/panel hide. Restored positions are clamped to the current content length.
|
||
|
|
- Prevent caret-only saves from disturbing other open panels: cross-panel reload messages distinguish content changes from caret-only updates so a remote caret save never resets another panel's caret.
|
||
|
|
- Bump the default editor font size to 16px (already monospace) and add font-size controls (`A-` / `A+`) in the header next to the notes-list button, plus `Ctrl+=` / `Ctrl+-` keyboard shortcuts and `Ctrl+0` to reset. The chosen size persists in `localStorage` and applies across panel sessions.
|
||
|
|
|
||
|
|
## Capabilities
|
||
|
|
|
||
|
|
### New Capabilities
|
||
|
|
|
||
|
|
(none)
|
||
|
|
|
||
|
|
### Modified Capabilities
|
||
|
|
|
||
|
|
- `note-editor`: new requirements for focus-on-open with caret/scroll restoration, adjustable persisted editor font size, and cross-panel reload that ignores caret-only remote updates.
|
||
|
|
- `notes-storage`: the note record data model gains optional caret and scroll-position fields.
|
||
|
|
|
||
|
|
## Impact
|
||
|
|
|
||
|
|
- `sidepanel/sidepanel.js` — focus/restore logic, caret tracking, font-size controls and shortcuts, broadcast message handling.
|
||
|
|
- `sidepanel/sidepanel.html` — `A-` / `A+` buttons in the header.
|
||
|
|
- `sidepanel/sidepanel.css` — base font-size moved to a variable/inline style; button styles.
|
||
|
|
- `shared/storage.js` — save path accepts and preserves caret/scroll fields; no IndexedDB schema migration needed (records are schemaless).
|
||
|
|
- No manifest or permission changes; `localStorage` needs no permission.
|