mac: resize icons to 16x16

src/main/mainWindow.ts

@@ -11,6 +11,7 @@ import {
     dialog,
     Menu,
     MenuItemConstructorOptions,
+    nativeImage,
     nativeTheme,
     screen,
     session,
@@ -19,11 +20,11 @@ import {
 import { rm } from "fs/promises";
 import { join } from "path";
 import { IpcEvents } from "shared/IpcEvents";
+import { ICON_PATH, ICONS_DIR } from "shared/paths";
 import { isTruthy } from "shared/utils/guards";
 import { once } from "shared/utils/once";
 import type { SettingsStore } from "shared/utils/SettingsStore";
 
-import { ICON_PATH } from "../shared/paths";
 import { createAboutWindow } from "./about";
 import { initArRPC } from "./arrpc";
 import {
@@ -126,7 +127,7 @@ function initTray(win: BrowserWindow) {
 
     tray = new Tray(ICON_PATH);
     try {
-        if (Settings.store.trayCustom) tray.setImage(join(DATA_DIR, "TrayIcons", "icon.png"));
+        if (Settings.store.trayCustom) tray.setImage(join(ICONS_DIR, "icon.png"));
     } catch (error) {
         console.log("Error while loading custom tray image. Recreating new ones.");
         generateTrayIcons(true);
@@ -514,7 +515,11 @@ export async function setTrayIcon(iconName: string) {
     const Icons = new Set(["speaking", "muted", "deafened", "idle", "icon"]);
     if (Icons.has(iconName)) {
         try {
-            tray.setImage(join(DATA_DIR, "TrayIcons", iconName + ".png"));
+            var trayImage = nativeImage.createFromPath(join(ICONS_DIR, iconName + ".png"));
+            if (process.platform === "darwin") {
+                trayImage = trayImage.resize({ width: 16, height: 16 });
+            }
+            tray.setImage(trayImage);
         } catch (error) {
             console.log("Error: ", error, "Regenerating tray icons.");
             generateTrayIcons(true);

src/main/tray.ts

@@ -9,9 +9,8 @@ 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 { ICONS_DIR, STATIC_DIR } from "shared/paths";
 
-import { DATA_DIR } from "./constants";
 import { mainWin } from "./mainWindow";
 import { Settings } from "./settings";
 
@@ -28,11 +27,8 @@ 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();
+        const img = nativeImage.createFromPath(join(ICONS_DIR, iconName + ".png")).resize({ width: 128, height: 128 });
+        if (img.isEmpty()) return nativeImage.createFromPath(join(ICONS_DIR, iconName + ".png")).toDataURL();
         return img.toDataURL();
     }
 }
@@ -41,19 +37,19 @@ 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");
+    writeFileSync(join(ICONS_DIR, 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 });
+    mkdirSync(ICONS_DIR, { 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);
         }
-        copyFileSync(join(STATIC_DIR, "icon.png"), join(DATA_DIR, "TrayIcons", "icon.png"));
+        copyFileSync(join(STATIC_DIR, "icon.png"), join(ICONS_DIR, "icon.png"));
         mainWin.webContents.send(IpcEvents.SET_CURRENT_VOICE_TRAY_ICON);
     }
 }
@@ -71,6 +67,6 @@ export async function pickTrayIcon(iconName: string) {
     // add .svg !!
     const image = nativeImage.createFromPath(dir);
     if (image.isEmpty()) return "invalid";
-    copyFileSync(dir, join(DATA_DIR, "TrayIcons", iconName + ".png"));
+    copyFileSync(dir, join(ICONS_DIR, iconName + ".png"));
     return dir;
 }

src/renderer/components/settings/TraySettings.tsx

@@ -11,7 +11,7 @@ import { findByCodeLazy, findByPropsLazy } from "@vencord/types/webpack";
 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 { isLinux } from "renderer/utils";
 
 import { SettingsComponent } from "./Settings";
 
@@ -87,16 +87,6 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
                 <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 + " " + Margins.bottom8} />
                 <Forms.FormSection className="vcd-custom-tray-icon-section">
                     <Forms.FormText className={Margins.top16 + " vcd-custom-tray-icon-form-text"}>
@@ -143,11 +133,10 @@ function TrayModalComponent({ modalProps, close }: { modalProps: any; close: ()
 }
 
 const openTrayModal = () => {
-    const key = openModal(props => <TrayModalComponent modalProps={props} close={() => props.onClose()} />);
+    openModal(props => <TrayModalComponent modalProps={props} close={() => props.onClose()} />);
 };
 
 export const TraySwitch: SettingsComponent = ({ settings }) => {
-    if (isMac) return null;
     return (
         <Switch
             value={settings.tray ?? true}

src/renderer/components/settings/traySetting.css

@@ -24,7 +24,7 @@
 .vcd-tray-setting-switch {
     flex-grow: 1;
     align-self: flex-start;
-    margin-right: -3.6rem;
+    margin-right: -4.5rem;
 }
 .vcd-tray-setting-customize {
     align-self: right;

src/shared/paths.ts

@@ -4,9 +4,11 @@
  * Copyright (c) 2023 Vendicated and Vencord contributors
  */
 
+import { DATA_DIR } from "main/constants";
 import { join } from "path";
 
 export const STATIC_DIR = /* @__PURE__ */ join(__dirname, "..", "..", "static");
 export const VIEW_DIR = /* @__PURE__ */ join(STATIC_DIR, "views");
 export const BADGE_DIR = /* @__PURE__ */ join(STATIC_DIR, "badges");
 export const ICON_PATH = /* @__PURE__ */ join(STATIC_DIR, "icon.png");
+export const ICONS_DIR = /* @__PURE__ */ join(DATA_DIR, "TrayIcons");