header bar

client/.eslintrc.json

@@ -1,3 +1,5 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": [
+    "next/core-web-vitals"
+  ]
 }

client/package.json

@@ -18,6 +18,7 @@
     "@mui/lab": "^6.0.0-beta.14",
     "@mui/material": "^6.1.6",
     "@tauri-apps/api": "^2.1.0",
+    "jotai": "^2.10.1",
     "next": "^15.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

client/src/components/Generic/Layout.tsx

@@ -1,5 +1,6 @@
-import { Box, useTheme } from "@mui/material";
+import { Box, TextField, useTheme } from "@mui/material";
 import { HeaderBar } from "../HeaderBar/HeaderBar";
+import { LoadingButton } from "@mui/lab";
 
 export const Layout = () => {
   // contexts
@@ -22,7 +23,13 @@ export const Layout = () => {
           overflow: "auto",
           p: 1,
         }}
-      ></Box>
+      >
+        <Box>
+          {/* main content goes here buddy */}
+          <LoadingButton id="asdfbutton">asdf</LoadingButton>
+          <TextField id="asdf" name="asdf"></TextField>
+        </Box>
+      </Box>
     </Box>
   );
 };

client/src/components/HeaderBar/HeaderBar.tsx

@@ -1,5 +1,7 @@
 import { Box, Stack } from "@mui/material";
 import { WindowButtons } from "./WindowButtons";
+import { NavigationButtons } from "./NavigationButtons";
+import { RouteDisplay } from "./RouteDisplay";
 
 export const HeaderBar = () => {
   return (
@@ -8,10 +10,6 @@ export const HeaderBar = () => {
       data-tauri-drag-region="true"
       sx={{
         alignItems: "center",
-        // backdropFilter: "blur(10px)",
-        // backgroundColor: "rgba(0, 0, 0, 0.5)",
-        // TODO: remove when done
-        // borderBottom: "1px solid red",
         display: "flex",
         flexDirection: "row",
         height: "48px",
@@ -28,7 +26,19 @@ export const HeaderBar = () => {
           flexDirection: "row",
         }}
       >
-        hello this is the left side
+        {/* this is the left side */}
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <NavigationButtons />
+          <RouteDisplay />
+        </Stack>
       </Box>
       <Box
         className="titlebar"
@@ -39,6 +49,18 @@ export const HeaderBar = () => {
           flexDirection: "row",
         }}
       >
+        {/* this is the middle, probably not gonna be used */}
+      </Box>
+      <Box
+        className="titlebar"
+        data-tauri-drag-region="true"
+        sx={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        {/* this is the right side */}
         <Stack
           direction="row"
           spacing={2}

client/src/components/HeaderBar/NavigationButtons.tsx

@@ -0,0 +1,45 @@
+// TODO: implement navigation buffer after implementing internal routing
+
+import { ArrowBack, ArrowForward, HomeOutlined } from "@mui/icons-material";
+import { Box, IconButton, Stack } from "@mui/material";
+import { useAtom } from "jotai";
+import { routeAtom } from "../../lib/jotai";
+
+export const NavigationButtons = () => {
+  // atoms
+  const [route, setRoute] = useAtom(routeAtom);
+
+  const goBack = () => {
+    // TODO
+  };
+
+  const goForward = () => {
+    // TODO
+  };
+
+  const goHome = () => {
+    setRoute("index");
+  };
+
+  return (
+    <Box
+      sx={{
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+      }}
+    >
+      <Stack direction="row" spacing={1}>
+        <IconButton onClick={goBack} size="small">
+          <ArrowBack fontSize="inherit" />
+        </IconButton>
+        <IconButton onClick={goForward} size="small">
+          <ArrowForward fontSize="inherit" />
+        </IconButton>
+        <IconButton onClick={goHome} size="small">
+          <HomeOutlined fontSize="inherit" />
+        </IconButton>
+      </Stack>
+    </Box>
+  );
+};

client/src/components/HeaderBar/RouteDisplay.tsx

@@ -0,0 +1,5 @@
+import { Box } from "@mui/material";
+
+export const RouteDisplay = () => {
+  return <Box>Home</Box>;
+};

client/src/components/HeaderBar/WindowButtons.tsx

@@ -1,11 +1,8 @@
 import { Close, Minimize, WebAssetOutlined } from "@mui/icons-material";
-import { Box, IconButton, Stack, useTheme } from "@mui/material";
+import { Box, IconButton, Stack } from "@mui/material";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 
 export const WindowButtons = () => {
-  // contexts
-  const userTheme = useTheme();
-
   const minimize = () => {
     const appWindow = getCurrentWindow();
     appWindow.minimize();
@@ -30,31 +27,13 @@ export const WindowButtons = () => {
       }}
     >
       <Stack direction="row" spacing={1}>
-        <IconButton
+        <IconButton onClick={minimize} size="small">
-          onClick={minimize}
-          size="small"
-          sx={{
-            backgroundColor: userTheme.palette.grey[800],
-          }}
-        >
           <Minimize fontSize="inherit" />
         </IconButton>
-        <IconButton
+        <IconButton onClick={toggleMaximize} size="small">
-          onClick={toggleMaximize}
-          size="small"
-          sx={{
-            backgroundColor: userTheme.palette.grey[800],
-          }}
-        >
           <WebAssetOutlined fontSize="inherit" />
         </IconButton>
-        <IconButton
+        <IconButton onClick={close} size="small">
-          onClick={close}
-          size="small"
-          sx={{
-            backgroundColor: userTheme.palette.grey[800],
-          }}
-        >
           <Close fontSize="inherit" />
         </IconButton>
       </Stack>

client/src/lib/jotai.ts

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

client/src/pages/testing.tsx

@@ -1,5 +0,0 @@
-import { Box } from "@mui/material";
-
-export default function Testing() {
-  return <Box>asdf</Box>;
-}

client/tsconfig.json

@@ -1,22 +1,29 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
+    "incremental": true,
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true,
+    "lib": [
-    "paths": {
+      "dom",
-      "@/*": ["./src/*"]
+      "dom.iterable",
-    }
+      "esnext"
+    ],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": [
-  "exclude": ["node_modules"]
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
 }