From 516f991ae8b59d4e35fa5e17ecfed4cec0b2642e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20Kr=C3=BChlmann?= <andreas@kruhlmann.dev>
Date: Tue, 13 Jan 2026 23:48:10 +0100
Subject: [PATCH] Add dev console button

---
 src/css/index.css |  9 ++++++---
 src/index.html    |  6 ++++++
 src/main.js       | 10 ++++++++++
 src/preload.js    |  1 +
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/css/index.css b/src/css/index.css
index e445bd3..a64d8c8 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -5,6 +5,7 @@
 
 :root {
     --window-frame-height: 36px;
+    --window-control-size: 28px;
 }
 
 p {
@@ -64,15 +65,17 @@ body {
 }
 
 .window-control {
-    width: 30px;
-    height: 24px;
+    width: var(--window-control-size);
+    height: var(--window-control-size);
     padding: 0;
     border-radius: 6px;
     background: rgba(148, 163, 184, 0.2);
     border: 1px solid rgba(148, 163, 184, 0.25);
     color: #e2e8f0;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1;
+    display: grid;
+    place-items: center;
     box-shadow: none;
 }
 
diff --git a/src/index.html b/src/index.html
index 3f48019..a915866 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,9 @@
                 <button class="window-control" type="button" data-window-action="minimize" aria-label="Minimize">
                     &minus;
                 </button>
+                <button class="window-control" type="button" data-window-action="devtools" aria-label="Toggle dev tools">
+                    &#9881;
+                </button>
                 <button
                     class="window-control window-control-close"
                     type="button"
@@ -113,6 +116,9 @@
                     if (action === "minimize") {
                         window.store.minimizeWindow();
                     }
+                    if (action === "devtools") {
+                        window.store.toggleDevTools();
+                    }
                     if (action === "close") {
                         window.store.closeWindow();
                     }
diff --git a/src/main.js b/src/main.js
index 2f1aa60..8cb1f8a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -70,6 +70,16 @@ ipcMain.handle("close-window", () => {
     }
 });
 
+ipcMain.handle("toggle-devtools", () => {
+    if (ELECTRON_WINDOW && !ELECTRON_WINDOW.isDestroyed()) {
+        if (ELECTRON_WINDOW.webContents.isDevToolsOpened()) {
+            ELECTRON_WINDOW.webContents.closeDevTools();
+        } else {
+            ELECTRON_WINDOW.webContents.openDevTools({ mode: "detach" });
+        }
+    }
+});
+
 ipcMain.handle("save-broadcaster", (_, broadcaster) => {
     const store = readStore(STORE_PATH);
     store.lastBroadcaster = broadcaster;
diff --git a/src/preload.js b/src/preload.js
index 1488e30..1e568d5 100644
--- a/src/preload.js
+++ b/src/preload.js
@@ -9,4 +9,5 @@ contextBridge.exposeInMainWorld("store", {
     setWindowSize: (width, height) => ipcRenderer.invoke("set-window-size", width, height),
     minimizeWindow: () => ipcRenderer.invoke("minimize-window"),
     closeWindow: () => ipcRenderer.invoke("close-window"),
+    toggleDevTools: () => ipcRenderer.invoke("toggle-devtools"),
 });