From f665762cc8622e4ff9e415130f2fcf7358ead9d2 Mon Sep 17 00:00:00 2001
From: MystiPanda <mystipanda@proton.me>
Date: Thu, 14 Dec 2023 14:59:55 +0800
Subject: [PATCH] fix: Window control button icon issue

#136
---
 src/components/layout/layout-control.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/layout-control.tsx b/src/components/layout/layout-control.tsx
index 6ec12b97..e525c4aa 100644
--- a/src/components/layout/layout-control.tsx
+++ b/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