Improved UI

web/src/ZoomControl.tsx

@@ -0,0 +1,35 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+
+const LS_KEY = 'uopi:ui-zoom';
+const STEPS = [0.5, 0.6, 0.75, 0.85, 1.0, 1.15, 1.3, 1.5, 1.75, 2.0, 2.5];
+
+export function getStoredZoom(): number {
+  const v = parseFloat(localStorage.getItem(LS_KEY) ?? '1');
+  return isFinite(v) ? Math.max(STEPS[0], Math.min(STEPS[STEPS.length - 1], v)) : 1;
+}
+
+export function applyZoom(z: number): number {
+  const clamped = Math.max(STEPS[0], Math.min(STEPS[STEPS.length - 1], z));
+  localStorage.setItem(LS_KEY, String(clamped));
+  document.documentElement.style.fontSize = `${Math.round(16 * clamped)}px`;
+  return clamped;
+}
+
+export default function ZoomControl() {
+  const [zoom, setZoom] = useState(getStoredZoom);
+
+  function step(dir: number) {
+    const idx = STEPS.findIndex(s => s >= zoom - 0.01);
+    const nextIdx = Math.max(0, Math.min(STEPS.length - 1, idx + dir));
+    setZoom(applyZoom(STEPS[nextIdx]));
+  }
+
+  return (
+    <div class="zoom-control" title="UI zoom">
+      <button class="icon-btn zoom-btn" onClick={() => step(-1)} title="Zoom out (smaller UI)">A−</button>
+      <span class="zoom-pct">{Math.round(zoom * 100)}%</span>
+      <button class="icon-btn zoom-btn" onClick={() => step(1)} title="Zoom in (larger UI)">A+</button>
+    </div>
+  );
+}