paths global state storage

package.json

@@ -14,25 +14,25 @@
     "@emotion/react": "^11.13.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.16.5",
+    "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.16.5",
+    "@mui/material": "^5.16.6",
     "@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": "^18.3.1",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.6.0",
-    "@types/node": "^20",
+    "@types/node": "^20.14.14",
-    "@types/react": "^18",
+    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18",
+    "@types/react-dom": "^18.3.0",
-    "eslint": "^8",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.5",
-    "typescript": "^5"
+    "typescript": "^5.5.4"
   }
 }

src-tauri/tauri.conf.json

@@ -62,6 +62,16 @@
     },
     "updater": {
       "active": false
+    },
+    "windows": [
+      {
+        "decorations": false,
+        "fullscreen": false,
+        "height": 600,
+        "resizable": true,
+        "title": "Stort",
+        "width": 800
       }
+    ]
   }
 }

src/components/Generic/Initialization.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { usePathStore } from "../../lib/store/zustand/path";
+
+export const Initialization = () => {
+  const setPaths = usePathStore((state) => state.setPaths);
+
+  useEffect(() => {
+    setPaths();
+  });
+
+  return null;
+};

src/components/Generic/Layout.tsx

@@ -0,0 +1,10 @@
+import { Box } from "@mui/material";
+import { HeaderBar } from "../HeaderBar/HeaderBar";
+
+export const Layout = () => {
+  return (
+    <Box>
+      <HeaderBar />
+    </Box>
+  );
+};

src/lib/path.ts

@@ -1,40 +0,0 @@
-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/zustand/path.ts

@@ -1,14 +1,93 @@
 import { create } from "zustand";
 
-type PathType = {
+type Paths = {
+  audioDirectory: string;
+  cacheDirectory: string;
   configDirectory: string;
+  dataDirectory: string;
+  desktopDirectory: string;
+  documentDirectory: string;
+  downloadDirectory: string;
+  executableDirectory: string;
+  fontDirectory: string;
+  homeDirectory: string;
+  logDirectory: string;
+  pictureDirectory: string;
+  templateDirectory: string;
+  videoDirectory: string;
 };
 
-export const getPaths = async () => {
+type PathStore = {
-  const { configDir } = await import("@tauri-apps/api/path");
+  paths: Paths;
-  return (await configDir()) + "stort/";
+  setPaths: () => Promise<void>;
 };
 
-export const usePathStore = create<PathType>((set) => ({
+const programTrailingPath = "stort/";
-  configDirectory: getPaths(),
+
+const initializePaths = async (): Promise<Paths> => {
+  try {
+    const {
+      audioDir,
+      cacheDir,
+      configDir,
+      dataDir,
+      desktopDir,
+      documentDir,
+      downloadDir,
+      executableDir,
+      fontDir,
+      homeDir,
+      logDir,
+      pictureDir,
+      templateDir,
+      videoDir,
+    } = await import("@tauri-apps/api/path");
+
+    return {
+      audioDirectory: await audioDir(),
+      cacheDirectory: (await cacheDir()) + programTrailingPath,
+      configDirectory: (await configDir()) + programTrailingPath,
+      dataDirectory: (await dataDir()) + programTrailingPath,
+      desktopDirectory: await desktopDir(),
+      documentDirectory: await documentDir(),
+      downloadDirectory: await downloadDir(),
+      executableDirectory: await executableDir(),
+      fontDirectory: await fontDir(),
+      homeDirectory: await homeDir(),
+      logDirectory: await logDir(),
+      pictureDirectory: await pictureDir(),
+      templateDirectory: await templateDir(),
+      videoDirectory: await videoDir(),
+    };
+  } catch (error) {
+    console.error("Error initializing paths:", error);
+    throw error;
+  }
+};
+
+export const usePathStore = create<PathStore>((set) => ({
+  paths: {
+    audioDirectory: "",
+    cacheDirectory: "",
+    configDirectory: "",
+    dataDirectory: "",
+    desktopDirectory: "",
+    documentDirectory: "",
+    downloadDirectory: "",
+    executableDirectory: "",
+    fontDirectory: "",
+    homeDirectory: "",
+    logDirectory: "",
+    pictureDirectory: "",
+    templateDirectory: "",
+    videoDirectory: "",
+  },
+  setPaths: async () => {
+    try {
+      const paths = await initializePaths();
+      set({ paths });
+    } catch (error) {
+      console.error("Failed to set paths:", error);
+    }
+  },
 }));

src/pages/_app.tsx

@@ -1,7 +1,8 @@
 import { CacheProvider, EmotionCache } from "@emotion/react";
-import CssBaseline from "@mui/material/CssBaseline";
+import { CssBaseline } from "@mui/material";
 import { AppProps } from "next/app";
 import Head from "next/head";
+import { Initialization } from "../components/Generic/Initialization";
 import { UserThemeProvider } from "../contexts/ThemeContext";
 import createEmotionCache from "../lib/createEmotionCache";
 import "../styles/global.css";
@@ -23,6 +24,7 @@ export default function MyApp(props: MyAppProps) {
       </Head>
       <UserThemeProvider>
         {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <Initialization />
         <CssBaseline />
         <Component {...pageProps} />
       </UserThemeProvider>

src/pages/_document.tsx

@@ -20,15 +20,8 @@ export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
   const theme = useTheme();
 
   return (
-    <Html lang='en'>
+    <Html lang="en">
-      <Head>
+      <Head>{emotionStyleTags}</Head>
-        {/* PWA primary color */}
-        <meta name='theme-color' content={theme.palette.primary.main} />
-        <link rel='shortcut icon' href='/favicon.png' />
-        <link rel='manifest' href='/manifest.json' />
-        <meta name='emotion-insertion-point' content='' />
-        {emotionStyleTags}
-      </Head>
       <body>
         <Main />
         <NextScript />

src/pages/index.tsx

@@ -1,7 +1,6 @@
-import { Box } from "@mui/material";
 import { useAtom } from "jotai";
+import { Layout } from "../components/Generic/Layout";
 import { LoadingScreen } from "../components/Generic/LoadingScreen";
-import { HeaderBar } from "../components/HeaderBar/HeaderBar";
 import { loadingAtom } from "../lib/store/jotai/loading";
 
 export default function Home() {
@@ -10,10 +9,6 @@ export default function Home() {
   if (loading) {
     return <LoadingScreen loadingText="Loading..." />;
   } else {
-    return (
+    return <Layout />;
-      <Box>
-        <HeaderBar />
-      </Box>
-    );
   }
 }

src/pages/testing.tsx

@@ -1,27 +1,18 @@
 "use client";
 
 import { BugReport } from "@mui/icons-material";
-import { Box, Button, IconButton, Typography } from "@mui/material";
+import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import { useState } from "react";
-import { getConfigDirectory } from "../lib/path";
 import { usePathStore } from "../lib/store/zustand/path";
 
 export default function Testing() {
   const router = useRouter();
 
-  const configPath = usePathStore((state) => state.configDirectory);
+  const paths = usePathStore((state) => state.paths);
-  const dataPath = usePathStore((state) => state.dataDirectory);
-  const cachePath = usePathStore((state) => state.cacheDirectory);
 
   const [text, setText] = useState("");
 
-  useEffect(() => {
-    getConfigDirectory().then((configDirectory) => {
-      setText(configDirectory);
-    });
-  });
-
   return (
     <Box>
       <IconButton
@@ -32,16 +23,14 @@ export default function Testing() {
         <BugReport />
       </IconButton>
       <Button
-        onClick={() => {
+        onClick={async () => {
-          console.log(text);
+          console.log(paths);
-          console.log(configPath);
-          console.log(dataPath);
-          console.log(cachePath);
         }}
       >
         Button
       </Button>
       <Typography>{text}</Typography>
+      <TextField rows={10} />
     </Box>
   );
 }