Make window controls fire on pointer down

src/App.tsx

@@ -15,7 +15,7 @@ import {
   X
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import type { ReactNode } from "react";
+import type { PointerEvent, ReactNode } from "react";
 import packageInfo from "../package.json";
 import { transformEnv } from "./env";
 import type { EnvDefault } from "./env";
@@ -328,6 +328,12 @@ export default function App() {
     setDefaults((current) => current.filter((_, entryIndex) => entryIndex !== index));
   }
 
+  function runWindowControl(event: PointerEvent<HTMLButtonElement>, action?: () => void) {
+    event.preventDefault();
+    event.stopPropagation();
+    action?.();
+  }
+
   return (
     <main className="appShell">
       <section className="titlebar">
@@ -340,10 +346,7 @@ export default function App() {
         <div className="windowControls">
           <button
             aria-label="Minimize"
-            onClick={(event) => {
+            onPointerDown={(event) => runWindowControl(event, window.envHelper?.minimizeWindow)}
-              event.stopPropagation();
-              window.envHelper?.minimizeWindow();
-            }}
             title="Minimize"
             type="button"
           >
@@ -351,10 +354,7 @@ export default function App() {
           </button>
           <button
             aria-label="Maximize"
-            onClick={(event) => {
+            onPointerDown={(event) => runWindowControl(event, window.envHelper?.toggleMaximizeWindow)}
-              event.stopPropagation();
-              window.envHelper?.toggleMaximizeWindow();
-            }}
             title="Maximize"
             type="button"
           >
@@ -363,10 +363,7 @@ export default function App() {
           <button
             aria-label="Close"
             className="closeButton"
-            onClick={(event) => {
+            onPointerDown={(event) => runWindowControl(event, window.envHelper?.closeWindow)}
-              event.stopPropagation();
-              window.envHelper?.closeWindow();
-            }}
             title="Close"
             type="button"
           >

src/styles.css

@@ -198,6 +198,11 @@ textarea:focus {
   z-index: 2;
 }
 
+.windowControls,
+.windowControls * {
+  -webkit-app-region: no-drag;
+}
+
 .windowControls button {
   -webkit-app-region: no-drag;
   background: transparent;
@@ -209,6 +214,10 @@ textarea:focus {
   padding: 0;
 }
 
+.windowControls svg {
+  pointer-events: none;
+}
+
 .windowControls button:hover {
   background: var(--surface-subtle);
   border-color: var(--border);