Merge branch 'better_settings_layout' into gui_graphs

gui_dev/package.json

@@ -21,7 +21,7 @@
     "react-dom": "next",
     "react-icons": "^5.3.0",
     "react-plotly.js": "^2.6.0",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^7.0.1",
     "zustand": "latest"
   },
   "devDependencies": {

gui_dev/src/App.jsx

@@ -45,8 +45,6 @@ export const App = () => {
   const connectSocket = useSocketStore((state) => state.connectSocket);
   const disconnectSocket = useSocketStore((state) => state.disconnectSocket);
 
-  connectSocket();
-
   useEffect(() => {
     console.log("Connecting socket from App component...");
     connectSocket();

gui_dev/src/components/StatusBar/StatusBar.jsx

@@ -2,12 +2,14 @@ import { ResizeHandle } from "./ResizeHandle";
 import { SocketStatus } from "./SocketStatus";
 import { WebviewStatus } from "./WebviewStatus";
 
-import { useWebviewStore } from "@/stores";
-
+import { useUiStore, useWebviewStore } from "@/stores";
 import { Stack } from "@mui/material";
 
 export const StatusBar = () => {
-  const { isWebView } = useWebviewStore((state) => state.isWebView);
+  const isWebView = useWebviewStore((state) => state.isWebView);
+  const createStatusBarContent = useUiStore((state) => state.statusBarContent);
+
+  const StatusBarContent = createStatusBarContent();
 
   return (
     <Stack
@@ -17,8 +19,11 @@ export const StatusBar = () => {
       bgcolor="background.level1"
       borderTop="2px solid"
       borderColor="background.level3"
+      height="2rem"
     >
-      <WebviewStatus />
+      {StatusBarContent && <StatusBarContent />}
+
+      {/* <WebviewStatus /> */}
       {/* Current experiment */}
       {/* Current stream */}
       {/* Current activity */}

gui_dev/src/components/TitledBox.jsx

@@ -1,4 +1,4 @@
-import { Container } from "@mui/material";
+import { Box, Container } from "@mui/material";
 
 /**
  * Component that uses the Box component to render an HTML fieldset element
@@ -13,14 +13,14 @@ export const TitledBox = ({
   children,
   ...props
 }) => (
-  <Container
+  <Box
     component="fieldset"
     {...props}
     sx={{
       borderRadius: 5,
       border: "1px solid #555",
       backgroundColor: "#424242",
-      padding: 2,
+      padding: 1,
       width: "100%",
       gap: 2,
       display: "flex",
@@ -31,5 +31,5 @@ export const TitledBox = ({
   >
     <legend>{title}</legend>
     {children}
-  </Container>
+  </Box>
 );