chore: release v0.25.9

frontend/src/components/RotorCompass.tsx

@@ -5,12 +5,13 @@
 // when an Ultrabeam is bidirectional, the opposite one when reversed); a small
 // red marker on the bezel shows the short-path bearing to the DX. Click the dial
 // to turn the antenna there.
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { geoAzimuthalEquidistant, geoPath, geoGraticule10 } from 'd3-geo';
 import { feature } from 'topojson-client';
 import landTopo from 'world-atlas/land-110m.json';
-import { Compass, X } from 'lucide-react';
+import { Compass, X, Play, Square } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useI18n } from '@/lib/i18n';
 
 // Decode the coastline outline once (≈110 m simplified land polygons).
 const LAND = feature(landTopo as any, (landTopo as any).objects.land);
@@ -29,6 +30,11 @@ interface Props {
   onSelectRotor?: (i: number) => void; // switch the active rotor
   onGoto?: (az: number) => void; // click-to-turn
   onClose?: () => void;
+  // Quick-turn buttons and the azimuth box, shown only where the caller wants
+  // them: Station Control draws its own GoTo/Stop around this compass, and two
+  // sets of the same controls side by side would be nothing but confusing.
+  presets?: { label: string; azimuth: number }[];
+  onStop?: () => void;
 }
 
 const SIZE = 168;
@@ -41,7 +47,43 @@ function pt(az: number, radius: number): [number, number] {
   return [C + radius * Math.cos(a), C + radius * Math.sin(a)];
 }
 
-export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLat, centerLon, rotorEnabled, rotors, activeRotor, onSelectRotor, onGoto, onClose }: Props) {
+export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLat, centerLon, rotorEnabled, rotors, activeRotor, onSelectRotor, onGoto, onClose, presets, onStop }: Props) {
+  const { t } = useI18n();
+  // Raw text, not a number: binding the input to a normalised value makes
+  // Backspace fight the operator on the way from "230" to "23". It is parsed
+  // when it is sent, and only then.
+  const [azText, setAzText] = useState('');
+  const showControls = !!(presets || onStop);
+
+  // Which preset was just pressed, so it can light up for a moment.
+  //
+  // A rotor takes seconds to start moving and the needle barely twitches at
+  // first, so without this the only answer to "did that register?" is to press
+  // it again — which is how an antenna ends up ordered somewhere twice. The
+  // acknowledgement has to come from the button itself, at once.
+  const [flashIdx, setFlashIdx] = useState<number | null>(null);
+  const flashTimer = useRef<number | undefined>(undefined);
+  useEffect(() => () => window.clearTimeout(flashTimer.current), []);
+  const pressPreset = (i: number, az: number) => {
+    if (!onGoto) return;
+    setFlashIdx(i);
+    window.clearTimeout(flashTimer.current);
+    flashTimer.current = window.setTimeout(() => setFlashIdx(null), 450);
+    onGoto(az);
+  };
+
+  // 0-359 and nothing else. 360 is refused rather than folded to 0 — it is
+  // almost always a typo for 36 or 306, and a rotor swinging through north on a
+  // slip of the finger is worth one rejected keypress.
+  const sendAz = () => {
+    const s = azText.trim();
+    if (s === '' || !onGoto) return;
+    const n = Number(s);
+    if (!Number.isFinite(n) || !Number.isInteger(n) || n < 0 || n > 359) return;
+    onGoto(n);
+    setAzText('');
+  };
+
   const cardinals = useMemo(
     () => [ { d: 0, l: 'N' }, { d: 45, l: 'NE' }, { d: 90, l: 'E' }, { d: 135, l: 'SE' },
             { d: 180, l: 'S' }, { d: 225, l: 'SW' }, { d: 270, l: 'W' }, { d: 315, l: 'NW' } ],
@@ -72,6 +114,35 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
 
   const headLabel = headings.length ? headings[0] : null;
 
+  // Short and long path to the DX, in figures.
+  //
+  // The bezel already carries the short path as a red marker, but a marker is a
+  // direction, not a number — the same pair sits in the status bar at 10px and
+  // operators reported not being able to read it. It lives here because it
+  // belongs to the compass: every place that draws one gets the readout, instead
+  // of each caller inventing its own. Clickable when the caller can turn, like
+  // the status bar's. Built as a value because it is placed in one of two
+  // columns depending on whether the controls are shown.
+  const pathReadout = (
+    <div className="flex gap-1.5 mt-2 font-mono w-full">
+      {([['SP', bearing ?? null], ['LP', bearing == null ? null : (bearing + 180) % 360]] as const).map(([lbl, az]) => (
+        <button key={lbl} type="button" disabled={az == null || !onGoto}
+          onClick={() => { if (az != null && onGoto) onGoto(Math.round(az)); }}
+          title={az == null ? '' : `${lbl} ${Math.round(az)}°`}
+          className={
+            'flex-1 rounded-md border py-1 text-xs font-semibold tabular-nums transition-colors active:scale-95 ' +
+            (az == null
+              ? 'border-border text-muted-foreground/50 cursor-not-allowed'
+              : onGoto
+                ? 'border-info-border text-info-muted-foreground hover:bg-info-muted cursor-pointer'
+                : 'border-border text-muted-foreground cursor-default')
+          }>
+          {lbl} {az == null ? '—' : `${Math.round(az)}°`}
+        </button>
+      ))}
+    </div>
+  );
+
   return (
     <section className="flex flex-col h-full min-h-0 rounded-lg border border-border bg-card overflow-hidden">
       {/* Header — matches the WinKeyer / Voice keyer panels. */}
@@ -128,9 +199,13 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
         </div>
       )}
 
+      {/* Dial on the left, controls on the right. The controls column is sized to
+          fit WITHIN the dial's height: the widget sits in a row whose height is
+          set by the entry strip, so it may grow sideways but never downwards. */}
+      <div className="flex items-start gap-2 p-2 min-h-0">
       {/* flex-col: the readout goes BELOW the dial. This wrapper was a row, so a
           sibling of the <svg> landed beside it. */}
-      <div className="flex flex-col items-center justify-center p-2 min-h-0">
+      <div className="flex flex-col items-center justify-center min-h-0 shrink-0">
         <svg
           viewBox={`0 0 ${SIZE} ${SIZE}`}
           className={onGoto ? 'cursor-pointer select-none' : 'select-none'}
@@ -191,30 +266,85 @@ export function RotorCompass({ bearing, headings, boomHeading, pattern, centerLa
           <circle cx={C} cy={C} r={3.5} fill="#15803d" stroke="#fff" strokeWidth={1} />
         </svg>
 
-        {/* Short and long path to the DX, in figures.
-            The bezel already carries the short path as a red marker, but a
-            marker is a direction, not a number — the same pair sits in the
-            status bar at 10px and operators reported not being able to read it.
-            Here because it belongs to the compass: every place that draws one
-            gets the readout, instead of each caller inventing its own.
-            Clickable when the caller can turn, like the status bar's. */}
-        <div className="flex gap-1.5 mt-2 font-mono w-full">
-          {([['SP', bearing ?? null], ['LP', bearing == null ? null : (bearing + 180) % 360]] as const).map(([lbl, az]) => (
-            <button key={lbl} type="button" disabled={az == null || !onGoto}
-              onClick={() => { if (az != null && onGoto) onGoto(Math.round(az)); }}
-              title={az == null ? '' : `${lbl} ${Math.round(az)}°`}
-              className={
-                'flex-1 rounded-md border py-1 text-xs font-semibold tabular-nums transition-colors ' +
-                (az == null
-                  ? 'border-border text-muted-foreground/50 cursor-not-allowed'
-                  : onGoto
-                    ? 'border-info-border text-info-muted-foreground hover:bg-info-muted cursor-pointer'
-                    : 'border-border text-muted-foreground cursor-default')
-              }>
-              {lbl} {az == null ? '—' : `${Math.round(az)}°`}
+        {/* With the controls column present the readout goes at the FOOT OF IT
+            instead: the dial sets the widget's height, the controls are shorter
+            than the dial, and that leftover space is exactly the right size for
+            the pair. Under the dial it would push the whole widget taller. */}
+        {!showControls && pathReadout}
+      </div>
+
+      {/* Quick turns + free azimuth + Stop. */}
+      {showControls && (
+        <div className="flex flex-col gap-1.5 flex-1 min-w-0">
+          {/* Two columns so six regions fit beside the dial rather than under
+              it. An operator with fewer keeps the same compact block. */}
+          {!!presets?.length && (
+            <div className="grid grid-cols-2 gap-1">
+              {presets.map((p, i) => (
+                <button
+                  key={`${p.label}-${i}`}
+                  type="button"
+                  disabled={!onGoto}
+                  onClick={() => pressPreset(i, p.azimuth)}
+                  title={`${p.label} — ${p.azimuth}°`}
+                  className={cn(
+                    'rounded-md border py-1 text-xs font-semibold truncate transition-all duration-150 active:scale-95',
+                    flashIdx === i
+                      // Lit, and showing the azimuth it just sent: the label alone
+                      // would only say the press landed, not what was ordered.
+                      ? 'border-success bg-success text-success-foreground scale-95'
+                      : 'border-border bg-muted/40',
+                    onGoto && flashIdx !== i ? 'hover:bg-muted' : '',
+                    !onGoto ? 'opacity-50 cursor-not-allowed' : '',
+                  )}
+                >
+                  {flashIdx === i ? `${p.azimuth}°` : p.label}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* Free azimuth: Enter sends, so the whole thing is type-three-digits
+              -and-go without reaching for the mouse. */}
+          <div className="flex gap-1">
+            <input
+              type="text"
+              inputMode="numeric"
+              value={azText}
+              onChange={(e) => setAzText(e.target.value.replace(/[^0-9]/g, '').slice(0, 3))}
+              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); sendAz(); } }}
+              placeholder={t('rotor.azPh')}
+              title={t('rotor.azTitle')}
+              disabled={!onGoto}
+              className="min-w-0 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs font-mono tabular-nums text-center disabled:opacity-50"
+            />
+            <button
+              type="button"
+              onClick={sendAz}
+              disabled={!onGoto || azText.trim() === ''}
+              title={t('rotor.go')}
+              className="flex items-center gap-1 rounded-md border border-success/60 bg-success-muted px-2 py-1 text-xs font-bold text-success-muted-foreground transition-transform hover:bg-success/25 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              <Play className="size-3" /> {t('rotor.go')}
             </button>
-          ))}
+          </div>
+
+          {onStop && (
+            <button
+              type="button"
+              onClick={onStop}
+              title={t('rotor.stop')}
+              className="flex items-center justify-center gap-1.5 rounded-md border border-destructive/60 bg-destructive/15 py-1 text-xs font-bold text-destructive hover:bg-destructive/25"
+            >
+              <Square className="size-3 fill-current" /> {t('rotor.stop')}
+            </button>
+          )}
+
+          {/* mt-auto: the readout sits at the FOOT of the column, level with the
+              bottom of the dial, instead of floating under the Stop button. */}
+          <div className="mt-auto">{pathReadout}</div>
         </div>
+      )}
       </div>
     </section>
   );