ui: modal for picking custom tray icons

src/main/ipc.ts

@@ -28,8 +28,9 @@ import { IpcEvents } from "../shared/IpcEvents";
 import { setBadgeCount } from "./appBadge";
 import { autoStart } from "./autoStart";
 import { VENCORD_FILES_DIR, VENCORD_QUICKCSS_FILE, VENCORD_THEMES_DIR } from "./constants";
-import { createTrayIcon, generateTrayIcons, getTrayIconFile, mainWin, setTrayIcon } from "./mainWindow";
+import { mainWin, setTrayIcon } from "./mainWindow";
 import { Settings } from "./settings";
+import { createTrayIcon, generateTrayIcons, getTrayIconFile, getTrayIconFileSync, pickTrayIcon } from "./tray";
 import { handle, handleSync } from "./utils/ipcWrappers";
 import { PopoutWindows } from "./utils/popout";
 import { isDeckGameMode, showGamePage } from "./utils/steamOS";
@@ -162,6 +163,8 @@ watch(
 
 handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI));
 handle(IpcEvents.GET_TRAY_ICON, (_, iconPath) => getTrayIconFile(iconPath));
+handleSync(IpcEvents.GET_TRAY_ICON_SYNC, (_, iconPath) => getTrayIconFileSync(iconPath));
 handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => `#${systemPreferences.getAccentColor?.() || ""}`);
 handle(IpcEvents.CREATE_TRAY_ICON_RESPONSE, (_, iconName, dataURL) => createTrayIcon(iconName, dataURL));
 handle(IpcEvents.GENERATE_TRAY_ICONS, () => generateTrayIcons());
+handle(IpcEvents.SELECT_TRAY_ICON, async (_, iconName) => pickTrayIcon(iconName));

src/main/mainWindow.ts

@@ -16,9 +16,8 @@ import {
     session,
     Tray
 } from "electron";
-import { mkdirSync, writeFileSync } from "fs";
+import { rm } from "fs/promises";
-import { readFile, rm } from "fs/promises";
+import { join } from "path";
-import { join, parse } from "path";
 import { IpcEvents } from "shared/IpcEvents";
 import { isTruthy } from "shared/utils/guards";
 import { once } from "shared/utils/once";
@@ -39,6 +38,7 @@ import {
 } from "./constants";
 import { Settings, State, VencordSettings } from "./settings";
 import { createSplashWindow } from "./splash";
+import { generateTrayIcons } from "./tray";
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
 import { applyDeckKeyboardFix, askToApplySteamLayout, isDeckGameMode } from "./utils/steamOS";
 import { downloadVencordFiles, ensureVencordFiles } from "./utils/vencordLoader";
@@ -516,32 +516,3 @@ export async function setTrayIcon(iconName: string) {
     }
     tray.setImage(join(STATIC_DIR, "icon.png"));
 }
-
-export async function getTrayIconFile(iconPath: string) {
-    const Icons = new Set(["speaking", "muted", "deafened", "idle"]);
-    if (!Icons.has(parse(iconPath).name)) {
-        iconPath = "icon";
-        return readFile(join(STATIC_DIR, "icon.png"));
-    }
-    return readFile(iconPath, "utf8");
-}
-
-export async function createTrayIcon(iconName: string, iconDataURL: string) {
-    // creates .png at config/TrayIcons/iconName.png from given iconDataURL
-    // primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call
-    iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, "");
-    writeFileSync(join(DATA_DIR, "TrayIcons", iconName + ".png"), iconDataURL, "base64");
-    mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
-}
-
-export async function generateTrayIcons(force = false) {
-    // this function generates tray icons as .png's in Vesktop cache for future use
-    mkdirSync(join(DATA_DIR, "TrayIcons"), { recursive: true });
-    if (force || !Settings.store.trayCustom) {
-        const Icons = ["speaking", "muted", "deafened", "idle"];
-        for (const icon of Icons) {
-            mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, join(STATIC_DIR, icon + ".svg"));
-        }
-    }
-    mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
-}

src/main/tray.ts

@@ -0,0 +1,72 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2023 Vendicated and Vencord contributors
+ */
+
+import { dialog, nativeImage } from "electron";
+import { copyFileSync, mkdirSync, writeFileSync } from "fs";
+import { readFile } from "fs/promises";
+import { join } from "path";
+import { IpcEvents } from "shared/IpcEvents";
+import { STATIC_DIR } from "shared/paths";
+
+import { DATA_DIR } from "./constants";
+import { mainWin } from "./mainWindow";
+import { Settings } from "./settings";
+
+export async function getTrayIconFile(iconName: string) {
+    const Icons = new Set(["speaking", "muted", "deafened", "idle"]);
+    if (!Icons.has(iconName)) {
+        iconName = "icon";
+        return readFile(join(STATIC_DIR, "icon.png"));
+    }
+    return readFile(join(STATIC_DIR, iconName + ".svg"), "utf8");
+}
+
+export function getTrayIconFileSync(iconName: string) {
+    // returns dataURL of image from TrayIcons folder
+    const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]);
+    if (Icons.has(iconName)) {
+        const img = nativeImage
+            .createFromPath(join(DATA_DIR, "TrayIcons", iconName + ".png"))
+            .resize({ width: 128, height: 128 });
+        if (img.isEmpty())
+            return nativeImage.createFromPath(join(DATA_DIR, "TrayIcons", iconName + ".png")).toDataURL();
+        return img.toDataURL();
+    }
+}
+
+export async function createTrayIcon(iconName: string, iconDataURL: string) {
+    // creates .png at config/TrayIcons/iconName.png from given iconDataURL
+    // primarily called from renderer using CREATE_TRAY_ICON_RESPONSE IPC call
+    iconDataURL = iconDataURL.replace(/^data:image\/png;base64,/, "");
+    writeFileSync(join(DATA_DIR, "TrayIcons", iconName + ".png"), iconDataURL, "base64");
+    mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
+}
+
+export async function generateTrayIcons(force = false) {
+    // this function generates tray icons as .png's in Vesktop cache for future use
+    mkdirSync(join(DATA_DIR, "TrayIcons"), { recursive: true });
+    if (force || !Settings.store.trayCustom) {
+        const Icons = ["speaking", "muted", "deafened", "idle"];
+        for (const icon of Icons) {
+            mainWin.webContents.send(IpcEvents.CREATE_TRAY_ICON_REQUEST, icon);
+        }
+    }
+    mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
+}
+
+export async function pickTrayIcon(iconName: string) {
+    const res = await dialog.showOpenDialog(mainWin!, {
+        properties: ["openFile"],
+        filters: [{ name: "Image", extensions: ["png", "jpg"] }]
+    });
+    if (!res.filePaths.length) return "cancelled";
+    const dir = res.filePaths[0];
+    // add .svg !!
+    const image = nativeImage.createFromPath(dir);
+    if (image.isEmpty()) return "invalid";
+    copyFileSync(dir, join(DATA_DIR, "TrayIcons", iconName + ".png"));
+    return dir;
+}

src/preload/VesktopNative.ts

@@ -35,7 +35,8 @@ export const VesktopNative = {
     },
     fileManager: {
         showItemInFolder: (path: string) => invoke<void>(IpcEvents.SHOW_ITEM_IN_FOLDER, path),
-        selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR)
+        selectVencordDir: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_VENCORD_DIR),
+        selectTrayIcon: () => invoke<LiteralUnion<"cancelled" | "invalid", string>>(IpcEvents.SELECT_TRAY_ICON)
     },
     settings: {
         get: () => sendSync<Settings>(IpcEvents.GET_SETTINGS),
@@ -82,7 +83,8 @@ export const VesktopNative = {
     },
     tray: {
         setIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
-        getIcon: (iconPath: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconPath),
+        getIcon: (iconName: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconName),
+        getIconSync: (iconName: string) => sendSync<string>(IpcEvents.GET_TRAY_ICON_SYNC, iconName),
         createIconResponse: (iconName: string, iconDataURL: string) =>
             invoke<void>(IpcEvents.CREATE_TRAY_ICON_RESPONSE, iconName, iconDataURL),
         createIconRequest: (listener: (iconName: string) => void) => {

src/renderer/components/settings/Settings.tsx

@@ -14,7 +14,7 @@ import { isMac, isWindows } from "renderer/utils";
 import { AutoStartToggle } from "./AutoStartToggle";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
-import { TrayFillColorSwitch, TrayIconPicker, TraySwitch, CustomizeTraySwitch } from "./TraySettings";
+import { CustomizeTraySwitch, TrayFillColorSwitch, TrayIconPicker, TraySwitch } from "./TraySettings";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 

src/renderer/components/settings/TraySettings.tsx

@@ -6,15 +6,17 @@
 
 import "./traySetting.css";
 
-import { Margins } from "@vencord/types/utils";
+import { Margins, Modals, ModalSize, openModal } from "@vencord/types/utils";
-import { findByCodeLazy } from "@vencord/types/webpack";
+import { findByCodeLazy, findByPropsLazy } from "@vencord/types/webpack";
-import { Forms, Select, Switch } from "@vencord/types/webpack/common";
+import { Forms, Select, Switch, Toasts } from "@vencord/types/webpack/common";
 import { setCurrentTrayIcon } from "renderer/patches/tray";
+import { useSettings } from "renderer/settings";
 import { isLinux, isMac } from "renderer/utils";
 
 import { SettingsComponent } from "./Settings";
 
 const ColorPicker = findByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
+const { PencilIcon } = findByPropsLazy("PencilIcon");
 
 const presets = [
     "#3DB77F", // discord default ~
@@ -33,6 +35,110 @@ if (!isLinux)
         if (color) presets.unshift(color);
     });
 
+function trayEditButton(iconName: string) {
+    return (
+        <div className="vcd-tray-icon-wrap">
+            <img
+                className="vcd-tray-icon-image"
+                src={VesktopNative.tray.getIconSync(iconName)}
+                alt="read if cute :3"
+                width="48"
+                height="48"
+            ></img>
+            <PencilIcon
+                className="vcd-edit-button"
+                width="40"
+                height="40"
+                onClick={async () => {
+                    const choice = await VesktopNative.fileManager.selectTrayIcon();
+                    switch (choice) {
+                        case "cancelled":
+                            return;
+                        case "invalid":
+                            Toasts.show({
+                                message: "Please select a valid .png or .jpg image!",
+                                id: Toasts.genId(),
+                                type: Toasts.Type.FAILURE
+                            });
+                            return;
+                    }
+                    console.log("choice:", choice);
+                    // copy image and reload
+                    // settings.trayIconPath = choice;
+                }}
+            />
+        </div>
+    );
+}
+
+function TrayModalComponent({ modalProps, close }: { modalProps: any; close: () => void }) {
+    const Settings = useSettings();
+    return (
+        <Modals.ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
+            <Modals.ModalHeader className="vcd-custom-tray-header">
+                <Forms.FormTitle tag="h2">Custom Tray Icons</Forms.FormTitle>
+                <Modals.ModalCloseButton onClick={close} />
+            </Modals.ModalHeader>
+            <Modals.ModalContent className="vcd-custom-tray-modal">
+                <Switch
+                    hideBorder
+                    value={Settings.trayCustom ?? false}
+                    onChange={async v => {
+                        Settings.trayCustom = v;
+                    }}
+                    note="Whether to use custom tray icons"
+                >
+                    Custom Tray Icons
+                </Switch>
+                <Forms.FormDivider className={Margins.top8} />
+                <Forms.FormSection className="vcd-custom-tray-icon-section">
+                    <Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
+                        Main icon
+                    </Forms.FormText>
+                    {trayEditButton("icon")}
+                </Forms.FormSection>
+
+                <Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
+                <Forms.FormSection className="vcd-custom-tray-icon-section">
+                    <Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
+                        Idle icon
+                    </Forms.FormText>
+                    {trayEditButton("idle")}
+                </Forms.FormSection>
+
+                <Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
+                <Forms.FormSection className="vcd-custom-tray-icon-section">
+                    <Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
+                        Speaking icon
+                    </Forms.FormText>
+                    {trayEditButton("speaking")}
+                </Forms.FormSection>
+
+                <Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
+                <Forms.FormSection className="vcd-custom-tray-icon-section">
+                    <Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
+                        Muted icon
+                    </Forms.FormText>
+                    {trayEditButton("muted")}
+                </Forms.FormSection>
+
+                <Forms.FormDivider className={(Margins.top8, Margins.bottom8)} />
+                <Forms.FormSection className="vcd-custom-tray-icon-section">
+                    <Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
+                        Deafened icon
+                    </Forms.FormText>
+                    {trayEditButton("deafened")}
+                </Forms.FormSection>
+            </Modals.ModalContent>
+            <Modals.ModalFooter></Modals.ModalFooter>
+        </Modals.ModalRoot>
+    );
+}
+
+const openTrayModal = () => {
+    const key = openModal(props => <TrayModalComponent modalProps={props} close={() => props.onClose()} />);
+};
+
 export const TraySwitch: SettingsComponent = ({ settings }) => {
     if (isMac) return null;
     return (
@@ -71,7 +177,7 @@ export const CustomizeTraySwitch: SettingsComponent = ({ settings }) => {
                             href="about:blank"
                             onClick={e => {
                                 e.preventDefault();
-                                // Bring up modal here
+                                openTrayModal();
                             }}
                         >
                             Configure

src/renderer/components/settings/traySetting.css

@@ -35,8 +35,7 @@
 
 .vcd-tray-icon-wrap {
     position: relative;
-    align-self: right;
+    align-self: end;
-    bottom: 24px;
 }
 
 .vcd-tray-icon-image {
@@ -48,11 +47,10 @@
 
 .vcd-edit-button {
     visibility: visible;
-    display: block;
     opacity: 0;
     position: absolute;
-    top: 3px;
+    top: 0.5em;
-    left: 4px;
+    left: 0.7em;
 }
 
 .vcd-tray-icon-wrap:hover .vcd-tray-icon-image {
@@ -65,3 +63,24 @@
     visibility: visible;
     opacity: 1;
 }
+
+
+
+
+.vcd-custom-tray-header h1 {
+    margin: 0;
+}
+
+.vcd-custom-tray-modal {
+    padding: 1em;
+}
+
+.vcd-custom-tray-icon-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.vcd-custom-tray-icon-form-text {
+    font-size: medium;
+}

src/renderer/patches/tray.ts

@@ -25,12 +25,12 @@ export function setCurrentTrayIcon() {
     }
 }
 
-VesktopNative.tray.createIconRequest(async (iconPath: string) => {
+VesktopNative.tray.createIconRequest(async (iconName: string) => {
     const pickedColor = VesktopNative.settings.get().trayColor;
     const fillColor = VesktopNative.settings.get().trayAutoFill ?? "auto";
 
     try {
-        var svg = await VesktopNative.tray.getIcon(iconPath);
+        var svg = await VesktopNative.tray.getIcon(iconName);
         svg = svg.replace(/#f6bfac/gim, "#" + (pickedColor ?? "3DB77F"));
         if (fillColor !== "auto") {
             svg = svg.replace(/black/gim, fillColor);
@@ -47,9 +47,7 @@ VesktopNative.tray.createIconRequest(async (iconPath: string) => {
             if (ctx) {
                 ctx.drawImage(img, 0, 0);
                 const dataURL = canvas.toDataURL("image/png");
-                const fileNameExt = iconPath.replace(/^.*[\\/]/, "");
+                VesktopNative.tray.createIconResponse(iconName, dataURL);
-                const fileName = fileNameExt.substring(0, fileNameExt.lastIndexOf("."));
-                VesktopNative.tray.createIconResponse(fileName, dataURL);
             }
         };
         img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;

src/shared/IpcEvents.ts

@@ -53,9 +53,11 @@ export const enum IpcEvents {
 
     SET_TRAY_ICON = "VCD_SET_TRAY_ICON",
     GET_TRAY_ICON = "VCD_GET_TRAY_ICON",
+    GET_TRAY_ICON_SYNC = "VCD_GET_TRAY_ICON_SYNC",
     CREATE_TRAY_ICON_REQUEST = "VCD_CREATE_TRAY_ICON_REQUEST",
     CREATE_TRAY_ICON_RESPONSE = "VCD_CREATE_TRAY_ICON_RESPONSE",
     GENERATE_TRAY_ICONS = "VCD_GENERATE_TRAY_ICONS",
     SET_CURRENT_VOICE_TRAY_ICON = "VCD_SET_CURRENT_VOICE_ICON",
-    GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR"
+    GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR",
+    SELECT_TRAY_ICON = "VCD_SELECT_TRAY_ICON"
 }