added debug panel

src/components/HeaderBar/Settings/Settings.tsx

@@ -1,5 +1,11 @@
-import { BugReportOutlined, SettingsOutlined } from "@mui/icons-material";
+import {
-import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
+  BugReportOutlined,
+  FormatPaintOutlined,
+  SettingsOutlined,
+  WallpaperOutlined,
+  WebAssetOutlined,
+} from "@mui/icons-material";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Box, Button, IconButton, Tab, Tooltip, useTheme } from "@mui/material";
 import { useAtom } from "jotai";
 import { useRouter } from "next/router";
@@ -10,6 +16,7 @@ import { FloatingDialog } from "../../Generic/FloatingDialog";
 import { Background } from "./SettingsTabs/Background";
 import { Style } from "./SettingsTabs/Style";
 import { Window } from "./SettingsTabs/Window";
+import { Debug } from "./SettingsTabs/Debug";
 
 export const Settings = () => {
   // contexts
@@ -24,8 +31,6 @@ export const Settings = () => {
   const [settingsOpenState, setSettingsOpenState] = useState<boolean>(false);
   const [settingsMaximisedState, setSettingsMaximisedState] = useState<boolean>(false);
   const [subTabValue, setSubTabValue] = useState("style");
-  const [applyLoading, setApplyLoading] = useState<boolean>(false);
-  const [saveLoading, setSaveLoading] = useState<boolean>(false);
 
   const toggleSettings = () => {
     setSettingsOpenState((prevState) => !prevState);
@@ -47,9 +52,7 @@ export const Settings = () => {
   };
 
   const applyClickEvent = () => {
-    setApplyLoading(true);
     updateSettings(stagedSettings);
-    setApplyLoading(false);
   };
 
   const saveClickEvent = () => {
@@ -61,24 +64,11 @@ export const Settings = () => {
   // set staged settings back to current settings on close
   useEffect(() => {
     if (!settingsOpenState) setStagedSettings(settings);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsOpenState]);
 
   return (
     <FloatingDialog
-      actionButtons={
-        <>
-          <IconButton
-            onClick={() => {
-              router.push("/testing");
-            }}
-            sx={{
-              mr: 1,
-            }}
-          >
-            <BugReportOutlined />
-          </IconButton>
-        </>
-      }
       body={
         <Box
           sx={{
@@ -104,22 +94,31 @@ export const Settings = () => {
               variant="scrollable"
             >
               <Tab
+                icon={<FormatPaintOutlined />}
                 label="Style"
                 value="style"
               />
               <Tab
+                icon={<WallpaperOutlined />}
                 label="Background"
                 value="background"
               />
               <Tab
+                icon={<WebAssetOutlined />}
                 label="Window"
                 value="window"
               />
+              <Tab
+                icon={<BugReportOutlined />}
+                label="Debug"
+                value="debug"
+              />
             </TabList>
             <Box
-              overflow="auto"
               sx={{
                 height: "100%",
+                overflowY: "auto",
+                m: 0,
                 width: "100%",
               }}
             >
@@ -141,6 +140,12 @@ export const Settings = () => {
               >
                 <Window />
               </TabPanel>
+              <TabPanel
+                sx={{ p: 2 }}
+                value="debug"
+              >
+                <Debug />
+              </TabPanel>
             </Box>
           </TabContext>
         </Box>
@@ -164,8 +169,7 @@ export const Settings = () => {
             Cancel
           </Button>
 
-          <LoadingButton
+          <Button
-            loading={applyLoading}
             onClick={applyClickEvent}
             size="small"
             sx={{
@@ -174,15 +178,14 @@ export const Settings = () => {
             variant="outlined"
           >
             Apply
-          </LoadingButton>
+          </Button>
-          <LoadingButton
+          <Button
-            loading={saveLoading}
             onClick={saveClickEvent}
             size="small"
             variant="contained"
           >
             Save
-          </LoadingButton>
+          </Button>
         </Box>
       }
       close={closeSettings}

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

@@ -18,7 +18,7 @@ interface BackgroundProps {
 
 export const Background: FC<BackgroundProps> = ({ sx }) => {
   // contexts
-  const { settings, updateSettings } = useSettings();
+  const { settings } = useSettings();
 
   // atoms
   const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
@@ -112,6 +112,7 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
     applyWallpaper();
 
     setOldWallpaperPath(settings.background.background_image_path);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings.background.background_image_path]);
 
   // update the preview image when stagedSettings.background.background_image_path changes

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

@@ -0,0 +1,47 @@
+import { Box, Typography } from "@mui/material";
+import { FC } from "react";
+import { useSettings } from "../../../../contexts/SettingsContext";
+import { CategoryTitle } from "../CategoryTitle";
+
+interface DebugProps {
+  sx?: any;
+}
+
+export const Debug: FC<DebugProps> = ({ sx }) => {
+  // contexts
+  const { settings, resetSettings } = useSettings();
+
+  return (
+    <Box sx={{ sx }}>
+      <CategoryTitle title="Debug Panel" />
+      <Typography
+        color="error"
+        variant="h6"
+      >
+        Here do be dragons
+      </Typography>
+      <button
+        onClick={() => {
+          resetSettings();
+        }}
+      >
+        reset settings
+      </button>
+      <button>update settings</button>
+      <button
+        onClick={() => {
+          console.log(settings);
+        }}
+      >
+        log settings
+      </button>
+      <button
+        onClick={() => {
+          console.log(settings.background.background_image_path);
+        }}
+      >
+        testing
+      </button>
+    </Box>
+  );
+};