feat(ui): Improve controls

frontend/src/controls/BasicControls.tsx

@@ -1,17 +1,14 @@
 import {
     Box,
     Button,
+    ButtonGroup,
     Grid,
-    Icon,
     Paper,
-    styled,
     Typography,
 } from "@mui/material";
 import {
     BasicControlCommand,
-    Capability,
     StatusState,
-    useAutoEmptyDockManualTriggerMutation,
     useBasicControlMutation,
     useRobotStatusQuery,
 } from "../api";
@@ -20,23 +17,15 @@ import {
     Pause as PauseIcon,
     PlayArrow as StartIcon,
     Stop as StopIcon,
-    RestoreFromTrash as EmptyIcon,
     SvgIconComponent,
 } from "@mui/icons-material";
-import { useCapabilitiesSupported } from "../CapabilitiesProvider";
-
-const StyledIcon = styled(Icon)(({ theme }) => {
-    return {
-        marginRight: theme.spacing(1),
-        marginLeft: -theme.spacing(1),
-    };
-});
+import React from "react";
 
 const StartStates: StatusState["value"][] = ["idle", "docked", "paused", "error"];
 const PauseStates: StatusState["value"][] = ["cleaning", "returning", "moving"];
 
 interface CommandButton {
-    command: BasicControlCommand | "trigger_empty";
+    command: BasicControlCommand;
     enabled: boolean;
     label: string;
     Icon: SvgIconComponent;
@@ -48,23 +37,12 @@ const BasicControls = (): JSX.Element => {
         mutate: executeBasicControlCommand,
         isLoading: basicControlIsExecuting
     } = useBasicControlMutation();
-    const [triggerEmptySupported] = useCapabilitiesSupported(Capability.AutoEmptyDockManualTrigger);
-    const {
-        mutate: triggerDockEmpty,
-        isLoading: emptyIsExecuting,
-    } = useAutoEmptyDockManualTriggerMutation();
 
-    const isLoading = basicControlIsExecuting || emptyIsExecuting;
+    const isLoading = basicControlIsExecuting;
 
-    const sendCommand = (command: BasicControlCommand | "trigger_empty") => {
+    const sendCommand = (command: BasicControlCommand) => {
         return () => {
-            switch (command) {
-                case "trigger_empty":
-                    triggerDockEmpty();
-                    break;
-                default:
-                    executeBasicControlCommand(command);
-            }
+            executeBasicControlCommand(command);
         };
     };
 
@@ -107,34 +85,33 @@ const BasicControls = (): JSX.Element => {
         },
     ];
 
-    if (triggerEmptySupported) {
-        buttons.push({
-            command: "trigger_empty",
-            enabled: state === "docked",
-            label: "Empty",
-            Icon: EmptyIcon,
-        });
-    }
-
     return (
         <Paper>
             <Box p={1}>
-                <Grid container spacing={1} justifyContent="space-evenly">
-                    {buttons.map(({ label, command, enabled, Icon }) => {
-                        return (
-                            <Grid item key={command}>
-                                <Button
-                                    variant="outlined"
-                                    size="medium"
-                                    disabled={!enabled || isLoading}
-                                    onClick={sendCommand(command)}
-                                    color="inherit"
-                                >
-                                    <StyledIcon as={Icon} /> {label}
-                                </Button>
-                            </Grid>
-                        );
-                    })}
+                <Grid item container direction="column">
+                    <Grid item>
+                        <ButtonGroup
+                            fullWidth
+                            variant="outlined"
+                        >
+                            {buttons.map(({ label, command, enabled, Icon }) => {
+                                return (
+
+                                    <Button
+                                        key={command}
+                                        variant="outlined"
+                                        size="medium"
+                                        disabled={!enabled || isLoading}
+                                        onClick={sendCommand(command)}
+                                        color="inherit"
+                                        style={{height: "3.5em", borderColor: "inherit"}}
+                                    >
+                                        <Icon />
+                                    </Button>
+                                );
+                            })}
+                        </ButtonGroup >
+                    </Grid>
                 </Grid>
             </Box>
         </Paper>

frontend/src/controls/ControlsBody.tsx

@@ -1,16 +1,14 @@
-import { Grid } from "@mui/material";
-import {
-    Celebration as FanSpeedIcon,
-    Opacity as WaterUsageIcon,
-} from "@mui/icons-material";
-import { Capability } from "../api";
-import { useCapabilitiesSupported } from "../CapabilitiesProvider";
+import {Grid} from "@mui/material";
+import {Celebration as FanSpeedIcon, Opacity as WaterUsageIcon,} from "@mui/icons-material";
+import {Capability} from "../api";
+import {useCapabilitiesSupported} from "../CapabilitiesProvider";
 import BasicControls from "./BasicControls";
 import GoToLocationPresets from "./GoToPresets";
 import PresetSelectionControl from "./PresetSelection";
 import RobotStatus from "./RobotStatus";
 import Segments from "./Segments";
 import ZonePresets from "./ZonePresets";
+import Dock from "./Dock";
 
 const ControlsBody = (): JSX.Element => {
     const [
@@ -21,14 +19,16 @@ const ControlsBody = (): JSX.Element => {
         zoneCleaning,
         segmentCleaning,
         segmentNaming,
+        triggerEmptySupported,
     ] = useCapabilitiesSupported(
         Capability.BasicControl,
         Capability.FanSpeedControl,
         Capability.WaterUsageControl,
         Capability.GoToLocation,
         Capability.ZoneCleaning,
         Capability.MapSegmentation,
-        Capability.MapSegmentRename
+        Capability.MapSegmentRename,
+        Capability.AutoEmptyDockManualTrigger
     );
 
     return (
@@ -64,6 +64,11 @@ const ControlsBody = (): JSX.Element => {
                     />
                 </Grid>
             )}
+            {triggerEmptySupported && (
+                <Grid item>
+                    <Dock/>
+                </Grid>
+            )}
             {goToLocation && (
                 <Grid item>
                     <GoToLocationPresets />

frontend/src/controls/ControlsBottomSheet.tsx

@@ -46,7 +46,9 @@ const ControlsBottomSheet = (): JSX.Element => {
                         // TODO
                         setTimeout(() => {
                             requestAnimationFrame (() => {
-                                sheetRef.current.parentElement.parentElement.scrollTop = 0;
+                                if (sheetRef.current !== null) {
+                                    sheetRef.current.parentElement.parentElement.scrollTop = 0;
+                                }
                             });
                         }, 200);
 

frontend/src/controls/Dock.tsx

@@ -0,0 +1,69 @@
+import {Capability, useAutoEmptyDockManualTriggerMutation, useRobotStatusQuery} from "../api";
+import {useCapabilitiesSupported} from "../CapabilitiesProvider";
+import {Box, Button, Grid, Icon, Paper, styled, Typography} from "@mui/material";
+import {
+    RestoreFromTrash as EmptyIcon
+} from "@mui/icons-material";
+import React from "react";
+
+const Dock = (): JSX.Element => {
+    const { data: status } = useRobotStatusQuery();
+
+    const StyledIcon = styled(Icon)(({ theme }) => {
+        return {
+            marginRight: theme.spacing(1),
+            marginLeft: -theme.spacing(1),
+        };
+    });
+
+    const [triggerEmptySupported] = useCapabilitiesSupported(Capability.AutoEmptyDockManualTrigger);
+    const {
+        mutate: triggerDockEmpty,
+        isLoading: emptyIsExecuting,
+    } = useAutoEmptyDockManualTriggerMutation();
+
+    if (status === undefined) {
+        return (
+            <Paper>
+                <Box p={1}>
+                    <Typography color="error">Error loading dock controls</Typography>
+                </Box>
+            </Paper>
+        );
+    }
+
+    const { value: state } = status;
+
+    return (
+        <Paper>
+            <Box px={2} py={1}>
+                <Grid container direction="row" alignItems="center" spacing={1}>
+                    <Grid item>
+                        <Typography variant="subtitle1">Dock</Typography>
+                    </Grid>
+                    {
+                        triggerEmptySupported &&
+                        <Grid item xs>
+                            <Box display="flex" justifyContent="flex-end">
+                                <Button
+                                    disabled={emptyIsExecuting || state !== "docked"}
+                                    variant="outlined"
+                                    size="medium"
+                                    color="inherit"
+                                    onClick={() => {
+                                        triggerDockEmpty();
+                                    }}
+                                >
+                                    <StyledIcon as={EmptyIcon} /> Empty
+                                </Button>
+                            </Box>
+                        </Grid>
+                    }
+
+                </Grid>
+            </Box>
+        </Paper>
+    );
+};
+
+export default Dock;

frontend/src/controls/RobotStatus.tsx

@@ -1,20 +1,14 @@
 import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Box,
-    CircularProgress,
-    Divider,
+    Box, CircularProgress,
     Grid,
     LinearProgress,
-    linearProgressClasses,
+    linearProgressClasses, Paper,
     styled,
     ToggleButton,
     ToggleButtonGroup,
     Typography,
 } from "@mui/material";
 import { green, red, yellow } from "@mui/material/colors";
-import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
 import React from "react";
 import {
     RobotAttributeClass,
@@ -77,6 +71,14 @@ const RobotStatus = (): JSX.Element => {
             return <Typography color="error">Error loading robot state</Typography>;
         }
 
+        if (isLoading) {
+            return (
+                <Grid item>
+                    <CircularProgress color="inherit" size="1rem" />
+                </Grid>
+            );
+        }
+
         if (status === undefined) {
             return null;
         }
@@ -87,7 +89,7 @@ const RobotStatus = (): JSX.Element => {
                 {status.flag !== "none" ? <> &ndash; {status.flag}</> : ""}
             </Typography>
         );
-    }, [isStatusError, status]);
+    }, [isStatusError, status, isLoading]);
 
     const batteriesDetails = React.useMemo(() => {
         if (isBatteryError) {
@@ -163,27 +165,9 @@ const RobotStatus = (): JSX.Element => {
     }, [attachments, isAttachmentError]);
 
     return (
-        <Accordion defaultExpanded={true}>
-            <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Grid
-                    container
-                    spacing={3}
-                    alignItems="center"
-                    justifyContent="space-between"
-                >
-                    <Grid item>
-                        <Typography>Status</Typography>
-                    </Grid>
-                    {isLoading && (
-                        <Grid item>
-                            <CircularProgress color="inherit" size="1rem" />
-                        </Grid>
-                    )}
-                </Grid>
-            </AccordionSummary>
-            <Divider />
-            <Box p={1} />
-            <AccordionDetails>
+        <Paper>
+            <Box p={1}>
+
                 <Grid container spacing={2} direction="column">
                     <Grid item container>
                         <Grid item xs container direction="column">
@@ -208,8 +192,8 @@ const RobotStatus = (): JSX.Element => {
                         <Grid item>{attachmentDetails}</Grid>
                     </Grid>
                 </Grid>
-            </AccordionDetails>
-        </Accordion>
+            </Box>
+        </Paper>
     );
 };