added custom draggable headerbar

src-tauri/tauri.conf.json

@@ -27,7 +27,40 @@
         "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": {
@@ -71,6 +104,7 @@
     },
     "windows": [
       {
+        "decorations": false,
         "fullscreen": false,
         "height": 600,
         "resizable": true,

src/components/HeaderBar/HeaderBar.tsx

@@ -1,25 +1,45 @@
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import { WindowButtons } from "./WindowButtons";
 
 export const HeaderBar = () => {
-  const test = async () => {
-    console.log("hello");
-  };
-
   return (
     <Box
+      className="titlebar"
+      data-tauri-drag-region="true"
       sx={{
+        alignItems: "center",
+        // TODO: remove when done
+        borderBottom: "1px solid red",
         display: "flex",
         flexDirection: "row",
         height: "64px",
+        justifyContent: "space-between",
         p: 1,
       }}
     >
-      hello this is the left side
-      <Box sx={{ flexGrow: 1 }} />
-      <Typography>hello this is the right side |</Typography>
-      <Button onClick={test}>Relaunch</Button>
-      <WindowButtons />
+      <Box
+        className="titlebar"
+        data-tauri-drag-region="true"
+        sx={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        hello this is the left side
+      </Box>
+      <Box
+        className="titlebar"
+        data-tauri-drag-region="true"
+        sx={{
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "row",
+        }}
+      >
+        <Typography>hello this is the right side |</Typography>
+        <WindowButtons />
+      </Box>
     </Box>
   );
 };

src/components/HeaderBar/WindowButtons.tsx

@@ -1,22 +1,40 @@
 import { Close, CloseFullscreen, Minimize } from "@mui/icons-material";
 import { Box, Button, ButtonGroup, Stack, useTheme } from "@mui/material";
-import { appWindow } from "@tauri-apps/api/window";
+import { WebviewWindow } from "@tauri-apps/api/window";
+import { useEffect, useState } from "react";
 
 export const WindowButtons = () => {
   const userTheme = useTheme();
 
+  const [appWindow, setAppWindow] = useState<WebviewWindow>();
+
+  // explanation:
+  // this is needed due to the server-sided nature of next js,
+  // this means that the window object might not be available on first load
+  // we will use dynamic imports to load the window object only when needed
+  // in hindsight, using next js for this project was a mistake
+  // using create-react-app or vite would have been a better choice just to generate a static site
+  const initializeAppWindow = async () => {
+    const { appWindow } = await import("@tauri-apps/api/window");
+    setAppWindow(appWindow);
+  };
+
   const minimize = () => {
-    appWindow.minimize();
+    appWindow?.minimize();
   };
 
   const maximize = () => {
-    appWindow.toggleMaximize();
+    appWindow?.toggleMaximize();
   };
 
   const close = () => {
-    appWindow.close();
+    appWindow?.close();
   };
 
+  useEffect(() => {
+    initializeAppWindow();
+  });
+
   return (
     <Box>
       <Stack direction="row" spacing={1}>