chore: release v0.25.9

frontend/src/components/BandMap.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Minus, Plus, Crosshair, X, PanelLeft, PanelRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
 import { spotStatusKey, inferSpotMode, spotModeCategory } from '@/lib/spot';
 import { SPOT_MARKERS, activeMarkers } from '@/lib/spotMarkers';
 import { applySpotDisplay, readSpotDisplayOptions } from '@/lib/spotDisplay';
+import { writeUiPref } from '@/lib/uiPref';
 
 // BandMap — vertical spectrum panel inspired by Log4OM.
 // - Full band is always visible; zoom changes pixels-per-kHz, scroll
@@ -217,7 +218,37 @@ function statusStyle(s: string): { pill: string; bar: string; line: string; dot:
 // Pixels-per-kHz at each zoom step. Base 8 px/kHz means a stacked spot
 // every 2.75 kHz fits without anti-overlap kicking in — comfortable for
 // most bands. Higher levels are for fine inspection of crowded sub-bands.
-const PX_PER_KHZ = [8, 16, 32, 64, 128, 256];
+// Zoom steps, px per kHz. 2 and 4 sit below the old floor of 8 so a whole band
+// fits without FIT taking the scale away from you: 20 m end to end is 700 px at
+// 2 px/kHz, which scrolls in one screen on most displays.
+const PX_PER_KHZ = [2, 4, 8, 16, 32, 64, 128, 256];
+const DEFAULT_ZOOM_IDX = PX_PER_KHZ.indexOf(32);
+
+// Zoom is remembered PER BAND, in ONE json key rather than one key per band:
+// lib/uiPref keeps an explicit list of the preferences that travel with data/,
+// and thirteen entries there to say the same thing would be thirteen chances to
+// forget one.
+const ZOOM_KEY = 'opslog.bandMapZoom';
+
+function readZoomMap(): Record<string, number> {
+  try {
+    const m = JSON.parse(localStorage.getItem(ZOOM_KEY) || '{}');
+    return m && typeof m === 'object' ? m : {};
+  } catch {
+    return {};
+  }
+}
+
+function readZoom(band: string): number {
+  const n = readZoomMap()[band];
+  return Number.isInteger(n) && n >= 0 && n < PX_PER_KHZ.length ? n : DEFAULT_ZOOM_IDX;
+}
+
+function writeZoom(band: string, idx: number): void {
+  const m = readZoomMap();
+  m[band] = idx;
+  writeUiPref(ZOOM_KEY, JSON.stringify(m));
+}
 const SCALE_W = 56;
 const PILL_H = 22;     // px — height of each callsign pill
 const PILL_GAP = 32;   // px between scale border and first pill (room for leader)
@@ -252,7 +283,22 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz,
   }, [spotStatusRaw, dispOpts.muteWorked, dispOpts.slotHighlight]);
   const range = BAND_RANGES[band];
   const segments = SEGMENT_COLORS[band] ?? [];
-  const [zoomIdx, setZoomIdx] = useState(2); // default 32 px/kHz
+  const [zoomIdx, setZoomIdx] = useState(() => readZoom(band));
+  // The docked map follows the rig, so a band change must bring up THAT band's
+  // remembered zoom.
+  useEffect(() => { setZoomIdx(readZoom(band)); }, [band]);
+  // Stored from the interaction, not from an effect on zoomIdx: an effect would
+  // also fire on the band change above, and in the same commit it would still be
+  // holding the PREVIOUS band's index — writing it over the new band's. Doing it
+  // where the operator actually turns the wheel keeps the two apart. (Running
+  // twice under StrictMode is harmless: the same value is stored.)
+  const changeZoom = useCallback((delta: number) => {
+    setZoomIdx((z) => {
+      const n = Math.max(0, Math.min(PX_PER_KHZ.length - 1, z + delta));
+      if (n !== z) writeZoom(band, n);
+      return n;
+    });
+  }, [band]);
   const scrollerRef = useRef<HTMLDivElement | null>(null);
   const [containerH, setContainerH] = useState(400);
 
@@ -421,7 +467,7 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz,
       if (!range) return;
       if (e.ctrlKey || e.metaKey) {
         e.preventDefault();
-        setZoomIdx((z) => Math.max(0, Math.min(PX_PER_KHZ.length - 1, z + (e.deltaY > 0 ? -1 : 1))));
+        changeZoom(e.deltaY > 0 ? -1 : 1);
       }
     };
     el.addEventListener('wheel', onWheel, { passive: false });
@@ -476,8 +522,10 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz,
 
   // Tick step (where small marks land) and label step (where the kHz
   // number is printed) are decoupled so the scale shows ~10-20 numeric
-  // labels per viewport regardless of zoom — at base 8 px/kHz we want
-  // labels every 25 kHz, not every 250.
+  // labels per viewport regardless of zoom — at 8 px/kHz we want labels
+  // every 25 kHz, not every 250. The bare values below are the floor, and
+  // they are what the 2 px/kHz step lands on: a whole band in one screen
+  // wants a number every 100 kHz, not every 25.
   let tickStep = 50;
   let labelStep = 100;
   if (pxPerKHz >= 4)   { tickStep = 25; labelStep = 50;  }
@@ -502,14 +550,17 @@ export function BandMap({ band, spots, spotStatus: spotStatusRaw, currentFreqHz,
   return (
     <div className="h-full w-full flex flex-col min-h-0 bg-card">
       <div className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border flex flex-nowrap items-center gap-0.5 shrink-0">
-        <span className="flex-1 min-w-0 truncate">{t('bmp.map')} · {band}</span>
-        <button type="button" onClick={() => setZoomIdx((z) => Math.max(0, z - 1))} disabled={fitToBand || zoomIdx === 0}
+        {/* The band alone. "Map · 20M" spent a third of a narrow header saying
+            what the panel obviously is, and with four band maps side by side it
+            was four times the same word. */}
+        <span className="flex-1 min-w-0 truncate">{band}</span>
+        <button type="button" onClick={() => changeZoom(-1)} disabled={fitToBand || zoomIdx === 0}
           className="size-5 shrink-0 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
           title={t('bmp.zoomOut')}>
           <Minus className="size-3" />
         </button>
         <span className="shrink-0 font-mono text-[10px] normal-case tracking-normal whitespace-nowrap px-0.5">{fitToBand ? t('bmp.fit') : `${pxPerKHz}px/kHz`}</span>
-        <button type="button" onClick={() => setZoomIdx((z) => Math.min(PX_PER_KHZ.length - 1, z + 1))} disabled={fitToBand || zoomIdx === PX_PER_KHZ.length - 1}
+        <button type="button" onClick={() => changeZoom(1)} disabled={fitToBand || zoomIdx === PX_PER_KHZ.length - 1}
           className="size-5 shrink-0 inline-flex items-center justify-center rounded hover:bg-muted disabled:opacity-30"
           title={t('bmp.zoomIn')}>
           <Plus className="size-3" />