show the restore icon when nuclear is full width and height

sicin · Sep 22, 2024 · b0da01d · b0da01d
1 parent 280327b
commit b0da01d
Showing 1 changed file with 40 additions and 7 deletions.
diff --git a/packages/app/app/components/WindowControls/index.tsx b/packages/app/app/components/WindowControls/index.tsx
@@ -14,12 +14,45 @@ const WindowControls: React.FC<WindowControlsProps> = ({
   onCloseClick,
   onMaxClick,
   onMinClick
-}) => (
-  <div className={styles.window_controls_container}>
-    <WindowButton data-testid='minimize-button' icon='window minimize' onClick={onMinClick} />
-    <WindowButton data-testid='maximize-button' icon='window maximize outline' onClick={onMaxClick} />
-    <WindowButton data-testid='close-button' icon='close' onClick={onCloseClick} />
-  </div>
-);
+}) => {
+  const [isMaximized, setIsMaximized] = React.useState(false);
+
+  const handleMaximizeClick = (event: React.MouseEvent) => {
+    setIsMaximized(!isMaximized);
+    onMaxClick(event);
+  };
+
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      const maximized =
+        window.outerWidth === window.screen.availWidth &&
+        window.outerHeight === window.screen.availHeight;
+      setIsMaximized(maximized);
+    };
+
+    window.addEventListener('resize', handleWindowResize);
+    return () => window.removeEventListener('resize', handleWindowResize);
+  }, []);
+
+  return (
+    <div className={styles.window_controls_container}>
+      <WindowButton
+        data-testid='minimize-button'
+        icon='window minimize'
+        onClick={onMinClick}
+      />
+      <WindowButton
+        data-testid='maximize-button'
+        icon={isMaximized ? 'window restore outline' : 'window maximize outline'}
+        onClick={handleMaximizeClick} 
+      />
+      <WindowButton
+        data-testid='close-button'
+        icon='close'
+        onClick={onCloseClick}
+      />
+    </div>
+  );
+};
 
 export default WindowControls;