'init'

app/components/WindowsFrameButtons/WindowsFrameButtons.module.css

@@ -0,0 +1,16 @@
+.close_btn:hover{
+    color: var(--mantine-color-red-5);
+}
+
+.maximize_btn:hover {
+    color: var(--mantine-color-green-5);
+}
+
+.minimize_btn:hover {
+    color: var(--mantine-color-orange-5);
+}
+
+.disabled {
+    color: var(--mantine-color-gray-5);
+    pointer-events: none;
+}

app/components/WindowsFrameButtons/WindowsFrameButtons.tsx

@@ -0,0 +1,45 @@
+import { Flex } from "@mantine/core";
+import { IconMinus, IconRectangle, IconX } from "@tabler/icons-react";
+import classes from './WindowsFrameButtons.module.css'
+import { useWindowActions } from "@/app/hooks/useWindowActions";
+import { cx } from "@/app/utils/style";
+import { useWindowState } from "@/app/hooks/useWindowState";
+import { useWindowFocus } from "@/app/hooks/useWindowFocus";
+
+export function WindowsFrameButtons() {
+    const {close, minimize, toggle} = useWindowActions();
+    const windowState = useWindowState();
+    const focus = useWindowFocus();
+
+    return (<>
+        <Flex gap={'sm'} style={{
+            cursor: 'pointer',
+            appRegion: 'no-drag'
+        }} pos={'absolute'} right={4} h={20} align="center" justify="center">
+            <Flex w={20} onClick={minimize} className={cx(
+                    classes.minimize_btn,
+                    !focus && classes.disabled,
+                    //windowState.isMinimized && classes.disabled,
+                    !windowState.isResizable && classes.disabled
+            )}>
+                <IconMinus stroke={4} size={12}></IconMinus>
+            </Flex>
+            <Flex w={20} onClick={toggle} className={cx(
+                    classes.maximize_btn,
+                    !focus && classes.disabled,
+                    //windowState.isMaximized && classes.disabled,
+                    (!windowState.isResizable && !windowState.isFullScreen) && classes.disabled
+            )}>
+                <IconRectangle stroke={3} size={12}></IconRectangle>
+            </Flex>
+            <Flex w={20} onClick={close} className={cx(
+                classes.close_btn,
+                !focus && classes.disabled,
+                !windowState.isClosable && classes.disabled
+            )}>
+                <IconX stroke={3} size={12}></IconX>
+            </Flex>
+        </Flex>
+    </>);
+
+}