added fullscreen window button

src/components/FooterBar/FooterBar.tsx

@@ -14,6 +14,7 @@ export const FooterBar = () => {
         display: "flex",
         flexDirection: "row",
         height: "66px",
+        zIndex: 1000000,
       }}
     >
       <Box

src/components/HeaderBar/Settings/SettingsTabs/Background.tsx

@@ -1,5 +1,5 @@
 import { DeleteOutline, FileOpenOutlined } from "@mui/icons-material";
-import { Box, Button, Stack, TextField } from "@mui/material";
+import { Box, Button, CircularProgress, LinearProgress, Stack, TextField, Typography } from "@mui/material";
 import { open } from "@tauri-apps/api/dialog";
 import { readBinaryFile } from "@tauri-apps/api/fs";
 import { invoke } from "@tauri-apps/api/tauri";
@@ -27,6 +27,7 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
   const [oldWallpaperPath, setOldWallpaperPath] = useState<string | null>(null);
   const [targetWallpaperPath, setTargetWallpaperPath] = useState<string | null>(null);
   const [imageBlob, setImageBlob] = useState<string | null>(null);
+  const [noImageSelectedIcon, setNoImageSelectedIcon] = useState<string | null>(null);
 
   const handleSettingsBackgroundValueChange = (
     settingKey: string,
@@ -124,6 +125,8 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
     }
   }, [targetWallpaperPath]);
 
+  useEffect(() => {});
+
   return (
     <Box sx={{ sx }}>
       <CategoryTitle title="Wallpaper" />
@@ -141,11 +144,11 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
       >
         {imageBlob ? (
           <Image
-            src={imageBlob || "oh no"}
             alt="Image not found"
             // fill the box r/catsareliquid
             layout="fill"
             objectFit="cover"
+            src={imageBlob}
           />
         ) : (
           <Box
@@ -153,13 +156,33 @@ export const Background: FC<BackgroundProps> = ({ sx }) => {
               alignItems: "center",
               backgroundColor: "rgba(0, 0, 0, 0.1)",
               display: "flex",
+              flexDirection: "column",
               height: "100%",
               justifyContent: "center",
               position: "absolute",
               width: "100%",
             }}
           >
-            No image selected
+            {targetWallpaperPath ? (
+              <CircularProgress color="primary" />
+            ) : (
+              <>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  alt="Image not found"
+                  src="/images/cry.webp"
+                  style={{
+                    height: "50%",
+                  }}
+                />
+                <Typography
+                  color="text.disabled"
+                  variant="h6"
+                >
+                  No image selected
+                </Typography>
+              </>
+            )}
           </Box>
         )}
       </Box>

src/components/HeaderBar/Settings/SettingsTabs/Window.tsx

@@ -44,6 +44,19 @@ export const Window: FC<WindowProps> = ({ sx }) => {
         }
       />
       <CategoryTitle title="Titlebar Buttons" />
+      <SettingsItem
+        defaultText={defaultSettings.window.fullscreen_button ? "On" : "Off"}
+        description="Fullscreen button"
+        input={
+          <Switch
+            checked={stagedSettings.window.fullscreen_button}
+            name="fullscreen_button"
+            onChange={(e) => {
+              handleSettingsWindowValueChange(e.target.name, e.target.checked);
+            }}
+          />
+        }
+      />
       <SettingsItem
         defaultText={defaultSettings.window.minimize_button ? "On" : "Off"}
         description="Minimize button"

src/components/HeaderBar/WindowButtons.tsx

@@ -1,6 +1,5 @@
-import { Close, CloseFullscreen, Minimize } from "@mui/icons-material";
+import { Close, CloseFullscreen, Fullscreen, FullscreenExit, Minimize, WebAssetOutlined } from "@mui/icons-material";
 import { Box, IconButton, Stack, useTheme } from "@mui/material";
-import { exit } from "@tauri-apps/api/process";
 import { WebviewWindow } from "@tauri-apps/api/window";
 import { useEffect, useState } from "react";
 import { useSettings } from "../../contexts/SettingsContext";
@@ -24,11 +23,15 @@ export const WindowButtons = () => {
     setAppWindow(appWindow);
   };
 
+  const toggleFullscreen = async () => {
+    appWindow?.setFullscreen(!(await appWindow?.isFullscreen()));
+  };
+
   const minimize = () => {
     appWindow?.minimize();
   };
 
-  const maximize = () => {
+  const toggleMaximize = () => {
     appWindow?.toggleMaximize();
   };
 
@@ -52,6 +55,17 @@ export const WindowButtons = () => {
         direction="row"
         spacing={1}
       >
+        {settings.window.fullscreen_button && (
+          <IconButton
+            onClick={toggleFullscreen}
+            size="small"
+            sx={{
+              backgroundColor: userTheme.palette.grey[800],
+            }}
+          >
+            {appWindow?.isFullscreen() ? <FullscreenExit fontSize="inherit" /> : <Fullscreen fontSize="inherit" />}
+          </IconButton>
+        )}
         {settings.window.minimize_button && (
           <IconButton
             onClick={minimize}
@@ -60,23 +74,18 @@ export const WindowButtons = () => {
               backgroundColor: userTheme.palette.grey[800],
             }}
           >
-            <Minimize
+            <Minimize fontSize="inherit" />
-              fontSize="inherit"
-              sx={{
-                backgroundColor: userTheme.palette.grey[800],
-              }}
-            />
           </IconButton>
         )}
         {settings.window.maximize_button && (
           <IconButton
-            onClick={maximize}
+            onClick={toggleMaximize}
             size="small"
             sx={{
               backgroundColor: userTheme.palette.grey[800],
             }}
           >
-            <CloseFullscreen fontSize="inherit" />
+            <WebAssetOutlined fontSize="inherit" />
           </IconButton>
         )}
         <IconButton

src/lib/settings.ts

@@ -17,9 +17,10 @@ export const defaultSettings = {
     radius: 8 as number,
     transition_duration: 200 as number,
     window_height: 80 as number,
-    window_width: 400 as number,
+    window_width: 500 as number,
   },
   window: {
+    fullscreen_button: false as boolean,
     maximize_button: false as boolean,
     minimize_button: false as boolean,
     start_fullscreen: false as boolean, // TODO: this should be true on prod