feat(appearance): the band/mode matrix colours can be chosen
The PH/CW/DIG grid in the Stats panel is the fastest read in the app and its palette was fixed per theme. Settings -> Appearance now offers the six: the four status fills, the never-worked fill, and the ring on the cell being entered. Stored as OVERRIDES, not as a palette. Each of the twelve themes ships an --mx-* ramp tuned to its own background, so an operator who only wants a different green must not thereby freeze the other four to the theme they happened to be using that day. An empty value means "whatever the theme says"; the chosen ones are stamped inline on <html>, where they win over every theme; switching the feature off hands the colours straight back. The pickers are seeded from what the matrix is painting at that moment rather than from a fixed palette, so the choice starts from the colours in front of the operator. A new --mx-cur token carries the current-entry ring: it follows --warning by default, so it stays theme-correct on all twelve, but can be recoloured without dragging every other warning in the app along. The legend under the matrix and its cell tooltips were hardcoded English. They now go through t() with the same keys as the pickers, so the grid and the settings cannot disagree about which green is which.
This commit is contained in:
@@ -1,9 +1,13 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { GetRowColors, SaveRowColors } from '../../wailsjs/go/main/App';
|
||||
import { GetMatrixColors, GetRowColors, SaveMatrixColors, 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';
|
||||
import {
|
||||
MATRIX_VARS, applyMatrixColors, effectiveMatrixColor, emptyMatrixColors,
|
||||
type MatrixColors,
|
||||
} from '@/lib/matrixColors';
|
||||
|
||||
// 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
|
||||
@@ -30,6 +34,111 @@ const CHANNEL_LABELS: Record<string, string> = {
|
||||
qsl: 'appr.chQsl', lotw: 'LoTW', eqsl: 'eQSL', qrz: 'QRZ.com',
|
||||
};
|
||||
|
||||
// MatrixColorsSection recolours the band/mode matrix — the PH/CW/DIG grid in the
|
||||
// Stats panel.
|
||||
//
|
||||
// The pickers are seeded from what the matrix is painting RIGHT NOW (the active
|
||||
// theme's ramp, or an existing override), not from a fixed palette: the operator
|
||||
// starts from the colours in front of them and moves one, instead of being
|
||||
// handed six values that may belong to a theme they stopped using. Every change
|
||||
// is applied to the live document at once, so the sample row below is the real
|
||||
// thing rather than a mock-up of it.
|
||||
function MatrixColorsSection() {
|
||||
const { t } = useI18n();
|
||||
const [cfg, setCfg] = useState<MatrixColors | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
setCfg((await GetMatrixColors()) as any);
|
||||
} catch {
|
||||
setCfg(emptyMatrixColors());
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const save = (next: MatrixColors) => {
|
||||
setCfg(next);
|
||||
applyMatrixColors(next); // live, before the round trip — the panel must not lag the choice
|
||||
SaveMatrixColors(next as any).catch(() => {});
|
||||
};
|
||||
|
||||
// Turning it ON with nothing stored would change nothing at all and read as a
|
||||
// broken switch, so the empty slots are filled from the theme's current ramp:
|
||||
// the operator sees six swatches that match the grid and edits from there.
|
||||
const enable = (on: boolean) => {
|
||||
if (!cfg) return;
|
||||
if (!on) {
|
||||
save({ ...cfg, enabled: false });
|
||||
return;
|
||||
}
|
||||
const seeded = { ...cfg, enabled: true };
|
||||
for (const { key, cssVar } of MATRIX_VARS) {
|
||||
if (!String(seeded[key] ?? '').trim()) seeded[key] = effectiveMatrixColor(cssVar);
|
||||
}
|
||||
save(seeded);
|
||||
};
|
||||
|
||||
// Reset clears the overrides but keeps the section switched on, then re-seeds
|
||||
// from the theme — "back to the theme's colours", which is what an operator
|
||||
// means by reset here, rather than "switch the whole feature off".
|
||||
const reset = () => {
|
||||
if (!cfg) return;
|
||||
applyMatrixColors({ ...emptyMatrixColors(), enabled: false });
|
||||
const seeded = { ...emptyMatrixColors(), enabled: true };
|
||||
for (const { key, cssVar } of MATRIX_VARS) seeded[key] = effectiveMatrixColor(cssVar);
|
||||
save(seeded);
|
||||
};
|
||||
|
||||
if (!cfg) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3 border-t border-border/60 pt-4">
|
||||
<label className="flex items-start gap-2 text-sm cursor-pointer">
|
||||
<Checkbox checked={cfg.enabled} className="mt-0.5" onCheckedChange={(c) => enable(!!c)} />
|
||||
<span>
|
||||
{t('appr.matrixEnable')}{' '}
|
||||
<span className="text-xs text-muted-foreground">{t('appr.matrixHint')}</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
{cfg.enabled && (
|
||||
<div className="space-y-3">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-2">
|
||||
{MATRIX_VARS.map(({ key, cssVar, label }) => (
|
||||
<label key={key} className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input
|
||||
type="color"
|
||||
value={String(cfg[key] || '').trim() || effectiveMatrixColor(cssVar)}
|
||||
onChange={(e) => save({ ...cfg, [key]: e.target.value })}
|
||||
className="size-6 rounded-md border border-border bg-transparent p-0 cursor-pointer shrink-0"
|
||||
/>
|
||||
{t(label)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* The matrix as it will actually look: same tokens, same shapes. */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-xs text-muted-foreground w-10 shrink-0">{t('appr.matrixSample')}</span>
|
||||
<span className="inline-block w-7 h-5 rounded bg-mx-call-conf" />
|
||||
<span className="inline-block w-7 h-5 rounded bg-mx-call-work" />
|
||||
<span className="inline-block w-7 h-5 rounded bg-mx-dx-conf" />
|
||||
<span className="inline-block w-7 h-5 rounded bg-mx-dx-work" />
|
||||
<span className="inline-block w-7 h-5 rounded bg-mx-none" />
|
||||
<span className="inline-block w-7 h-5 rounded bg-mx-none ring-2 ring-mx-cur ring-inset" />
|
||||
</div>
|
||||
|
||||
<button type="button" onClick={reset}
|
||||
className="text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground">
|
||||
{t('appr.matrixReset')}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppearancePanel() {
|
||||
const { t } = useI18n();
|
||||
const [cfg, setCfg] = useState<RowColorSettings | null>(null);
|
||||
@@ -148,6 +257,8 @@ export function AppearancePanel() {
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<MatrixColorsSection />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user