slopfixing / issue 002

webui/src/components/MobileControls/AuxColumn.jsx

@@ -2,7 +2,7 @@
 // Purpose: Assembles the mobile auxiliary controls column, which is the left column by default.
 // Scope: Owns mobile aux/camera/night vision/horn wiring while reusing desktop variation components where intended.
 import { useCallback, useRef } from 'react';
-import { useControlSystem } from '../../controls/index.js';
+import { useControlActions, useControlSelector } from '../../controls/index.js';
 import { useManualDockAssist } from '../../features/manualDockAssist/useManualDockAssist.js';
 import HornControl from '../HornControl/index.jsx';
 import NightVisionControl from '../NightVisionControl/index.jsx';
@@ -11,19 +11,20 @@ import VacuumControls from './VacuumControls.jsx';
 import VerticalCameraTilt from './VerticalCameraTilt.jsx';
 
 function AuxColumnContent() {
-  const {
-    state: { roverId, camera, horn },
-    pipeline,
-    actions: { setServoAngle, setNightVision, setAuxMotors, startHorn, stopHorn },
-  } = useControlSystem();
+  const roverId = useControlSelector((control) => control.state.roverId);
+  const camera = useControlSelector((control) => control.state.camera);
+  const horn = useControlSelector((control) => control.state.horn);
+  const nightVision = useControlSelector((control) => control.pipeline?.nightVision);
+  const nightVisionState = useControlSelector((control) => control.pipeline?.nightVisionState);
+  const pipelineHorn = useControlSelector((control) => control.pipeline?.horn);
+  const { setServoAngle, setNightVision, setAuxMotors, startHorn, stopHorn } = useControlActions();
   const dockAssist = useManualDockAssist();
   const disabled = !roverId;
   const activeAuxButtonRef = useRef(null);
   const cameraConfig = camera?.config;
   const cameraEnabled = Boolean(roverId && camera?.enabled && cameraConfig);
-  const nightVisionAvailable = Boolean(roverId && pipeline?.nightVision);
-  const nightVisionState = pipeline?.nightVisionState;
-  const hornAvailable = Boolean(roverId && pipeline?.horn);
+  const nightVisionAvailable = Boolean(roverId && nightVision);
+  const hornAvailable = Boolean(roverId && pipelineHorn);
   const hornBlocked = horn?.overheated;
   const cameraMin = typeof cameraConfig?.minAngle === 'number' ? cameraConfig.minAngle : -45;
   const cameraMax = typeof cameraConfig?.maxAngle === 'number' ? cameraConfig.maxAngle : 45;

webui/src/components/MobileControls/ControlPadPanel.jsx

@@ -2,7 +2,7 @@
 // Purpose: Provides the mobile movement control pad and speed mode selector.
 // Scope: Converts touch pad cells into keyboard-style drive vectors; movement column owns drive/dock placement.
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useControlSystem } from '../../controls/index.js';
+import { useControlActions, useControlSelector } from '../../controls/index.js';
 import { normalizeKeymapEntries } from '../../controls/keymapUtils.js';
 import {
   computeKeyboardDriveVector,
@@ -29,10 +29,8 @@ function getSpeedModeConfig(speedMode) {
 }
 
 export default function ControlPadPanel({ disabled = false }) {
-  const {
-    state: { keymap: rawKeymap },
-    actions: { setDriveVector, registerInputState },
-  } = useControlSystem();
+  const rawKeymap = useControlSelector((control) => control.state.keymap);
+  const { setDriveVector, registerInputState } = useControlActions();
   const { value: inputSettings } = useSettingsNamespace('inputs', INPUT_SETTINGS_DEFAULTS);
   const [speedMode, setSpeedMode] = useState('normal');
   const [activeInputLabel, setActiveInputLabel] = useState('stop');

webui/src/components/MobileControls/MovementColumn.jsx

@@ -1,14 +1,12 @@
 // Movement Column
 // Purpose: Assembles the mobile movement column, which is the right column by default.
 // Scope: Integrates drive/dock actions with the mobile control pad without hiding that dependency inside the pad.
-import { useControlSystem } from '../../controls/index.js';
+import { useControlSelector } from '../../controls/index.js';
 import DriveDockAction, { useDriveDockState } from '../DriveDockAction/index.jsx';
 import ControlPadPanel from './ControlPadPanel.jsx';
 
 function MovementColumnContent({ layout }) {
-  const {
-    state: { roverId },
-  } = useControlSystem();
+  const roverId = useControlSelector((control) => control.state.roverId);
   const driveDockState = useDriveDockState(roverId);
   const dockedNotDriving = driveDockState.docked && !driveDockState.driving;
   const expandAction = dockedNotDriving || driveDockState.dockingInProgress;