Tray: About page

browser/VencordNativeStub.ts

@@ -139,5 +139,6 @@ window.VencordNative = {
         setUpdateState: NOOP,
         onCheckUpdates: NOOP,
         onRepair: NOOP,
+        onAbout: NOOP,
     },
 };

src/VencordNative.ts

@@ -102,6 +102,7 @@ export default {
         setUpdateState: (available: boolean) => ipcRenderer.send(IpcEvents.SET_TRAY_UPDATE_STATE, available),
         onCheckUpdates: (cb: () => void) => { ipcRenderer.on(IpcEvents.TRAY_CHECK_UPDATES, cb); },
         onRepair: (cb: () => void) => { ipcRenderer.on(IpcEvents.TRAY_REPAIR, cb); },
+        onAbout: (cb: () => void) => { ipcRenderer.on(IpcEvents.TRAY_ABOUT, cb); },
     },
 
     pluginHelpers: PluginHelpers

src/main/about.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<meta charset="utf-8" />
+
+<head>
+    <title>About Equicord</title>
+    <style>
+        body {
+            padding: 2em;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+                "Open Sans", "Helvetica Neue", sans-serif;
+            margin: 0;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        ul {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5em;
+        }
+
+        :root {
+            color-scheme: light dark;
+            --bg: white;
+            --fg: black;
+            --fg-secondary: #313338;
+            --fg-semi-trans: rgba(0, 0, 0, 0.2);
+            --link: #006ce7;
+            --link-hover: #005bb5;
+        }
+
+        /* Dark theme overrides */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --bg: hsl(223 6.7% 20.6%);
+                --fg: white;
+                --fg-secondary: #b5bac1;
+                --fg-semi-trans: rgba(255, 255, 255, 0.2);
+                --link: #00a8fc;
+                --link-hover: #0086c3;
+            }
+        }
+
+        html,
+        body {
+            background: var(--bg);
+            color: var(--fg);
+        }
+
+        a {
+            color: var(--link);
+            transition: color 0.2s linear;
+            text-decoration: none;
+        }
+
+        a:hover {
+            color: var(--link-hover);
+        }
+    </style>
+</head>
+
+<body>
+    <h1 id="title">Equicord v{{VERSION}} ({{GIT_HASH}})</h1>
+    <p>
+        Equicord is the unstable experimental FORK
+        of Vencord and the other cutest client mod.
+    </p>
+    <section>
+        <h2>Links</h2>
+        <ul>
+            <li>
+                <a href="https://equicord.org" target="_blank">Equicord Website</a>
+            </li>
+            <li>
+                <a href="https://docs.equicord.org" target="_blank">Equicord Docs</a>
+            </li>
+            <li>
+                <a href="https://github.com/Equicord/Equicord" target="_blank">Source Code</a>
+            </li>
+            <li>
+                <a href="https://equicord.org/discord" target="_blank">Support Server</a>
+            </li>
+        </ul>
+    </section>
+    <section>
+        <h2>License</h2>
+        <p>
+            Equicord is licensed under the
+            <a href="https://www.gnu.org/licenses/gpl-3.0.txt" target="_blank">GNU General Public License v3.0</a>.
+            <br />
+            This is free software, and you are welcome to redistribute it under certain conditions; see the license for
+            details.
+        </p>
+    </section>
+    <section>
+        <h2>Acknowledgements</h2>
+        <p>These awesome libraries/projects empower Equicord</p>
+        <ul>
+            <li>
+                <a href="https://github.com/Vendicated/Vencord" target="_blank">Vencord</a>
+                - Vencord is a modification for Discord that adds plugins and custom styles, blocks Discord's
+                tracking and what we are a fork of!
+            </li>
+            <li>
+                <a href="https://github.com/verticalsync/Suncord" target="_blank">Suncord</a>
+                - Suncord was a newer fork of Vencord which eventually merged into Equicord and brought many new users!
+            </li>
+        </ul>
+    </section>
+</body>
+<script>
+    const data = new URLSearchParams(location.search);
+
+    // replace all {{FOO}} placeholders in the document with the values from the URL
+
+    /** @param {Node} [node] */
+    function walk(node) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            node.textContent = node.textContent.replace(/{{(\w+)}}/g, (match, key) => data.get(key) || match);
+            return;
+        }
+
+        if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== "SCRIPT") {
+            for (const child of node.childNodes) {
+                walk(child);
+            }
+        }
+    }
+
+    walk(document.body);
+</script>

src/main/trayMenu.ts

@@ -5,9 +5,11 @@
  */
 
 import { IpcEvents } from "@shared/IpcEvents";
+import { gitHashShort } from "@shared/vencordUserAgent";
 import { BrowserWindow, ipcMain, Menu, MenuItemConstructorOptions, shell } from "electron";
+import aboutHtml from "file://about.html?minify";
 
-import { SETTINGS_DIR } from "./utils/constants";
+import { SETTINGS_DIR, THEMES_DIR } from "./utils/constants";
 
 let cachedUpdateAvailable = false;
 
@@ -51,11 +53,41 @@ function isTrayMenu(template: MenuItemConstructorOptions[]): boolean {
     return hasOpenOrShow && hasQuit && isNotAppMenu;
 }
 
+let aboutWindow: BrowserWindow | null = null;
+
+function openAboutWindow() {
+    if (aboutWindow) {
+        aboutWindow.focus();
+        return;
+    }
+
+    const height = 750;
+    const width = height * (4 / 3);
+
+    aboutWindow = new BrowserWindow({
+        center: true,
+        autoHideMenuBar: true,
+        height,
+        width
+    });
+
+    const aboutParams = aboutHtml.replace("{{VERSION}}", VERSION).replace("{{GIT_HASH}}", gitHashShort);
+    const base64Html = Buffer.from(aboutParams).toString("base64");
+    aboutWindow.loadURL(`data:text/html;base64,${base64Html}`);
+    aboutWindow.on("closed", () => {
+        aboutWindow = null;
+    });
+}
+
 function createEquicordMenuItems(): MenuItemConstructorOptions[] {
     return [
         {
             label: "Equicord",
             submenu: [
+                {
+                    label: "About Equicord",
+                    click: () => openAboutWindow()
+                },
                 {
                     label: cachedUpdateAvailable ? "Update Equicord" : "Check for Updates",
                     click: () => sendToRenderer(IpcEvents.TRAY_CHECK_UPDATES)
@@ -68,6 +100,10 @@ function createEquicordMenuItems(): MenuItemConstructorOptions[] {
                 {
                     label: "Open Settings Folder",
                     click: () => shell.openPath(SETTINGS_DIR)
+                },
+                {
+                    label: "Open Themes Folder",
+                    click: () => shell.openPath(THEMES_DIR)
                 }
             ]
         },

src/shared/IpcEvents.ts

@@ -55,4 +55,5 @@ export const enum IpcEvents {
     SET_TRAY_UPDATE_STATE = "VencordSetTrayUpdateState",
     TRAY_REPAIR = "VencordTrayRepair",
     TRAY_CHECK_UPDATES = "VencordTrayCheckUpdates",
+    TRAY_ABOUT = "VencordTrayAbout"
 }