more organized backend and better mobile control columns

webui/src/components/ControlSummary.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSession } from '../context/SessionContext.jsx';
 import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
 import { useControlSystem } from '../controls/index.js';
@@ -8,6 +8,7 @@ import RoverRoster from './RoverRoster.jsx';
 import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
 import NightVisionControl from './NightVisionControl.jsx';
 import HornControl from './HornControl.jsx';
+import CameraTiltControl from './CameraTiltControl.jsx';
 
 export function RoverRosterPanel({ title = 'Rovers' }) {
   const { session, requestControl } = useSession();
@@ -49,39 +50,17 @@ export function RoverRosterPanel({ title = 'Rovers' }) {
 
 export default function ControlSummary() {
   const {
-    state: { roverId, keymap },
+    state: { roverId, keymap, camera, horn },
+    pipeline,
+    actions: { setServoAngle, setNightVision, startHorn, stopHorn },
   } = useControlSystem();
   const frame = useTelemetryFrame(roverId);
   const sensors = frame?.sensors || {};
   const driveDockState = useDriveDockState(roverId);
   const hideInlineControls = driveDockState.docked && !driveDockState.driving;
 
-  return (
-    <section className="panel-section">
-      <div className="grid items-stretch gap-0.5 md:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] md:min-h-[18rem]">
-        <div className="flex h-full w-full items-stretch justify-center">
-          <div className="aspect-square h-full w-full">
-            <TopDownMap sensors={sensors} />
-          </div>
-        </div>
-        <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] gap-0.5">
-          <DriveDockAction layout="desktop" expand driveDockState={driveDockState} />
-          {!hideInlineControls ? <InlineCameraTilt keymap={keymap} /> : null}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export function InlineCameraTilt({ keymap }) {
-  const {
-    state: { roverId, camera, horn },
-    pipeline,
-    actions: { setServoAngle, setNightVision, startHorn, stopHorn },
-  } = useControlSystem();
-
   const config = camera?.config;
-  const enabled = Boolean(roverId && camera?.enabled && config);
+  const cameraEnabled = Boolean(roverId && camera?.enabled && config);
   const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
   const nightVisionState = pipeline?.nightVisionState;
   const hornAvailable = Boolean(roverId && pipeline?.horn);
@@ -94,95 +73,62 @@ export function InlineCameraTilt({ keymap }) {
       : typeof config?.homeAngle === 'number'
         ? config.homeAngle
         : (min + max) / 2;
-
-  const [pendingAngle, setPendingAngle] = useState(value);
-  const draggingRef = useRef(false);
-
-  useEffect(() => {
-    if (!draggingRef.current) {
-      setPendingAngle(value);
-    }
-  }, [value]);
-
-  const handleSlider = (event) => {
-    const next = Number.parseFloat(event.target.value);
-    if (Number.isNaN(next)) return;
-    draggingRef.current = true;
-    setPendingAngle(next);
-    setServoAngle(next);
-  };
-
-  const commitSlider = () => {
-    draggingRef.current = false;
-  };
-
-  if (!enabled && !nightVisionAvailable && !hornAvailable) return null;
-  const upLabel = formatKeyLabel(keymap?.cameraUp?.[0]);
-  const downLabel = formatKeyLabel(keymap?.cameraDown?.[0]);
   const nightVisionLabel = formatKeyLabel(keymap?.nightVisionToggle?.[0]);
   const hornLabel = formatKeyLabel(keymap?.hornHonk?.[0]);
+  const upLabel = formatKeyLabel(keymap?.cameraUp?.[0]);
+  const downLabel = formatKeyLabel(keymap?.cameraDown?.[0]);
 
   return (
-    <div className="surface space-y-0.5 p-0 text-sm text-slate-200">
-      {nightVisionAvailable && (
-        <NightVisionControl
-          nightVisionOn={nightVisionState?.nightVisionOn}
-          disabled={!roverId}
-          onToggle={setNightVision}
-          keyLabel={nightVisionLabel}
-        />
-      )}
-      {hornAvailable && (
-        <HornControl
-          disabled={!roverId || hornBlocked}
-          onStart={startHorn}
-          onStop={stopHorn}
-          keyLabel={hornLabel}
-          active={horn?.active}
-          heat={horn?.heat}
-        />
-      )}
-      {enabled && (
-        <div className="space-y-0.5 px-1 py-1">
-          <div className="flex items-center justify-between text-xs text-slate-300">
-            <span>Camera tilt</span>
-            <span className="font-mono text-slate-100">{formatDegrees(value)}</span>
-          </div>
-          <div>
-            <input
-              type="range"
-              className="w-full accent-emerald-400"
-              min={min}
-              max={max}
-              step={0.5}
-              value={pendingAngle}
-              onChange={handleSlider}
-              onMouseUp={commitSlider}
-              onTouchEnd={commitSlider}
-              onPointerUp={commitSlider}
-            />
-            <div className="mt-0 flex items-center justify-between text-[0.7rem] text-slate-400">
-              <span className="flex items-center gap-0.5">
-                {downLabel ? <KeyPill label={downLabel} /> : null}
-                {formatDegrees(min)}
-              </span>
-              <span className="flex items-center gap-0.5">
-                {formatDegrees(max)}
-                {upLabel ? <KeyPill label={upLabel} /> : null}
-              </span>
-            </div>
+    <section className="panel-section">
+      <div className="grid items-stretch gap-0.5 md:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] md:min-h-[18rem]">
+        <div className="flex h-full w-full items-stretch justify-center">
+          <div className="aspect-square h-full w-full">
+            <TopDownMap sensors={sensors} />
           </div>
         </div>
-      )}
-    </div>
+        <div className="grid h-full min-h-0 grid-rows-[minmax(0,1fr)_auto] gap-0.5">
+          <DriveDockAction layout="desktop" expand driveDockState={driveDockState} />
+          {!hideInlineControls ? (
+            <div className="surface space-y-0.5 p-0 text-sm text-slate-200">
+              {nightVisionAvailable && (
+                <NightVisionControl
+                  nightVisionOn={nightVisionState?.nightVisionOn}
+                  disabled={!roverId}
+                  onToggle={setNightVision}
+                  keyLabel={nightVisionLabel}
+                />
+              )}
+              {hornAvailable && (
+                <HornControl
+                  disabled={!roverId || hornBlocked}
+                  onStart={startHorn}
+                  onStop={stopHorn}
+                  keyLabel={hornLabel}
+                  active={horn?.active}
+                  heat={horn?.heat}
+                />
+              )}
+              {cameraEnabled && (
+                <CameraTiltControl
+                  value={value}
+                  min={min}
+                  max={max}
+                  onChange={setServoAngle}
+                  keyDownLabel={downLabel}
+                  keyUpLabel={upLabel}
+                  className="space-y-0.5 px-1 py-1"
+                  labelRowClass="text-xs text-slate-300"
+                  labelClass=""
+                  valueClass="font-mono text-slate-100"
+                  sliderClass="w-full"
+                  accentClass="accent-emerald-400"
+                  endpointClass="text-[0.7rem] text-slate-400"
+                />
+              )}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
   );
 }
-
-function KeyPill({ label }) {
-  return <span className="rounded border border-white/40 px-1 text-[0.7rem] text-white">{label}</span>;
-}
-
-function formatDegrees(value) {
-  if (typeof value !== 'number' || Number.isNaN(value)) return '—';
-  return `${value > 0 ? '+' : ''}${value.toFixed(1)}°`;
-}