From 150bafb7bff5714be28e91869fa1219e2b3c292f Mon Sep 17 00:00:00 2001
From: Vomitblood <tohyouxuan@gmail.com>
Date: Wed, 7 Aug 2024 13:54:22 +0800
Subject: [PATCH] added blur for footer

---
 src/components/FooterBar.tsx                  |  6 +-
 src/components/HeaderBar/HeaderBar.tsx        |  4 +-
 .../HeaderBar/Settings/Settings.tsx           |  2 -
 .../SettingsTabs/SettingsTabBackground.tsx    | 72 +++++++++++++++++++
 .../SettingsTabs/SettingsTabWindow.tsx        |  2 +-
 5 files changed, 78 insertions(+), 8 deletions(-)
 create mode 100644 src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx

diff --git a/src/components/FooterBar.tsx b/src/components/FooterBar.tsx
index ec4951f..c226a16 100644
--- a/src/components/FooterBar.tsx
+++ b/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",
diff --git a/src/components/HeaderBar/HeaderBar.tsx b/src/components/HeaderBar/HeaderBar.tsx
index 31c4591..b488321 100644
--- a/src/components/HeaderBar/HeaderBar.tsx
+++ b/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",
diff --git a/src/components/HeaderBar/Settings/Settings.tsx b/src/components/HeaderBar/Settings/Settings.tsx
index 0cd92a8..108503d 100644
--- a/src/components/HeaderBar/Settings/Settings.tsx
+++ b/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);
   };
 
diff --git a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabBackground.tsx
new file mode 100644
index 0000000..41b5dfe
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
index 13b3373..41b5dfe 100644
--- a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx
+++ b/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";