Implement KeyboardStopHandler for manual stop

- Emit stop event when spacebar is pressed in the dashboard

control-station/src/components/KeyboardStopHandler.tsx

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import PodSocketClient from "services/PodSocketClient";
+
+interface KeyboardStopHandlerProps {
+	podSocketClient: PodSocketClient;
+}
+
+function KeyboardStopHandler({ podSocketClient }: KeyboardStopHandlerProps) {
+	useEffect(() => {
+		const downHandler = (event: KeyboardEvent) => {
+			if (event.code === "Space") {
+				console.log("emit stop");
+				podSocketClient.sendStop();
+			}
+		};
+		window.addEventListener("keydown", downHandler);
+
+		return () => {
+			window.removeEventListener("keydown", downHandler);
+		};
+	}, [podSocketClient]);
+
+	return <></>;
+}
+
+export default KeyboardStopHandler;

control-station/src/views/Dashboard/Dashboard.tsx

@@ -1,3 +1,4 @@
+import KeyboardStopHandler from "components/KeyboardStopHandler";
 import usePodData from "./usePodData";
 
 function Dashboard() {
@@ -12,6 +13,7 @@ function Dashboard() {
 				<p>wheel counter - {podData.wheelCounter}</p>
 				<p>wheel speed - {podData.wheelSpeed.toFixed(2)}</p>
 			</div>
+			<KeyboardStopHandler podSocketClient={podSocketClient} />
 			<button onClick={() => podSocketClient.sendService()}>service</button>
 			<button onClick={() => podSocketClient.sendStart()}>start</button>
 			<button onClick={() => podSocketClient.sendStop()}>stop</button>