fixed settings panel showing default settings on load

src/components/FooterBar/FooterBar.tsx

@@ -1,11 +1,15 @@
-import { Box, Stack } from "@mui/material";
+import { Box, Stack, useTheme } from "@mui/material";
 import { useSettings } from "../../contexts/SettingsContext";
 import { Settings } from "../HeaderBar/Settings/Settings";
 import { WindowButtons } from "../HeaderBar/WindowButtons";
+import { hexToRgba } from "../../lib/utils/color";
 
 export const FooterBar = () => {
   // contexts
   const { settings } = useSettings();
+  const theme = useTheme();
+
+  const { r, g, b, a } = hexToRgba(theme.palette.background.paper);
 
   return (
     <Box
@@ -14,7 +18,7 @@ export const FooterBar = () => {
         display: "flex",
         flexDirection: "row",
         height: "66px",
-        zIndex: 1000000,
+        // zIndex: 1000000,
       }}
     >
       <Box
@@ -22,7 +26,7 @@ export const FooterBar = () => {
         data-tauri-drag-region="true"
         sx={{
           alignItems: "center",
-          backdropFilter: "blur(10px)",
+          backdropFilter: `blur(${settings.style.blur_radius}px)`,
           backgroundColor: "rgba(0, 0, 0, 0.5)",
           borderRadius: settings.style.radius + "px",
           display: "flex",

src/components/Generic/Layout.tsx

@@ -24,7 +24,6 @@ export const Layout = () => {
   return (
     <Box
       sx={{
-        // Use the URL function for background images
         backgroundColor: theme.palette.background.default,
         backgroundImage: settings.background.background_image_path ? `url(${imageUrl})` : "",
         backgroundSize: "cover",
@@ -44,13 +43,13 @@ export const Layout = () => {
         }}
       >
         <Box>
-          <Button
+          <button
             onClick={() => {
-              console.log(imageUrl);
+              console.log(settings);
             }}
           >
-            set background
-          </Button>
+            testing
+          </button>
         </Box>
       </Box>
       <FooterBar />

src/components/HeaderBar/Settings/Settings.tsx

@@ -8,21 +8,19 @@ import {
 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";
 import { useEffect, useState } from "react";
 import { useSettings } from "../../../contexts/SettingsContext";
 import { stagedSettingsAtom } from "../../../lib/store/jotai/settings";
 import { FloatingDialog } from "../../Generic/FloatingDialog";
 import { Background } from "./SettingsTabs/Background";
+import { Debug } from "./SettingsTabs/Debug";
 import { Style } from "./SettingsTabs/Style";
 import { Window } from "./SettingsTabs/Window";
-import { Debug } from "./SettingsTabs/Debug";
 
 export const Settings = () => {
   // contexts
   const theme = useTheme();
-  const { settings, updateSettings } = useSettings();
-  const router = useRouter();
+  const { fetchSettings, settings, updateSettings } = useSettings();
 
   // atoms
   const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
@@ -63,6 +61,7 @@ export const Settings = () => {
 
   // set staged settings back to current settings on close
   useEffect(() => {
+    if (settingsOpenState) fetchSettings();
     if (!settingsOpenState) setStagedSettings(settings);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsOpenState]);

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

@@ -27,7 +27,6 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
   const [oldWallpaperPath, setOldWallpaperPath] = useState<string | null>(null);
   const [targetWallpaperPath, setTargetWallpaperPath] = useState<string | null>(null);
   const [imageBlob, setImageBlob] = useState<string | null>(null);
-  const [noImageSelectedIcon, setNoImageSelectedIcon] = useState<string | null>(null);
 
   const handleSettingsBackgroundValueChange = (
     settingKey: string,

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

@@ -2,6 +2,9 @@ import { Box, Typography } from "@mui/material";
 import { FC } from "react";
 import { useSettings } from "../../../../contexts/SettingsContext";
 import { CategoryTitle } from "../CategoryTitle";
+import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings";
+import { useAtom } from "jotai";
+import { defaultSettings } from "../../../../lib/settings";
 
 interface DebugProps {
   sx?: any;
@@ -11,6 +14,9 @@ export const Debug: FC<DebugProps> = ({ sx }) => {
   // contexts
   const { settings, resetSettings } = useSettings();
 
+  // atoms
+  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
+
   return (
     <Box sx={{ sx }}>
       <CategoryTitle title="Debug Panel" />
@@ -22,7 +28,7 @@ export const Debug: FC<DebugProps> = ({ sx }) => {
       </Typography>
       <button
         onClick={() => {
-          resetSettings();
+          setStagedSettings(defaultSettings);
         }}
       >
         reset settings

src/contexts/SettingsContext.tsx

@@ -1,13 +1,16 @@
 import { createContext, FC, ReactNode, useContext, useEffect, useState } from "react";
 import { logcat } from "../lib/logcatService";
 import { defaultSettings, readConfigFile, SettingsType, writeConfigFile } from "../lib/settings";
+import { useAtom } from "jotai";
+import { stagedSettingsAtom } from "../lib/store/jotai/settings";
 
 // settings context
 type SettingsContextProps = {
+  fetchSettings: () => void;
+  resetSettings: () => void;
   settings: SettingsType;
   settingsLoading: boolean;
   updateSettings: (updates: SettingsType) => void;
-  resetSettings: () => void;
 };
 
 const SettingsContext = createContext<SettingsContextProps | undefined>(undefined);
@@ -15,6 +18,9 @@ const SettingsContext = createContext<SettingsContextProps | undefined>(undefine
 export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
   logcat.log("Initializing settings...", "INFO");
 
+  // atoms
+  const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom);
+
   // states
   const [settings, setSettings] = useState<SettingsType>(defaultSettings);
   const [settingsLoading, setSettingsLoading] = useState<boolean>(true);
@@ -22,7 +28,11 @@ export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const fetchSettings = async () => {
     try {
       const existingSettings = await readConfigFile();
+      // set settings state to existing settings
       setSettings(existingSettings);
+      // also update the settings atom
+      setStagedSettings(existingSettings);
+      logcat.log("Settings loaded successfully", "INFO");
     } catch (error) {
       logcat.log(`Failed to load settings: ${error}`, "ERROR");
     } finally {
@@ -60,10 +70,11 @@ export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <SettingsContext.Provider
       value={{
+        fetchSettings,
+        resetSettings,
         settings,
         settingsLoading,
         updateSettings,
-        resetSettings,
       }}
     >
       {children}