fix: Window control button icon issue

#136

src/components/layout/layout-control.tsx

@@ -3,12 +3,19 @@ import { appWindow } from "@tauri-apps/api/window";
 import {
   CloseRounded,
   CropSquareRounded,
+  FilterNoneRounded,
   HorizontalRuleRounded,
 } from "@mui/icons-material";
+import { useState } from "react";
 
 export const LayoutControl = () => {
   const minWidth = 40;
 
+  const [isMaximized, setIsMaximized] = useState(false);
+  appWindow.isMaximized().then((isMaximized) => {
+    setIsMaximized(() => isMaximized);
+  });
+
   return (
     <>
       <Button
@@ -22,9 +29,21 @@ export const LayoutControl = () => {
       <Button
         size="small"
         sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
-        onClick={() => appWindow.toggleMaximize()}
+        onClick={() => {
+          setIsMaximized((isMaximized) => !isMaximized);
+          appWindow.toggleMaximize();
+        }}
       >
-        <CropSquareRounded fontSize="small" />
+        {isMaximized ? (
+          <FilterNoneRounded
+            fontSize="small"
+            style={{
+              transform: "rotate(180deg) scale(0.7)",
+            }}
+          />
+        ) : (
+          <CropSquareRounded fontSize="small" />
+        )}
       </Button>
 
       <Button