feat(appearance): colour log rows by QSL status, and fix UDP QSO numbering

New Settings → Appearance section: whole-row colouring in the log grid driven by QSL / LoTW state, each rule with its own colour from a palette or a free picker. What Logger32 does, with one difference that matters — the colour is applied as a 24% tint, not a fill. Logger32's grid is white; this one is dark, and a saturated user-picked colour behind white text is unreadable at exactly the moment the operator is scanning for what still needs sending. Rules are ORDERED and the first match wins, because a contact is usually several of these at once: one confirmed on LoTW and by card is confirmed, not "sent, awaiting reply". The order lives in the data so the panel can show the rules in the order they actually apply, numbered. The colour is interpolated into a CSS color-mix(), so anything that is not plainly #rrggbb is refused on the way in and falls back to the default. Also fixes the QSO number column, which was empty for contacts logged from WSJT-X: that path inserts through the repo directly and never reached AddQSO. Rather than chase each of the remaining bulk-insert paths — the POTA hunter import and the LoTW/QRZ "add what I was missing" passes, which insert OLD dates and so shift every number after them — the index now checks its length against a COUNT and rebuilds when they disagree. One indexed count beats remembering to invalidate in a place that does not exist yet.
2026-08-13 01:06:21 +02:00
parent 2484cd2515
commit 858c04d267
13 changed files with 378 additions and 7 deletions
@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { GetRowColors, SaveRowColors } from '../../wailsjs/go/main/App';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useI18n } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import type { RowColorSettings } from '@/lib/rowColors';
+
+// A fixed palette plus a free picker. Muted values on purpose: they are
+// composited at low opacity over a dark grid, where a saturated colour reads as
+// an error state rather than a status.
+const PALETTE = [
+  '#16a34a', '#0ea5e9', '#f59e0b', '#a855f7',
+  '#dc2626', '#14b8a6', '#eab308', '#ec4899',
+  '#64748b', '#84cc16', '#6366f1', '#f97316',
+];
+
+// The rule ids the backend orders; the labels live here so a translation never
+// travels through the settings row.
+const LABELS: Record<string, string> = {
+  confirmed_lotw: 'appr.confirmedLotw',
+  confirmed_paper: 'appr.confirmedPaper',
+  sent_waiting: 'appr.sentWaiting',
+  to_send: 'appr.toSend',
+};
+
+export function AppearancePanel() {
+  const { t } = useI18n();
+  const [cfg, setCfg] = useState<RowColorSettings | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try { setCfg((await GetRowColors()) as any); } catch { /* defaults on the backend */ }
+    })();
+  }, []);
+
+  const save = (next: RowColorSettings) => {
+    setCfg(next);
+    SaveRowColors(next as any).catch(() => {});
+  };
+  const patchRule = (id: string, patch: Partial<{ color: string; enabled: boolean }>) => {
+    if (!cfg) return;
+    save({ ...cfg, rules: cfg.rules.map((r) => (r.id === id ? { ...r, ...patch } : r)) });
+  };
+
+  if (!cfg) return <div className="p-1 text-sm text-muted-foreground">…</div>;
+
+  return (
+    <div className="space-y-4">
+      <label className="flex items-start gap-2 text-sm cursor-pointer">
+        <Checkbox checked={cfg.enabled} className="mt-0.5"
+          onCheckedChange={(c) => save({ ...cfg, enabled: !!c })} />
+        <span>{t('appr.enable')} <span className="text-xs text-muted-foreground">{t('appr.enableHint')}</span></span>
+      </label>
+
+      {cfg.enabled && (
+        <div className="space-y-2">
+          {/* Order matters and is shown: a contact is usually several of these at
+              once, and the first match wins. */}
+          <p className="text-xs text-muted-foreground">{t('appr.orderHint')}</p>
+          {cfg.rules.map((r, i) => (
+            <div key={r.id} className="rounded-lg border border-border/60 p-2.5 space-y-2"
+              style={{ backgroundColor: r.enabled ? `color-mix(in srgb, ${r.color} 24%, transparent)` : undefined }}>
+              <label className="flex items-center gap-2 text-sm cursor-pointer">
+                <Checkbox checked={r.enabled} onCheckedChange={(c) => patchRule(r.id, { enabled: !!c })} />
+                <span className="font-mono text-xs text-muted-foreground">{i + 1}.</span>
+                <span className="font-medium">{t(LABELS[r.id] ?? r.id)}</span>
+              </label>
+              {r.enabled && (
+                <div className="flex items-center gap-1.5 flex-wrap pl-6">
+                  {PALETTE.map((c) => (
+                    <button key={c} type="button" title={c}
+                      onClick={() => patchRule(r.id, { color: c })}
+                      className={cn('size-6 rounded-md border-2 transition-transform hover:scale-110',
+                        r.color.toLowerCase() === c ? 'border-foreground' : 'border-transparent')}
+                      style={{ backgroundColor: c }} />
+                  ))}
+                  <input type="color" value={r.color} title={t('appr.custom')}
+                    onChange={(e) => patchRule(r.id, { color: e.target.value })}
+                    className="size-6 rounded-md border border-border bg-transparent p-0 cursor-pointer" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}