Use native Windows title bar

electron/main.ts

@@ -5,8 +5,6 @@ import { fileURLToPath } from "node:url";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-let mainWindow: BrowserWindow | null = null;
-
 async function createWindow() {
   const win = new BrowserWindow({
     width: 1220,
@@ -14,7 +12,7 @@ async function createWindow() {
     minWidth: 980,
     minHeight: 680,
     title: "EnvHelper",
-    frame: false,
+    frame: true,
     autoHideMenuBar: true,
     backgroundColor: "#f6f7f4",
     webPreferences: {
@@ -24,13 +22,6 @@ async function createWindow() {
     }
   });
 
-  mainWindow = win;
-  win.on("closed", () => {
-    if (mainWindow === win) {
-      mainWindow = null;
-    }
-  });
-
   Menu.setApplicationMenu(null);
 
   if (!app.isPackaged) {
@@ -57,27 +48,6 @@ ipcMain.handle("envhelper:open-file", async () => {
   };
 });
 
-ipcMain.on("envhelper:window-minimize", () => {
-  mainWindow?.minimize();
-});
-
-ipcMain.on("envhelper:window-toggle-maximize", () => {
-  if (!mainWindow) {
-    return;
-  }
-
-  if (mainWindow.isMaximized()) {
-    mainWindow.unmaximize();
-    return;
-  }
-
-  mainWindow.maximize();
-});
-
-ipcMain.on("envhelper:window-close", () => {
-  mainWindow?.close();
-});
-
 ipcMain.handle("envhelper:save-file", async (_event, content: string) => {
   const result = await dialog.showSaveDialog({
     defaultPath: ".env",

electron/preload.ts

@@ -2,8 +2,5 @@ import { contextBridge, ipcRenderer } from "electron";
 
 contextBridge.exposeInMainWorld("envHelper", {
   openFile: () => ipcRenderer.invoke("envhelper:open-file"),
-  saveFile: (content: string) => ipcRenderer.invoke("envhelper:save-file", content),
+  saveFile: (content: string) => ipcRenderer.invoke("envhelper:save-file", content)
-  minimizeWindow: () => ipcRenderer.send("envhelper:window-minimize"),
-  toggleMaximizeWindow: () => ipcRenderer.send("envhelper:window-toggle-maximize"),
-  closeWindow: () => ipcRenderer.send("envhelper:window-close")
 });

src/App.tsx

@@ -4,8 +4,6 @@ import {
   FileDown,
   FileInput,
   Languages,
-  Maximize2,
-  Minus,
   Plus,
   RefreshCcw,
   Settings,
@@ -15,7 +13,7 @@ import {
   X
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import type { PointerEvent, ReactNode } from "react";
+import type { ReactNode } from "react";
 import packageInfo from "../package.json";
 import { transformEnv } from "./env";
 import type { EnvDefault } from "./env";
@@ -328,50 +326,8 @@ 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">
-        <div className="titlebarDrag">
-          <div className="titlebarBrand">
-            <div className="titlebarMark">EH</div>
-            <span>EnvHelper</span>
-          </div>
-        </div>
-        <div className="windowControls">
-          <button
-            aria-label="Minimize"
-            onPointerDown={(event) => runWindowControl(event, window.envHelper?.minimizeWindow)}
-            title="Minimize"
-            type="button"
-          >
-            <Minus size={15} />
-          </button>
-          <button
-            aria-label="Maximize"
-            onPointerDown={(event) => runWindowControl(event, window.envHelper?.toggleMaximizeWindow)}
-            title="Maximize"
-            type="button"
-          >
-            <Maximize2 size={14} />
-          </button>
-          <button
-            aria-label="Close"
-            className="closeButton"
-            onPointerDown={(event) => runWindowControl(event, window.envHelper?.closeWindow)}
-            title="Close"
-            type="button"
-          >
-            <X size={15} />
-          </button>
-        </div>
-      </section>
-
       <header className="toolbar">
         <div className="brand">
           <div className="brandMark">EH</div>

src/styles.css

@@ -140,100 +140,9 @@ textarea:focus {
 .appShell {
   display: grid;
   gap: 12px;
-  grid-template-rows: 34px auto auto minmax(260px, 1fr) minmax(160px, 0.52fr);
+  grid-template-rows: auto auto minmax(260px, 1fr) minmax(160px, 0.52fr);
   height: 100%;
   padding: 14px;
-  padding-top: 8px;
-}
-
-.titlebar {
-  align-items: center;
-  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;
-}
-
-.titlebarDrag {
-  -webkit-app-region: drag;
-  align-items: center;
-  display: flex;
-  flex: 1;
-  height: 100%;
-  min-width: 0;
-}
-
-.titlebarBrand {
-  align-items: center;
-  color: var(--muted);
-  display: flex;
-  font-size: 0.82rem;
-  font-weight: 800;
-  gap: 8px;
-  padding-left: 10px;
-}
-
-.titlebarMark {
-  align-items: center;
-  background: var(--accent-soft);
-  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
-  border-radius: 6px;
-  color: var(--accent-strong);
-  display: flex;
-  font-size: 0.66rem;
-  height: 20px;
-  justify-content: center;
-  width: 24px;
-}
-
-.windowControls {
-  -webkit-app-region: no-drag;
-  align-items: stretch;
-  display: flex;
-  height: 100%;
-  padding: 3px;
-  position: relative;
-  z-index: 2;
-}
-
-.windowControls,
-.windowControls * {
-  -webkit-app-region: no-drag;
-}
-
-.windowControls button {
-  -webkit-app-region: no-drag;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: var(--muted);
-  min-height: 0;
-  min-width: 38px;
-  padding: 0;
-}
-
-.windowControls svg {
-  pointer-events: none;
-}
-
-.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 {

src/vite-env.d.ts

@@ -9,8 +9,5 @@ interface Window {
   envHelper?: {
     openFile: () => Promise<EnvHelperFileResult | null>;
     saveFile: (content: string) => Promise<string | null>;
-    minimizeWindow: () => void;
-    toggleMaximizeWindow: () => void;
-    closeWindow: () => void;
   };
 }