feat: the play button stops the transmission while it is going out

A second press restarted the message from the beginning. What the operator wants
there is to cut it short — enough heard, or pressed by mistake with the
transmitter keyed — and then to be able to send it again at once.

It now shows a stop square while playing and releases the PTT through the same
path the natural end uses, so nothing is left keyed. Together with the device
handover fixed a moment ago, sending again immediately afterwards works.

frontend/src/App.tsx

@@ -794,7 +794,15 @@ export default function App() {
   const resumeRecording = () => {
     QSOAudioResume().then((ok) => { if (ok) { setRecStopped(false); setRecTick((t) => t + 1); } }).catch(() => {});
   };
+  // One button, two jobs: play, and stop what is playing.
+  //
+  // A second press used to RESTART the message from the beginning. What an
+  // operator wants there is to cut it short — they have heard enough, or they
+  // pressed it by mistake with the transmitter keyed — and then to be able to
+  // send it again straight away. Stopping releases the PTT through the same
+  // path the natural end uses.
   const playRecordingOnAir = () => {
+    if (dvkStat.playing) { DVKStop(); return; }
     QSOAudioPlayOnAir().catch((e: any) => setError(String(e?.message ?? e)));
   };
   const refreshManualRecReady = () => { QSOAudioManualReady().then(setManualRecReady).catch(() => {}); };
@@ -3775,10 +3783,11 @@ export default function App() {
               type="button"
               onMouseDown={(e) => e.preventDefault()}
               onClick={playRecordingOnAir}
-              title={t('rec.playOnAir')}
-              className="inline-flex items-center justify-center size-4 rounded text-success hover:bg-success/15"
+              title={dvkStat.playing ? t('rec.stopPlaying') : t('rec.playOnAir')}
+              className={cn('inline-flex items-center justify-center size-4 rounded',
+                dvkStat.playing ? 'text-destructive hover:bg-destructive-muted' : 'text-success hover:bg-success/15')}
             >
-              ▶
+              {dvkStat.playing ? <span className="size-2 bg-current" /> : '▶'}
             </button>
           )}
           <button