feat: persisted editor font-size state (default 16px, 10-24)

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

@@ -20,7 +20,7 @@
 ## 4. Adjustable font size
 
 - [x] 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
+- [x] 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

sidepanel/sidepanel.css

@@ -71,7 +71,7 @@ html, body {
   border: none;
   padding: 12px;
   font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
-  font-size: 13px;
+  font-size: 16px;
   line-height: 1.6;
   resize: none;
   outline: none;

sidepanel/sidepanel.js

@@ -30,6 +30,30 @@ const findPrev = document.getElementById('find-prev');
 const findNext = document.getElementById('find-next');
 const findClose = document.getElementById('find-close');
 
+// ---------------------------------------------------------------------------
+// Font size — persisted in localStorage, applied as an inline style
+// ---------------------------------------------------------------------------
+const FONT_SIZE_KEY = 'side-notes:fontSize';
+const FONT_SIZE_DEFAULT = 16;
+const FONT_SIZE_MIN = 10;
+const FONT_SIZE_MAX = 24;
+const FONT_SIZE_STEP = 1;
+
+function loadFontSize() {
+  const raw = Number(localStorage.getItem(FONT_SIZE_KEY));
+  if (!Number.isFinite(raw) || raw <= 0) return FONT_SIZE_DEFAULT;
+  return Math.min(FONT_SIZE_MAX, Math.max(FONT_SIZE_MIN, Math.round(raw)));
+}
+
+function applyFontSize(size) {
+  const clamped = Math.min(FONT_SIZE_MAX, Math.max(FONT_SIZE_MIN, size));
+  editor.style.fontSize = `${clamped}px`;
+  localStorage.setItem(FONT_SIZE_KEY, String(clamped));
+  return clamped;
+}
+
+let fontSize = applyFontSize(loadFontSize());
+
 // ---------------------------------------------------------------------------
 // State
 // ---------------------------------------------------------------------------