Restore custom styled window controls

src/App.tsx

@@ -4,6 +4,8 @@ import {
   FileDown,
   FileInput,
   Languages,
+  Maximize2,
+  Minus,
   Plus,
   RefreshCcw,
   Settings,
@@ -271,14 +273,6 @@ function readTheme(): ThemeMode {
   return stored && themeLabels.includes(stored) ? stored : "system";
 }
 
-function getEffectiveTheme(themeMode: ThemeMode): "light" | "dark" {
-  if (themeMode !== "system") {
-    return themeMode;
-  }
-
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
 export default function App() {
   const [input, setInput] = useState(sampleEnv);
   const [loadedPath, setLoadedPath] = useState<string | null>(null);
@@ -294,16 +288,6 @@ export default function App() {
   useEffect(() => {
     document.documentElement.dataset.theme = themeMode;
     localStorage.setItem("envhelper-theme", themeMode);
-
-    const updateTitlebar = () => {
-      void window.envHelper?.setTitlebarTheme(getEffectiveTheme(themeMode));
-    };
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-
-    updateTitlebar();
-    media.addEventListener("change", updateTitlebar);
-
-    return () => media.removeEventListener("change", updateTitlebar);
   }, [themeMode]);
 
   useEffect(() => {
@@ -351,6 +335,23 @@ export default function App() {
           <div className="titlebarMark">EH</div>
           <span>EnvHelper</span>
         </div>
+        <div className="windowControls">
+          <button aria-label="Minimize" onClick={() => window.envHelper?.minimizeWindow()} title="Minimize" type="button">
+            <Minus size={15} />
+          </button>
+          <button aria-label="Maximize" onClick={() => window.envHelper?.toggleMaximizeWindow()} title="Maximize" type="button">
+            <Maximize2 size={14} />
+          </button>
+          <button
+            aria-label="Close"
+            className="closeButton"
+            onClick={() => window.envHelper?.closeWindow()}
+            title="Close"
+            type="button"
+          >
+            <X size={15} />
+          </button>
+        </div>
       </section>
 
       <header className="toolbar">

src/styles.css

@@ -149,13 +149,12 @@ textarea:focus {
 .titlebar {
   -webkit-app-region: drag;
   align-items: center;
-  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
+  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
   border: 1px solid var(--border);
   border-radius: 8px;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
-  padding-right: 138px;
 }
 
 .titlebarBrand {
@@ -181,6 +180,42 @@ textarea:focus {
   width: 24px;
 }
 
+.windowControls {
+  -webkit-app-region: no-drag;
+  align-items: stretch;
+  display: flex;
+  height: 100%;
+  padding: 3px;
+}
+
+.windowControls button {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--muted);
+  min-height: 0;
+  min-width: 38px;
+  padding: 0;
+}
+
+.windowControls button:hover {
+  background: var(--surface-subtle);
+  border-color: var(--border);
+  color: var(--text);
+  transform: none;
+}
+
+.windowControls button:active {
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+}
+
+.windowControls .closeButton:hover {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: #fff;
+}
+
 .toolbar {
   align-items: center;
   background: var(--surface);

src/vite-env.d.ts

@@ -9,6 +9,8 @@ interface Window {
   envHelper?: {
     openFile: () => Promise<EnvHelperFileResult | null>;
     saveFile: (content: string) => Promise<string | null>;
-    setTitlebarTheme: (theme: "light" | "dark") => Promise<void>;
+    minimizeWindow: () => Promise<void>;
+    toggleMaximizeWindow: () => Promise<boolean>;
+    closeWindow: () => Promise<void>;
   };
 }