add in-app settings

src/content/css/inAppSettings.css

@@ -0,0 +1,87 @@
+/* The Modal (background) */
+.ACsettings-modal {
+    display: none;
+    /* Hidden by default */
+    position: fixed;
+    /* Stay in place */
+    z-index: 9999999999999;
+    /* Sit on top */
+    padding-top: 100px;
+    /* Location of the box */
+    background-color: var(--background-secondary);
+    left: 0;
+    top: 0;
+    width: 100%;
+    /* Full width */
+    height: 100%;
+    /* Full height */
+    overflow: auto;
+    /* Enable scroll if needed */
+    background-color: rgb(0, 0, 0);
+    /* Fallback color */
+    background-color: rgba(0, 0, 0, 0.4);
+    /* Black w/ opacity */
+}
+
+/* Modal Content */
+.ACsettings-modal-content {
+    position: relative;
+    margin: auto;
+    padding: 1rem;
+    background-color: var(--background-secondary);
+    border-color: var(--background-floating);
+    border-style: solid;
+    border-radius: 10px;
+    width: 80%;
+    height: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s;
+}
+webview#inAppSettings {
+    height: 100%;
+}
+/* Add Animation */
+@-webkit-keyframes animatetop {
+    from {
+        top: -300px;
+        opacity: 0;
+    }
+
+    to {
+        top: 0;
+        opacity: 1;
+    }
+}
+
+@keyframes animatetop {
+    from {
+        top: -300px;
+        opacity: 0;
+    }
+
+    to {
+        top: 0;
+        opacity: 1;
+    }
+}
+
+/* The Close Button */
+.close {
+    color: white;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    position: absolute;
+    right: 5%;
+    top: 5%;
+}
+
+.close:hover,
+.close:focus {
+    color: red;
+    text-decoration: none;
+    cursor: pointer;
+}

src/ipc.ts

@@ -1,24 +1,33 @@
 //ipc stuff
-import {app, desktopCapturer, ipcMain, nativeImage, shell} from "electron";
+import {app, clipboard, desktopCapturer, ipcMain, nativeImage, shell} from "electron";
 import {mainWindow} from "./window";
 import {
+    Settings,
     getConfig,
+    getConfigLocation,
     getDisplayVersion,
     getLang,
+    getLangName,
     getVersion,
     getWindowState,
     modInstallState,
     packageVersion,
     setConfigBulk,
-    setLang
+    setLang,
+    sleep
 } from "./utils";
 import {customTitlebar} from "./main";
 import {createSettingsWindow} from "./settings/main";
 import os from "os";
+import fs from "fs";
 import path from "path";
 import {createTManagerWindow} from "./themeManager/main";
 import {splashWindow} from "./splash/main";
 import {createKeybindWindow} from "./keybindMaker/main";
+const userDataPath = app.getPath("userData");
+const storagePath = path.join(userDataPath, "/storage/");
+const themesPath = path.join(userDataPath, "/themes/");
+const pluginsPath = path.join(userDataPath, "/plugins/");
 export function registerIpc(): void {
     ipcMain.on("get-app-path", (event) => {
         event.reply("app-path", app.getAppPath());
@@ -142,4 +151,41 @@ export function registerIpc(): void {
         }
     });
     ipcMain.handle("DESKTOP_CAPTURER_GET_SOURCES", (_event, opts) => desktopCapturer.getSources(opts));
+    ipcMain.on("saveSettings", (_event, args: Settings) => {
+        console.log(args);
+        setConfigBulk(args);
+    });
+    ipcMain.on("openStorageFolder", async () => {
+        shell.showItemInFolder(storagePath);
+        await sleep(1000);
+    });
+    ipcMain.on("openThemesFolder", async () => {
+        shell.showItemInFolder(themesPath);
+        await sleep(1000);
+    });
+    ipcMain.on("openPluginsFolder", async () => {
+        shell.showItemInFolder(pluginsPath);
+        await sleep(1000);
+    });
+    ipcMain.on("openCrashesFolder", async () => {
+        shell.showItemInFolder(path.join(app.getPath("temp"), `${app.getName()} Crashes`));
+        await sleep(1000);
+    });
+    ipcMain.on("getLangName", async (event) => {
+        event.returnValue = await getLangName();
+    });
+    ipcMain.on("crash", async () => {
+        process.crash();
+    });
+    ipcMain.handle("getSetting", (_event, toGet: keyof Settings) => {
+        return getConfig(toGet);
+    });
+    ipcMain.on("copyDebugInfo", () => {
+        let settingsFileContent = fs.readFileSync(getConfigLocation(), "utf-8");
+        clipboard.writeText(
+            `**OS:** ${os.platform()} ${os.version()}\n**Architecture:** ${os.arch()}\n**ArmCord version:** ${getVersion()}\n**Electron version:** ${
+                process.versions.electron
+            }\n\`${settingsFileContent}\``
+        );
+    });
 }

src/preload/preload.ts

@@ -1,13 +1,14 @@
 import "./bridge";
 import "./patch";
 import "./optimizer";
-
+import "./settings";
 import {ipcRenderer} from "electron";
 import * as fs from "fs";
 import * as path from "path";
 import {addScript, addStyle, sleep} from "../utils";
 import {injectMobileStuff} from "./mobile";
 import {fixTitlebar, injectTitlebar} from "./titlebar";
+import {injectSettings} from "./settings";
 
 window.localStorage.setItem("hideNag", "true");
 
@@ -95,9 +96,9 @@ setInterval(() => {
     const tManager = advanced.cloneNode(true) as HTMLElement;
     const fQuit = advanced.cloneNode(true) as HTMLElement;
     const keybindMaker = advanced.cloneNode(true) as HTMLElement;
-    acSettings.textContent = "ArmCord";
+    acSettings.textContent = "ArmCord Settings";
     acSettings.id = "acSettings";
-    acSettings.onclick = () => ipcRenderer.send("openSettingsWindow");
+    acSettings.onclick = () => injectSettings();
     tManager.textContent = "Themes";
     tManager.id = "acThemes";
     tManager.onclick = () => ipcRenderer.send("openManagerWindow");

src/preload/settings.ts

@@ -0,0 +1,44 @@
+import * as path from "path";
+import * as fs from "fs";
+import {addStyle} from "../utils";
+import {WebviewTag} from "electron";
+var html = `
+<div id="ACsettingsModal" class="ACsettings-modal">
+<span class="close" id="closeSettings">&times;</span>
+<div class="ACsettings-modal-content" id="webviewSettingsContainer">
+</div>
+</div>`;
+
+var webview = `<webview src="${path.join("file://", __dirname, "../", "/settings/settings.html")}" preload="${path.join(
+    "file://",
+    __dirname,
+    "../",
+    "/settings/preload.js"
+)}" id="inAppSettings"></webview>`;
+export function injectSettings() {
+    document.getElementById("webviewSettingsContainer")!.innerHTML = webview;
+    document.getElementById("ACsettingsModal")!.style.display = "block";
+}
+function removeSettings() {
+    document.getElementById("webviewSettingsContainer")!.innerHTML = "";
+    document.getElementById("ACsettingsModal")!.style.display = "none";
+}
+document.addEventListener("DOMContentLoaded", function (_event) {
+    const elem = document.createElement("div");
+    elem.innerHTML = html;
+    elem.classList.add("withFrame-haYltI");
+    if (document.getElementById("app-mount") == null) {
+        document.body.appendChild(elem);
+    } else {
+        document.getElementById("app-mount")!.prepend(elem);
+    }
+    const settingsCssPath = path.join(__dirname, "../", "/content/css/inAppSettings.css");
+    addStyle(fs.readFileSync(settingsCssPath, "utf8"));
+    document.getElementById("closeSettings")!.addEventListener("click", () => {
+        removeSettings();
+    });
+    const webview = document.querySelector("webview") as WebviewTag;
+    webview.addEventListener("console-message", (e) => {
+        console.log("Settings page logged a message:", e.message);
+    });
+});

src/settings/main.ts

@@ -1,24 +1,10 @@
-import {BrowserWindow, app, clipboard, ipcMain, shell} from "electron";
+import {BrowserWindow, app, ipcMain, shell} from "electron";
-import {
+import {getDisplayVersion} from "../utils";
-    Settings,
-    getConfig,
-    getConfigLocation,
-    getDisplayVersion,
-    getLangName,
-    getVersion,
-    setConfigBulk,
-    sleep
-} from "../utils";
 import path from "path";
-import os from "os";
 import fs from "fs";
 let settingsWindow: BrowserWindow;
 let instance = 0;
-//checkForDataFolder();
+
-const userDataPath = app.getPath("userData");
-const storagePath = path.join(userDataPath, "/storage/");
-const themesPath = path.join(userDataPath, "/themes/");
-const pluginsPath = path.join(userDataPath, "/plugins/");
 export function createSettingsWindow(): void {
     console.log("Creating a settings window.");
     instance += 1;
@@ -77,51 +63,12 @@ export function createSettingsWindow(): void {
                 }
             });
         });
-        ipcMain.on("saveSettings", (_event, args: Settings) => {
-            console.log(args);
-            setConfigBulk(args);
-        });
-        ipcMain.on("openStorageFolder", async () => {
-            shell.showItemInFolder(storagePath);
-            await sleep(1000);
-        });
-        ipcMain.on("openThemesFolder", async () => {
-            shell.showItemInFolder(themesPath);
-            await sleep(1000);
-        });
-        ipcMain.on("openPluginsFolder", async () => {
-            shell.showItemInFolder(pluginsPath);
-            await sleep(1000);
-        });
-        ipcMain.on("openCrashesFolder", async () => {
-            shell.showItemInFolder(path.join(app.getPath("temp"), `${app.getName()} Crashes`));
-            await sleep(1000);
-        });
-        ipcMain.on("getLangName", async (event) => {
-            event.returnValue = await getLangName();
-        });
-        ipcMain.on("crash", async () => {
-            process.crash();
-        });
-        ipcMain.handle("getSetting", (_event, toGet: keyof Settings) => {
-            return getConfig(toGet);
-        });
-        ipcMain.on("copyDebugInfo", () => {
-            let settingsFileContent = fs.readFileSync(getConfigLocation(), "utf-8");
-            clipboard.writeText(
-                `**OS:** ${os.platform()} ${os.version()}\n**Architecture:** ${os.arch()}\n**ArmCord version:** ${getVersion()}\n**Electron version:** ${
-                    process.versions.electron
-                }\n\`${settingsFileContent}\``
-            );
-        });
         settingsWindow.webContents.setWindowOpenHandler(({url}) => {
             shell.openExternal(url);
             return {action: "deny"};
         });
         settingsLoadPage();
         settingsWindow.on("close", () => {
-            ipcMain.removeHandler("getSetting");
-            ipcMain.removeAllListeners("saveSettings");
             instance = 0;
         });
     }

src/settings/preload.ts

@@ -1,5 +1,5 @@
 import {contextBridge, ipcRenderer} from "electron";
-import {addStyle} from "../utils";
+//import {addStyle} from "../utils";
 console.log("ArmCord Settings");
 console.log(process.platform);
 contextBridge.exposeInMainWorld("settings", {
@@ -18,5 +18,5 @@ contextBridge.exposeInMainWorld("settings", {
 });
 
 ipcRenderer.on("themeLoader", (_event, message) => {
-    addStyle(message);
+    //addStyle(message);
 });

src/window.ts

@@ -313,6 +313,7 @@ export async function createCustomWindow(): Promise<void> {
         backgroundColor: "#202225",
         autoHideMenuBar: true,
         webPreferences: {
+            webviewTag: true,
             sandbox: false,
             preload: path.join(__dirname, "preload/preload.js"),
             spellcheck: await getConfig("spellcheck")
@@ -334,6 +335,7 @@ export async function createNativeWindow(): Promise<void> {
         backgroundColor: "#202225",
         autoHideMenuBar: true,
         webPreferences: {
+            webviewTag: true,
             sandbox: false,
             preload: path.join(__dirname, "preload/preload.js"),
             spellcheck: await getConfig("spellcheck")
@@ -356,6 +358,7 @@ export async function createTransparentWindow(): Promise<void> {
         autoHideMenuBar: true,
         webPreferences: {
             sandbox: false,
+            webviewTag: true,
             preload: path.join(__dirname, "preload/preload.js"),
             spellcheck: await getConfig("spellcheck")
         }