'init'

app/components/MacFrameButtons/MacFrameButtons.module.css

@@ -0,0 +1,27 @@
+.traffic_lights {
+    position: absolute;
+    top: 8px;
+    left: 12px;
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+    app-region: no-drag;
+}
+.close_btn, .minimize_btn, .maximize_btn {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+.close_btn {
+    background-color: #ff5f57;
+}
+.minimize_btn {
+    background-color: #ffbd2e;
+}
+.maximize_btn {
+    background-color: #28c840;
+}
+.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+}

app/components/MacFrameButtons/MacFrameButtons.tsx

@@ -0,0 +1,36 @@
+import classes from './MacFrameButtons.module.css';
+import { cx } from '@/app/utils/style';
+import { useWindowState } from '@/app/hooks/useWindowState';
+import { useWindowFocus } from '@/app/hooks/useWindowFocus';
+import { useWindowActions } from '@/app/hooks/useWindowActions';
+
+
+export function MacFrameButtons() {
+    const windowState = useWindowState();
+    const focus = useWindowFocus();
+    const {toggle, close, minimize} = useWindowActions();
+
+    return (
+        <>
+            <div className={classes.traffic_lights}>
+                <div onClick={close} className={cx(
+                    classes.close_btn,
+                    !focus && classes.disabled,
+                    !windowState.isClosable && classes.disabled
+                )}></div>
+                <div onClick={minimize} className={cx(
+                    classes.minimize_btn,
+                    !focus && classes.disabled,
+                    windowState.isMinimized && classes.disabled,
+                    !windowState.isResizable && classes.disabled
+                )}></div>
+                <div onClick={toggle} className={cx(
+                    classes.maximize_btn,
+                    !focus && classes.disabled,
+                    //windowState.isMaximized && classes.disabled,
+                    (!windowState.isResizable && !windowState.isFullScreen) && classes.disabled
+                )}></div>
+            </div>
+        </>     
+    );
+}