mobile swappy controls

webui/src/components/MobileControls.jsx

@@ -224,7 +224,7 @@ function MobileAuxButton({ id, label, values, color, disabled, onPress, onReleas
   );
 }
 
-function MobileLeftColumnContent({ layout }) {
+function MobileActionsColumnContent({ layout }) {
   const {
     state: { roverId, camera, horn },
     pipeline,
@@ -347,15 +347,15 @@ function MobileLeftColumnContent({ layout }) {
   );
 }
 
-export function MobileLeftColumn({ layout, className = '' }) {
+export function MobileActionsColumn({ layout, className = '' }) {
   return (
     <div className={`flex flex-col gap-0.5 ${className}`.trim()}>
-      <MobileLeftColumnContent layout={layout} />
+      <MobileActionsColumnContent layout={layout} />
     </div>
   );
 }
 
-export function MobileRightColumn({ layout, className = '' }) {
+export function MobileDriveColumn({ layout, className = '' }) {
   return (
     <div className={`flex flex-col gap-0.5 ${className}`.trim()}>
       <MobileJoystickPanel layout={layout === 'landscape' ? 'landscape' : 'portrait'} />
@@ -363,13 +363,19 @@ export function MobileRightColumn({ layout, className = '' }) {
   );
 }
 
-export default function MobilePortraitControls() {
+export default function MobilePortraitControls({ swapColumns = false }) {
   const columnHeight = 'h-[min(60svh,24rem)]';
+  const firstColumn = swapColumns
+    ? <MobileDriveColumn layout="portrait" className={columnHeight} />
+    : <MobileActionsColumn layout="portrait" className={columnHeight} />;
+  const secondColumn = swapColumns
+    ? <MobileActionsColumn layout="portrait" className={columnHeight} />
+    : <MobileDriveColumn layout="portrait" className={columnHeight} />;
   return (
     <section className="panel">
       <div className="grid grid-cols-2 gap-0.5 items-stretch">
-        <MobileLeftColumn layout="portrait" className={columnHeight} />
-        <MobileRightColumn layout="portrait" className={columnHeight} />
+        {firstColumn}
+        {secondColumn}
       </div>
     </section>
   );

webui/src/components/SettingsPanel.jsx

@@ -32,9 +32,11 @@ export default function SettingsPanel() {
   const { value: pageSettings, save: savePageSettings } = useSettingsNamespace('page', {
     hudMapDesktop: false,
     connectionTransport: 'websocket',
+    swapMobileControlColumns: false,
   });
   const { value: audioSettings, save: saveAudioSettings } = useSettingsNamespace('audio', AUDIO_SETTINGS_DEFAULTS);
   const connectionTransport = pageSettings?.connectionTransport || 'websocket';
+  const swapMobileControlColumns = Boolean(pageSettings?.swapMobileControlColumns);
   const masterVolume = Number.isFinite(audioSettings?.masterVolume) ? audioSettings.masterVolume : AUDIO_SETTINGS_DEFAULTS.masterVolume;
   const alertVolume = Number.isFinite(audioSettings?.alertVolume) ? audioSettings.alertVolume : AUDIO_SETTINGS_DEFAULTS.alertVolume;
   const roverVolume = Number.isFinite(audioSettings?.roverVolume) ? audioSettings.roverVolume : AUDIO_SETTINGS_DEFAULTS.roverVolume;
@@ -80,6 +82,11 @@ export default function SettingsPanel() {
     const checked = Boolean(event.target.checked);
     saveAudioSettings((current) => ({ ...(current ?? {}), mainBrushDuckEnabled: checked }));
   };
+
+  const handleSwapMobileControlColumns = (event) => {
+    const checked = Boolean(event.target.checked);
+    savePageSettings((current) => ({ ...(current ?? {}), swapMobileControlColumns: checked }));
+  };
   return (
     <Tabs defaultTab="keybindings">
       <TabList>
@@ -114,6 +121,18 @@ export default function SettingsPanel() {
               </label>
               <p className="text-xs text-slate-500">Mobile HUD keeps the map on by default.</p>
             </section>
+            <section className="panel-section space-y-0.5 text-sm">
+              <p className="text-slate-400">Mobile controls</p>
+              <label className="flex items-center gap-0.5 text-slate-200">
+                <input
+                  type="checkbox"
+                  className="accent-emerald-500"
+                  checked={swapMobileControlColumns}
+                  onChange={handleSwapMobileControlColumns}
+                />
+                <span>Swap control columns (put joystick on the left)</span>
+              </label>
+            </section>
             <section className="panel-section space-y-0.5 text-sm">
               <p className="text-slate-400">Audio</p>
               <label className="grid gap-0.5 text-slate-200">