feat: add theme editor with Monaco and custom CSS injection

src/main/events/index.ts

@@ -78,6 +78,11 @@ import "./themes/add-custom-theme";
 import "./themes/delete-custom-theme";
 import "./themes/get-all-custom-themes";
 import "./themes/delete-all-custom-themes";
+import "./themes/update-custom-theme";
+import "./themes/open-editor-window";
+import "./themes/get-custom-theme-by-id";
+import "./themes/get-active-custom-theme";
+import "./themes/css-injector";
 import { isPortableVersion } from "@main/helpers";
 
 ipcMain.handle("ping", () => "pong");

src/main/events/themes/css-injector.ts

@@ -0,0 +1,12 @@
+import { registerEvent } from "../register-event";
+import { WindowManager } from "@main/services";
+
+const injectCSS = async (
+    _event: Electron.IpcMainInvokeEvent,
+    cssString: string
+) => {
+    WindowManager.mainWindow?.webContents.send("css-injected", cssString);
+    return;
+};
+
+registerEvent("injectCSS", injectCSS); 

src/main/events/themes/get-active-custom-theme.ts

@@ -0,0 +1,10 @@
+import { registerEvent } from "../register-event";
+import { themes } from "@main/level/sublevels/themes";
+import { Theme } from "@types";
+
+const getActiveCustomTheme = async () => {
+    const allThemes = await themes.values().all();
+    return allThemes.find((theme: Theme) => theme.isActive);
+};
+
+registerEvent("getActiveCustomTheme", getActiveCustomTheme);

src/main/events/themes/get-custom-theme-by-id.ts

@@ -0,0 +1,8 @@
+import { themes } from "@main/level/sublevels/themes";
+import { registerEvent } from "../register-event";
+
+const getCustomThemeById = async (_event: Electron.IpcMainInvokeEvent, themeId: string) => {
+    return await themes.get(themeId);
+};
+
+registerEvent("getCustomThemeById", getCustomThemeById);

src/main/events/themes/open-editor-window.ts

@@ -0,0 +1,8 @@
+import { WindowManager } from "@main/services";
+import { registerEvent } from "../register-event";
+
+const openEditorWindow = async (_event: Electron.IpcMainInvokeEvent, themeId: string) => {
+  WindowManager.openEditorWindow(themeId);
+};
+
+registerEvent("openEditorWindow", openEditorWindow);

src/main/events/themes/update-custom-theme.ts

@@ -0,0 +1,13 @@
+import { themes } from "@main/level/sublevels/themes";
+import { registerEvent } from "../register-event";
+import { Theme } from "@types";
+
+const updateCustomTheme = async (
+  _event: Electron.IpcMainInvokeEvent,
+  themeId: string,
+  theme: Theme
+) => {
+  await themes.put(themeId, theme);
+};
+
+registerEvent("updateCustomTheme", updateCustomTheme);

src/main/services/window-manager.ts

@@ -194,6 +194,58 @@ export class WindowManager {
     }
   }
 
+  public static openEditorWindow(themeId: string) {
+    if (this.mainWindow) {
+      const editorWindow = new BrowserWindow({
+        width: 600,
+        height: 720,
+        minWidth: 600,
+        minHeight: 540,
+        backgroundColor: "#1c1c1c",
+        titleBarStyle: process.platform === "linux" ? "default" : "hidden",
+        ...(process.platform === "linux" ? { icon } : {}),
+        trafficLightPosition: { x: 16, y: 16 },
+        titleBarOverlay: {
+          symbolColor: "#DADBE1",
+          color: "#151515",
+          height: 34,
+        },
+        webPreferences: {
+          preload: path.join(__dirname, "../preload/index.mjs"),
+          sandbox: false,
+        },
+        show: false,
+      });
+
+      if (!app.isPackaged) {
+        editorWindow.webContents.openDevTools();
+      } else {
+        this.mainWindow?.webContents.openDevTools();
+      }
+
+      editorWindow.removeMenu();
+
+      if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+        editorWindow.loadURL(
+          `${process.env["ELECTRON_RENDERER_URL"]}#/editor?themeId=${themeId}`
+        );
+      } else {
+        editorWindow.loadFile(
+          path.join(__dirname, "../renderer/index.html"),
+          {
+            hash: "editor",
+          }
+        );
+      }
+
+
+
+      editorWindow.once("ready-to-show", () => {
+        editorWindow.show();
+      });
+    }
+  }
+
   public static redirect(hash: string) {
     if (!this.mainWindow) this.createMainWindow();
     this.loadMainWindowURL(hash);