awa

webui/src/components/HudOverlays/VerticalBatteryOverlay/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useSessionSelector } from '../../../context/SessionContext.jsx';
+import { useTelemetryFrame } from '../../../context/TelemetryContext.jsx';
+import { buildBatteryVisual } from '../../../lib/battery.js';
+import BatteryBar from '../../BatteryBar/index.jsx';
+
+function VerticalBatteryOverlay({ show = false, roverId = null, sensors, batteryConfig, mobileHud = false }) {
+  const frame = useTelemetryFrame(roverId);
+  const rosterBatteryConfig = useSessionSelector((state) => {
+    if (!roverId) return null;
+    const roster = state.session?.roster || [];
+    const rover = roster.find((entry) => String(entry.id) === String(roverId));
+    return rover?.battery ?? null;
+  });
+  const resolvedSensors = sensors ?? frame?.sensors ?? null;
+  const resolvedBatteryConfig = batteryConfig ?? rosterBatteryConfig;
+  const batteryVisual = buildBatteryVisual({
+    charge: resolvedSensors?.batteryChargeMah ?? null,
+    config: resolvedBatteryConfig,
+  });
+  if (!show || !batteryVisual?.available) return null;
+
+  return (
+    <div className="pointer-events-none absolute right-1 top-1/2 flex h-[70%] -translate-y-1/2 flex-col items-center justify-center rounded bg-black/60 px-0.5 pb-1 pt-1">
+      <BatteryBar
+        visual={batteryVisual}
+        orientation="vertical"
+        variant="inline"
+        compact={mobileHud}
+        className="h-full w-4"
+      />
+    </div>
+  );
+}
+
+export default React.memo(VerticalBatteryOverlay);