fixed headerbar

client/src-tauri/tauri.conf.json

@@ -2,13 +2,28 @@
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "app": {
     "security": {
+      "capabilities": [
+        {
+          "identifier": "my-identifier",
+          "permissions": [
+            "core:window:default",
+            "core:window:allow-start-dragging",
+            "core:window:allow-is-fullscreen",
+            "core:window:allow-minimize",
+            "core:window:allow-toggle-maximize",
+            "core:window:allow-close"
+          ],
+          "windows": [
+            "main"
+          ]
+        }
+      ],
       "csp": null
     },
     "windows": [
       {
         "decorations": false,
         "height": 600,
-        "maximized": true,
         "resizable": true,
         "title": "CSPJ",
         "width": 800

client/src/components/HeaderBar/WindowButtons.tsx

@@ -1,54 +1,26 @@
-import {
-  Close,
-  Fullscreen,
-  FullscreenExit,
-  Minimize,
-  WebAssetOutlined,
-} from "@mui/icons-material";
+import { Close, Minimize, WebAssetOutlined } from "@mui/icons-material";
 import { Box, IconButton, Stack, useTheme } from "@mui/material";
-import {
-  getCurrentWebviewWindow,
-  WebviewWindow,
-} from "@tauri-apps/api/webviewWindow";
-import { useEffect, useState } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
 
 export const WindowButtons = () => {
   // contexts
   const userTheme = useTheme();
 
-  // states
-  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 () => {
-    setAppWindow(getCurrentWebviewWindow());
-  };
-
-  const toggleFullscreen = async () => {
-    appWindow?.setFullscreen(!(await appWindow?.isFullscreen()));
-  };
-
   const minimize = () => {
-    appWindow?.minimize();
+    const appWindow = getCurrentWindow();
+    appWindow.minimize();
   };
 
   const toggleMaximize = () => {
-    appWindow?.toggleMaximize();
+    const appWindow = getCurrentWindow();
+    appWindow.toggleMaximize();
   };
 
   const close = async () => {
-    appWindow?.close();
+    const appWindow = getCurrentWindow();
+    appWindow.close();
   };
 
-  useEffect(() => {
-    initializeAppWindow();
-  });
-
   return (
     <Box
       sx={{
@@ -58,19 +30,6 @@ export const WindowButtons = () => {
       }}
     >
       <Stack direction="row" spacing={1}>
-        <IconButton
-          onClick={toggleFullscreen}
-          size="small"
-          sx={{
-            backgroundColor: userTheme.palette.grey[800],
-          }}
-        >
-          {appWindow?.isFullscreen() ? (
-            <FullscreenExit fontSize="inherit" />
-          ) : (
-            <Fullscreen fontSize="inherit" />
-          )}
-        </IconButton>
         <IconButton
           onClick={minimize}
           size="small"