From 41b8480f23ea324fcca4f7bf8b28b191218533ab Mon Sep 17 00:00:00 2001
From: Fabio Montefuscolo <fabio.montefuscolo@gmail.com>
Date: Mon, 3 Aug 2026 22:14:10 +0200
Subject: [PATCH] feat: persisted editor font-size state (default 16px, 10-24)

---
 .../sidepanel-ux-improvements/tasks.md        |  2 +-
 sidepanel/sidepanel.css                       |  2 +-
 sidepanel/sidepanel.js                        | 24 +++++++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/openspec/changes/sidepanel-ux-improvements/tasks.md b/openspec/changes/sidepanel-ux-improvements/tasks.md
index 92912ac..5b25625 100644
--- a/openspec/changes/sidepanel-ux-improvements/tasks.md
+++ b/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
diff --git a/sidepanel/sidepanel.css b/sidepanel/sidepanel.css
index bcfe3b5..7923c9b 100644
--- a/sidepanel/sidepanel.css
+++ b/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;
diff --git a/sidepanel/sidepanel.js b/sidepanel/sidepanel.js
index a6f58e7..0c4c2b8 100644
--- a/sidepanel/sidepanel.js
+++ b/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
 // ---------------------------------------------------------------------------