added blur for footer

src/components/FooterBar.tsx

@@ -4,16 +4,14 @@ import { useRouter } from "next/router";
 import { WindowButtons } from "./HeaderBar/WindowButtons";
 
 export const FooterBar = () => {
-  const router = useRouter();
-
   return (
     <Box
       className="titlebar"
       data-tauri-drag-region="true"
       sx={{
         alignItems: "center",
-        // TODO: remove when done
-        borderTop: "1px solid red",
+        backdropFilter: "blur(10px)",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
         display: "flex",
         flexDirection: "row",
         height: "48px",

src/components/HeaderBar/HeaderBar.tsx

@@ -9,8 +9,10 @@ export const HeaderBar = () => {
       data-tauri-drag-region="true"
       sx={{
         alignItems: "center",
+        // backdropFilter: "blur(10px)",
+        // backgroundColor: "rgba(0, 0, 0, 0.5)",
         // TODO: remove when done
-        borderBottom: "1px solid red",
+        // borderBottom: "1px solid red",
         display: "flex",
         flexDirection: "row",
         height: "48px",

src/components/HeaderBar/Settings/Settings.tsx

@@ -27,8 +27,6 @@ export const Settings = () => {
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
 
   const toggleSettings = () => {
-    // reset the settings maximised state
-    setSettingsMaximisedState(false);
     setSettingsOpenState((prevState) => !prevState);
   };
 

src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx

@@ -0,0 +1,72 @@
+import { Box, Switch } from "@mui/material";
+import { useAtom } from "jotai";
+import { FC } from "react";
+import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
+import { CategoryTitle } from "../CategoryTitle";
+import { SettingsItem } from "../SettingsItem";
+
+interface SettingsTabWindowProps {
+  sx?: any;
+}
+
+export const SettingsTabWindow: FC<SettingsTabWindowProps> = ({ sx }) => {
+  // atoms
+  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
+
+  const handleSettingsWindowValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => {
+    const newSettings = {
+      ...stagedSettings,
+      window: {
+        ...stagedSettings.window,
+        [settingKey]: settingValue,
+      },
+    };
+    setStagedSettings(newSettings);
+  };
+
+  return (
+    <Box sx={{ sx }}>
+      <CategoryTitle title="Fullscreen" />
+      <SettingsItem
+        defaultText="On"
+        description="Fullscreen on startup"
+        input={
+          <Switch
+            checked={stagedSettings.window.start_fullscreen}
+            name="start_fullscreen"
+            onChange={(e) => {
+              handleSettingsWindowValueChange(e.target.name, e.target.checked);
+            }}
+          />
+        }
+      />
+      <CategoryTitle title="Titlebar Buttons" />
+      <SettingsItem
+        defaultText="Off"
+        description="Minimize button"
+        input={
+          <Switch
+            checked={stagedSettings.window.minimize_button}
+            name="minimize_button"
+            onChange={(e) => {
+              handleSettingsWindowValueChange(e.target.name, e.target.checked);
+            }}
+          />
+        }
+      />
+      <SettingsItem
+        defaultText="Off"
+        description="Maximize button"
+        input={
+          <Switch
+            checked={stagedSettings.window.maximize_button}
+            name="maximize_button"
+            onChange={(e) => {
+              handleSettingsWindowValueChange(e.target.name, e.target.checked);
+            }}
+          />
+        }
+      />
+    </Box>
+  );
+};

src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx

@@ -1,4 +1,4 @@
-import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material";
+import { Box, Switch } from "@mui/material";
 import { useAtom } from "jotai";
 import { FC } from "react";
 import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";