Add theme editor button and functionality to open it

Author: vorlie

index.html

@@ -107,6 +107,7 @@ <h2 class="modal-h2">About</h2>
                     </div>
                     <button class="about-button" onclick="checkForUpdates()">Check for Updates</button>
                     <button class="about-button" id="open-dev-tools" onclick="window.API.openDevTools()">Open DevTools</button>
+                    <button class="about-button" id="open-theme-editor">Open Theme Editor</button>
                 </div>
             </div>
         </div>

index.js

@@ -1,8 +1,9 @@
-const { app, Tray, Menu, ipcMain, Notification } = require('electron');
+const { app, Tray, Menu, BrowserWindow, ipcMain, Notification } = require('electron');
 const { PARAMS, VALUE, MicaBrowserWindow, IS_WINDOWS_11, WIN10 } = require('mica-electron');
 const path = require('path');
 
 let mainWindow;
+let themeEditorWindow = null;
 let tray = null;
 
 
@@ -74,11 +75,42 @@ app.on('ready', () => {
   tray.setContextMenu(contextMenu);
 });
 
+function createThemeEditorWindow() {
+  if (themeEditorWindow) {
+    themeEditorWindow.focus();
+    return;
+  }
+
+  themeEditorWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      contextIsolation: true,
+      nodeIntegration: false,
+      preload: path.join(__dirname, 'preload.js'),
+    },
+    title: "Theme Editor",
+    autoHideMenuBar: true,
+  });
+
+  themeEditorWindow.maximize();
+
+  themeEditorWindow.loadURL('https://vorlie.pages.dev/theme-editor');
+
+  themeEditorWindow.on('closed', () => {
+    themeEditorWindow = null;
+  });
+}
+
+// IPC listener to open the theme editor
+ipcMain.on('open-theme-editor', () => {
+  createThemeEditorWindow();
+});
+
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') app.quit();
 });
 
-
 function showNotification(title, body) {
   if (Notification.isSupported()) {
     let iconPath;
@@ -102,5 +134,4 @@ function showNotification(title, body) {
   } else {
     console.log('Notifications are not supported on this system.');
   }
-}
-
+}

preload.js

@@ -6,6 +6,7 @@ contextBridge.exposeInMainWorld('API', {
   on: (channel, func) => ipcRenderer.on(channel, func),
   send: (channel, ...args) => ipcRenderer.send(channel, ...args),
   removeListener: (channel, func) => ipcRenderer.removeListener(channel, func),
+  openThemeEditor: () => ipcRenderer.send('open-theme-editor'),
   versions: {
     node: () => process.versions.node,
     chrome: () => process.versions.chrome,

src/script.js

@@ -189,6 +189,10 @@ document.getElementById('open-dev-tools').addEventListener('click', () => {
     window.API.openDevTools();
 });
 
+document.getElementById('open-theme-editor').addEventListener('click', () => {
+    window.API.openThemeEditor();
+});
+
 document.addEventListener("DOMContentLoaded", () => {
     loadNotes();
     checkForUpdates();