slop

webui/src/components/BalanceBoardPanel/index.jsx

@@ -36,7 +36,7 @@ function centerOfPressure(corners) {
   // An empty board naturally has tiny load-cell noise. Keep the marker centered
   // and subdued until there is enough weight for its position to mean anything;
   // once loaded, map the normalized left/right and top/bottom balance into the
-  // safe interior of the illustrated board.
+  // safe interior of the load map.
   if (total < 0.5) return { left: 50, top: 50, active: false };
   const horizontal = ((topRight + bottomRight) - (topLeft + bottomLeft)) / total;
   const vertical = ((bottomLeft + bottomRight) - (topLeft + topRight)) / total;
@@ -49,7 +49,7 @@ function centerOfPressure(corners) {
 
 function CornerReading({ className, label, value }) {
   return (
-    <div className={`absolute rounded bg-slate-950/80 px-1 py-0.5 text-center shadow ${className}`}>
+    <div className={`surface absolute min-w-[5.5rem] text-center ${className}`}>
       <div className="text-[0.62rem] text-slate-400">{label}</div>
       <div className="font-mono text-sm font-semibold text-slate-100">{formatWeight(value)}</div>
     </div>
@@ -70,7 +70,6 @@ function BalanceBoardPanelContent() {
   const role = useSessionSelector((state) => state.session?.role || null);
   const [frame, setFrame] = useState(EMPTY_FRAME);
   const [unpairing, setUnpairing] = useState(false);
-  const [adminMessage, setAdminMessage] = useState('');
 
   useEffect(() => {
     if (!socket) return undefined;
@@ -115,82 +114,71 @@ function BalanceBoardPanelContent() {
     if (unpairing || !board?.paired) return;
     if (!window.confirm('Unpair this Balance Board and require the red Sync button to pair it again?')) return;
     setUnpairing(true);
-    setAdminMessage('');
     socket.emit('balanceBoard:unpair', {}, (response = {}) => {
       setUnpairing(false);
       if (response.error) {
-        setAdminMessage(response.error);
+        window.alert(response.error);
       } else if (response.warning) {
-        setAdminMessage('Board forgotten locally, but BlueZ reported a bond-removal warning.');
-      } else {
-        setAdminMessage('Board unpaired. Press the red Sync button to pair it again.');
+        window.alert('Board forgotten locally, but BlueZ reported a bond-removal warning.');
       }
     });
   };
 
+  const actions = (
+    <div className="flex items-center gap-0.5">
+      {battery != null ? (
+        <span className="font-mono text-xs text-slate-300">{Math.round(battery)}% battery</span>
+      ) : null}
+      {isAdmin ? (
+        <button
+          type="button"
+          className="button-dark text-xs disabled:opacity-50"
+          disabled={!board?.paired || unpairing}
+          onClick={unpair}
+        >
+          {unpairing ? 'Unpairing…' : 'Unpair'}
+        </button>
+      ) : null}
+    </div>
+  );
+
   return (
     <CardFrame
       title="Balance Board"
       className="relative w-full"
       bodyClassName="text-sm text-slate-200"
-      actions={battery != null ? (
-        <span className="font-mono text-xs text-slate-300">{Math.round(battery)}% battery</span>
-      ) : null}
+      actions={actions}
     >
       {sleeping ? (
         <div className="absolute inset-0 z-20 flex items-center justify-center rounded-md bg-slate-950/85 px-2 text-center">
           <div className="space-y-0.5">
-            <p className="text-lg font-semibold text-slate-100">Balance Board is asleep</p>
+            <p className="text-lg font-semibold text-slate-100">The Balance Board is asleep</p>
             <p className="text-sm text-slate-300">Press the front power button on the board to wake it.</p>
           </div>
         </div>
       ) : null}
 
-      <div className="grid gap-0.5 md:grid-cols-[minmax(0,1.25fr)_minmax(9rem,0.75fr)]">
-        <section className="surface-muted p-1">
-          <div className="relative mx-auto aspect-[1.35/1] w-full max-w-md overflow-hidden rounded-[1.5rem] border-2 border-slate-500 bg-gradient-to-b from-slate-700 to-slate-800 shadow-inner">
-            <div className="absolute inset-[12%] rounded-[1rem] border border-slate-500/70 bg-slate-900/35" />
-            <CornerReading className="left-1 top-1" label="Top left" value={corners.topLeft} />
-            <CornerReading className="right-1 top-1" label="Top right" value={corners.topRight} />
-            <CornerReading className="bottom-1 left-1" label="Bottom left" value={corners.bottomLeft} />
-            <CornerReading className="bottom-1 right-1" label="Bottom right" value={corners.bottomRight} />
-            <div
-              aria-label="Center of pressure"
-              className={`absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 shadow-lg transition-all duration-100 ${
-                center.active
-                  ? 'border-cyan-100 bg-cyan-400 shadow-cyan-400/50'
-                  : 'border-slate-400 bg-slate-600 opacity-50'
-              }`}
-              style={{ left: `${center.left}%`, top: `${center.top}%` }}
-            />
-            <div className="absolute bottom-0.5 left-1/2 h-1.5 w-8 -translate-x-1/2 rounded-full bg-sky-400/70" />
-          </div>
-        </section>
-
-        <div className="grid content-start gap-0.5">
-          <section className="surface-muted px-1 py-1.5 text-center">
-            <div className="text-xs text-slate-400">Total weight</div>
-            <div className="mt-0.5 font-mono text-4xl font-bold leading-none text-white">
+      <div className="panel-section relative h-40 overflow-hidden">
+        <CornerReading className="left-0.5 top-0.5" label="Top left" value={corners.topLeft} />
+        <CornerReading className="right-0.5 top-0.5" label="Top right" value={corners.topRight} />
+        <CornerReading className="bottom-0.5 left-0.5" label="Bottom left" value={corners.bottomLeft} />
+        <CornerReading className="bottom-0.5 right-0.5" label="Bottom right" value={corners.bottomRight} />
+        <div
+          aria-label="Center of pressure"
+          className={`absolute z-10 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border transition-all duration-100 ${
+            center.active
+              ? 'border-sky-200 bg-sky-500'
+              : 'border-neutral-500 bg-neutral-600 opacity-50'
+          }`}
+          style={{ left: `${center.left}%`, top: `${center.top}%` }}
+        />
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="surface px-1 py-0.5 text-center">
+            <div className="text-[0.65rem] text-slate-400">Total weight</div>
+            <div className="font-mono text-3xl font-bold leading-none text-white">
               {formatWeight(liveFrame.totalKg)}
             </div>
-          </section>
-
-          {isAdmin ? (
-            <section className="surface-muted grid gap-0.5 p-0.5">
-              {board?.address ? (
-                <div className="truncate text-center font-mono text-[0.65rem] text-slate-500">{board.address}</div>
-              ) : null}
-              <button
-                type="button"
-                className="button-dark w-full text-xs disabled:opacity-50"
-                disabled={!board?.paired || unpairing}
-                onClick={unpair}
-              >
-                {unpairing ? 'Unpairing…' : 'Unpair board'}
-              </button>
-              {adminMessage ? <p className="text-center text-xs text-slate-400">{adminMessage}</p> : null}
-            </section>
-          ) : null}
+          </div>
         </div>
       </div>
     </CardFrame>