chore: release v0.26.1
This commit is contained in:
@@ -179,6 +179,31 @@ export function AppearancePanel() {
|
||||
<span>{t('appr.bandmapLotw')} <span className="text-xs text-muted-foreground">{t('appr.bandmapLotwHint')}</span></span>
|
||||
</label>
|
||||
|
||||
{/* Banding is its own thing, above the QSL rules and outside them: it says
|
||||
nothing about a contact, it only helps the eye keep its line across a
|
||||
wide table. Turning the status colours off must not take it away. */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-start gap-2 text-sm cursor-pointer">
|
||||
<Checkbox checked={(cfg as any).recent_zebra !== 'off'} className="mt-0.5"
|
||||
onCheckedChange={(c) => save({ ...cfg, recent_zebra: c ? '' : 'off' } as any)} />
|
||||
<span>{t('appr.zebra')} <span className="text-xs text-muted-foreground">{t('appr.zebraHint')}</span></span>
|
||||
</label>
|
||||
{(cfg as any).recent_zebra !== 'off' && (
|
||||
<div className="flex items-center gap-2 pl-6">
|
||||
<span className="text-xs text-muted-foreground">{t('appr.zebraColor')}</span>
|
||||
<input type="color" className="size-7 rounded border border-border bg-transparent p-0 cursor-pointer"
|
||||
value={/^#[0-9a-fA-F]{6}$/.test((cfg as any).recent_zebra_color ?? '') ? (cfg as any).recent_zebra_color : '#808080'}
|
||||
onChange={(e) => save({ ...cfg, recent_zebra_color: e.target.value } as any)} />
|
||||
{/* Empty means "follow the theme", and there has to be a way back to
|
||||
it — a colour chosen under one theme is wrong under the other. */}
|
||||
{(cfg as any).recent_zebra_color && (
|
||||
<button type="button" className="text-xs text-muted-foreground hover:text-foreground"
|
||||
onClick={() => save({ ...cfg, recent_zebra_color: '' } as any)}>{t('appr.zebraAuto')}</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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 })} />
|
||||
|
||||
@@ -55,6 +55,19 @@ const SCOPES = [
|
||||
type ScopeKey = typeof SCOPES[number]['key'];
|
||||
|
||||
const SCOPE_KEY = 'opslog.gridMapScope';
|
||||
// Chosen fill colours. Empty means "follow the theme", which is the default and
|
||||
// stays the default: the tokens already track the four themes, and freezing a
|
||||
// hex at first run would leave a dark-theme map painted in the light palette.
|
||||
const COL_CONFIRMED_KEY = 'opslog.gridMapColorConfirmed';
|
||||
const COL_WORKED_KEY = 'opslog.gridMapColorWorked';
|
||||
|
||||
// A colour input only accepts #rrggbb. The theme tokens ARE plain hex today, so
|
||||
// this normally just passes them through — but a token that ever becomes oklch()
|
||||
// or a named colour would silently drive the swatch to black, and a fallback is
|
||||
// cheaper than that debugging session.
|
||||
function asHex(v: string, fallback: string): string {
|
||||
return /^#[0-9a-f]{6}$/i.test(v.trim()) ? v.trim() : fallback;
|
||||
}
|
||||
|
||||
export function GridSquareMap({ myGrid, className }: { myGrid?: string; className?: string }) {
|
||||
const { t } = useI18n();
|
||||
@@ -69,6 +82,8 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
? (localStorage.getItem(SCOPE_KEY) as ScopeKey) : 'DIGI'));
|
||||
|
||||
const [basemap, setBasemap] = useState<BasemapKey>(loadBasemap);
|
||||
const [confColour, setConfColour] = useState(() => localStorage.getItem(COL_CONFIRMED_KEY) ?? '');
|
||||
const [workedColour, setWorkedColour] = useState(() => localStorage.getItem(COL_WORKED_KEY) ?? '');
|
||||
// Repaint the squares when the THEME changes, not the basemap: the fills come
|
||||
// from theme tokens resolved at draw time, so a theme switch leaves them on
|
||||
// the old palette until something forces a redraw.
|
||||
@@ -105,7 +120,15 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
}).setView([25, 0], 2);
|
||||
mapRef.current = m;
|
||||
layerRef.current = L.layerGroup().addTo(m);
|
||||
return () => { m.remove(); mapRef.current = null; layerRef.current = null; };
|
||||
// Leaflet measures its container ONCE, when the map is created, and never
|
||||
// looks again. Here that measurement happens while the panel is still
|
||||
// laying out — so the map kept the height it had at that instant and the
|
||||
// rest of the panel stayed blank underneath it, whatever the window size.
|
||||
// Watching the host is the only fix that also survives a window resize, a
|
||||
// split-pane drag and the tab being shown for the first time.
|
||||
const ro = new ResizeObserver(() => m.invalidateSize({ animate: false }));
|
||||
ro.observe(hostRef.current);
|
||||
return () => { ro.disconnect(); m.remove(); mapRef.current = null; layerRef.current = null; };
|
||||
}, []);
|
||||
|
||||
// The chosen basemap, shared with the Main-tab map so picking one there and
|
||||
@@ -126,8 +149,8 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
layer.clearLayers();
|
||||
// Resolved once for the whole redraw, not per square: getComputedStyle
|
||||
// forces a style flush, and doing that a thousand times is a visible stall.
|
||||
const confirmedColour = cssColour('--success', '#16a34a');
|
||||
const workedColour = cssColour('--chart-1', '#2a78d6');
|
||||
const confirmedColour = confColour || cssColour('--success', '#16a34a');
|
||||
const workedFill = workedColour || cssColour('--chart-1', '#2a78d6');
|
||||
const meColour = cssColour('--warning', '#f59e0b');
|
||||
for (const sq of squares ?? []) {
|
||||
const b = gridSquareBounds(sq.grid);
|
||||
@@ -135,7 +158,7 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
// One hue, two states. Confirmed is the solid, saturated one; worked is
|
||||
// the same colour held back — so the eye reads "more" and "less" of the
|
||||
// same thing rather than two unrelated facts.
|
||||
const colour = sq.confirmed ? confirmedColour : workedColour;
|
||||
const colour = sq.confirmed ? confirmedColour : workedFill;
|
||||
L.rectangle([[b.south, b.west], [b.north, b.east]], {
|
||||
color: colour,
|
||||
weight: 0.5,
|
||||
@@ -159,7 +182,7 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
fillColor: meColour, fillOpacity: 1,
|
||||
}).bindTooltip(myGrid!.toUpperCase(), { sticky: true }).addTo(layer);
|
||||
}
|
||||
}, [squares, myGrid, t, themeTick]);
|
||||
}, [squares, myGrid, t, themeTick, confColour, workedColour]);
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const list = squares ?? [];
|
||||
@@ -200,6 +223,28 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
<option key={k} value={k}>{BASEMAPS[k].label}</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Beside the basemap, because they answer the same question: what this
|
||||
map looks like. Written straight through — there is no Save here. */}
|
||||
<label className="inline-flex items-center gap-1 text-[11px] text-muted-foreground" title={t('gsm.colConfirmed')}>
|
||||
<input type="color" className="size-5 rounded border border-border bg-transparent p-0 cursor-pointer"
|
||||
value={asHex(confColour || cssColour('--success', '#16a34a'), '#16a34a')}
|
||||
onChange={(e) => { setConfColour(e.target.value); writeUiPref(COL_CONFIRMED_KEY, e.target.value); }} />
|
||||
{t('gsm.confirmed')}
|
||||
</label>
|
||||
<label className="inline-flex items-center gap-1 text-[11px] text-muted-foreground" title={t('gsm.colWorked')}>
|
||||
<input type="color" className="size-5 rounded border border-border bg-transparent p-0 cursor-pointer"
|
||||
value={asHex(workedColour || cssColour('--chart-1', '#2a78d6'), '#2a78d6')}
|
||||
onChange={(e) => { setWorkedColour(e.target.value); writeUiPref(COL_WORKED_KEY, e.target.value); }} />
|
||||
{t('gsm.worked')}
|
||||
</label>
|
||||
{(confColour || workedColour) && (
|
||||
<button type="button" title={t('gsm.colReset')}
|
||||
onClick={() => {
|
||||
setConfColour(''); setWorkedColour('');
|
||||
writeUiPref(COL_CONFIRMED_KEY, ''); writeUiPref(COL_WORKED_KEY, '');
|
||||
}}
|
||||
className="text-[11px] text-muted-foreground hover:text-foreground px-1">↺</button>
|
||||
)}
|
||||
<span className="flex-1" />
|
||||
<button type="button" onClick={() => void load()} disabled={busy} title={t('gsm.refresh')}
|
||||
className="inline-flex items-center justify-center size-6 rounded border border-border hover:bg-muted disabled:opacity-50">
|
||||
@@ -213,12 +258,12 @@ export function GridSquareMap({ myGrid, className }: { myGrid?: string; classNam
|
||||
<footer className="flex items-center gap-3 px-2.5 py-1 border-t border-border bg-muted/30 shrink-0 text-[10px] text-muted-foreground">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="inline-block size-2.5 rounded-[2px]"
|
||||
style={{ background: 'var(--success)', opacity: 0.75 }} />
|
||||
style={{ background: confColour || 'var(--success)', opacity: 0.75 }} />
|
||||
{t('gsm.confirmed')}
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
<span className="inline-block size-2.5 rounded-[2px]"
|
||||
style={{ background: 'var(--chart-1)', opacity: 0.35 }} />
|
||||
style={{ background: workedColour || 'var(--chart-1)', opacity: 0.35 }} />
|
||||
{t('gsm.worked')}
|
||||
</span>
|
||||
</footer>
|
||||
|
||||
@@ -720,7 +720,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)}
|
||||
getRowStyle={(p) => rowStyleFor(p.data, rowColors ?? null, p.node.rowIndex ?? undefined)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -168,7 +168,7 @@ interface Props {
|
||||
initialSection?: string;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
onMainPaneChanged?: (side: 'left' | 'right', value: string) => void; // live Main-view layout update
|
||||
onMainPaneChanged?: (side: 'left' | 'right' | 'p3' | 'p4' | 'layout', value: string) => void; // live Main-view layout update
|
||||
flexAvailable?: boolean; // CAT backend is FlexRadio → offer it as a Main pane
|
||||
icomAvailable?: boolean; // CAT backend is Icom → offer the Icom console as a Main pane
|
||||
yaesuAvailable?: boolean; // CAT backend is Yaesu → offer the Yaesu console as a Main pane
|
||||
@@ -1029,15 +1029,16 @@ function RelayAutoPanel() {
|
||||
);
|
||||
}
|
||||
|
||||
// MainViewPanes lets the operator choose what the Main tab's left and right
|
||||
// panes show, independently: the great-circle map, the locator street map, the
|
||||
// cluster grid or the worked-before grid. Per-profile (stored via SetUIPref,
|
||||
// which is profile-prefixed). Self-contained so it owns its async-loaded state.
|
||||
// MainViewPanes lets the operator choose what the Main tab shows, in up to four
|
||||
// panes. The first two are the view; the third and fourth can be left empty, and
|
||||
// an empty one is not drawn at all. Per-profile (stored via SetUIPref, which is
|
||||
// profile-prefixed). Self-contained so it owns its async-loaded state.
|
||||
const MAIN_PANE_VALUES = ['map1', 'map2', 'cluster', 'worked', 'recent', 'netcontrol', 'decodes'];
|
||||
function MainViewPanes({ onChanged, flexAvailable, icomAvailable, yaesuAvailable }: { onChanged?: (side: 'left' | 'right', value: string) => void; flexAvailable?: boolean; icomAvailable?: boolean; yaesuAvailable?: boolean }) {
|
||||
const PANE_NONE = 'none';
|
||||
function MainViewPanes({ onChanged, flexAvailable, icomAvailable, yaesuAvailable }: { onChanged?: (side: 'left' | 'right' | 'p3' | 'p4' | 'layout', value: string) => void; flexAvailable?: boolean; icomAvailable?: boolean; yaesuAvailable?: boolean }) {
|
||||
const { t } = useI18n();
|
||||
const [left, setLeft] = useState('map1');
|
||||
const [right, setRight] = useState('map2');
|
||||
const [panes, setPanes] = useState<Record<string, string>>({ left: 'map1', right: 'map2', p3: PANE_NONE, p4: PANE_NONE });
|
||||
const [layout, setLayout] = useState('quad');
|
||||
// Radio-control panes are only offered when that CAT backend is active. Sorted A→Z.
|
||||
const options = [
|
||||
...MAIN_PANE_VALUES,
|
||||
@@ -1046,42 +1047,77 @@ function MainViewPanes({ onChanged, flexAvailable, icomAvailable, yaesuAvailable
|
||||
...(yaesuAvailable ? ['yaesu'] : []),
|
||||
].map((value) => ({ value, label: t(`settings.pane.${value}`) }))
|
||||
.sort((a, b) => a.label.localeCompare(b.label));
|
||||
const KEYS: Record<string, string> = { left: 'mainPaneLeft', right: 'mainPaneRight', p3: 'mainPane3', p4: 'mainPane4' };
|
||||
useEffect(() => {
|
||||
const valid = (v: string) => v === 'flex' || v === 'icom' || v === 'yaesu' || MAIN_PANE_VALUES.includes(v);
|
||||
Promise.all([GetUIPref('mainPaneLeft').catch(() => ''), GetUIPref('mainPaneRight').catch(() => '')])
|
||||
.then(([l, r]) => { if (valid(l)) setLeft(l); if (valid(r)) setRight(r); });
|
||||
Promise.all([
|
||||
...Object.values(KEYS).map((k) => GetUIPref(k).catch(() => '')),
|
||||
GetUIPref('mainPaneLayout').catch(() => ''),
|
||||
]).then(([l, r, p3, p4, lay]) => {
|
||||
setPanes({
|
||||
left: valid(l) ? l : 'map1',
|
||||
right: valid(r) ? r : 'map2',
|
||||
p3: valid(p3) ? p3 : PANE_NONE,
|
||||
p4: valid(p4) ? p4 : PANE_NONE,
|
||||
});
|
||||
if (lay === 'cols' || lay === 'quad') setLayout(lay);
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
const pick = (side: 'left' | 'right', v: string) => {
|
||||
if (side === 'left') setLeft(v); else setRight(v);
|
||||
const pick = (side: string, v: string) => {
|
||||
setPanes((p) => ({ ...p, [side]: v }));
|
||||
// Persist (per-profile) AND tell the parent the new value directly, so the
|
||||
// Main view updates from the chosen value — never a stale DB re-read.
|
||||
SetUIPref(side === 'left' ? 'mainPaneLeft' : 'mainPaneRight', v).catch(() => {});
|
||||
onChanged?.(side, v);
|
||||
SetUIPref(KEYS[side], v).catch(() => {});
|
||||
onChanged?.(side as any, v);
|
||||
};
|
||||
const pickLayout = (v: string) => {
|
||||
setLayout(v);
|
||||
SetUIPref('mainPaneLayout', v).catch(() => {});
|
||||
onChanged?.('layout', v);
|
||||
};
|
||||
const filled = ['left', 'right', 'p3', 'p4'].filter((k) => panes[k] !== PANE_NONE).length;
|
||||
const SIDES = [
|
||||
{ key: 'left', label: t('settings.leftPane'), canBeEmpty: false },
|
||||
{ key: 'right', label: t('settings.rightPane'), canBeEmpty: false },
|
||||
{ key: 'p3', label: t('settings.thirdPane'), canBeEmpty: true },
|
||||
{ key: 'p4', label: t('settings.fourthPane'), canBeEmpty: true },
|
||||
];
|
||||
return (
|
||||
<div className="border-t border-border/60 pt-4 space-y-2">
|
||||
<h4 className="text-sm font-semibold text-foreground">{t('settings.mainView')}</h4>
|
||||
<p className="text-xs text-muted-foreground">{t('settings.mainViewHint')}</p>
|
||||
<div className="grid grid-cols-2 gap-3 max-w-xl">
|
||||
<label className="flex flex-col gap-1 text-xs">
|
||||
<span className="text-muted-foreground">{t('settings.leftPane')}</span>
|
||||
<Select value={left} onValueChange={(v) => pick('left', v)}>
|
||||
<SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1 text-xs">
|
||||
<span className="text-muted-foreground">{t('settings.rightPane')}</span>
|
||||
<Select value={right} onValueChange={(v) => pick('right', v)}>
|
||||
<SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</label>
|
||||
{SIDES.map((sd) => (
|
||||
<label key={sd.key} className="flex flex-col gap-1 text-xs">
|
||||
<span className="text-muted-foreground">{sd.label}</span>
|
||||
<Select value={panes[sd.key]} onValueChange={(v) => pick(sd.key, v)}>
|
||||
<SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* Only the third and fourth may be empty: the first two ARE the
|
||||
Main view, and a tab with nothing in it is not a layout. */}
|
||||
{sd.canBeEmpty && <SelectItem value={PANE_NONE}>{t('settings.paneNone')}</SelectItem>}
|
||||
{options.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{/* Only asked when it can matter. Three panes are columns and nothing
|
||||
else; four are the only case with two honest answers. */}
|
||||
{filled === 4 && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<span className="text-xs text-muted-foreground">{t('settings.paneLayout')}</span>
|
||||
<div className="inline-flex rounded-md border border-border overflow-hidden text-xs">
|
||||
{[{ v: 'quad', l: t('settings.paneQuad') }, { v: 'cols', l: t('settings.paneCols') }].map((o) => (
|
||||
<button key={o.v} type="button" onClick={() => pickLayout(o.v)}
|
||||
className={cn('px-2.5 py-1', layout === o.v ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted')}>
|
||||
{o.l}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
} from '@/components/ui/select';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { QSO_BOX_FIELDS, QSO_FIELD_LABELS } from './qslTypes';
|
||||
import type { CardTemplate, CardElement, QSOBox, QSLPresetInfo, StyleParams } from './qslTypes';
|
||||
import type { CardSelection } from './CardPreview';
|
||||
import { StylePresetPicker, NumberField } from './StylePresetPicker';
|
||||
@@ -199,6 +200,26 @@ export function EditorPanel({ template, sel, presets, fontFamilies, onPatchEleme
|
||||
<Input className="h-7 w-44 font-mono text-xs" value={box.title ?? ''}
|
||||
onChange={(ev) => onPatchBox({ title: ev.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs text-muted-foreground">Columns</Label>
|
||||
{/* Rebuilt from the canonical order every time rather than
|
||||
appended to: a box whose columns come out in the order they
|
||||
were ticked reads as a bug, and the widths are tuned for this
|
||||
order. */}
|
||||
<div className="grid grid-cols-2 gap-x-2">
|
||||
{QSO_BOX_FIELDS.map((f) => (
|
||||
<label key={f} className="flex items-center gap-1.5 text-xs">
|
||||
<Checkbox
|
||||
checked={box.fields.includes(f)}
|
||||
onCheckedChange={(v) => onPatchBox({
|
||||
fields: QSO_BOX_FIELDS.filter((k) => (k === f ? v === true : box.fields.includes(k))),
|
||||
})}
|
||||
/>
|
||||
{QSO_FIELD_LABELS[f] ?? f}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<Label className="text-xs text-muted-foreground">Footer</Label>
|
||||
<Input className="h-7 w-44 font-mono text-xs" value={box.footer}
|
||||
|
||||
@@ -165,6 +165,12 @@ export interface QSLPresetInfo {
|
||||
}
|
||||
|
||||
// Human labels for the QSO box fields the renderer knows.
|
||||
// QSO_BOX_FIELDS is the canonical COLUMN ORDER of the confirmation box, and
|
||||
// the whole list the designer offers. The renderer's column widths are tuned
|
||||
// for it, so a box is always rebuilt from this order rather than from the
|
||||
// order the operator happened to tick the boxes in.
|
||||
export const QSO_BOX_FIELDS = ['qso_date', 'time_on', 'band', 'freq', 'mode', 'submode', 'rst_sent'] as const;
|
||||
|
||||
export const QSO_FIELD_LABELS: Record<string, string> = {
|
||||
qso_date: 'Date',
|
||||
time_on: 'UTC',
|
||||
|
||||
Reference in New Issue
Block a user