map

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"