feat: Allow tray icon customization

src/main/ipc.ts

@@ -12,6 +12,7 @@ import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readFile } from "fs/promises";
 import { release } from "os";
 import { join } from "path";
+import { ICON_PATH } from "shared/paths";
 import { debounce } from "shared/utils/debounce";
 
 import { IpcEvents } from "../shared/IpcEvents";
@@ -41,6 +42,15 @@ handleSync(
     () => process.platform === "win32" && Number(release().split(".").pop()) >= 22621
 );
 
+handleSync(IpcEvents.GET_TRAY_ICON, () => {
+    if (!Settings.store.trayIconPath) return nativeImage.createFromPath(ICON_PATH).toDataURL();
+
+    const img = nativeImage.createFromPath(Settings.store.trayIconPath).resize({ width: 64, height: 64 });
+    if (img.isEmpty()) return nativeImage.createFromPath(ICON_PATH).toDataURL();
+
+    return img.toDataURL();
+});
+
 handleSync(IpcEvents.AUTOSTART_ENABLED, () => autoStart.isEnabled());
 handle(IpcEvents.ENABLE_AUTOSTART, autoStart.enable);
 handle(IpcEvents.DISABLE_AUTOSTART, autoStart.disable);
@@ -117,6 +127,20 @@ handle(IpcEvents.SELECT_VENCORD_DIR, async () => {
     return dir;
 });
 
+handle(IpcEvents.SELECT_TRAY_ICON, async () => {
+    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];
+    const image = nativeImage.createFromPath(dir);
+    if (image.isEmpty()) return "invalid";
+
+    return dir;
+});
+
 handle(IpcEvents.SET_BADGE_COUNT, (_, count: number) => setBadgeCount(count));
 
 handle(IpcEvents.CLIPBOARD_COPY_IMAGE, async (_, buf: ArrayBuffer, src: string) => {

src/main/mainWindow.ts

@@ -11,6 +11,7 @@ import {
     dialog,
     Menu,
     MenuItemConstructorOptions,
+    nativeImage,
     nativeTheme,
     screen,
     session,
@@ -122,8 +123,16 @@ function initTray(win: BrowserWindow) {
             }
         }
     ]);
+    var trayImage = nativeImage.createFromPath(ICON_PATH);
+    if (Settings.store.trayIconPath) trayImage = nativeImage.createFromPath(Settings.store.trayIconPath);
+    if (trayImage.isEmpty()) trayImage = nativeImage.createFromPath(ICON_PATH);
+
+    if (process.platform === "darwin") {
+        tray = new Tray(trayImage.resize({ width: 16, height: 16 }));
+    } else {
+        tray = new Tray(trayImage.resize({ width: 32, height: 32 }));
+    }
 
-    tray = new Tray(ICON_PATH);
     tray.setToolTip("Vesktop");
     tray.setContextMenu(trayMenu);
     tray.on("click", onTrayClick);
@@ -333,6 +342,10 @@ function initSettingsListeners(win: BrowserWindow) {
         if (enable) initTray(win);
         else tray?.destroy();
     });
+    addSettingsListener("trayIconPath", _ => {
+        tray?.destroy();
+        initTray(win);
+    });
     addSettingsListener("disableMinSize", disable => {
         if (disable) {
             // 0 no work
@@ -446,7 +459,7 @@ function createMainWindow() {
     if (Settings.store.staticTitle) win.on("page-title-updated", e => e.preventDefault());
 
     initWindowBoundsListeners(win);
-    if (!isDeckGameMode && (Settings.store.tray ?? true) && process.platform !== "darwin") initTray(win);
+    if (!isDeckGameMode && (Settings.store.tray ?? true)) initTray(win);
     initMenuBar(win);
     makeLinksOpenExternally(win);
     initSettingsListeners(win);

src/preload/VesktopNative.ts

@@ -33,7 +33,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),
@@ -56,6 +57,9 @@ export const VesktopNative = {
         minimize: () => invoke<void>(IpcEvents.MINIMIZE),
         maximize: () => invoke<void>(IpcEvents.MAXIMIZE)
     },
+    tray: {
+        getTrayIcon: () => sendSync<string>(IpcEvents.GET_TRAY_ICON)
+    },
     capturer: {
         getLargeThumbnail: (id: string) => invoke<string>(IpcEvents.CAPTURER_GET_LARGE_THUMBNAIL, id)
     },

src/renderer/components/settings/Settings.tsx

@@ -14,6 +14,7 @@ import { isMac, isWindows } from "renderer/utils";
 import { AutoStartToggle } from "./AutoStartToggle";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
+import { TrayIconImagePicker } from "./TrayIconImagePicker";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
@@ -68,13 +69,6 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
         WindowsTransparencyControls
     ],
     Behaviour: [
-        {
-            key: "tray",
-            title: "Tray Icon",
-            description: "Add a tray icon for Vesktop",
-            defaultValue: true,
-            invisible: () => isMac
-        },
         {
             key: "minimizeToTray",
             title: "Minimize to tray",
@@ -126,6 +120,7 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             defaultValue: false
         }
     ],
+    "Tray Icon Image": [TrayIconImagePicker],
     "Vencord Location": [VencordLocationPicker]
 };
 

src/renderer/components/settings/TrayIconImagePicker.tsx

@@ -0,0 +1,73 @@
+/*
+ * 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 { Forms, Switch, Toasts } from "@vencord/types/webpack/common";
+import { Settings } from "renderer/settings";
+
+import { SettingsComponent } from "./Settings";
+
+export const TrayIconImagePicker: SettingsComponent = ({ settings }) => {
+    return (
+        <>
+            <div id="vcd-tray-setting">
+                <div className="vcd-tray-setting-switch">
+                    <Switch
+                        key="tray"
+                        value={Settings.store.tray ?? false}
+                        onChange={v => (Settings.store.tray = v)}
+                        note={"Add a tray icon for Vesktop"}
+                    >
+                        Tray Icon
+                    </Switch>
+                </div>
+                <div className="vcd-tray-setting-reset">
+                    <Forms.FormText>
+                        <a
+                            href="about:blank"
+                            onClick={e => {
+                                e.preventDefault();
+                                settings.trayIconPath = void 0;
+                            }}
+                        >
+                            Reset
+                        </a>
+                    </Forms.FormText>
+                </div>
+                <div className="vcd-tray-icon-wrap">
+                    <img
+                        className="vcd-tray-icon-image"
+                        src={VesktopNative.tray.getTrayIcon()}
+                        alt="hello"
+                        width="48"
+                        height="48"
+                    ></img>
+                    <input
+                        className="vcd-edit-button"
+                        type="image"
+                        src="https://raw.githubusercontent.com/Vencord/Vesktop/main/static/pencil-edit-icon.svg"
+                        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;
+                            }
+                            settings.trayIconPath = choice;
+                        }}
+                    />
+                </div>
+            </div>
+        </>
+    );
+};

src/renderer/components/settings/settings.css

@@ -11,4 +11,57 @@
 
 .vcd-settings-title {
     margin-bottom: 0.5rem;
-}
+}
+
+#vcd-tray-setting {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+
+}
+.vcd-tray-setting-switch {
+    flex-grow: 1;
+    align-self: flex-start;
+    margin-right: 20rem;
+}
+.vcd-tray-setting-reset {
+    align-self: right;
+    position: relative;
+    margin-left: auto;
+    margin-right: 1em;
+    bottom: 24px;
+}
+
+.vcd-tray-icon-wrap {
+    position: relative;
+    align-self: right;
+    bottom: 24px;
+}
+
+.vcd-tray-icon-image {
+    border-radius: 50%;
+    position: relative;
+    top: 0;
+    right: 0;
+}
+
+.vcd-edit-button {
+    visibility: visible;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+}
+
+.vcd-tray-icon-wrap:hover .vcd-tray-icon-image {
+    transition: 0.3s ease;
+    background-color: rgb(0, 0, 0) no-repeat;
+    opacity: 0.25;
+}
+.vcd-tray-icon-wrap:hover .vcd-edit-button {
+    transition: 0.3s ease;
+    visibility: visible;
+    opacity: 1;
+}

src/shared/IpcEvents.ts

@@ -25,6 +25,9 @@ export const enum IpcEvents {
 
     SELECT_VENCORD_DIR = "VCD_SELECT_VENCORD_DIR",
 
+    SELECT_TRAY_ICON = "VCD_SELECT_TRAY_ICON",
+    GET_TRAY_ICON = "VCD_GET_TRAY_ICON",
+
     UPDATER_GET_DATA = "VCD_UPDATER_GET_DATA",
     UPDATER_DOWNLOAD = "VCD_UPDATER_DOWNLOAD",
     UPDATE_IGNORE = "VCD_UPDATE_IGNORE",

src/shared/settings.d.ts

@@ -22,6 +22,7 @@ export interface Settings {
     disableMinSize?: boolean;
     clickTrayToShowHide?: boolean;
     customTitleBar?: boolean;
+    trayIconPath?: string;
 
     checkUpdates?: boolean;