chore: release v0.26.1

frontend/src/components/GridSquareMap.tsx

@@ -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>