chore: release v0.21.3

frontend/src/components/AlertsModal.tsx

@@ -70,6 +70,13 @@ export function AlertsModal({ onClose, bands, modes, countries }: {
   const { t } = useI18n();
   const [rules, setRules] = useState<Rule[]>([]);
   const [draft, setDraft] = useState<Rule | null>(null);
+  // Raw text of the callsigns box, kept separately from draft.calls. The list is
+  // normalised (trim + drop empties) on the way into the rule, so binding the
+  // textarea straight to calls.join('\n') round-trips every keystroke through
+  // that normalisation — a trailing newline or space is stripped before React
+  // re-renders, and Enter/Space appear to do nothing. Editing the raw text and
+  // deriving the list from it keeps typing intact.
+  const [callsText, setCallsText] = useState('');
   const [tab, setTab] = useState('def'); // active editor tab (reset to Definition on new/select)
   const [emailTo, setEmailTo] = useState('');
   const [err, setErr] = useState('');
@@ -80,6 +87,12 @@ export function AlertsModal({ onClose, bands, modes, countries }: {
   }, []);
   useEffect(() => { refresh(); GetAlertEmailTo().then((v) => setEmailTo(v || '')).catch(() => {}); }, [refresh]);
 
+  // loadDraft opens a rule in the editor — always through here, so the raw
+  // callsigns text is re-seeded from whatever rule is now being edited.
+  const loadDraft = (r: Rule | null) => {
+    setDraft(r);
+    setCallsText((r?.calls ?? []).join('\n'));
+  };
   const patch = (p: Partial<Rule>) => setDraft((d) => (d ? alerts.Rule.createFrom({ ...d, ...p }) : d));
   const toggleIn = (key: keyof Rule, v: string) => setDraft((d) => {
     if (!d) return d;
@@ -92,14 +105,14 @@ export function AlertsModal({ onClose, bands, modes, countries }: {
   async function save() {
     if (!draft) return;
     if (!draft.name.trim()) { setErr(t('altm.giveName')); return; }
-    try { const saved = await SaveAlertRule(draft); await refresh(); setDraft(saved as Rule); setErr(''); }
+    try { const saved = await SaveAlertRule(draft); await refresh(); loadDraft(saved as Rule); setErr(''); }
     catch (e: any) { setErr(String(e?.message ?? e)); }
   }
   async function del() {
     if (!draft) return;
-    if (!draft.id) { setDraft(null); return; }
+    if (!draft.id) { loadDraft(null); return; }
     if (!window.confirm(t('altm.deleteConfirm', { name: draft.name }))) return;
-    try { await DeleteAlertRule(draft.id); setDraft(null); await refresh(); }
+    try { await DeleteAlertRule(draft.id); loadDraft(null); await refresh(); }
     catch (e: any) { setErr(String(e?.message ?? e)); }
   }
 
@@ -116,12 +129,12 @@ export function AlertsModal({ onClose, bands, modes, countries }: {
           <div className="w-56 shrink-0 flex flex-col border border-border rounded-md">
             <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border/60">
               <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground flex-1">{t('altm.rules')}</span>
-              <Button variant="ghost" size="sm" className="h-6 px-1.5" onClick={() => { setDraft(emptyRule()); setTab('def'); }}><Plus className="size-3.5" /></Button>
+              <Button variant="ghost" size="sm" className="h-6 px-1.5" onClick={() => { loadDraft(emptyRule()); setTab('def'); }}><Plus className="size-3.5" /></Button>
             </div>
             <div className="flex-1 overflow-y-auto p-1">
               {rules.length === 0 && <div className="text-[11px] text-muted-foreground px-2 py-4 text-center">{t('altm.noRules')}</div>}
               {rules.map((r) => (
-                <button key={r.id} onClick={() => { setDraft(alerts.Rule.createFrom(r)); setTab('def'); }}
+                <button key={r.id} onClick={() => { loadDraft(alerts.Rule.createFrom(r)); setTab('def'); }}
                   className={cn('w-full text-left px-2 py-1.5 rounded text-xs flex items-center gap-1.5',
                     draft?.id === r.id ? 'bg-accent text-accent-foreground font-semibold' : 'hover:bg-muted/60')}>
                   <span className={cn('size-1.5 rounded-full shrink-0', r.enabled ? 'bg-success' : 'bg-muted-foreground/40')} />
@@ -187,8 +200,11 @@ export function AlertsModal({ onClose, bands, modes, countries }: {
                       <Label className="text-xs">{t('altm.callsigns')}</Label>
                       <textarea className="w-full h-52 rounded-md border border-border bg-background p-2 text-xs font-mono resize-none"
                         placeholder={'DL1ABC\nIW3*\n*/P'}
-                        value={(draft.calls ?? []).join('\n')}
-                        onChange={(e) => patch({ calls: e.target.value.split('\n').map((x) => x.trim()).filter(Boolean) })} />
+                        value={callsText}
+                        onChange={(e) => {
+                          setCallsText(e.target.value);
+                          patch({ calls: e.target.value.split('\n').map((x) => x.trim()).filter(Boolean) });
+                        }} />
                     </div>
                     <div className="space-y-1">
                       <Label className="text-xs">{t('altm.countries')}</Label>