(Attempt 2) A bunch of shit (#175)

* 2 new things (Read desc.) - Cleaned up ASAR packaging, ignoring unneeded files for building - Moved install location for Windows users ("AppData\Local\Programs" -> "AppData\Local" * 3 things (Read desc.) - Updated things related to Hummus (Hummus settings don't save nor load in it's respective settings window yet, idk why) - Added check for package version (ArmCord's internal version) - Made check for Kernel mod a bit cleaner, it still uses the same jank method * 3 things - Made macOS titlebar more accurate to Discord - Added "unFocused" class when window isn't focused - Added option to uninstall Husky hook for Windows users with reminder to run format script before committing * Resolved a dumb issue My dumbass not knowing the "echo" command existed smh * Made "precommit-fix" warning more noticable * Whoops * Fixed a CSS bug Discord updates are gonna hate us, huh?
2024-08-14 23:56:58 +00:00 · 2022-08-22 05:24:55 -04:00 · 2022-08-22 05:24:55 -04:00 · fb6348ee82
commit fb6348ee82
parent ccb87c53d8
16 changed files with 277 additions and 201 deletions
--- a/package.json
+++ b/package.json
@ -11,7 +11,9 @@
    "packageQuick": "npm run build && electron-builder --dir",
    "format": "prettier --write src/**/*",
    "CIbuild": "npm run build && electron-builder --linux zip && electron-builder --windows zip && electron-builder --macos zip",
-    "postinstall": "husky install"
+    "postinstall": "husky install",
+    "precommit-fix": "husky uninstall && echo - && echo !Make sure to run 'npm run format' before commiting! | chalk --stdin yellow inverse && echo -",
+    "precommit-fix:format": "husky uninstall && npm run format"
  },
  "repository": {
    "type": "git",
@ -31,7 +33,8 @@
    "electron-builder": "^23.0.3",
    "husky": "^8.0.1",
    "prettier": "^2.7.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.3",
+    "chalk-cli": "^5.0.0"
  },
  "dependencies": {
    "electron-context-menu": "github:ArmCord/electron-context-menu",
--- a/src/content/css/discord.css
+++ b/src/content/css/discord.css
@ -8,6 +8,10 @@
    padding: 0;
    padding-top: 4px;
 }
+[customTitlebar] .backdrop-2ByYRN {
+    top: -30px;
+    padding-top: 30px;
+}
 * {
    outline: none;
 }
@ -33,7 +37,7 @@
 }

 .none-2-_0dP:hover::-webkit-scrollbar {
-    width: 0.29em !important;
+    width: 0.3em !important;
    border-radius: 25px;
    height: 0px !important;
    background: transparent !important;
--- a/src/content/css/settings.css
+++ b/src/content/css/settings.css
@ -85,6 +85,10 @@ p {
    z-index: 999;
    font-size: 10px;
 }
+.saveBar > button {
+    width: 90px;
+}
+
 .header {
    color: var(--header-primary);
    font-size: 1.5em;
@ -128,6 +132,7 @@ p {
    color: var(--header-primary);
    font-size: 1.5em;
    font-weight: bold;
+    width: max-content;
 }
 /*buttons*/
 button {
@ -273,9 +278,12 @@ select {
 .acClientMod {
    height: 18em !important;
 }
+.acCordwood {
+    height: 8em !important;
+}
 .acPrfmMode {
    height: 10em !important;
 }
 .acTray {
-    height: 7em !important;
+    height: 8em !important;
 }
--- a/src/content/css/titlebar.css
+++ b/src/content/css/titlebar.css
@ -12,7 +12,6 @@
    height: 30px;
    line-height: 30px;
    -webkit-app-region: drag;
-    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    position: fixed;
@ -225,13 +224,22 @@
 }

 /* ArmCord on MacOS (Why would you do this?) */
+[armcord-platform="darwin"] .withFrame-haYltI {
+    height: 0px !important;
+}
+[armcord-platform="darwin"] .sidebar-1tnWFu {
+    border-top-left-radius: 0px !important;
+}
+[armcord-platform="darwin"] .scroller-3X7KbA {
+    padding-top: 35px !important;
+}
 [armcord-platform="darwin"] .container-2RRFHK {
-    padding-top: 45px;
-    top: -45px;
+    padding-top: 48px;
+    top: -48px;
 }
 [armcord-platform="darwin"] .titlebar {
-    height: 45px;
-    line-height: 45px;
+    height: 48px;
+    line-height: 48px;
 }
 [armcord-platform="darwin"] .titlebar #window-controls-container {
    float: left;
@ -239,7 +247,7 @@
    height: 60%;
    line-height: 45px;
    -webkit-app-region: no-drag;
-    transform: translate(-78px, 4px);
+    transform: translate(-82px, 4px);
 }

 [armcord-platform="darwin"] .titlebar #window-controls-container:hover #minimize #minimize-icon,
@ -248,6 +256,13 @@
    display: list-item;
 }

+[armcord-platform="darwin"][unFocused] .titlebar #window-controls-container #minimize,
+[armcord-platform="darwin"][unFocused] .titlebar #window-controls-container #maximize,
+[armcord-platform="darwin"][unFocused] .titlebar #window-controls-container #quit {
+    background-color: #d6d6d5 !important;
+    transition: background-color 0.1s ease-in;
+}
+
 [armcord-platform="darwin"] .titlebar #window-controls-container #quit #quit-icon {
    background-color: #79282b;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4yOTI4OSA2TDIuODE4MDEgMy41MjUxM0wzLjUyNTEyIDIuODE4MDJMNS45OTk5OSA1LjI5Mjg5TDguNDc0ODcgMi44MTgwMkw5LjE4MTk3IDMuNTI1MTNMNi43MDcxIDZMOS4xODE5NyA4LjQ3NDg3TDguNDc0ODcgOS4xODE5OEw1Ljk5OTk5IDYuNzA3MTFMMy41MjUxMiA5LjE4MTk4TDIuODE4MDEgOC40NzQ4N0w1LjI5Mjg5IDZaIiBmaWxsPSJyZ2JhKDEyOCwgNiwgMCwgMSkiLz48L3N2Zz4=")
@ -275,6 +290,7 @@

 [armcord-platform="darwin"] .titlebar #window-controls-container #minimize {
    background-color: #fac536;
+    transition: background-color 0.1s ease-in;
    border: 1px solid #da9e10;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
@ -284,6 +300,7 @@
 }
 [armcord-platform="darwin"] .titlebar #window-controls-container #maximize {
    background-color: #39ea49;
+    transition: background-color 0.1s ease-in;
    border: 1px solid #13c11e;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
@ -293,6 +310,7 @@
 }
 [armcord-platform="darwin"] .titlebar #window-controls-container #quit {
    background-color: #f25056;
+    transition: background-color 0.1s ease-in;
    border: 1px solid #d52735;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
        no-repeat 50% 50%;
@ -331,13 +349,7 @@
 }

 [armcord-platform="darwin"] .window-title {
-    content: var(--wordmark-svg);
-    height: 10px;
-    left: 50%;
-    margin-right: 50%;
-    transform: translate(50%, 9.5px);
-    float: right;
-    padding: 0;
+    display: none;
 }

 [armcord-platform="linux"] .window-title,
--- a/src/ipc.ts
+++ b/src/ipc.ts
@ -1,7 +1,7 @@
 //ipc stuff
 import {app, ipcMain, shell, desktopCapturer} from "electron";
 import {mainWindow} from "./window";
-import {setConfigBulk, getVersion, getConfig, setLang, getLang, getWindowState} from "./utils";
+import {setConfigBulk, getVersion, getConfig, setLang, getLang, getWindowState, packageVersion} from "./utils";
 import {customTitlebar} from "./main";
 import {createSettingsWindow} from "./settings/main";
 export function registerIpc() {
@ -44,21 +44,24 @@ export function registerIpc() {
    ipcMain.on("get-app-version", (event) => {
        event.returnValue = getVersion();
    });
+    ipcMain.on("get-package-version", (event) => {
+        event.returnValue = packageVersion;
+    });
    ipcMain.on("splashEnd", async (event, arg) => {
        try {
-        var width = await getWindowState("width") ?? 800;
-        var height= await getWindowState("height") ?? 600;
-        var isMaximized = await getWindowState("isMaximized") ?? false;
+            var width = (await getWindowState("width")) ?? 800;
+            var height = (await getWindowState("height")) ?? 600;
+            var isMaximized = (await getWindowState("isMaximized")) ?? false;
        } catch (e) {
-            console.log("[Window state manager] No window state file found. Fallbacking to default values.")
+            console.log("[Window state manager] No window state file found. Fallbacking to default values.");
            mainWindow.setSize(800, 600);
        }
        if (isMaximized) {
-            mainWindow.setSize(800, 600); //just so the whole thing doesn't cover whole screen 
-            mainWindow.maximize()
+            mainWindow.setSize(800, 600); //just so the whole thing doesn't cover whole screen
+            mainWindow.maximize();
        } else {
            mainWindow.setSize(width, height);
-            console.log("[Window state manager] Not maximized.")
+            console.log("[Window state manager] Not maximized.");
        }
    });
    ipcMain.on("restart", (event, arg) => {
--- a/src/main.ts
+++ b/src/main.ts
@ -43,7 +43,7 @@ app.whenReady().then(async () => {
                break;
        }
    }
-    await init()
+    await init();
    session.fromPartition("some-partition").setPermissionRequestHandler((webContents, permission, callback) => {
        if (permission === "notifications") {
            // Approves the permissions request
@ -55,7 +55,6 @@ app.whenReady().then(async () => {
        }
    });
    app.on("activate", async function () {
-        if (BrowserWindow.getAllWindows().length === 0)
-            await init()
+        if (BrowserWindow.getAllWindows().length === 0) await init();
    });
 });
--- a/src/menu.ts
+++ b/src/menu.ts
@ -1,76 +1,84 @@
-import { Menu, app, clipboard, globalShortcut } from "electron";
+import {Menu, app, clipboard, globalShortcut} from "electron";
 import {mainWindow} from "./window";
 import {getConfig} from "./utils";

 function paste(contents: any) {
    const contentTypes = clipboard.availableFormats().toString();
    //Workaround: fix pasting the images.
-    if(contentTypes.includes('image/') && contentTypes.includes('text/html')) {
+    if (contentTypes.includes("image/") && contentTypes.includes("text/html")) {
        clipboard.writeImage(clipboard.readImage());
    }
    contents.paste();
 }
 export async function setMenu() {
-    if (await getConfig("alternativePaste") == true) {
+    if ((await getConfig("alternativePaste")) == true) {
        mainWindow.on("focus", function () {
-            console.log("[Window state manager] Focus")
+            console.log("[Window state manager] Focus");
            globalShortcut.register("CmdOrCtrl+V", function () {
                if (mainWindow.isFocused()) {
-                    paste(mainWindow.webContents)
+                    paste(mainWindow.webContents);
                }
-            })
-        })
+            });
+        });
        mainWindow.on("show", function () {
-            console.log("[Window state manager] Show")
-            mainWindow.focus()
+            console.log("[Window state manager] Show");
+            mainWindow.focus();
            globalShortcut.register("CmdOrCtrl+V", function () {
                if (mainWindow.isFocused()) {
-                    paste(mainWindow.webContents)
+                    paste(mainWindow.webContents);
                }
-            })
-        })
+            });
+        });
        mainWindow.on("blur", function () {
-            console.log("[Window state manager] Defocus")
-            globalShortcut.unregister("CmdOrCtrl+V")
-        })
+            console.log("[Window state manager] Defocus");
+            globalShortcut.unregister("CmdOrCtrl+V");
+        });
        mainWindow.on("hide", function () {
-            console.log("[Window state manager] Hide")
-            globalShortcut.unregister("CmdOrCtrl+V")
-        })
+            console.log("[Window state manager] Hide");
+            globalShortcut.unregister("CmdOrCtrl+V");
+        });
    }
-    var template: Electron.MenuItemConstructorOptions[] = [{
-        label: "ArmCord",
-        submenu: [
-            {label: "About ArmCord", role: "about"},//orderFrontStandardAboutPanel
-            {type: "separator"},
-            {
-                label: "Developer tools", accelerator: "CmdOrCtrl+Shift+I", click: function () {
-                    mainWindow.webContents.openDevTools()
+    var template: Electron.MenuItemConstructorOptions[] = [
+        {
+            label: "ArmCord",
+            submenu: [
+                {label: "About ArmCord", role: "about"}, //orderFrontStandardAboutPanel
+                {type: "separator"},
+                {
+                    label: "Developer tools",
+                    accelerator: "CmdOrCtrl+Shift+I",
+                    click: function () {
+                        mainWindow.webContents.openDevTools();
+                    }
+                },
+                {
+                    label: "Quit",
+                    accelerator: "CmdOrCtrl+Q",
+                    click: function () {
+                        app.quit();
+                    }
                }
-            },
-            {
-                label: "Quit", accelerator: "CmdOrCtrl+Q", click: function () {
-                    app.quit();
-                }
-            }
-        ]
-    }, {
-        label: "Edit",
-        submenu: [
-            {label: "Undo", accelerator: "CmdOrCtrl+Z", role: "undo"},
-            {label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", role: "redo"},
-            {type: "separator"},
-            {label: "Cut", accelerator: "CmdOrCtrl+X", role: "cut"},
-            {label: "Copy", accelerator: "CmdOrCtrl+C", role: "copy"},
-            {
-                label: "Paste", accelerator: "CmdOrCtrl+V", click: function () {
-                    paste(mainWindow.webContents)
-                }
-            },
-            {label: "Select All", accelerator: "CmdOrCtrl+A", role: "selectAll"}
-        ]
-    }
-    ]
+            ]
+        },
+        {
+            label: "Edit",
+            submenu: [
+                {label: "Undo", accelerator: "CmdOrCtrl+Z", role: "undo"},
+                {label: "Redo", accelerator: "Shift+CmdOrCtrl+Z", role: "redo"},
+                {type: "separator"},
+                {label: "Cut", accelerator: "CmdOrCtrl+X", role: "cut"},
+                {label: "Copy", accelerator: "CmdOrCtrl+C", role: "copy"},
+                {
+                    label: "Paste",
+                    accelerator: "CmdOrCtrl+V",
+                    click: function () {
+                        paste(mainWindow.webContents);
+                    }
+                },
+                {label: "Select All", accelerator: "CmdOrCtrl+A", role: "selectAll"}
+            ]
+        }
+    ];

    Menu.setApplicationMenu(Menu.buildFromTemplate(template));
-}
+}
--- a/src/preload/bridge.ts
+++ b/src/preload/bridge.ts
@ -21,6 +21,7 @@ contextBridge.exposeInMainWorld("armcord", {
            return result;
        }),
    version: ipcRenderer.sendSync("get-app-version", "app-version"),
+    packageVersion: ipcRenderer.sendSync("get-package-version", "app-version"),
    getDisplayMediaSelector: getDisplayMediaSelector,
    openSettingsWindow: () => ipcRenderer.send("openSettingsWindow")
 });
--- a/src/preload/preload.ts
+++ b/src/preload/preload.ts
@ -8,6 +8,7 @@ import {sleep, addStyle, injectJS, addScript} from "../utils";
 import {ipcRenderer} from "electron";
 import {injectMobileStuff} from "./mobile";
 var version = ipcRenderer.sendSync("get-app-version", "app-version");
+var channel = ipcRenderer.sendSync("channel");
 async function updateLang() {
    if (window.location.href.indexOf("setup.html") > -1) {
        console.log("Setup, skipping lang update");
@ -37,7 +38,7 @@ if (window.location.href.indexOf("splash.html") > -1) {
    console.log("Skipping titlebar injection and client mod injection.");
 } else {
    if (ipcRenderer.sendSync("titlebar")) {
-        if (ipcRenderer.sendSync("channel")) {
+        if (channel == "hummus") {
            injectHummusTitlebar();
        } else {
            injectTitlebar();
--- a/src/preload/titlebar.ts
+++ b/src/preload/titlebar.ts
@ -64,9 +64,18 @@ export function injectHummusTitlebar() {
        elem.classList.add("win-buttons-light");
        document.getElementsByClassName("titlebar")[0].appendChild(elem);
        document.body.setAttribute("customTitlebar", "");
+        document.body.setAttribute("hummus", "");
        document.body.setAttribute("armcord-platform", os.platform());
-        addStyle(".chat>.title-wrap {width: 87% !important;}");
-        addStyle(".friends-header {width: 91% !important;}");
+        addStyle(`
+        html, body {
+            background-color: #1e2124;
+        }
+        
+        .friends-header,
+        .chat > .title-wrap {
+            float: right !important;
+            padding-right: 140px !important;
+        }`);
        var minimize = document.getElementById("minimize");
        var maximize = document.getElementById("maximize");
        var quit = document.getElementById("quit");
--- a/src/settings/hummus.html
+++ b/src/settings/hummus.html
@ -5,6 +5,9 @@
        <title>ArmCord Settings</title>
        <style>
            @import url("../content/css/settings.css");
+            .acAdvSettings {
+                height: 19em !important;
+            }
        </style>
    </head>

@ -79,7 +82,7 @@
            </div>
        </div>
        <br />
-        <div class="switch acAltPaste">
+        <div class="switch acCordwood">
            <label class="header2" id="settings-cordwood">Cordwood client mod</label>
            <input class="tgl tgl-light left" id="cordwood" type="checkbox" />
            <label class="tgl-btn left" for="cordwood"></label>
@ -116,14 +119,16 @@
        </div>
        <br />
        <br />
-        <h1 class="center advancedText">⚠️Advanced user zone⚠️</h1>
-        <button id="settings-pluginsFolder" class="center">Open plugins folder</button>
-        <br />
-        <button id="settings-themesFolder" class="center">Open themes folder</button>
-        <br />
-        <button id="settings-storageFolder" class="center">Open storage folder</button>
-        <br />
-        <button id="settings-copyDebugInfo" class="center">Copy debug info</button>
+        <div class="switch acAdvSettings">
+            <h1 class="center advancedText">⚠️ Advanced User Zone ⚠️</h1>
+            <button id="settings-pluginsFolder" class="center">Open Plugins Folder</button>
+            <br />
+            <button id="settings-themesFolder" class="center">Open Themes Folder</button>
+            <br />
+            <button id="settings-storageFolder" class="center">Open Storage Folder</button>
+            <br />
+            <button id="settings-copyDebugInfo" class="center">Copy Debug Info</button>
+        </div>
    </body>
    <script>
        async function loadLang() {
--- a/src/settings/main.ts
+++ b/src/settings/main.ts
@ -29,6 +29,14 @@ export function createSettingsWindow() {
                preload: path.join(__dirname, "preload.js")
            }
        });
+        async function settingsLoadPage() {
+            if ((await getConfig("channel")) == "hummus") {
+                settingsWindow.loadURL(`file://${__dirname}/hummus.html`);
+            } else {
+                settingsWindow.loadURL(`file://${__dirname}/settings.html`);
+            }
+        }
+
        ipcMain.on("saveSettings", (event, args: Settings) => {
            console.log(args);
            setConfigBulk(args);
@ -67,7 +75,7 @@ export function createSettingsWindow() {
            shell.openExternal(url);
            return {action: "deny"};
        });
-        settingsWindow.loadURL(`file://${__dirname}/settings.html`);
+        settingsLoadPage();
        settingsWindow.on("close", (event: Event) => {
            ipcMain.removeHandler("getSetting");
            ipcMain.removeAllListeners("saveSettings");
--- a/src/settings/settings.html
+++ b/src/settings/settings.html
@ -5,6 +5,9 @@
        <title>ArmCord Settings</title>
        <style>
            @import url("../content/css/settings.css");
+            .acAdvSettings {
+                height: 26em !important;
+            }
        </style>
    </head>

@ -168,21 +171,22 @@
        </div>
        <br />
        <br />
-        <h1 class="center advancedText">⚠️Advanced user zone⚠️</h1>
-        <div class="switch acAltPaste">
-            <label class="header2" id="settings-skipSplash">Skip splash screen (experimental)</label>
+        <div class="switch acAdvSettings">
+            <h1 class="center advancedText">⚠️ Advanced User Zone ⚠️</h1>
+            <br />
+            <label class="header2" id="settings-skipSplash">Skip Splash Screen (Experimental)</label>
            <input class="tgl tgl-light left" id="skipSplash" type="checkbox" />
            <label class="tgl-btn left" for="skipSplash"></label>
            <p class="description2">Skips ArmCord splash screen when you start up the app.</p>
+            <br />
+            <button id="settings-pluginsFolder" class="center">Open Plugins Folder</button>
+            <br />
+            <button id="settings-themesFolder" class="center">Open Themes Folder</button>
+            <br />
+            <button id="settings-storageFolder" class="center">Open Storage Folder</button>
+            <br />
+            <button id="settings-copyDebugInfo" class="center">Copy Debug Info</button>
        </div>
-        <br />
-        <button id="settings-pluginsFolder" class="center">Open plugins folder</button>
-        <br />
-        <button id="settings-themesFolder" class="center">Open themes folder</button>
-        <br />
-        <button id="settings-storageFolder" class="center">Open storage folder</button>
-        <br />
-        <button id="settings-copyDebugInfo" class="center">Copy debug info</button>
    </body>
    <script>
        async function loadLang() {
--- a/src/tray.ts
+++ b/src/tray.ts
@ -1,16 +1,15 @@
 import * as fs from "fs";
-import { app, Menu, Tray, nativeImage} from "electron";
-import { mainWindow } from "./window";
-import { getConfig, getConfigLocation, setWindowState } from "./utils";
+import {app, Menu, Tray, nativeImage} from "electron";
+import {mainWindow} from "./window";
+import {getConfig, getConfigLocation, setWindowState} from "./utils";
 import * as path from "path";
-import { createSettingsWindow } from "./settings/main";
+import {createSettingsWindow} from "./settings/main";
 let tray: any = null;
 app.whenReady().then(async () => {
-    let finishedSetup = (await getConfig("doneSetup"));
+    let finishedSetup = await getConfig("doneSetup");
    var trayIcon = (await getConfig("trayIcon")) ?? "ac_plug_colored";
    let trayPath = nativeImage.createFromPath(path.join(__dirname, "../", `/assets/${trayIcon}.png`));
-    if(process.platform === "darwin" && trayPath.getSize().height > 22)
-        trayPath = trayIcon.resize({height: 22});
+    if (process.platform === "darwin" && trayPath.getSize().height > 22) trayPath = trayIcon.resize({height: 22});
    if ((await getConfig("windowStyle")) == "basic") {
        var clientName = (await getConfig("clientName")) ?? "ArmCord";
        tray = new Tray(trayPath);
@ -28,7 +27,7 @@ app.whenReady().then(async () => {
                                if (err) throw err;
                                console.log('Closed during setup. "settings.json" was deleted');
                                app.quit();
-                              });
+                            });
                        }
                    }
                ]);
@ -43,18 +42,18 @@ app.whenReady().then(async () => {
                    {
                        label: `Quit ${clientName}`,
                        click: function () {
-                            let [width, height] = mainWindow.getSize()
+                            let [width, height] = mainWindow.getSize();
                            setWindowState({
                                width: width,
                                height: height,
                                isMaximized: mainWindow.isMaximized()
-                            })
+                            });
                            app.quit();
                        }
                    }
                ]);
            }
-        }
+        };

        tray.setToolTip(clientName);
        tray.setContextMenu(contextMenu);
@ -74,57 +73,55 @@ app.whenReady().then(async () => {
                            if (err) throw err;
                            console.log('Closed during setup. "settings.json" was deleted');
                            app.quit();
-                          });
+                        });
                    }
                }
            ]);
-            tray.setContextMenu(contextMenu);            
-            } else {
-                const contextMenu = Menu.buildFromTemplate([
-                    {
-                        label: `${clientName} ` + app.getVersion(),
-                        enabled: false
-        
-                    },
-                    {
-                        type: "separator"
-                    },
-                    {
-                        label: `Open ${clientName}`,
-                        click: function () {
-                            mainWindow.show();
-                        }
-                    },
-                    {
-                        label: "Open Settings",
-                        click: function () {
-                            createSettingsWindow();
-                        }
-                    },
-                    {
-                        label: "Support Discord Server",
-                        click: function () {
-                            mainWindow.show();
-                            mainWindow.loadURL("https://discord.gg/TnhxcqynZ2");
-                        }
-                    },
-                    {
-                        type: "separator"
-                    },
-                    {
-                        label: `Quit ${clientName}`,
-                        click: function () {
-                            app.quit();
-                        }
+            tray.setContextMenu(contextMenu);
+        } else {
+            const contextMenu = Menu.buildFromTemplate([
+                {
+                    label: `${clientName} ` + app.getVersion(),
+                    enabled: false
+                },
+                {
+                    type: "separator"
+                },
+                {
+                    label: `Open ${clientName}`,
+                    click: function () {
+                        mainWindow.show();
                    }
-                ]);
-                tray.setContextMenu(contextMenu);     
-            }
+                },
+                {
+                    label: "Open Settings",
+                    click: function () {
+                        createSettingsWindow();
+                    }
+                },
+                {
+                    label: "Support Discord Server",
+                    click: function () {
+                        mainWindow.show();
+                        mainWindow.loadURL("https://discord.gg/TnhxcqynZ2");
+                    }
+                },
+                {
+                    type: "separator"
+                },
+                {
+                    label: `Quit ${clientName}`,
+                    click: function () {
+                        app.quit();
+                    }
+                }
+            ]);
+            tray.setContextMenu(contextMenu);
        }
-
-        tray.setToolTip(clientName);
-        tray.on('click', function(){
-              mainWindow.show()
-          });
    }
-);
+
+    tray.setToolTip(clientName);
+    tray.on("click", function () {
+        mainWindow.show();
+    });
+});
--- a/src/utils.ts
+++ b/src/utils.ts
@ -1,5 +1,5 @@
 import * as fs from "fs";
-import { app, dialog } from "electron";
+import {app, dialog} from "electron";
 import path from "path";
 export var firstRun: boolean;
 export var contentPath: string;
@ -53,15 +53,17 @@ export function setup() {
    });
 }

+//Get the version value from the "package.json" file
+export var packageVersion = require("../package.json").version;

-//I'm too lazy to replace every mf reference so :p
 export function getVersion() {
-    //Checks if the version # has 4 sections (3.1.0.0) instead of 3 (3.1.0) / Shitty way to check if Kernel Mod is installed
-    if (((app.getVersion()).split('.').length > 3) == true) {
-    return app.getVersion().split('.')[0] + "." + app.getVersion().split('.')[1] + "." + app.getVersion().split('.')[2] + " [Kernel Mod]";
-} else {
-    return app.getVersion();
-}}
+    //Checks if the app version # has 4 sections (3.1.0.0) instead of 3 (3.1.0) / Shitty way to check if Kernel Mod is installed
+    if ((app.getVersion() == packageVersion) == false) {
+        return `${packageVersion} [Kernel Mod]`;
+    } else {
+        return packageVersion;
+    }
+}
 export async function injectJS(inject: string) {
    const js = await (await fetch(`${inject}`)).text();

@ -132,8 +134,8 @@ export async function getLang(object: string) {
            let parsed = JSON.parse(rawdata);
            language = parsed["lang"];
        } catch (e) {
-            console.log("Language config file doesn't exist. Fallback to English.")
-            language = "en-US"
+            console.log("Language config file doesn't exist. Fallback to English.");
+            language = "en-US";
        }
    }
    if (language.length == 2) {
@ -146,11 +148,11 @@ export async function getLang(object: string) {
    let rawdata = fs.readFileSync(langPath, "utf-8");
    let parsed = JSON.parse(rawdata);
    if (parsed[object] == undefined) {
-        console.log(object + " is undefined in " + language)
+        console.log(object + " is undefined in " + language);
        langPath = path.join(__dirname, "../", "/assets/lang/en-US.json");
        rawdata = fs.readFileSync(langPath, "utf-8");
        parsed = JSON.parse(rawdata);
-        return parsed[object]
+        return parsed[object];
    } else {
        return parsed[object];
    }
@ -191,8 +193,8 @@ export interface Settings {
    automaticPatches: boolean;
    alternativePaste: boolean;
    mods: string;
-    mobileMode: boolean,
-    skipSplash: boolean,
+    mobileMode: boolean;
+    skipSplash: boolean;
    performanceMode: string;
    inviteWebsocket: boolean;
    trayIcon: string;
--- a/src/window.ts
+++ b/src/window.ts
@ -2,11 +2,11 @@
 // I had to add most of the window creation code here to split both into seperete functions
 // WHY? Because I can't use the same code for both due to annoying bug with value `frame` not responding to variables
 // I'm sorry for this mess but I'm not sure how to fix it.
-import { BrowserWindow, shell, app, dialog } from "electron";
+import {BrowserWindow, shell, app, dialog} from "electron";
 import path from "path";
-import { checkIfConfigIsBroken, firstRun, getConfig, contentPath, setConfig, setLang, setWindowState } from "./utils";
-import { registerIpc } from "./ipc";
-import { setMenu } from "./menu";
+import {checkIfConfigIsBroken, firstRun, getConfig, contentPath, setConfig, setLang, setWindowState} from "./utils";
+import {registerIpc} from "./ipc";
+import {setMenu} from "./menu";
 import * as fs from "fs";
 import startServer from "./socket";
 import contextMenu from "electron-context-menu";
@ -14,7 +14,7 @@ import os from "os";
 export var icon: string;
 export let mainWindow: BrowserWindow;
 export let inviteWindow: BrowserWindow;
-var osType = os.type()
+var osType = os.type();

 contextMenu({
    showSaveImageAs: true,
@ -27,16 +27,17 @@ async function doAfterDefiningTheWindow() {
    checkIfConfigIsBroken();
    registerIpc();
    if (await getConfig("mobileMode")) {
-        mainWindow.webContents.userAgent = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.149 Mobile Safari/537.36"
+        mainWindow.webContents.userAgent =
+            "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.149 Mobile Safari/537.36";
    } else {
        // A little sloppy but it works :p
-        if (osType == 'Windows_NT') {
-            osType = "Windows " + os.release().split('.')[0] + " (" + os.release() + ")";
+        if (osType == "Windows_NT") {
+            osType = "Windows " + os.release().split(".")[0] + " (" + os.release() + ")";
        }
        mainWindow.webContents.userAgent = `Mozilla/5.0 (X11; ${osType} ${os.arch()}) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36`; //fake useragent for screenshare to work
    }

-    mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+    mainWindow.webContents.setWindowOpenHandler(({url}) => {
        if (url.startsWith("https:" || url.startsWith("http:") || url.startsWith("mailto:"))) {
            shell.openExternal(url);
        } else {
@ -54,7 +55,7 @@ async function doAfterDefiningTheWindow() {
                    checkboxChecked: false
                };

-                dialog.showMessageBox(mainWindow, options).then(({ response, checkboxChecked }) => {
+                dialog.showMessageBox(mainWindow, options).then(({response, checkboxChecked}) => {
                    console.log(response, checkboxChecked);
                    if (checkboxChecked) {
                        if (response == 0) {
@ -71,10 +72,10 @@ async function doAfterDefiningTheWindow() {
                });
            }
        }
-        return { action: "deny" };
+        return {action: "deny"};
    });
    mainWindow.webContents.session.webRequest.onBeforeRequest((details, callback) => {
-        if (/api\/v\d\/science$/g.test(details.url)) return callback({ cancel: true });
+        if (/api\/v\d\/science$/g.test(details.url)) return callback({cancel: true});
        return callback({});
    });
    const userDataPath = app.getPath("userData");
@ -83,26 +84,29 @@ async function doAfterDefiningTheWindow() {
        fs.mkdirSync(themesFolder);
        console.log("Created missing theme folder");
    }
-    mainWindow.webContents.on('did-finish-load', () => {
+    mainWindow.webContents.on("did-finish-load", () => {
        fs.readdirSync(themesFolder).forEach((file) => {
            try {
                const manifest = fs.readFileSync(`${themesFolder}/${file}/manifest.json`, "utf8");
                var themeFile = JSON.parse(manifest);
-                mainWindow.webContents.send("themeLoader", fs.readFileSync(`${themesFolder}/${file}/${themeFile.theme}`, "utf-8"))
+                mainWindow.webContents.send(
+                    "themeLoader",
+                    fs.readFileSync(`${themesFolder}/${file}/${themeFile.theme}`, "utf-8")
+                );
                console.log(`%cLoaded ${themeFile.name} made by ${themeFile.author}`, "color:red");
            } catch (err) {
                console.error(err);
            }
        });
    });
-    setMenu()
+    setMenu();
    mainWindow.on("close", async (e) => {
-        let [width, height] = mainWindow.getSize()
+        let [width, height] = mainWindow.getSize();
        setWindowState({
            width: width,
            height: height,
            isMaximized: mainWindow.isMaximized()
-        })
+        });
        if (await getConfig("minimizeToTray")) {
            e.preventDefault();
            mainWindow.hide();
@ -111,22 +115,30 @@ async function doAfterDefiningTheWindow() {
            app.quit();
        }
    });
-    mainWindow.on('maximize', () => {
-        mainWindow.webContents.executeJavaScript(`document.body.setAttribute("isMaximized", "");`)
-    })
-    mainWindow.on('unmaximize', () => {
-        mainWindow.webContents.executeJavaScript(`document.body.removeAttribute("isMaximized");`)
-    })
+
+    mainWindow.on("focus", () => {
+        mainWindow.webContents.executeJavaScript(`document.body.removeAttribute("unFocused");`);
+    });
+    mainWindow.on("blur", () => {
+        mainWindow.webContents.executeJavaScript(`document.body.setAttribute("unFocused", "");`);
+    });
+
+    mainWindow.on("maximize", () => {
+        mainWindow.webContents.executeJavaScript(`document.body.setAttribute("isMaximized", "");`);
+    });
+    mainWindow.on("unmaximize", () => {
+        mainWindow.webContents.executeJavaScript(`document.body.removeAttribute("isMaximized");`);
+    });
    console.log(contentPath);
    if ((await getConfig("inviteWebsocket")) == true) {
        await startServer();
    }
    if (firstRun) {
-        await setLang(Intl.DateTimeFormat().resolvedOptions().locale)
+        await setLang(Intl.DateTimeFormat().resolvedOptions().locale);
        mainWindow.setSize(390, 470);
        await mainWindow.loadFile(path.join(__dirname, "/content/setup.html"));
    } else {
-        if (await getConfig("skipSplash") == true) {
+        if ((await getConfig("skipSplash")) == true) {
            switch (await getConfig("channel")) {
                case "stable":
                    mainWindow.loadURL("https://discord.com/app");