fix(ui): PinGate ref-based in-flight guard, busy-safe delete, preventDefault, focus after error; a11y (compact title aria-hidden, Section aria-expanded/controls, segmented groups aria-pressed); drop dead CSS/imports (codex)

Author: botnick

design/kenney/render.html

@@ -50,7 +50,7 @@
 const cam = new THREE.OrthographicCamera(-half * W / H, half * W / H, half, -half, 0.1, 100);
 const ang = (+(q.get("yaw") || 45)) * Math.PI / 180, el = (+(q.get("pitch") || 32)) * Math.PI / 180;
 cam.position.set(ctr.x + 20 * Math.sin(ang) * Math.cos(el), ctr.y + 20 * Math.sin(el), ctr.z + 20 * Math.cos(ang) * Math.cos(el)); cam.lookAt(ctr);
-cam.position.y += +(q.get("lift") || 0); 
+cam.position.y += +(q.get("lift") || 0);
 renderer.render(scene, cam);
 window.__sizes = group.children.map((c) => { const b = new THREE.Box3().setFromObject(c), z = b.getSize(new THREE.Vector3()); return [c.type, +z.x.toFixed(2), +z.y.toFixed(2), +z.z.toFixed(2)]; });
 window.__done = renderer.domElement.toDataURL("image/png");

src/components/DeviceView.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { getDevice, type Device, type DeviceData, type Latest } from "../lib/api";
 import { batteryChannels, groupDevice, INVERTER_TYPE_TH } from "../lib/device";
 import { useSmartPoll } from "../lib/usePoll";
 import { timeStr } from "../lib/format";
-import { IconChevron, IconBack } from "../lib/icons";
-import { card, cardP, h2 } from "../lib/ui";
+import { IconChevron } from "../lib/icons";
+import { card, cardP } from "../lib/ui";
 import { FlowDiagram } from "./FlowDiagram";
 import { InsightList } from "./InsightList";
 import { analyzeDevice } from "../lib/diagnostics";
@@ -73,13 +73,14 @@ function KVList({ items }: { items: DeviceData[] }) {
 }
 
 function Section({ title, count, open, onToggle, children }: { title: string; count?: number; open: boolean; onToggle: () => void; children: ReactNode }) {
+  const id = useId();
   return (
     <div className={`${card} mt-3.5 overflow-hidden`}>
-      <button onClick={onToggle} className="w-full flex items-center justify-between p-5 text-left">
+      <button onClick={onToggle} aria-expanded={open} aria-controls={id} className="w-full flex items-center justify-between p-5 text-left">
         <span className="text-[17px] font-bold">{title}</span>
         <span className="flex items-center gap-2 text-muted text-[13px]">{count != null ? `${count} ค่า` : ""}<IconChevron className={`w-5 h-5 transition-transform duration-300 ${open ? "rotate-90" : ""}`} /></span>
       </button>
-      <div className={`grid transition-[grid-template-rows] duration-300 ease-out ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}>
+      <div id={id} className={`grid transition-[grid-template-rows] duration-300 ease-out ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`} aria-hidden={!open}>
         <div className="overflow-hidden"><div className="px-5 pb-5">{children}</div></div>
       </div>
     </div>

src/components/Header.tsx

@@ -26,7 +26,7 @@ export function Header({ title, stationName, stations, selectedId, onSwitch, onR
       <div className={`ios-bar ${compact ? "on" : ""}`}>
         <div className="inner">
           <div className="bg" />
-          <div className="title">{title}</div>
+          <div className="title" aria-hidden="true">{title}</div>
           <button
             onClick={() => { if (cooling) return; haptic(); onRefresh(); }}
             disabled={cooling}

src/components/HistoryView.tsx

@@ -3,7 +3,7 @@ import { getHistory, type HistTotals } from "../lib/api";
 import { useSmartPoll } from "../lib/usePoll";
 import { useSettings } from "../lib/settings";
 import { savingsOf, savingsLabel, co2Of } from "../lib/economics";
-import { cardP, cardSm, plate, h2First, h2Mid } from "../lib/ui";
+import { cardP, plate, h2Mid } from "../lib/ui";
 import { IconChevron, IconSun, IconHouse, IconBattery, IconGrid } from "../lib/icons";
 import { BarChart, LineMini, Legend } from "./Chart";
 import { MetricSection } from "./MetricSection";
@@ -377,9 +377,9 @@ export function HistoryView({ active, stationId, isPrimary = true, capacity }: {
 
   return (
     <>
-      <div className="ios-seg sticky-seg" role="tablist">
+      <div className="ios-seg sticky-seg" role="group" aria-label="ช่วงเวลา">
         {TABS.map((t) => (
-          <button key={t.k} onClick={() => changeRange(t.k)} role="tab" aria-selected={range === t.k}
+          <button key={t.k} onClick={() => changeRange(t.k)} aria-pressed={range === t.k}
             className={range === t.k ? "on" : ""}>
             {t.label}
           </button>
@@ -403,9 +403,9 @@ export function HistoryView({ active, stationId, isPrimary = true, capacity }: {
 
           {/* day-window toggle — same segmented-control language as the range tabs */}
           {range === "day" && (
-            <div className="ios-seg mt-3" role="tablist">
+            <div className="ios-seg mt-3" role="group" aria-label="ช่วงของวัน">
               {([["mid", "เต็มวัน 00–24 น."], ["noon", "รอบแดด เที่ยง→เที่ยง"]] as const).map(([w, lab]) => (
-                <button key={w} onClick={() => dayWin !== w && changeDayWin(w)} role="tab" aria-selected={dayWin === w}
+                <button key={w} onClick={() => dayWin !== w && changeDayWin(w)} aria-pressed={dayWin === w}
                   className={dayWin === w ? "on" : ""}>
                   {lab}
                 </button>

src/components/PinGate.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { postLogin } from "../lib/api";
 import { IconSun } from "../lib/icons";
 import { APP_NAME } from "../lib/brand";
@@ -13,25 +13,35 @@ export function PinGate({ onOk }: { onOk: () => void }) {
   const [err, setErr] = useState("");
   const [busy, setBusy] = useState(false);
   const [shake, setShake] = useState(false);
+  // the in-flight guard is a ref, not state: two Enter presses / taps in the same frame both
+  // read the same render's `busy`, a ref flips synchronously
+  const busyRef = useRef(false);
+  const pinRef = useRef("");
+  const firstKey = useRef<HTMLButtonElement>(null);
+  const setPinBoth = (v: string) => { pinRef.current = v; setPin(v); };
 
   const submit = useCallback(async () => {
-    if (busy || !pin) return; // guard against double-submit
-    setErr("");
-    setBusy(true);
-    const r = await postLogin(pin).catch(() => ({ ok: false, error: "เชื่อมต่อไม่ได้" }));
-    setBusy(false);
-    if (r.ok) onOk();
-    else { setErr(r.error || "รหัสไม่ถูกต้อง"); setPin(""); setShake(true); setTimeout(() => setShake(false), 450); }
-  }, [busy, pin, onOk]);
+    const value = pinRef.current;
+    if (busyRef.current || !value) return;
+    busyRef.current = true; setBusy(true); setErr("");
+    const r = await postLogin(value).catch(() => ({ ok: false, error: "เชื่อมต่อไม่ได้" }));
+    busyRef.current = false; setBusy(false);
+    if (r.ok) { onOk(); return; }
+    setErr(r.error || "รหัสไม่ถูกต้อง"); setPinBoth(""); setShake(true); setTimeout(() => setShake(false), 450);
+    firstKey.current?.focus(); // the submit key is now disabled — keep keyboard/AT focus on the pad
+  }, [onOk]);
 
-  const press = useCallback((d: string) => { if (busy) return; haptic(); setErr(""); setPin((p) => (p.length < MAX ? p + d : p)); }, [busy]);
-  const del = useCallback(() => { haptic(); setPin((p) => p.slice(0, -1)); }, []);
+  const press = useCallback((d: string) => {
+    if (busyRef.current || pinRef.current.length >= MAX) return;
+    haptic(); setErr(""); setPinBoth(pinRef.current + d);
+  }, []);
+  const del = useCallback(() => { if (busyRef.current || !pinRef.current) return; haptic(); setPinBoth(pinRef.current.slice(0, -1)); }, []);
 
   useEffect(() => {
     const on = (e: KeyboardEvent) => {
-      if (/^\d$/.test(e.key)) press(e.key);
-      else if (e.key === "Backspace") del();
-      else if (e.key === "Enter") submit();
+      if (/^\d$/.test(e.key)) { e.preventDefault(); press(e.key); }
+      else if (e.key === "Backspace") { e.preventDefault(); del(); }
+      else if (e.key === "Enter") { e.preventDefault(); submit(); }
     };
     window.addEventListener("keydown", on);
     return () => window.removeEventListener("keydown", on);
@@ -52,8 +62,8 @@ export function PinGate({ onOk }: { onOk: () => void }) {
       <div className="text-warn text-[15px] font-semibold min-h-6 mt-1" role="alert">{err}</div>
 
       <div className="pin-pad">
-        {keys.map((k) => <button key={k} onClick={() => press(k)} aria-label={k}>{k}</button>)}
-        <button className="ghost" onClick={del} aria-label="ลบ" disabled={!pin}>ลบ</button>
+        {keys.map((k, i) => <button key={k} ref={i === 0 ? firstKey : undefined} onClick={() => press(k)} aria-label={k}>{k}</button>)}
+        <button className="ghost" onClick={del} aria-label="ลบ" disabled={busy || !pin}>ลบ</button>
         <button onClick={() => press("0")} aria-label="0">0</button>
         <button className="ok" onClick={submit} disabled={busy || !pin} aria-label="เข้าใช้งาน">
           {busy ? "…" : <svg viewBox="0 0 24 24" className="w-8 h-8" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>}

src/components/TodayView.tsx

@@ -1,7 +1,7 @@
 import type { Latest } from "../lib/api";
 import { fmtKwh } from "../lib/format";
 import { IconSun, IconHouse, IconGrid, IconBattery } from "../lib/icons";
-import { cardP, plateP, h2First, h2Mid } from "../lib/ui";
+import { cardP, plateP, h2Mid } from "../lib/ui";
 import { Tile } from "./Tile";
 import { AnalysisCard } from "./AnalysisCard";
 import { SelfConsumption } from "./SelfConsumption";

src/components/WeatherView.tsx

@@ -4,7 +4,7 @@ import { type Weather, type WeatherHour } from "../lib/api";
 import { condText, solarInfo, DAYLBL, shortDate, isNightAt } from "../lib/weather";
 import { forecast, hourlyKwh } from "../lib/forecast";
 import { WxIcon } from "../lib/wxicon";
-import { card, cardP, h2First, h2Mid } from "../lib/ui";
+import { card, cardP, h2Mid } from "../lib/ui";
 import { IconSun } from "../lib/icons";
 import { InfoTip } from "./InfoTip";
 import { SunPath } from "./SunPath";

src/index.css

@@ -160,8 +160,7 @@ textarea {
 }
 /* Respect the OS "reduce motion" switch — kill the ambient/idle animations. */
 @media (prefers-reduced-motion: reduce) {
-  .view-anim, .hero-illus, .hero-rays, .hero-core,
-  .wx-float, .wx-star, .wx-glow, .splash-leave, .skeleton::after {
+  .view-anim, .hero-rays, .wx-glow, .splash-leave, .skeleton::after {
     animation: none !important;
   }
 }
@@ -179,17 +178,10 @@ textarea {
 .splash-leave { animation: splashfade 0.45s ease 0.1s forwards; }
 
 /* ----- drawn solar-house hero (Card_Home) ----- */
-@keyframes herofloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
-.hero-illus { animation: herofloat 4.8s ease-in-out infinite; }
 .hero-rays { transform-box: fill-box; transform-origin: center; animation: rayspin 22s linear infinite; }
-.hero-core { transform-box: fill-box; transform-origin: center; animation: sunpulse 2.6s ease-in-out infinite; }
 
 /* ----- weather immersive page (Solurna purple night sky) ----- */
-@keyframes wxfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
-@keyframes wxtwinkle { 0%, 100% { opacity: var(--s, .5); } 50% { opacity: .15; } }
 @keyframes wxglow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .8; transform: scale(1.06); } }
-.wx-float { animation: wxfloat 5.5s ease-in-out infinite; }
-.wx-star { animation: wxtwinkle 3.4s ease-in-out infinite; }
 .wx-glow { animation: wxglow 6s ease-in-out infinite; }
 
 /* shared ambient keyframes (stars twinkle, live dot pulse) */
@@ -300,14 +292,10 @@ textarea {
 /* ── home hero: isometric solar house ───────────────────────────────────────── */
 .hscene { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 392 / 380; isolation: isolate;
   box-shadow: 0 1px 1.5px rgba(0, 0, 0, .05), 0 16px 34px -18px rgba(20, 30, 60, .45); }
-.hscene .hs-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
 .hscene .hs-haze { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(150, 160, 175, .45), rgba(200, 205, 215, .1) 70%); }
 .hscene .hs-stars { position: absolute; inset: 0 0 45% 0; opacity: .8;
   background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.4px 1.4px at 46% 22%, #fff, transparent),
     radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.3px 1.3px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 10%, #fff, transparent), radial-gradient(1px 1px at 36% 34%, #fff, transparent); }
-@keyframes hs-dash { to { stroke-dashoffset: -26; } }
-.hscene .hs-flow { animation: hs-dash 1s linear infinite; }
-.hscene .hs-flow.rev { animation-direction: reverse; }
 .hscene .hs-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 16px 0; }
 .hscene .hs-name { font-size: 19px; font-weight: 800; color: #0f172a; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .hscene .hs-wx { font-size: 13px; font-weight: 600; color: #334155; margin-top: 1px; }
@@ -325,8 +313,6 @@ textarea {
 .hscene .hs-chip .soc { position: relative; width: 34px; height: 16px; border-radius: 5px; background: rgba(24, 166, 115, .15); overflow: hidden; margin-left: 2px; }
 .hscene .hs-chip .soc i { position: absolute; inset: 0 auto 0 0; background: #18a673; border-radius: 4px; }
 .hscene .hs-chip .soc b { position: relative; display: block; text-align: center; font-size: 10px; font-weight: 800; color: #063; line-height: 16px; }
-@media (prefers-reduced-motion: reduce) { .hscene .hs-flow { animation: none; } }
-.hscene.dim .hs-svg { filter: brightness(.74) saturate(.85); }
 
 /* iOS segmented control (large, universal-design sizing) */
 .ios-seg { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: rgba(118, 118, 128, .14); }