map

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "ag-grid-react": "^35.3.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "leaflet": "^1.9.4",
         "lucide-react": "^1.16.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -30,6 +31,7 @@
       },
       "devDependencies": {
         "@tailwindcss/vite": "^4.3.0",
+        "@types/leaflet": "^1.9.21",
         "@types/node": "^25.9.1",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
@@ -2584,6 +2586,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "25.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
@@ -2995,6 +3014,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",

frontend/package.json

@@ -24,6 +24,7 @@
     "ag-grid-react": "^35.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "leaflet": "^1.9.4",
     "lucide-react": "^1.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -31,6 +32,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
+    "@types/leaflet": "^1.9.21",
     "@types/node": "^25.9.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",

frontend/package.json.md5

@@ -1 +1 @@
-687705a933fcf09f20bdb5083955a417
+c98874941451e4e6ffa48f22c1d764e7

frontend/src/App.tsx

@@ -39,6 +39,7 @@ import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { SettingsModal } from '@/components/SettingsModal';
 import { QSOEditModal } from '@/components/QSOEditModal';
 import { BandMap } from '@/components/BandMap';
+import { MainMap } from '@/components/MainMap';
 import { RecentQSOsGrid } from '@/components/RecentQSOsGrid';
 import { ShutdownProgress } from '@/components/ShutdownProgress';
 import { ClusterGrid } from '@/components/ClusterGrid';
@@ -561,6 +562,17 @@ export default function App() {
   const [clusterModeFilter, setClusterModeFilter] = useState<Set<SpotModeCat>>(new Set());
   const [clusterSearch, setClusterSearch] = useState('');
   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';
+      localStorage.setItem('bandmap.side', next);
+      return next;
+    });
+  }, []);
   type SortKey = 'time' | 'call' | 'freq' | 'band' | 'mode' | 'spotter' | 'source';
   const [clusterSort, setClusterSort] = useState<{ key: SortKey; dir: 'asc' | 'desc' }>({ key: 'time', dir: 'desc' });
   // Cached per-call slot status: "new" | "new-band" | "new-slot" | "worked".
@@ -2121,7 +2133,8 @@ export default function App() {
 
       {/* ===== LOWER: tabs+table | call history | (optional) 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 ? 'grid-cols-[1fr_260px]' : 'grid-cols-[1fr]')}>
+      <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]')}>
         <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">
@@ -2138,7 +2151,20 @@ export default function App() {
                 )}
               </TabsTrigger>
               <TabsTrigger value="awards">Awards</TabsTrigger>
-              <TabsTrigger value="propagation">Propagation</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
+                type="button"
+                disabled={!callsign.trim()}
+                title={callsign.trim() ? `Open ${callsign.trim().toUpperCase()} on QRZ.com` : 'Enter a callsign first'}
+                onClick={() => {
+                  const c = callsign.trim().toUpperCase().split('/').map(encodeURIComponent).join('/');
+                  if (c) OpenExternalURL(`https://www.qrz.com/db/${c}`).catch((e) => setError(String(e?.message ?? e)));
+                }}
+                className="inline-flex items-center justify-center gap-1 whitespace-nowrap px-3 py-1.5 text-xs font-medium text-muted-foreground border-b-2 border-transparent transition-all hover:text-foreground disabled:pointer-events-none disabled:opacity-50 -mb-px"
+              >
+                QRZ.com ↗
+              </button>
               {qslTabOpen && (
                 <TabsTrigger value="qsl" className="gap-1.5">
                   QSL Manager
@@ -2581,19 +2607,28 @@ export default function App() {
               </TabsContent>
             )}
 
-            {(['main','awards','propagation'] as const).map((t) => (
-              <TabsContent key={t} value={t} className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-2 py-12">
-                <Hash className="size-10 opacity-30" />
-                <div className="text-base font-semibold text-foreground/70">{t[0].toUpperCase() + t.slice(1)}</div>
-                <div className="text-xs">Module coming soon.</div>
-              </TabsContent>
-            ))}
+            <TabsContent value="main" className="flex-1 min-h-0 p-0">
+              <MainMap
+                fromGrid={station.my_grid}
+                toGrid={grid}
+                fromLabel={station.callsign}
+                toLabel={callsign}
+              />
+            </TabsContent>
+
+            <TabsContent value="awards" className="flex-1 flex flex-col items-center justify-center text-muted-foreground gap-2 py-12">
+              <Hash className="size-10 opacity-30" />
+              <div className="text-base font-semibold text-foreground/70">Awards</div>
+              <div className="text-xs">Module coming soon.</div>
+            </TabsContent>
           </Tabs>
         </section>
 
         {showBandMap && (
-          <div className="bg-card border border-border rounded-lg shadow-sm flex flex-col min-h-0 overflow-hidden">
+          <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}

frontend/src/components/BandMap.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Minus, Plus, Crosshair, X } from 'lucide-react';
+import { Minus, Plus, Crosshair, X, PanelLeft, PanelRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { spotStatusKey, inferSpotMode, spotModeCategory } from '@/lib/spot';
 
@@ -32,6 +32,8 @@ interface Props {
   currentFreqHz: number;
   onSpotClick: (s: Spot) => void;
   onClose?: () => void;
+  side?: 'left' | 'right';
+  onToggleSide?: () => void;
 }
 
 const BAND_RANGES: Record<string, [number, number]> = {
@@ -144,7 +146,7 @@ const BOT_PAD = 14;    // the top-most freq label isn't clipped at y=0
 // last; ties broken by closeness to the rig freq).
 const MAX_VISIBLE_SPOTS = 30;
 
-export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose }: Props) {
+export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, onClose, side = 'right', onToggleSide }: Props) {
   const range = BAND_RANGES[band];
   const segments = SEGMENT_COLORS[band] ?? [];
   const [zoomIdx, setZoomIdx] = useState(0);
@@ -365,6 +367,13 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
           title="Scroll to current rig frequency">
           <Crosshair className="size-3" />
         </button>
+        {onToggleSide && (
+          <button type="button" onClick={onToggleSide}
+            className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"
+            title={side === 'right' ? 'Move band map to the left' : 'Move band map to the right'}>
+            {side === 'right' ? <PanelLeft className="size-3" /> : <PanelRight className="size-3" />}
+          </button>
+        )}
         {onClose && (
           <button type="button" onClick={onClose}
             className="size-5 inline-flex items-center justify-center rounded hover:bg-muted"

frontend/src/components/MainMap.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef } from 'react';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween } from '@/lib/maidenhead';
+
+// MainMap — Log4OM-style dual map for the Main tab:
+//  • Left: a world map with the great-circle path drawn from the operator to
+//    the contacted station, plus distance + short/long-path azimuth.
+//  • Right: a street map zoomed onto the contacted station's grid locator.
+// Built on Leaflet + free OSM/Carto tiles (no API key). Endpoints use
+// circleMarkers / divIcons so we don't depend on Leaflet's image assets.
+
+interface Props {
+  fromGrid: string;   // operator grid (active profile)
+  toGrid: string;     // contacted-station grid
+  fromLabel?: string; // operator callsign
+  toLabel?: string;   // DX callsign
+}
+
+const CARTO_LIGHT = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
+const OSM = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+const CARTO_ATTR = '© OpenStreetMap © CARTO';
+const OSM_ATTR = '© OpenStreetMap contributors';
+
+function dot(color: string): L.DivIcon {
+  return L.divIcon({
+    className: '',
+    html: `<span style="display:block;width:12px;height:12px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4)"></span>`,
+    iconSize: [12, 12],
+    iconAnchor: [6, 6],
+  });
+}
+
+export function MainMap({ fromGrid, toGrid, fromLabel, toLabel }: Props) {
+  const worldRef = useRef<HTMLDivElement>(null);
+  const locatorRef = useRef<HTMLDivElement>(null);
+  const worldMap = useRef<L.Map | null>(null);
+  const locatorMap = useRef<L.Map | null>(null);
+  // Layers we add/remove as the QSO changes (kept separate from the basemap).
+  const worldOverlay = useRef<L.LayerGroup | null>(null);
+  const locatorOverlay = useRef<L.LayerGroup | null>(null);
+
+  // One-time map creation.
+  useEffect(() => {
+    if (worldRef.current && !worldMap.current) {
+      const m = L.map(worldRef.current, { zoomControl: true, attributionControl: true, worldCopyJump: true })
+        .setView([20, 0], 1);
+      L.tileLayer(CARTO_LIGHT, { attribution: CARTO_ATTR, subdomains: 'abcd', maxZoom: 19 }).addTo(m);
+      worldOverlay.current = L.layerGroup().addTo(m);
+      worldMap.current = m;
+    }
+    if (locatorRef.current && !locatorMap.current) {
+      const m = L.map(locatorRef.current, { zoomControl: true, attributionControl: true })
+        .setView([20, 0], 2);
+      L.tileLayer(OSM, { attribution: OSM_ATTR, maxZoom: 19 }).addTo(m);
+      locatorOverlay.current = L.layerGroup().addTo(m);
+      locatorMap.current = m;
+    }
+    // The Main tab may have just become visible — fix tile sizing.
+    const t = window.setTimeout(() => {
+      worldMap.current?.invalidateSize();
+      locatorMap.current?.invalidateSize();
+    }, 80);
+    return () => window.clearTimeout(t);
+  }, []);
+
+  // Redraw overlays whenever the operator/DX grids change.
+  useEffect(() => {
+    const wm = worldMap.current, lm = locatorMap.current;
+    const wo = worldOverlay.current, lo = locatorOverlay.current;
+    if (!wm || !lm || !wo || !lo) return;
+    wo.clearLayers();
+    lo.clearLayers();
+
+    const from = gridToLatLon(fromGrid);
+    const to = gridToLatLon(toGrid);
+
+    // ── Left: world + great-circle arc ──
+    if (from) L.marker([from.lat, from.lon], { icon: dot('#059669'), title: fromLabel || 'Home' }).addTo(wo);
+    if (to) {
+      L.marker([to.lat, to.lon], { icon: dot('#dc2626'), title: toLabel || 'DX' })
+        .bindTooltip(toLabel || toGrid, { permanent: false, direction: 'top' }).addTo(wo);
+    }
+    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) {
+      wm.setView([to.lat, to.lon], 3);
+    } else if (from) {
+      wm.setView([from.lat, from.lon], 3);
+    }
+
+    // ── Right: street map on the DX locator ──
+    if (to) {
+      L.marker([to.lat, to.lon], { icon: dot('#dc2626'), title: toLabel || 'DX' })
+        .bindTooltip(`${toLabel ? toLabel + ' · ' : ''}${toGrid.toUpperCase()}`, { permanent: false, direction: 'top' })
+        .addTo(lo);
+      const b = gridSquareBounds(toGrid);
+      if (b) {
+        L.rectangle([[b.south, b.west], [b.north, b.east]], { color: '#dc2626', weight: 1, fillOpacity: 0.06 }).addTo(lo);
+      }
+      lm.setView([to.lat, to.lon], toGrid.trim().length >= 6 ? 9 : 7);
+    } else if (from) {
+      lm.setView([from.lat, from.lon], 5);
+    }
+    setTimeout(() => { wm.invalidateSize(); lm.invalidateSize(); }, 0);
+  }, [fromGrid, toGrid, fromLabel, toLabel]);
+
+  const path = pathBetween(fromGrid, toGrid);
+
+  return (
+    <div className="flex flex-col h-full min-h-0 gap-2 p-2">
+      <div className="grid grid-cols-2 gap-2 flex-1 min-h-0">
+        <div className="relative rounded-lg overflow-hidden border border-border">
+          <div ref={worldRef} className="absolute inset-0" />
+          {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
+                <span className="text-muted-foreground"> · LP</span> {Math.round(path.distanceLong).toLocaleString()} km</div>
+              <div><span className="text-muted-foreground">Az SP</span> {Math.round(path.bearingShort)}°
+                <span className="text-muted-foreground"> · LP</span> {Math.round(path.bearingLong)}°</div>
+            </div>
+          )}
+        </div>
+        <div className="relative rounded-lg overflow-hidden border border-border">
+          <div ref={locatorRef} className="absolute inset-0" />
+          {!gridToLatLon(toGrid) && (
+            <div className="absolute inset-0 z-[500] flex items-center justify-center text-xs text-muted-foreground bg-card/60 pointer-events-none">
+              Enter a grid or look up the callsign to center the map.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/lib/maidenhead.ts

@@ -49,6 +49,19 @@ export function gridToLatLon(grid: string): { lat: number; lon: number } | null
   return { lat, lon };
 }
 
+// gridSquareBounds returns the SW/NE corners of a Maidenhead square so a map
+// can draw its outline. Half-extents shrink with locator precision.
+export function gridSquareBounds(grid: string):
+  { south: number; west: number; north: number; east: number } | null {
+  const c = gridToLatLon(grid);
+  if (!c) return null;
+  const g = grid.trim();
+  let dLon = 1, dLat = 0.5; // 4-char square: 2°×1°
+  if (g.length >= 6) { dLon = 1 / 24; dLat = 0.5 / 24; }
+  if (g.length >= 8) { dLon = 1 / 24 / 10; dLat = 0.5 / 24 / 10; }
+  return { south: c.lat - dLat, north: c.lat + dLat, west: c.lon - dLon, east: c.lon + dLon };
+}
+
 // PathInfo describes both short and long great-circle path between two
 // points. Bearing in degrees from true north (0–360). Distance in km.
 export interface PathInfo {
@@ -88,5 +101,41 @@ export function pathBetween(fromGrid: string, toGrid: string): PathInfo | null {
   };
 }
 
+// greatCirclePoints returns n+1 [lat, lon] points along the short great-circle
+// path between two lat/lon points (spherical slerp). Longitudes are unwrapped
+// to stay continuous (no ±180 jump) so a map polyline draws as one smooth arc.
+export function greatCirclePoints(
+  lat1: number, lon1: number, lat2: number, lon2: number, n = 96,
+): [number, number][] {
+  const φ1 = toRad(lat1), λ1 = toRad(lon1);
+  const φ2 = toRad(lat2), λ2 = toRad(lon2);
+  // Angular distance between the two points.
+  const sinΔφ = Math.sin((φ2 - φ1) / 2);
+  const sinΔλ = Math.sin((λ2 - λ1) / 2);
+  const h = sinΔφ * sinΔφ + Math.cos(φ1) * Math.cos(φ2) * sinΔλ * sinΔλ;
+  const d = 2 * Math.asin(Math.min(1, Math.sqrt(h)));
+  const out: [number, number][] = [];
+  if (d === 0) return [[lat1, lon1]];
+  let prevLon = NaN;
+  for (let i = 0; i <= n; i++) {
+    const f = i / n;
+    const A = Math.sin((1 - f) * d) / Math.sin(d);
+    const B = Math.sin(f * d) / Math.sin(d);
+    const x = A * Math.cos(φ1) * Math.cos(λ1) + B * Math.cos(φ2) * Math.cos(λ2);
+    const y = A * Math.cos(φ1) * Math.sin(λ1) + B * Math.cos(φ2) * Math.sin(λ2);
+    const z = A * Math.sin(φ1) + B * Math.sin(φ2);
+    const lat = toDeg(Math.atan2(z, Math.sqrt(x * x + y * y)));
+    let lon = toDeg(Math.atan2(y, x));
+    // Unwrap longitude so the polyline never snaps across the whole map.
+    if (!Number.isNaN(prevLon)) {
+      while (lon - prevLon > 180) lon -= 360;
+      while (lon - prevLon < -180) lon += 360;
+    }
+    prevLon = lon;
+    out.push([lat, lon]);
+  }
+  return out;
+}
+
 function toRad(d: number): number { return (d * Math.PI) / 180; }
 function toDeg(r: number): number { return (r * 180) / Math.PI; }