Add transparency option

src/main/index.ts

@@ -1,10 +1,25 @@
+import { readFileSync } from "fs";
 import { dirname, join } from "path";
-
 import electron from "electron";
 import { CONFIG_PATHS } from "src/util.mjs";
 import type { RepluggedWebContents } from "../types";
 import { getSetting } from "./ipc/settings";
 
+// TODO: This shouldn't be here, it should be in it's own module
+// like src/main/ipc/settings.ts, except that's specifically for
+// ipc transactions(which are async); So not there. Perhaps
+// it should be in util?
+const SETTINGS_DIR = CONFIG_PATHS.settings;
+function readSettingsSync(namespace: string): Map<string, unknown> {
+  try {
+    const data = readFileSync(join(SETTINGS_DIR, `${namespace}.json`), "utf8");
+    return new Map(Object.entries(JSON.parse(data)));
+  } catch {
+    return new Map();
+  }
+}
+const settings = readSettingsSync("dev.replugged.Settings");
+
 const electronPath = require.resolve("electron");
 const discordPath = join(dirname(require.main!.filename), "..", "app.orig.asar");
 // require.main!.filename = discordMain;
@@ -51,6 +66,12 @@ class BrowserWindow extends electron.BrowserWindow {
         // Discord Client
         opts.webPreferences.preload = join(__dirname, "./preload.js");
         // opts.webPreferences.contextIsolation = false; // shrug
+
+        if (settings.get("transparentWindow")) {
+          opts.transparent = true;
+          opts.frame = process.platform === "win32" ? false : opts.frame;
+          delete opts.backgroundColor;
+        }
       } else {
         // Splash Screen on macOS (Host 0.0.262+) & Windows (Host 0.0.293 / 1.0.17+)
         // opts.webPreferences.preload = join(__dirname, './preloadSplash.js');

src/renderer/coremods/settings/pages/General.tsx

@@ -55,6 +55,10 @@ export const General = (): React.ReactElement => {
     generalSettings,
     "reactDevTools",
   );
+  const { value: transValue, onChange: transOnChange } = util.useSetting(
+    generalSettings,
+    "transparentWindow",
+  );
 
   const [kKeys, setKKeys] = React.useState<number[]>([]);
 
@@ -173,6 +177,16 @@ export const General = (): React.ReactElement => {
           }}>
           {Messages.REPLUGGED_SETTINGS_DEV_COMPANION}
         </ButtonItem>
+
+        <SwitchItem
+          value={transValue}
+          onChange={(value) => {
+            transOnChange(value);
+            restartModal(true);
+          }}
+          note={Messages.REPLUGGED_SETTINGS_TRANSPARENT_DESC}>
+          {Messages.REPLUGGED_SETTINGS_TRANSPARENT}
+        </SwitchItem>
       </Category>
 
       {/* Sleeping? Wake up. */}

src/types/settings.ts

@@ -13,6 +13,7 @@ export type GeneralSettings = {
   showWelcomeNoticeOnOpen?: boolean;
   addonEmbeds?: boolean;
   reactDevTools?: boolean;
+  transparentWindow?: boolean;
 };
 
 export const defaultSettings = {
@@ -21,6 +22,7 @@ export const defaultSettings = {
   badges: true,
   autoApplyQuickCss: false,
   showWelcomeNoticeOnOpen: true,
+  transparentWindow: false,
   reactDevTools: false,
   addonEmbeds: true,
 } satisfies Partial<GeneralSettings>;