feat: add editor window

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

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

src/main/events/index.ts

@@ -49,6 +49,7 @@ import "./user-preferences/authenticate-real-debrid";
 import "./download-sources/put-download-source";
 import "./auth/sign-out";
 import "./auth/open-auth-window";
+import "./aparence/open-editor-window";
 import "./auth/get-session-hash";
 import "./user/get-user";
 import "./user/get-blocked-users";

src/main/services/window-manager.ts

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

src/preload/index.ts

@@ -307,4 +307,7 @@ contextBridge.exposeInMainWorld("electron", {
   /* Notifications */
   publishNewRepacksNotification: (newRepacksCount: number) =>
     ipcRenderer.invoke("publishNewRepacksNotification", newRepacksCount),
+
+  /* Editor */
+  openEditorWindow: () => ipcRenderer.invoke("openEditorWindow"),
 });

src/renderer/src/declaration.d.ts

@@ -259,6 +259,9 @@ declare global {
 
     /* Notifications */
     publishNewRepacksNotification: (newRepacksCount: number) => Promise<void>;
+
+    /* Editor */
+    openEditorWindow: () => Promise<void>;
   }
 
   interface Window {

src/renderer/src/main.tsx

@@ -30,6 +30,7 @@ const Downloads = React.lazy(() => import("./pages/downloads/downloads"));
 const Settings = React.lazy(() => import("./pages/settings/settings"));
 const Catalogue = React.lazy(() => import("./pages/catalogue/catalogue"));
 const Profile = React.lazy(() => import("./pages/profile/profile"));
+const Editor = React.lazy(() => import("./pages/editor/editor"));
 const Achievements = React.lazy(
   () => import("./pages/achievements/achievements")
 );
@@ -104,6 +105,11 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
               element={<SuspenseWrapper Component={Achievements} />}
             />
           </Route>
+
+          <Route
+            path="/editor"
+            element={<SuspenseWrapper Component={Editor} />}
+          />
         </Routes>
       </HashRouter>
     </Provider>

src/renderer/src/pages/editor/editor.scss

@@ -0,0 +1,18 @@
+@use "../../scss/globals.scss";
+
+.editor-header {
+  width: 100%;
+  height: 36px;
+  background-color: globals.$dark-background-color;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding: 0 calc(globals.$spacing-unit * 2);
+  -webkit-app-region: drag;
+}
+
+.editor-header-title {
+  font-size: 7px;
+  font-weight: 500;
+  color: globals.$body-color;
+}

src/renderer/src/pages/editor/editor.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { SkeletonTheme } from "react-loading-skeleton";
+import { vars } from "@renderer/theme.css";
+import "./editor.scss";
+
+export default function Editor() {
+  useEffect(() => {
+    console.log("spectre");
+  }, []);
+
+  return (
+    <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
+      <div className="editor-header">
+        <div className="editor-header-title">
+          <h1>CSS Editor</h1>
+        </div>
+      </div>
+
+      <div
+        className="editor"
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <p>spectre</p>
+      </div>
+    </SkeletonTheme>
+  );
+}

src/renderer/src/pages/settings/appearance.tsx

@@ -39,7 +39,11 @@ export function SettingsAppearance() {
             {t("open_store")}
           </Button>
 
-          <Button type="button" theme="outline">
+          <Button
+            type="button"
+            theme="outline"
+            onClick={() => window.electron.openEditorWindow()}
+          >
             <PencilIcon />
             {t("editor_mode")}
           </Button>