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.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -18,6 +18,7 @@ import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { loadLocal, loadRemote, saveState, seedLocal } from '@/lib/gridPrefs';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { gridToLatLon, pathBetweenLatLon } from '@/lib/maidenhead';
|
||||
import { rowStyleFor, type RowColorSettings } from '@/lib/rowColors';
|
||||
|
||||
// Register every Community feature once. v32+ requires explicit registration;
|
||||
// AllCommunityModule keeps it simple and pulls in sort/filter/resize/reorder/
|
||||
@@ -80,6 +81,8 @@ type Props = {
|
||||
// One column per defined award; the cell shows the reference this QSO counts
|
||||
// for (from row.award_refs[CODE], attached by the parent). Hidden by default.
|
||||
awardCols?: { code: string; name: string }[];
|
||||
// Whole-row colouring by QSL / LoTW status (Settings → Appearance).
|
||||
rowColors?: RowColorSettings | null;
|
||||
};
|
||||
|
||||
const BASE_COLSTATE_KEY = 'hamlog.qsoColState.v2';
|
||||
@@ -303,7 +306,7 @@ const sanitizeAwardCols = (st: any[] | null | undefined): any[] =>
|
||||
return rest;
|
||||
});
|
||||
|
||||
export function RecentQSOsGrid({ rows, myGrid, selectAllSignal, selectRowSignal, rowDragCall, passOrder, onGridApi, storageKey, onRowDoubleClicked, onRowClicked, onRowSelected, onRowSelectedQso, onUpdateFromCty, onUpdateFromQRZ, onUpdateFromClublog, onSendTo, onSendRecording, onSendEQSL, onBulkEdit, onExportSelected, onExportSelectedFields, onExportFiltered, onExportCabrilloSelected, onExportCabrilloFiltered, onDelete, onFilteredCountChange, awardCols }: Props) {
|
||||
export function RecentQSOsGrid({ rows, myGrid, selectAllSignal, selectRowSignal, rowDragCall, passOrder, onGridApi, storageKey, onRowDoubleClicked, onRowClicked, onRowSelected, onRowSelectedQso, onUpdateFromCty, onUpdateFromQRZ, onUpdateFromClublog, onSendTo, onSendRecording, onSendEQSL, onBulkEdit, onExportSelected, onExportSelectedFields, onExportFiltered, onExportCabrilloSelected, onExportCabrilloFiltered, onDelete, onFilteredCountChange, awardCols, rowColors }: Props) {
|
||||
const { t } = useI18n();
|
||||
const gridRef = useRef<any>(null);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
@@ -700,6 +703,7 @@ export function RecentQSOsGrid({ rows, myGrid, selectAllSignal, selectRowSignal,
|
||||
animateRows={false}
|
||||
suppressCellFocus
|
||||
getRowId={(p) => String((p.data as any).id)}
|
||||
getRowStyle={(p) => rowStyleFor(p.data, rowColors ?? null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,6 +77,7 @@ import { getDateFormat, setDateFormat, type DateFormat } from '@/lib/dateFormat'
|
||||
import { useI18n, FlagGB, FlagFR, type Lang } from '@/lib/i18n';
|
||||
import { useTheme, CONCRETE_THEMES, type ThemeChoice } from '@/lib/theme';
|
||||
import { OperatingPanel } from '@/components/OperatingPanel';
|
||||
import { AppearancePanel } from '@/components/AppearancePanel';
|
||||
import { UDPIntegrationsPanel } from '@/components/UDPIntegrationsPanel';
|
||||
|
||||
type LookupSettings = LookupSettingsForm;
|
||||
@@ -176,6 +177,7 @@ interface Props {
|
||||
`disabled: true` greys them out and shows the "coming soon" placeholder. */
|
||||
type SectionId =
|
||||
| 'general'
|
||||
| 'appearance'
|
||||
| 'email'
|
||||
| 'station'
|
||||
| 'profiles'
|
||||
@@ -266,6 +268,7 @@ function buildTree(flexAvailable: boolean, t: (k: string) => string): TreeNode[]
|
||||
{
|
||||
kind: 'group', label: t('nav.software'), icon: Cog, defaultOpen: true, children: [
|
||||
{ kind: 'item', label: t('sec.general'), id: 'general' },
|
||||
{ kind: 'item', label: t('sec.appearance'), id: 'appearance' },
|
||||
{ kind: 'item', label: t('sec.email'), id: 'email' },
|
||||
{ kind: 'item', label: t('sec.lookup'), id: 'lookup' },
|
||||
{ kind: 'group', label: t('nav.lists'), icon: Database, defaultOpen: true, children: [
|
||||
@@ -290,7 +293,7 @@ function buildTree(flexAvailable: boolean, t: (k: string) => string): TreeNode[]
|
||||
// Map section id → i18n key (breadcrumb / placeholders).
|
||||
const SECTION_KEY: Partial<Record<SectionId, string>> = {
|
||||
station: 'sec.station', profiles: 'sec.profiles', operating: 'sec.operating', confirmations: 'sec.confirmations',
|
||||
'external-services': 'sec.external', lookup: 'sec.lookup', 'lists-bands': 'sec.bands', 'lists-modes': 'sec.modes',
|
||||
'external-services': 'sec.external', appearance: 'sec.appearance', lookup: 'sec.lookup', 'lists-bands': 'sec.bands', 'lists-modes': 'sec.modes',
|
||||
cluster: 'sec.cluster', backup: 'sec.backup', database: 'sec.database', autostart: 'sec.autostart', udp: 'sec.udp',
|
||||
adifmon: 'sec.adifmon',
|
||||
webpublish: 'sec.webpublish',
|
||||
@@ -6163,6 +6166,7 @@ export function SettingsModal({ onClose, onSaved, initialSection, onMainPaneChan
|
||||
// Map sections to their content + icon (for placeholder).
|
||||
const PANELS: Record<SectionId, () => JSX.Element> = {
|
||||
general: GeneralPanel,
|
||||
appearance: () => <AppearancePanel />,
|
||||
email: EmailPanel,
|
||||
station: StationPanel,
|
||||
profiles: ProfilesPanel,
|
||||
|
||||
Reference in New Issue
Block a user