fixed paths initialization for settings

package.json

@@ -15,7 +15,7 @@
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.6",
-    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/lab": "5.0.0-alpha.143",
     "@mui/material": "^5.16.6",
     "@tauri-apps/api": "^1.6.0",
     "jotai": "^2.9.1",

src/components/Generic/FloatingDialog.tsx

@@ -59,6 +59,7 @@ export const FloatingDialog: FC<FloatingDialog> = ({
         >
           <Box
             sx={{
+              alignItems: "center",
               display: "flex",
               px: 1,
             }}

src/components/HeaderBar/HeaderBar.tsx

@@ -1,8 +1,8 @@
-import { Box, Button, IconButton, Typography } from "@mui/material";
+import { BugReportOutlined } from "@mui/icons-material";
-import { WindowButtons } from "./WindowButtons";
+import { Box, IconButton, Stack } from "@mui/material";
-import { BugReport, BugReportOutlined } from "@mui/icons-material";
 import { useRouter } from "next/router";
 import { Settings } from "./Settings/Settings";
+import { WindowButtons } from "./WindowButtons";
 
 export const HeaderBar = () => {
   const router = useRouter();
@@ -41,6 +41,15 @@ export const HeaderBar = () => {
           display: "flex",
           flexDirection: "row",
         }}
+      >
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+          }}
         >
           <IconButton
             onClick={() => {
@@ -51,6 +60,7 @@ export const HeaderBar = () => {
           </IconButton>
           <Settings />
           <WindowButtons />
+        </Stack>
       </Box>
     </Box>
   );

src/components/HeaderBar/Settings/Settings.tsx

@@ -1,11 +1,12 @@
 import { SettingsOutlined } from "@mui/icons-material";
-import { LoadingButton } from "@mui/lab";
+import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Button, IconButton, Typography, useTheme } from "@mui/material";
+import { Box, Button, IconButton, Tab, useTheme } from "@mui/material";
 import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { useSettings } from "../../../contexts/SettingsContext";
 import { settingsAtom } from "../../../lib/store/jotai/settings";
 import { FloatingDialog } from "../../Generic/FloatingDialog";
+import { SettingsTabDisplay } from "./SettingsTabDisplay";
 
 export const Settings = () => {
   // contexts
@@ -60,7 +61,53 @@ export const Settings = () => {
 
   return (
     <FloatingDialog
-      body={<Typography>Settings</Typography>}
+      body={
+        <Box
+          sx={{
+            // TODO: make look nice
+            border: "1px solid " + theme.palette.grey[700],
+            borderRadius: settings.display.radius + "px",
+            display: "flex",
+            flexDirection: "column",
+            flexGrow: 1,
+            my: 2,
+            overflow: "hidden",
+            p: 0,
+          }}
+        >
+          <TabContext value={subTabValue}>
+            <TabList
+              onChange={(e, value) => {
+                subTabChangeEvent(value);
+              }}
+              scrollButtons={true}
+              sx={{
+                borderBottom: "1px solid " + theme.palette.divider,
+              }}
+              variant="scrollable"
+            >
+              <Tab
+                label="Display"
+                value="display"
+              />
+            </TabList>
+            <Box
+              overflow="auto"
+              sx={{
+                height: "100%",
+                width: "100%",
+              }}
+            >
+              <TabPanel
+                sx={{ p: 2 }}
+                value="display"
+              >
+                <SettingsTabDisplay />
+              </TabPanel>
+            </Box>
+          </TabContext>
+        </Box>
+      }
       bottomBar={
         <Box
           sx={{

src/components/HeaderBar/WindowButtons.tsx

@@ -41,7 +41,13 @@ export const WindowButtons = () => {
   });
 
   return (
-    <Box>
+    <Box
+      sx={{
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+      }}
+    >
       <Stack
         direction="row"
         spacing={1}

src/contexts/SettingsContext.tsx

@@ -19,6 +19,17 @@ export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [settings, setSettings] = useState<SettingsType>(defaultSettings);
   const [settingsLoading, setSettingsLoading] = useState<boolean>(true);
 
+  const fetchSettings = async () => {
+    try {
+      const existingSettings = await readConfigFile();
+      setSettings(existingSettings);
+    } catch (error) {
+      logcat.log(`Failed to load settings: ${error}`, "ERROR");
+    } finally {
+      setSettingsLoading(false);
+    }
+  };
+
   const updateSettings = async (newSettings: SettingsType) => {
     try {
       await writeConfigFile(newSettings);
@@ -43,17 +54,6 @@ export const SettingsProvider: FC<{ children: ReactNode }> = ({ children }) => {
 
   // fetch user settings from local on first load every time
   useEffect(() => {
-    const fetchSettings = async () => {
-      try {
-        const existingSettings = await readConfigFile();
-        setSettings(existingSettings);
-      } catch (error) {
-        logcat.log(`Failed to load settings: ${error}`, "ERROR");
-      } finally {
-        setSettingsLoading(false);
-      }
-    };
-
     fetchSettings();
   }, []);
 

src/lib/settings.ts

@@ -1,3 +1,4 @@
+import { merge } from "lodash";
 import Paths from "./path";
 import { readTomlFile, writeTomlFile } from "./utils/toml";
 
@@ -25,9 +26,12 @@ export const readConfigFile = async (): Promise<SettingsType> => {
 
   try {
     // try to read the config file
+    await Paths.initialize();
     const data = await readTomlFile<SettingsType>(Paths.getPath("configDirectory") + "config.toml");
     if (data) {
       existingData = data;
+      console.log("existing data");
+      console.log(existingData);
     }
   } catch (error) {
     // file does not exist, called function will throw error
@@ -37,11 +41,12 @@ export const readConfigFile = async (): Promise<SettingsType> => {
 
   // merge the existing data with the default settings
   // existing data will overwrite the default settings for the properties that exist
-  const mergedSettings = { ...defaultSettings, ...existingData };
+  const mergedSettings = merge({}, defaultSettings, existingData);
 
   return mergedSettings;
 };
 
 export const writeConfigFile = async (settingsValues: SettingsType): Promise<void> => {
   await writeTomlFile<SettingsType>(Paths.getPath("configDirectory") + "config.toml", settingsValues);
+  console.debug("Settings file written successfully.");
 };

src/pages/testing.tsx

@@ -29,7 +29,28 @@ export default function Testing() {
       >
         reset settings
       </Button>
-      <Button onClick={() => {}}>update settings</Button>
+      <Button
+        onClick={() => {
+          updateSettings({
+            display: {
+              dark_mode: false as boolean,
+              accent_color: "#8ab4f8" as string,
+              transition_duration: 200 as number,
+              radius: 8 as number,
+              window_height: 60 as number,
+              window_width: 400 as number,
+              font_family: "monospace" as string,
+              font_scaling: 100,
+            },
+            window: {
+              minimize_button: true as boolean,
+              maximize_button: true as boolean,
+            },
+          });
+        }}
+      >
+        update settings
+      </Button>
       <Button
         onClick={() => {
           console.log(settings);