zustand store for paths

package.json

@@ -18,11 +18,13 @@
     "@mui/material": "^5.16.5",
     "@tauri-apps/api": "^1.6.0",
     "@types/lodash": "^4.17.7",
+    "jotai": "^2.9.1",
     "lodash": "^4.17.21",
     "lowdb": "^7.0.1",
     "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.6.0",

src-tauri/tauri.conf.json

@@ -30,40 +30,7 @@
         "all": true
       },
       "window": {
-        "all": true,
+        "all": true
-        "create": true,
-        "center": true,
-        "requestUserAttention": true,
-        "setResizable": true,
-        "setMaximizable": true,
-        "setMinimizable": true,
-        "setClosable": true,
-        "setTitle": true,
-        "maximize": true,
-        "unmaximize": true,
-        "minimize": true,
-        "unminimize": true,
-        "show": true,
-        "hide": true,
-        "close": true,
-        "setDecorations": true,
-        "setAlwaysOnTop": true,
-        "setContentProtected": true,
-        "setSize": true,
-        "setMinSize": true,
-        "setMaxSize": true,
-        "setPosition": true,
-        "setFullscreen": true,
-        "setFocus": true,
-        "setIcon": true,
-        "setSkipTaskbar": true,
-        "setCursorGrab": true,
-        "setCursorVisible": true,
-        "setCursorIcon": true,
-        "setCursorPosition": true,
-        "setIgnoreCursorEvents": true,
-        "startDragging": true,
-        "print": true
       }
     },
     "bundle": {
@@ -82,38 +49,19 @@
         "icons/icon.ico"
       ],
       "identifier": "com.vomitblood.stort",
-      "longDescription": "",
+      "longDescription": "Launcher for Steam Deck",
-      "macOS": {
-        "entitlements": null,
-        "exceptionDomain": "",
-        "frameworks": [],
-        "providerShortName": null,
-        "signingIdentity": null
-      },
       "resources": [],
-      "shortDescription": "",
+      "shortDescription": "Launcher for Steam Deck",
-      "targets": "all",
+      "targets": [
-      "windows": {
+        "appimage",
-        "certificateThumbprint": null,
+        "deb"
-        "digestAlgorithm": "sha256",
+      ]
-        "timestampUrl": ""
-      }
     },
     "security": {
       "csp": null
     },
     "updater": {
       "active": false
-    },
+    }
-    "windows": [
-      {
-        "decorations": false,
-        "fullscreen": false,
-        "height": 600,
-        "resizable": true,
-        "title": "Stort",
-        "width": 800
-      }
-    ]
   }
 }

src/components/Generic/FloatingDialog.tsx

@@ -4,31 +4,31 @@ import { FC, ReactNode } from "react";
 import { useSettings } from "../../contexts/SettingsContext";
 
 interface FloatingDialog {
-  sx?: any;
-  openState: boolean;
-  maximisedState: boolean;
-  setMaximisedState: (state: boolean) => void;
-  toggleOpen: () => void;
-  close: () => void;
   actionButtons?: ReactNode;
   body: ReactNode;
   bottomBar?: ReactNode;
+  close: () => void;
+  maximisedState: boolean;
   openButton: ReactNode;
+  openState: boolean;
+  setMaximisedState: (state: boolean) => void;
+  sx?: any;
   title: string;
+  toggleOpen: () => void;
 }
 
 export const FloatingDialog: FC<FloatingDialog> = ({
-  sx,
-  openState,
-  maximisedState,
-  setMaximisedState,
-  toggleOpen,
-  close,
   actionButtons,
   body,
   bottomBar,
+  close,
+  maximisedState,
   openButton,
+  openState,
+  setMaximisedState,
+  sx,
   title,
+  toggleOpen,
 }) => {
   const { settings } = useSettings();
 
@@ -75,7 +75,7 @@ export const FloatingDialog: FC<FloatingDialog> = ({
 
             <Tooltip title={maximisedState ? "Minimise" : "Maximise"}>
               <IconButton
-                onClick={(event) => {
+                onClick={() => {
                   setMaximisedState(!maximisedState);
                 }}
                 sx={{

src/components/Generic/LoadingScreen.tsx

@@ -0,0 +1,25 @@
+import { Box, Typography, LinearProgress } from "@mui/material";
+import { FC } from "react";
+
+interface LoadingScreenProps {
+  loadingText?: string;
+}
+
+export const LoadingScreen: FC<LoadingScreenProps> = ({ loadingText }) => {
+  return (
+    <Box
+      sx={{
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        justifyContent: "center",
+      }}
+    >
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        {loadingText}
+      </Typography>
+      <LinearProgress color="primary" sx={{ width: "80%" }} />
+    </Box>
+  );
+};

src/components/HeaderBar/Settings/Settings.tsx

@@ -0,0 +1,20 @@
+// import { IconButton, Typography, useTheme } from "@mui/material";
+// import { FloatingDialog } from "../../Generic/FloatingDialog";
+// import { SettingsCell, SettingsOutlined } from "@mui/icons-material";
+
+// export const Settings = () => {
+//   // contexts
+//   const theme = useTheme();
+//   const { settings, updateSettingsLocal } = useSettings();
+
+//   return (
+//     <FloatingDialog
+//       body={<Typography>Settings</Typography>}
+//       openButton={
+//         <IconButton>
+//           <SettingsOutlined />
+//         </IconButton>
+//       }
+//     />
+//   );
+// };

src/lib/path.ts

@@ -0,0 +1,40 @@
+export const getConfigDirectory = async () => {
+  const { configDir } = await import("@tauri-apps/api/path");
+  return (await configDir()) + "stort/";
+};
+
+const pathBase = "stort/";
+
+export const getPaths = async () => {
+  const {
+    cacheDir,
+    configDir,
+    dataDir,
+    desktopDir,
+    documentDir,
+    downloadDir,
+    executableDir,
+    fontDir,
+    homeDir,
+    logDir,
+    pictureDir,
+    templateDir,
+    videoDir,
+  } = await import("@tauri-apps/api/path");
+
+  return {
+    cacheDirectory: (await cacheDir()) + pathBase,
+    configDirectory: (await configDir()) + pathBase,
+    dataDirectory: (await dataDir()) + pathBase,
+    desktopDirectory: (await desktopDir()) + pathBase,
+    documentDirectory: (await documentDir()) + pathBase,
+    downloadDirectory: (await downloadDir()) + pathBase,
+    executableDirectory: (await executableDir()) + pathBase,
+    fontDirectory: (await fontDir()) + pathBase,
+    homeDirectory: (await homeDir()) + pathBase,
+    logDirectory: (await logDir()) + pathBase,
+    pictureDirectory: (await pictureDir()) + pathBase,
+    templateDirectory: (await templateDir()) + pathBase,
+    videoDirectory: (await videoDir()) + pathBase,
+  };
+};

src/lib/store/jotai/loading.ts

@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export const loadingAtom = atom(false);

src/lib/store/zustand/path.ts

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+
+type PathType = {
+  configDirectory: string;
+};
+
+export const getPaths = async () => {
+  const { configDir } = await import("@tauri-apps/api/path");
+  return (await configDir()) + "stort/";
+};
+
+export const usePathStore = create<PathType>((set) => ({
+  configDirectory: getPaths(),
+}));

src/pages/index.tsx

@@ -1,95 +1,19 @@
-import { Box, Button, TextField, Typography } from "@mui/material";
+import { Box } from "@mui/material";
-import {
+import { useAtom } from "jotai";
-  ConfirmDialogOptions,
+import { LoadingScreen } from "../components/Generic/LoadingScreen";
-  DialogFilter,
-  MessageDialogOptions,
-  OpenDialogOptions,
-} from "@tauri-apps/api/dialog";
-import {
-  isPermissionGranted,
-  Options,
-  requestPermission,
-  sendNotification,
-} from "@tauri-apps/api/notification";
-import { useState } from "react";
 import { HeaderBar } from "../components/HeaderBar/HeaderBar";
+import { loadingAtom } from "../lib/store/jotai/loading";
 
 export default function Home() {
-  const [content, setContent] = useState("Please enter your name");
+  const [loading] = useAtom(loadingAtom);
 
-  const confirmDialogOptions: ConfirmDialogOptions = {
+  if (loading) {
-    cancelLabel: "fuck no",
+    return <LoadingScreen loadingText="Loading..." />;
-    okLabel: "fuck yes",
+  } else {
-    title: "this is a title",
+    return (
-    type: "error",
+      <Box>
-  };
+        <HeaderBar />
-
+      </Box>
-  const dialogFilter: DialogFilter = {
+    );
-    extensions: ["png", "jpeg"],
-    name: "this is a name",
-  };
-
-  const messageDialogOptions: MessageDialogOptions = {
-    okLabel: "fuck yes",
-    title: "this is a title",
-    type: "warning",
-  };
-
-  const openDialogOptions: OpenDialogOptions = {
-    defaultPath: "/home/vomitblood/Downloads",
-    directory: false,
-    filters: [dialogFilter],
-    multiple: true,
-  };
-
-  const notificationOptions: Options = {
-    // body: "hello this is the body",
-    // icon: "/home/vomitblood/Downloads/Screenshot 2024-07-14 212730.png",
-    // sound: "Alerts",
-    title: "hello this is the title",
-  };
-
-  const bruh = async () => {
-    let permissionGranted = await isPermissionGranted();
-    if (!permissionGranted) {
-      const permission = await requestPermission();
-      permissionGranted = permission === "granted";
-    }
-    if (permissionGranted) {
-      sendNotification("Tauri is awesome!");
-      sendNotification({ title: "TAURI", body: "Tauri is awesome!" });
-    }
-  };
-
-  async function handleClick() {
-    console.log("bruh");
-    // let permissionGranted = await isPermissionGranted();
-    // console.log(permissionGranted);
-    // const permission = await requestPermission();
-    // if (!permissionGranted) {
-    //   const permission = await requestPermission();
-    //   permissionGranted = permission === "granted";
-    // }
-    // if (permissionGranted) {
-    sendNotification(notificationOptions);
-    // }
   }
-
-  return (
-    <Box>
-      <HeaderBar />
-      <TextField
-        label="Name"
-        onChange={(e) => setContent(e.target.value)}
-        size="small"
-        variant="outlined"
-      />
-      <Button variant="contained" onClick={handleClick}>
-        Submit
-      </Button>
-      <Typography>
-        <b>Response:</b> {content}
-      </Typography>
-    </Box>
-  );
 }

src/pages/testing.tsx

@@ -4,19 +4,22 @@ import { BugReport } from "@mui/icons-material";
 import { Box, Button, IconButton, Typography } from "@mui/material";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import { getConfigDirectory } from "../lib/path";
+import { usePathStore } from "../lib/store/zustand/path";
 
 export default function Testing() {
   const router = useRouter();
 
-  const [configDir, setConfigDir] = useState<string>("");
+  const configPath = usePathStore((state) => state.configDirectory);
+  const dataPath = usePathStore((state) => state.dataDirectory);
+  const cachePath = usePathStore((state) => state.cacheDirectory);
 
-  const initializeConfigDir = async () => {
+  const [text, setText] = useState("");
-    const { appConfigDir } = await import("@tauri-apps/api/path");
-    setConfigDir(await appConfigDir());
-  };
 
   useEffect(() => {
-    initializeConfigDir();
+    getConfigDirectory().then((configDirectory) => {
+      setText(configDirectory);
+    });
   });
 
   return (
@@ -30,12 +33,15 @@ export default function Testing() {
       </IconButton>
       <Button
         onClick={() => {
-          console.log(configDir);
+          console.log(text);
+          console.log(configPath);
+          console.log(dataPath);
+          console.log(cachePath);
         }}
       >
         Button
       </Button>
-      <Typography>{configDir}</Typography>
+      <Typography>{text}</Typography>
     </Box>
   );
 }