fix(rotator): put the SP/LP readout inside the compass itself

It went under the Station Control rotator; the compass that wanted it is the docked one beside the entry strip. Both are the same RotorCompass, so the readout moves INTO that component: every compass in the app carries it, and no caller draws its own. The bezel already showed the short path as a red marker, but a marker is a direction, not a number — and the numbers in the status bar are 10px, which is what prompted this. Clickable only when the caller passed onGoto, since a compass rendered without one cannot turn anything and a button that does nothing is worse than a label.
2026-08-13 11:45:49 +02:00
parent 700b688fc0
commit 784d809290
7 changed files with 194 additions and 49 deletions
@@ -188,6 +188,31 @@ 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">
+          {([['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)}°`}
+            </button>
+          ))}
+        </div>
      </div>
    </section>
  );