feat: implement window control IPC handlers and integrate custom title bar in the Shell layout

Author: Cyneric

src/main/index.ts

@@ -2,7 +2,7 @@
  * @file src/main/index.ts
  *
  * @created 07.03.2026
- * @modified 07.03.2026
+ * @modified 08.03.2026
  *
  * @author Christian Blank <christianblank91@protonmail.com>
  * @copyright 2026
@@ -46,7 +46,7 @@ const createWindow = (): BrowserWindow => {
     minHeight: 600,
     show: false,
     autoHideMenuBar: true,
-    titleBarStyle: 'default',
+    titleBarStyle: 'hidden',
     webPreferences: {
       preload: join(import.meta.dirname, '../preload/index.mjs'),
       nodeIntegration: false,
@@ -62,6 +62,15 @@ const createWindow = (): BrowserWindow => {
     log.info('Main window displayed')
   })
 
+  // Notify the renderer whenever the window is maximized or restored so the
+  // custom title bar can swap the maximize/restore button icon accordingly.
+  win.on('maximize', () => {
+    win.webContents.send('window:maximize-changed', { isMaximized: true })
+  })
+  win.on('unmaximize', () => {
+    win.webContents.send('window:maximize-changed', { isMaximized: false })
+  })
+
   // Open external links in the system browser rather than a new Electron window
   win.webContents.setWindowOpenHandler((details) => {
     void shell.openExternal(details.url)

src/main/ipc/index.ts

@@ -29,6 +29,7 @@ import { registerBackupsIpc } from './backups.ipc'
 import { registerUpdaterIpc } from './updater.ipc'
 import { registerDialogIpc } from './dialog.ipc'
 import { registerAppIpc } from './app.ipc'
+import { registerWindowIpc } from './window.ipc'
 
 /**
  * Registers all IPC handlers for every implemented domain.
@@ -50,5 +51,6 @@ export const registerIpcHandlers = (): void => {
   registerUpdaterIpc()
   registerDialogIpc()
   registerAppIpc()
+  registerWindowIpc()
   log.info('[ipc] all handlers registered')
 }

src/main/ipc/window.ipc.ts

@@ -0,0 +1,41 @@
+/**
+ * @file src/main/ipc/window.ipc.ts
+ *
+ * @created 08.03.2026
+ * @modified 08.03.2026
+ *
+ * @author Christian Blank <christianblank91@protonmail.com>
+ * @copyright 2026
+ *
+ * @description IPC handlers for native window controls (minimize, maximize,
+ * close). Called from the custom title bar in the renderer because
+ * `titleBarStyle: 'hidden'` removes the OS-native control buttons.
+ */
+
+import { ipcMain, BrowserWindow } from 'electron'
+
+/**
+ * Registers IPC handlers that drive the three native window control actions:
+ * minimize, toggle-maximize, and close. Each handler resolves the sender's
+ * window from the event's WebContents so that multiple windows are handled
+ * correctly if they ever coexist.
+ */
+export const registerWindowIpc = (): void => {
+  ipcMain.handle('window:minimize', (event): void => {
+    BrowserWindow.fromWebContents(event.sender)?.minimize()
+  })
+
+  ipcMain.handle('window:maximize', (event): void => {
+    const win = BrowserWindow.fromWebContents(event.sender)
+    if (!win) return
+    if (win.isMaximized()) {
+      win.unmaximize()
+    } else {
+      win.maximize()
+    }
+  })
+
+  ipcMain.handle('window:close', (event): void => {
+    BrowserWindow.fromWebContents(event.sender)?.close()
+  })
+}

src/preload/index.ts

@@ -44,6 +44,7 @@ import type {
   RegistryServer,
   TestResult,
   BackupEntry,
+  WindowMaximizeChangedPayload,
 } from '../shared/channels'
 
 /**
@@ -562,6 +563,23 @@ const api = {
    */
   updaterInstall: (): Promise<void> => ipcRenderer.invoke('updater:install'),
 
+  // ── Window controls ───────────────────────────────────────────────────────
+
+  /**
+   * Minimizes the application window.
+   */
+  windowMinimize: (): Promise<void> => ipcRenderer.invoke('window:minimize'),
+
+  /**
+   * Toggles the window between maximized and restored states.
+   */
+  windowMaximize: (): Promise<void> => ipcRenderer.invoke('window:maximize'),
+
+  /**
+   * Closes the application window.
+   */
+  windowClose: (): Promise<void> => ipcRenderer.invoke('window:close'),
+
   // ── Push events (main → renderer) ─────────────────────────────────────────
 
   /**
@@ -626,6 +644,23 @@ const api = {
     ipcRenderer.on('updater:update-downloaded', wrapped)
     return () => ipcRenderer.removeListener('updater:update-downloaded', wrapped)
   },
+
+  /**
+   * Registers a handler called whenever the window is maximized or restored.
+   * The title bar uses this to toggle the maximize/restore button icon.
+   * Returns a cleanup function that removes the listener.
+   *
+   * @param handler - Callback receiving the new maximize state.
+   * @returns A cleanup function that removes the listener.
+   */
+  onMaximizeChanged: (handler: (payload: WindowMaximizeChangedPayload) => void): (() => void) => {
+    const wrapped = (
+      _event: Parameters<Parameters<typeof ipcRenderer.on>[1]>[0],
+      payload: WindowMaximizeChangedPayload,
+    ) => handler(payload)
+    ipcRenderer.on('window:maximize-changed', wrapped)
+    return () => ipcRenderer.removeListener('window:maximize-changed', wrapped)
+  },
 } as const
 
 // Expose the typed bridge to the renderer process

src/renderer/components/layout/Shell.tsx

@@ -2,7 +2,7 @@
  * @file src/renderer/components/layout/Shell.tsx
  *
  * @created 07.03.2026
- * @modified 07.03.2026
+ * @modified 08.03.2026
  *
  * @author Christian Blank <christianblank91@protonmail.com>
  * @copyright 2026
@@ -14,17 +14,25 @@
 
 import { Outlet } from '@tanstack/react-router'
 import { Sidebar } from './Sidebar'
+import { TitleBar } from './TitleBar'
 
 /**
- * Full-window layout with sidebar on the left and the active page content
- * on the right. The `<Outlet />` renders whichever route is currently active.
+ * Full-window layout with a custom title bar on top, then sidebar on the left
+ * and the active page content on the right. The `<Outlet />` renders whichever
+ * route is currently active.
  */
 const Shell = () => (
-  <div className="flex h-screen overflow-hidden bg-background text-foreground" data-testid="shell">
-    <Sidebar />
-    <main className="flex-1 overflow-y-auto p-6" role="main" id="main-content">
-      <Outlet />
-    </main>
+  <div
+    className="flex flex-col h-screen overflow-hidden bg-background text-foreground"
+    data-testid="shell"
+  >
+    <TitleBar />
+    <div className="flex flex-1 overflow-hidden">
+      <Sidebar />
+      <main className="flex-1 overflow-y-auto p-6" role="main" id="main-content">
+        <Outlet />
+      </main>
+    </div>
   </div>
 )
 

src/renderer/components/layout/TitleBar.tsx

@@ -0,0 +1,88 @@
+/**
+ * @file src/renderer/components/layout/TitleBar.tsx
+ *
+ * @created 08.03.2026
+ * @modified 08.03.2026
+ *
+ * @author Christian Blank <christianblank91@protonmail.com>
+ * @copyright 2026
+ *
+ * @description Custom Electron title bar rendered in the renderer process.
+ * Replaces the OS-native title bar (hidden via `titleBarStyle: 'hidden'`).
+ * Provides an app label, a full-width drag region, and Win32-style window
+ * control buttons (minimize, maximize/restore, close) that delegate to the
+ * main process via IPC.
+ */
+
+import { useEffect, useState } from 'react'
+import { Minus, Square, Copy, X } from 'lucide-react'
+import '../../lib/electron.d'
+
+/**
+ * Renders the custom application title bar with a drag region and window
+ * control buttons. Subscribes to the `window:maximize-changed` push event
+ * so the maximize/restore icon stays in sync with the actual window state.
+ */
+const TitleBar = () => {
+  const [isMaximized, setIsMaximized] = useState(false)
+
+  useEffect(() => {
+    const cleanup = window.api.onMaximizeChanged(({ isMaximized: maximized }) => {
+      setIsMaximized(maximized)
+    })
+    return cleanup
+  }, [])
+
+  return (
+    <header
+      className="flex h-8 shrink-0 items-center justify-between bg-background border-b select-none"
+      style={{ WebkitAppRegion: 'drag' }}
+      data-testid="title-bar"
+    >
+      <span className="pl-3 text-xs text-muted-foreground" data-testid="title-bar-label">
+        aidrelay
+      </span>
+
+      <div
+        className="flex h-full"
+        style={{ WebkitAppRegion: 'no-drag' }}
+        data-testid="title-bar-controls"
+      >
+        {/* Minimize */}
+        <button
+          type="button"
+          aria-label="Minimize window"
+          className="flex w-12 h-full items-center justify-center text-muted-foreground hover:bg-muted transition-colors"
+          onClick={() => void window.api.windowMinimize()}
+          data-testid="title-bar-minimize"
+        >
+          <Minus size={14} />
+        </button>
+
+        {/* Maximize / Restore */}
+        <button
+          type="button"
+          aria-label={isMaximized ? 'Restore window' : 'Maximize window'}
+          className="flex w-12 h-full items-center justify-center text-muted-foreground hover:bg-muted transition-colors"
+          onClick={() => void window.api.windowMaximize()}
+          data-testid="title-bar-maximize"
+        >
+          {isMaximized ? <Copy size={14} /> : <Square size={14} />}
+        </button>
+
+        {/* Close */}
+        <button
+          type="button"
+          aria-label="Close window"
+          className="flex w-12 h-full items-center justify-center text-muted-foreground hover:bg-destructive hover:text-destructive-foreground transition-colors"
+          onClick={() => void window.api.windowClose()}
+          data-testid="title-bar-close"
+        >
+          <X size={14} />
+        </button>
+      </div>
+    </header>
+  )
+}
+
+export { TitleBar }