uiuiui

webui/src/components/HudOverlays/newgen/CornerPods/AccessoriesExpansion.jsx

@@ -0,0 +1,34 @@
+// Desktop Accessories Expansion
+// Purpose: Places generic rover controls on a collapsible surface centered along the video's left wall.
+// Scope: Owns desktop positioning and persisted visibility while reusing the layout-independent control renderer.
+import RoverAccessoryControls from '../../../RoverAccessoryControls/index.jsx';
+import AccessoriesToggle from '../../../RoverAccessoryControls/AccessoriesToggle.jsx';
+import useRoverAccessories from '../../../RoverAccessoryControls/useRoverAccessories.js';
+import usePodVisibility from './usePodVisibility.js';
+
+export default function AccessoriesExpansion({ roverId }) {
+  const { hasAccessories } = useRoverAccessories(roverId);
+  const [open, setOpen] = usePodVisibility('accessories', false);
+
+  // Do not leave an invisible anchor or reserved HUD area on rovers whose
+  // peripherals provide only standardized controls or no controls at all.
+  if (!hasAccessories) return null;
+
+  return (
+    <div className="pointer-events-none absolute inset-y-0 left-0 z-20 flex items-center">
+      <AccessoriesToggle
+        label="Accessories"
+        ariaLabel={open ? 'Hide accessory controls' : 'Show accessory controls'}
+        onClick={() => setOpen(!open)}
+        className={`pointer-events-auto !h-28 rounded-l-none ${open ? 'rounded-r-none' : ''}`}
+      />
+      {open ? (
+        <div className="pointer-events-auto h-[70%] min-h-48 max-h-[32rem] w-72 overflow-hidden rounded-r-xl border-2 border-l-0 border-cyan-300/70 bg-slate-950/95 shadow-2xl">
+          {/* This is exactly the renderer mounted by AuxColumn. The desktop
+              wrapper changes available dimensions, never control behavior. */}
+          <RoverAccessoryControls roverId={roverId} className="h-full" />
+        </div>
+      ) : null}
+    </div>
+  );
+}

webui/src/components/HudOverlays/newgen/CornerPods/index.jsx

@@ -4,6 +4,7 @@ import TopLeftPod from './TopLeftPod.jsx';
 import TopRightPod from './TopRightPod.jsx';
 import BottomLeftPod from './BottomLeftPod.jsx';
 import BottomRightPod from './BottomRightPod.jsx';
+import AccessoriesExpansion from './AccessoriesExpansion.jsx';
 import { useDriverLayout } from '../../../../layouts/driver/DriverLayoutContext.jsx';
 
 export default function CornerPods({ roverId }) {
@@ -17,6 +18,9 @@ export default function CornerPods({ roverId }) {
       {/* The mobile layouts already provide large touch controls around the video.
           Omitting this pod avoids presenting duplicate horn, light, and laser actions. */}
       {showPhysicalControlPods ? <BottomLeftPod roverId={roverId} /> : null}
+      {/* Generic accessory controls stay on the same left side at every
+          breakpoint, but mobile owns their placement inside AuxColumn. */}
+      {showPhysicalControlPods ? <AccessoriesExpansion roverId={roverId} /> : null}
       {/* BottomRightPod also owns the independent chat expansion, so it remains mounted
           on mobile and determines its own camera-control visibility from layout context. */}
       <BottomRightPod roverId={roverId} />