updated mobile page

webui/src/components/ControlSummary.jsx

@@ -7,21 +7,12 @@ import TopDownMap from './TopDownMap.jsx';
 import RoverRoster from './RoverRoster.jsx';
 import DriveDockAction, { useDriveDockState } from './DriveDockAction.jsx';
 
-export default function ControlSummary() {
+export function RoverRosterPanel({ title = 'Rovers' }) {
   const { session, requestControl } = useSession();
-  const {
-    state: { roverId, keymap },
-  } = useControlSystem();
-  const frame = useTelemetryFrame(roverId);
-  const sensors = frame?.sensors || {};
-  const driveDockState = useDriveDockState(roverId);
-  const roster = session?.roster ?? [];
   const [pending, setPending] = useState({});
 
   const canRequest = useMemo(() => session?.role && session.role !== 'spectator', [session?.role]);
 
-  const hideInlineControls = driveDockState.docked && !driveDockState.driving;
-
   async function handleRequest(targetRoverId) {
     if (!targetRoverId) return;
     setPending((prev) => ({ ...prev, [targetRoverId]: true }));
@@ -34,6 +25,35 @@ export default function ControlSummary() {
     }
   }
 
+  return (
+    <RoverRoster
+      title={title}
+      roster={session?.roster ?? []}
+      renderActions={(rover) =>
+        canRequest ? (
+          <button
+            type="button"
+            onClick={() => handleRequest(rover.id)}
+            disabled={pending[rover.id]}
+            className="button-dark disabled:opacity-40"
+          >
+            {pending[rover.id] ? '...' : 'request'}
+          </button>
+        ) : null
+      }
+    />
+  );
+}
+
+export default function ControlSummary({ showRoster = true }) {
+  const {
+    state: { roverId, keymap },
+  } = 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-1 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)] md:min-h-[22rem]">
@@ -49,22 +69,7 @@ export default function ControlSummary() {
           {!hideInlineControls ? <InlineCameraTilt keymap={keymap} /> : null}
         </div>
       </div>
-      <RoverRoster
-        title="Rovers"
-        roster={roster}
-        renderActions={(rover) =>
-          canRequest ? (
-            <button
-              type="button"
-              onClick={() => handleRequest(rover.id)}
-              disabled={pending[rover.id]}
-              className="button-dark disabled:opacity-40"
-            >
-              {pending[rover.id] ? '...' : 'request'}
-            </button>
-          ) : null
-        }
-      />
+      {showRoster ? <RoverRosterPanel /> : null}
     </section>
   );
 }