feat: add font-size controls to side panel header

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

@@ -19,7 +19,7 @@
 
 ## 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`
+- [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
 - [ ] 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()`

sidepanel/sidepanel.css

@@ -142,22 +142,31 @@ html, body {
   font-size: 14px;
 }
 
-#open-list {
+#open-list,
+#font-decrease,
+#font-increase {
   background: none;
   border: 1px solid var(--border);
   color: var(--text);
   border-radius: 4px;
   padding: 2px 8px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 12px;
   line-height: 1;
   flex-shrink: 0;
 }
 
-#open-list:hover {
+#open-list:hover,
+#font-decrease:hover,
+#font-increase:hover {
   background: var(--border);
 }
 
+#font-decrease,
+#font-increase {
+  margin-left: 4px;
+}
+
 /* ---- Status bar ---- */
 #status {
   padding: 4px 12px;

sidepanel/sidepanel.html

@@ -12,6 +12,8 @@
       <img id="favicon" src="" alt="" width="16" height="16" hidden>
       <span id="page-title">Loading…</span>
     </div>
+    <button id="font-decrease" title="Decrease font size" aria-label="Decrease font size">A-</button>
+    <button id="font-increase" title="Increase font size" aria-label="Increase font size">A+</button>
     <button id="open-list" title="View all notes" aria-label="View all notes">☰</button>
   </div>