up

frontend/src/App.tsx

@@ -597,15 +597,15 @@ export default function App() {
   const [clusterSearch, setClusterSearch] = useState('');
   // Hide spots already worked (exact call worked, or this band+mode slot done).
   const [clusterHideWorked, setClusterHideWorked] = useState(false);
-  const [showBandMap, setShowBandMap] = useState(false);
-  // Which side the band map docks to (persisted). Toggled from its header.
-  const [bandMapSide, setBandMapSide] = useState<'left' | 'right'>(
-    () => (localStorage.getItem('bandmap.side') === 'left' ? 'left' : 'right'),
-  );
-  const toggleBandMapSide = useCallback(() => {
-    setBandMapSide((s) => {
-      const next = s === 'right' ? 'left' : 'right';
-      writeUiPref('bandmap.side', next);
+  // Bands shown side-by-side in the Band Map tab (portable).
+  const [bandMapBands, setBandMapBands] = useState<string[]>(() => {
+    try { const v = JSON.parse(localStorage.getItem('opslog.bandMapBands') || '[]'); return Array.isArray(v) ? v : []; }
+    catch { return []; }
+  });
+  const toggleBandMapBand = useCallback((b: string) => {
+    setBandMapBands((cur) => {
+      const next = cur.includes(b) ? cur.filter((x) => x !== b) : [...cur, b];
+      writeUiPref('opslog.bandMapBands', JSON.stringify(next));
       return next;
     });
   }, []);
@@ -670,6 +670,10 @@ export default function App() {
   // tell whether an incoming DX call actually changed anything.
   const callsignValRef = useRef('');
   useEffect(() => { callsignValRef.current = callsign; }, [callsign]);
+  // Last callsign broadcast over UDP (WSJT-X/JTDX/MSHV/DXHunter). Lets us tell
+  // "the field still shows the previous broadcast" (safe to update) from "the
+  // user has typed a different call" (must not clobber).
+  const lastUdpCallRef = useRef('');
 
   // When the entered callsign turns out to be worked-before, jump to the
   // Worked-before tab so the history is front-and-centre. Only once per call,
@@ -901,6 +905,22 @@ export default function App() {
     setRstSent(p?.default_rst_sent || fallback);
     setRstRcvd(p?.default_rst_rcvd || fallback);
   }
+  // Clicking a spot (cluster grid or any band map): tune the rig, set the mode,
+  // fill the call, pre-fill POTA, (re)start the recording. Shared so every spot
+  // source behaves identically.
+  function handleSpotClick(s: any) {
+    const m = inferSpotMode(s.comment ?? '', s.freq_hz);
+    if (catState.connected) {
+      tuneRigCAT(s.freq_hz, m);
+    } else {
+      setFreqMhz((s.freq_hz / 1_000_000).toFixed(5));
+      if (s.band) setBand(s.band);
+    }
+    if (m) applyModeFromSpot(m);
+    onCallsignInput(s.dx_call);
+    applySpotPOTA((s as any).pota_ref);
+    if (s.dx_call?.trim()) restartRecordingForNewTarget();
+  }
 
   useEffect(() => { refresh(); }, [refresh]);
   useEffect(() => {
@@ -1030,23 +1050,28 @@ export default function App() {
   // We push the broadcast DX call into the entry field and auto-log any
   // ADIF record that arrives.
   useEffect(() => {
-    const unsubDX = EventsOn('udp:dx_call', (p: any) => {
-      const call = String(p?.call ?? '').trim();
-      if (!call) return;
-      // Don't clobber what the user is currently typing — only update
-      // when the entry field is empty or matches a previous broadcast.
-      const changed = call.toUpperCase() !== callsignValRef.current.trim().toUpperCase();
+    // Apply a UDP-broadcast callsign, but never clobber what the operator is
+    // typing: only update when the field is empty, already shows this call, or
+    // still shows the previous broadcast (i.e. the field content is ours, not
+    // a different call the user typed). Returns true if it actually changed.
+    const applyUdpCall = (raw: string): boolean => {
+      const call = String(raw ?? '').trim();
+      if (!call) return false;
+      const upper = call.toUpperCase();
+      const current = callsignValRef.current.trim().toUpperCase();
+      const prev = lastUdpCallRef.current;
+      lastUdpCallRef.current = upper; // remember this broadcast either way
+      if (current === upper) return false;                       // already shown → no-op
+      if (current !== '' && current !== prev) return false;      // user typed a different call → leave it
       onCallsignInput(call);
-      // External app jumped to a new station (DXHunter/WSJT/MSHV click): start a
-      // fresh recording for the new target instead of continuing the old take.
-      if (changed) restartRecordingForNewTarget();
+      return true;
+    };
+    const unsubDX = EventsOn('udp:dx_call', (p: any) => {
+      // External app moved to a new station → fresh recording for the new target.
+      if (applyUdpCall(p?.call)) restartRecordingForNewTarget();
     });
     const unsubRC = EventsOn('udp:remote_call', (raw: string) => {
-      const call = String(raw ?? '').trim();
-      if (!call) return;
-      const changed = call.toUpperCase() !== callsignValRef.current.trim().toUpperCase();
-      onCallsignInput(call);
-      if (changed) restartRecordingForNewTarget();
+      if (applyUdpCall(raw)) restartRecordingForNewTarget();
     });
     const unsubProg = EventsOn('import:progress', (p: any) => {
       setImportProgress({ processed: Number(p?.processed ?? 0), total: Number(p?.total ?? 0) });
@@ -2181,10 +2206,10 @@ export default function App() {
               </Button>
             )}
             <Button
-              variant={showBandMap ? 'default' : 'outline'}
+              variant={activeTab === 'bandmap' ? 'default' : 'outline'}
               size="sm"
-              onClick={() => setShowBandMap((v) => !v)}
-              title="Toggle band map (visible across all tabs)"
+              onClick={() => setActiveTab('bandmap')}
+              title="Open the Band Map tab (several bands side by side)"
               className="h-8"
             >
               Band map
@@ -2443,10 +2468,9 @@ export default function App() {
       )}
       </div>{/* /entry + aside row */}
 
-      {/* ===== LOWER: tabs+table | call history | (optional) band map ===== */}
+      {/* ===== LOWER: tabbed table / cluster / band map ===== */}
       {compact ? null : <>
-      <div className={cn('grid gap-2.5 p-2.5 flex-1 min-h-0 grid-rows-[minmax(0,1fr)]',
-        showBandMap ? (bandMapSide === 'left' ? 'grid-cols-[260px_1fr]' : 'grid-cols-[1fr_260px]') : 'grid-cols-[1fr]')}>
+      <div className="grid gap-2.5 p-2.5 flex-1 min-h-0 grid-rows-[minmax(0,1fr)] grid-cols-[1fr]">
         <section className="bg-card border border-border rounded-lg shadow-sm flex flex-col min-h-0 overflow-hidden">
           <Tabs value={activeTab} onValueChange={setActiveTab} className="flex flex-col min-h-0 flex-1">
             <TabsList className="px-3 shrink-0">
@@ -2463,6 +2487,7 @@ export default function App() {
                 )}
               </TabsTrigger>
               <TabsTrigger value="awards">Awards</TabsTrigger>
+              <TabsTrigger value="bandmap">Band Map</TabsTrigger>
               {/* Not a tab — QRZ blocks embedding, so this opens the call's
                   QRZ.com page in the system browser. Styled like a trigger. */}
               <button
@@ -2740,26 +2765,7 @@ export default function App() {
                   <ClusterGrid
                     rows={rendered as any}
                     spotStatus={spotStatus}
-                    onSpotClick={(s) => {
-                      const m = inferSpotMode(s.comment ?? '', s.freq_hz);
-                      if (catState.connected) {
-                        tuneRigCAT(s.freq_hz, m);
-                      } else {
-                        setFreqMhz((s.freq_hz / 1_000_000).toFixed(5));
-                        if (s.band) setBand(s.band);
-                      }
-                      // Set mode + flip the RST default (599↔59) for the new
-                      // target — a plain setMode skipped the RST preset.
-                      if (m) applyModeFromSpot(m);
-                      onCallsignInput(s.dx_call);
-                      // A POTA spot carries the park ref — pre-fill the POTA
-                      // award reference (like the State→RAC auto-match) so it's
-                      // logged without re-typing. n-fer refs (comma-separated)
-                      // become one POTA@ entry each.
-                      applySpotPOTA((s as any).pota_ref);
-                      // New target from a clicked spot → fresh recording + reset timer.
-                      if (s.dx_call.trim()) restartRecordingForNewTarget();
-                    }}
+                    onSpotClick={handleSpotClick}
                   />
                 );
               })()}
@@ -2952,35 +2958,45 @@ export default function App() {
             <TabsContent value="awards" className="flex-1 min-h-0 p-0">
               <AwardsPanel onEditQSO={openEdit} />
             </TabsContent>
+
+            {/* Band Map: several bands shown side-by-side (panadapter-style
+                strips). Pick bands with the chips; each strip is clickable to
+                tune the rig. */}
+            <TabsContent value="bandmap" className="mt-0 flex flex-col min-h-0 flex-1">
+              <div className="flex items-center gap-1 px-3 py-1.5 border-b border-border/60 shrink-0 flex-wrap">
+                <span className="text-xs text-muted-foreground mr-1">Bands:</span>
+                {bands.map((b) => {
+                  const on = bandMapBands.includes(b);
+                  return (
+                    <button key={b} type="button" onClick={() => toggleBandMapBand(b)}
+                      className={cn('px-2 py-0.5 rounded-full border text-[11px] font-medium transition-colors',
+                        on ? 'border-primary bg-primary text-primary-foreground' : 'border-border text-muted-foreground hover:bg-muted')}>
+                      {b}
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="flex-1 min-h-0 flex gap-2 p-2 overflow-x-auto">
+                {bandMapBands.length === 0 ? (
+                  <div className="flex-1 flex items-center justify-center text-sm text-muted-foreground">
+                    Pick one or more bands above to show their band maps side by side.
+                  </div>
+                ) : bandMapBands.map((b) => (
+                  <div key={b} className="w-[260px] shrink-0 min-h-0 border border-border rounded-lg overflow-hidden flex flex-col">
+                    <BandMap
+                      band={b}
+                      spots={spots.filter((s) => s.band === b)}
+                      spotStatus={spotStatus}
+                      currentFreqHz={band === b && freqMhz ? Math.round(parseFloat(freqMhz) * 1_000_000) : 0}
+                      onSpotClick={handleSpotClick}
+                      onClose={() => toggleBandMapBand(b)}
+                    />
+                  </div>
+                ))}
+              </div>
+            </TabsContent>
           </Tabs>
         </section>
-
-        {showBandMap && (
-          <div className={cn('bg-card border border-border rounded-lg shadow-sm flex flex-col min-h-0 overflow-hidden', bandMapSide === 'left' && 'order-first')}>
-            <BandMap
-              side={bandMapSide}
-              onToggleSide={toggleBandMapSide}
-              band={band}
-              spots={spots.filter((s) => s.band === band)}
-              spotStatus={spotStatus}
-              currentFreqHz={freqMhz ? Math.round(parseFloat(freqMhz) * 1_000_000) : 0}
-              onSpotClick={(s) => {
-                const m = inferSpotMode(s.comment ?? '', s.freq_hz);
-                if (catState.connected) {
-                  tuneRigCAT(s.freq_hz, m);
-                } else {
-                  setFreqMhz((s.freq_hz / 1_000_000).toFixed(5));
-                  if (s.band) setBand(s.band);
-                }
-                if (m) applyModeFromSpot(m);
-                onCallsignInput(s.dx_call);
-                applySpotPOTA((s as any).pota_ref);
-                if (s.dx_call.trim()) restartRecordingForNewTarget();
-              }}
-              onClose={() => setShowBandMap(false)}
-            />
-          </div>
-        )}
       </div>
       </>}
 

frontend/src/components/MainMap.tsx

@@ -1,7 +1,18 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween, destinationPoint } from '@/lib/maidenhead';
+import { writeUiPref } from '@/lib/uiPref';
+
+// Persisted free-pan view of the world map (when auto-zoom is off).
+function loadMapView(): { lat: number; lon: number; zoom: number } | null {
+  try { const v = JSON.parse(localStorage.getItem('opslog.mapView') || 'null'); return v && typeof v.zoom === 'number' ? v : null; }
+  catch { return null; }
+}
+function saveMapView(m: L.Map) {
+  const c = m.getCenter();
+  writeUiPref('opslog.mapView', JSON.stringify({ lat: c.lat, lon: c.lng, zoom: m.getZoom() }));
+}
 
 // MainMap — Log4OM-style dual map for the Main tab:
 //  • Left: a world map with the great-circle path drawn from the operator to
@@ -60,6 +71,13 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
   const worldOverlay = useRef<L.LayerGroup | null>(null);
   const locatorOverlay = useRef<L.LayerGroup | null>(null);
 
+  // Auto-zoom the world map to fit QTH→DX on each QSO. When off, the operator
+  // pans/zooms freely (e.g. a whole-world view) and the view is remembered
+  // across restarts. Default on.
+  const [autoZoom, setAutoZoom] = useState(() => localStorage.getItem('opslog.mapAutoZoomDX') !== '0');
+  const autoZoomRef = useRef(autoZoom);
+  useEffect(() => { autoZoomRef.current = autoZoom; }, [autoZoom]);
+
   // One-time map creation.
   useEffect(() => {
     if (worldRef.current && !worldMap.current) {
@@ -68,6 +86,11 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
       L.tileLayer(CARTO_LIGHT, { attribution: CARTO_ATTR, subdomains: 'abcd', maxZoom: 19 }).addTo(m);
       worldOverlay.current = L.layerGroup().addTo(m);
       worldMap.current = m;
+      // Restore the saved free-pan view when not auto-zooming.
+      const sv = loadMapView();
+      if (!autoZoomRef.current && sv) m.setView([sv.lat, sv.lon], sv.zoom);
+      // Remember the view as the user pans/zooms (only meaningful when free).
+      m.on('moveend', () => { if (!autoZoomRef.current) saveMapView(m); });
     }
     if (locatorRef.current && !locatorMap.current) {
       const m = L.map(locatorRef.current, { zoomControl: true, attributionControl: true })
@@ -135,13 +158,16 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
     if (from && to) {
       const pts = greatCirclePoints(from.lat, from.lon, to.lat, to.lon, 96);
       L.polyline(pts as L.LatLngExpression[], { color: '#dc2626', weight: 2, opacity: 0.9 }).addTo(wo);
-      const bounds = L.latLngBounds([[from.lat, from.lon], [to.lat, to.lon]]);
-      // Include the arc so high-latitude curves aren't clipped.
-      pts.forEach((p) => bounds.extend(p as L.LatLngExpression));
-      wm.fitBounds(bounds, { padding: [30, 30], maxZoom: 6 });
-    } else if (to) {
+      // Only re-frame the map when auto-zoom is on; otherwise keep the user's
+      // chosen (remembered) view so the beam heading stays visible.
+      if (autoZoom) {
+        const bounds = L.latLngBounds([[from.lat, from.lon], [to.lat, to.lon]]);
+        pts.forEach((p) => bounds.extend(p as L.LatLngExpression)); // include the arc
+        wm.fitBounds(bounds, { padding: [30, 30], maxZoom: 6 });
+      }
+    } else if (autoZoom && to) {
       wm.setView([to.lat, to.lon], 3);
-    } else if (from) {
+    } else if (autoZoom && from) {
       wm.setView([from.lat, from.lon], 3);
     }
 
@@ -160,7 +186,7 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
     }
     setTimeout(() => { wm.invalidateSize(); lm.invalidateSize(); }, 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fromGrid, toGrid, fromLabel, toLabel, (beamAzimuths ?? []).map((a) => Math.round(a)).join(','), beamWidth]);
+  }, [fromGrid, toGrid, fromLabel, toLabel, (beamAzimuths ?? []).map((a) => Math.round(a)).join(','), beamWidth, autoZoom]);
 
   const path = pathBetween(fromGrid, toGrid);
 
@@ -169,6 +195,25 @@ export function MainMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, be
       <div className="grid grid-cols-2 gap-2 flex-1 min-h-0">
         <div className="relative isolate rounded-lg overflow-hidden border border-border">
           <div ref={worldRef} className="absolute inset-0" />
+          {/* Auto-zoom toggle: on = frame QTH→DX each QSO; off = free pan/zoom
+              (remembered across restarts), so the beam heading stays visible. */}
+          <button
+            type="button"
+            onClick={() => {
+              const v = !autoZoom;
+              setAutoZoom(v);
+              writeUiPref('opslog.mapAutoZoomDX', v ? '1' : '0');
+              const m = worldMap.current;
+              if (!v && m) saveMapView(m); // entering free mode → remember current view
+              // (turning it on re-frames via the redraw effect, which depends on autoZoom)
+            }}
+            title={autoZoom ? 'Auto-zoom to DX is ON — click for free pan/zoom (remembered)' : 'Free pan/zoom — click to auto-zoom to the DX'}
+            className={`absolute top-1 right-1 z-[500] rounded-md px-2 py-1 text-[11px] font-medium shadow border backdrop-blur transition-colors ${
+              autoZoom ? 'bg-primary text-primary-foreground border-primary' : 'bg-card/90 text-muted-foreground border-border hover:bg-card'
+            }`}
+          >
+            Zoom DX
+          </button>
           {path && (
             <div className="absolute bottom-1 left-1 z-[500] rounded-md bg-card/90 backdrop-blur px-2 py-1 text-[11px] font-mono shadow border border-border pointer-events-none">
               <div><span className="text-muted-foreground">Dist</span> {Math.round(path.distanceShort).toLocaleString()} km

frontend/src/lib/uiPref.ts

@@ -18,6 +18,9 @@ const PORTABLE_KEYS = [
   'opslog.showBeamOnMap', // antenna beam lobe drawn on the Main map
   'opslog.startEqualsEnd',// log TIME_ON = TIME_OFF (QSO time = completion time)
   'opslog.catModeBeforeFreq', // send CAT mode before frequency (older rigs)
+  'opslog.bandMapBands',  // bands shown side-by-side in the Band Map tab
+  'opslog.mapAutoZoomDX', // Main map: auto-zoom to the DX (vs free pan/zoom)
+  'opslog.mapView',       // Main map: remembered free-pan view (lat/lon/zoom)
 ];
 
 // syncPortablePrefs reconciles the DB with the local cache at startup: