From 4e5dd10786f04f4aee16bb4925385fbf9429701c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Beye?= <github@hypfer.de>
Date: Wed, 19 Feb 2025 19:25:40 +0100
Subject: [PATCH] feat(ui): Display dock state as text

---
 frontend/src/controls/Dock.tsx | 123 +++++++++++++++++----------------
 1 file changed, 64 insertions(+), 59 deletions(-)

diff --git a/frontend/src/controls/Dock.tsx b/frontend/src/controls/Dock.tsx
index 72610140a78..734330321d1 100644
--- a/frontend/src/controls/Dock.tsx
+++ b/frontend/src/controls/Dock.tsx
@@ -85,65 +85,70 @@ const Dock = (): React.ReactElement => {
         const { value: robotState } = robotStatus;
 
         return (
-            <Grid container direction="row" alignItems="center" spacing={1} pt={1}>
-                {
-                    mopDockCleanTriggerSupported &&
-                    <Grid item xs>
-                        <Button
-                            disabled={feedbackPending || commandIsExecuting || !["idle", "cleaning", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
-                            variant="outlined"
-                            size="medium"
-                            color="inherit"
-                            onClick={() => {
-                                const command = dockState === "cleaning" ? "stop" : "start";
-
-                                triggerMopDockCleanCommand(command);
-                                setFeedbackPending(true);
-                            }}
-                            sx={{width: "100%"}}
-                        >
-                            <StyledIcon as={CleanMopIcon} /> { dockState === "cleaning" ? "Stop" : "Clean" }
-                        </Button>
-                    </Grid>
-                }
-                {
-                    mopDockDryTriggerSupported &&
-                    <Grid item xs>
-                        <Button
-                            disabled={feedbackPending || commandIsExecuting || !["idle", "drying", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
-                            variant="outlined"
-                            size="medium"
-                            color="inherit"
-                            onClick={() => {
-                                const command = dockState === "drying" ? "stop" : "start";
-
-                                triggerMopDockDryCommand(command);
-                                setFeedbackPending(true);
-                            }}
-                            sx={{width: "100%"}}
-                        >
-                            <StyledIcon as={DryMopIcon} /> { dockState === "drying" ? "Stop" : "Dry" }
-                        </Button>
-                    </Grid>
-                }
-                {
-                    triggerEmptySupported &&
-                    <Grid item xs>
-                        <Button
-                            disabled={commandIsExecuting || robotState !== "docked"}
-                            variant="outlined"
-                            size="medium"
-                            color="inherit"
-                            onClick={() => {
-                                triggerDockEmpty();
-                            }}
-                            sx={{width: "100%"}}
-                        >
-                            <StyledIcon as={EmptyIcon} /> Empty
-                        </Button>
-                    </Grid>
-                }
-            </Grid>
+            <>
+                <Typography variant="overline">
+                    {dockState}
+                </Typography>
+                <Grid container direction="row" alignItems="center" spacing={1} pt={1}>
+                    {
+                        mopDockCleanTriggerSupported &&
+                        <Grid item xs>
+                            <Button
+                                disabled={feedbackPending || commandIsExecuting || !["idle", "cleaning", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
+                                variant="outlined"
+                                size="medium"
+                                color="inherit"
+                                onClick={() => {
+                                    const command = dockState === "cleaning" ? "stop" : "start";
+
+                                    triggerMopDockCleanCommand(command);
+                                    setFeedbackPending(true);
+                                }}
+                                sx={{width: "100%"}}
+                            >
+                                <StyledIcon as={CleanMopIcon} /> { dockState === "cleaning" ? "Stop" : "Clean" }
+                            </Button>
+                        </Grid>
+                    }
+                    {
+                        mopDockDryTriggerSupported &&
+                        <Grid item xs>
+                            <Button
+                                disabled={feedbackPending || commandIsExecuting || !["idle", "drying", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
+                                variant="outlined"
+                                size="medium"
+                                color="inherit"
+                                onClick={() => {
+                                    const command = dockState === "drying" ? "stop" : "start";
+
+                                    triggerMopDockDryCommand(command);
+                                    setFeedbackPending(true);
+                                }}
+                                sx={{width: "100%"}}
+                            >
+                                <StyledIcon as={DryMopIcon} /> { dockState === "drying" ? "Stop" : "Dry" }
+                            </Button>
+                        </Grid>
+                    }
+                    {
+                        triggerEmptySupported &&
+                        <Grid item xs>
+                            <Button
+                                disabled={commandIsExecuting || robotState !== "docked"}
+                                variant="outlined"
+                                size="medium"
+                                color="inherit"
+                                onClick={() => {
+                                    triggerDockEmpty();
+                                }}
+                                sx={{width: "100%"}}
+                            >
+                                <StyledIcon as={EmptyIcon} /> Empty
+                            </Button>
+                        </Grid>
+                    }
+                </Grid>
+            </>
         );
     }, [
         StyledIcon,