feat: New Vesktop icon (#865)

changes the app icon and tray

Co-authored-by: Wing <44992537+wingio@users.noreply.github.com>
Co-authored-by: khcrysalis <sam4r16@gmail.com>
Co-authored-by: Vendicated <vendicated@riseup.net>

build/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" style="isolation:isolate" viewBox="0 0 1024 1024"><path fill="#eb7396" d="M336.23 886.35c56.07 31.62 150.18 51.4 247.12 37.3C816.1 889.78 977.57 673.33 943.7 440.57 909.85 207.83 693.41 46.36 460.65 80.22 227.9 114.08 66.43 330.53 100.3 563.28c6.86 47.2 21.23 91.46 29.65 108.01 6.67 13.1 9.03 35.28 5.28 49.5l-26.8 101.43c-16.75 63.41 21.03 100.93 84.32 83.73l94.59-25.7c14.18-3.86 36.1-1.12 48.9 6.1z" style="display:inline;isolation:isolate"/><g style="display:inline;isolation:isolate"><g style="isolation:isolate"><path d="M494.586 109.162c-3.861.14-7.743.508-11.621 1.004-72.122 6.505-117.149 63.067-128.176 116.693l-17.812 86.508-35.555-76.785v-.002c-23.455-50.637-77.415-90.65-141.998-81.877-32.285 4.386-60.608 22.22-76.123 48.385-13.722 23.14-16.564 52.439-7.66 78.943v1.608l157.394 336.037c24.863 53.102 81.404 87.116 143.43 78.681 61.475-8.36 109.47-52.362 123.914-110.074l91.158-364.25c7.385-29.508 1.643-63.11-20.129-86.328-19.05-20.315-47.417-29.61-76.822-28.543" style="baseline-shift:baseline;display:inline;overflow:visible;opacity:1;vector-effect:none;fill:#1d2021;stop-color:#000;stop-opacity:1"/><path fill="#fff" d="m118.49 274.1 153.35 327.4c16 34.18 58.517 59.883 98.852 54.398s78.958-41.418 88.118-78.018l91.16-364.25c9.16-36.6-14.593-67.398-62.253-60.918-51.41 4.189-83.357 45.818-90.957 82.778l-37.84 183.78c-3.42 16.62-11.98 17.61-19.1 2.22l-77.28-166.9c-15.86-34.24-55.539-63.108-97.349-57.428S102.48 239.92 118.49 274.09Z" style="display:inline;fill:#ededed;fill-opacity:1"/><path d="M701.543 396.742a266.4 266.4 0 0 0-100.73 17.746l-.004.002h-.002a271.8 271.8 0 0 0-81.118 48.942 275 275 0 0 0-59.822 74.15v.002a277 277 0 0 0-31.572 93.527v.006l-.002.006c-1.984 13.48-3.023 27.136-3.024 40.893v.014a275.13 275.13 0 0 0 64.01 176.617l.004.004.002.004a269.5 269.5 0 0 0 72.846 61.008l.02.011.02.012a266.5 266.5 0 0 0 93.054 32.19l.017.002a266.3 266.3 0 0 0 114.906-8.061l.02-.006.02-.006a270.3 270.3 0 0 0 67.706-30.816l.004-.002c34.575-21.867 52.68-62.732 45.645-103.032-7.032-40.29-37.897-72.6-77.82-81.47a101.46 101.46 0 0 0-76.338 13.314l-.024.016-.023.015a67 67 0 0 1-16.83 7.67 63.3 63.3 0 0 1-17.957 2.6h-.081a63.86 63.86 0 0 1-31.726-8.37 67 67 0 0 1-17.951-15.042l-.006-.008a72.44 72.44 0 0 1-16.838-46.524v-.016a76.6 76.6 0 0 1 9.367-36.642 72.5 72.5 0 0 1 15.688-19.395l.012-.012.011-.011a69.3 69.3 0 0 1 20.617-12.455 63.97 63.97 0 0 1 59.061 6.896 68.5 68.5 0 0 1 19.91 21.201h.002v.002c28.529 47.605 91.489 63.35 139.068 34.78l.01-.006.01-.006c47.508-28.562 63.227-91.41 34.76-138.975l-.013-.025-.016-.026a271.8 271.8 0 0 0-79.111-84.105l-.026-.02-.027-.017a266.5 266.5 0 0 0-111.506-43.725 266 266 0 0 0-34.223-2.857" style="baseline-shift:baseline;display:inline;overflow:visible;opacity:1;vector-effect:none;fill:#ededed;stop-color:#000;stop-opacity:1"/><path fill="#1d2021" d="M751.65 766.94a59.8 59.8 0 0 1 45.03-7.85c23.607 5.237 41.724 24.197 45.882 48.018 4.157 23.821-6.465 47.797-26.902 60.722a228.7 228.7 0 0 1-57.33 26.1 224.7 224.7 0 0 1-96.97 6.8 224.9 224.9 0 0 1-78.56-27.17 227.9 227.9 0 0 1-61.6-51.59 233.5 233.5 0 0 1-54.33-149.94c0-11.67.88-23.3 2.58-34.85a235.4 235.4 0 0 1 26.83-79.48 233.4 233.4 0 0 1 50.78-62.94 230.2 230.2 0 0 1 68.7-41.45 224.8 224.8 0 0 1 113.91-12.56c33.75 5 65.94 17.62 94.1 36.9a230.15 230.15 0 0 1 67 71.23c16.936 28.299 7.765 64.967-20.5 81.96-28.294 16.99-65.005 7.81-81.97-20.5a110.1 110.1 0 0 0-32.08-34.14 105.7 105.7 0 0 0-97.52-11.4 110.9 110.9 0 0 0-33.05 19.96 114 114 0 0 0-24.79 30.69 118.2 118.2 0 0 0-14.51 56.66 114.07 114.07 0 0 0 26.51 73.24 108.6 108.6 0 0 0 29.24 24.5 105.5 105.5 0 0 0 52.45 13.85c10.08 0 20.12-1.45 29.8-4.32a108.6 108.6 0 0 0 27.3-12.44" style="display:inline"/></g></g></svg>

package.json

@@ -79,9 +79,10 @@
                 "discord"
             ]
         },
-        "beforePack": "scripts/build/sandboxFix.js",
+        "beforePack": "scripts/build/beforePack.mjs",
+        "afterPack": "scripts/build/afterPack.mjs",
         "linux": {
-            "icon": "build/icon.icns",
+            "icon": "build/icon.svg",
             "category": "Network",
             "maintainer": "vendicated+vesktop@riseup.net",
             "target": [
@@ -141,7 +142,8 @@
                 "NSMicrophoneUsageDescription": "This app needs access to the microphone",
                 "NSCameraUsageDescription": "This app needs access to the camera",
                 "com.apple.security.device.audio-input": true,
-                "com.apple.security.device.camera": true
+                "com.apple.security.device.camera": true,
+                "CFBundleIconName": "Icon"
             },
             "notarize": true
         },
@@ -171,6 +173,7 @@
             "oneClick": false
         },
         "win": {
+            "icon": "build/icon.ico",
             "target": [
                 {
                     "target": "nsis",

scripts/build/addAssetsCar.mjs

@@ -0,0 +1,24 @@
+import { copyFile, readdir } from "fs/promises";
+
+/**
+ * @param {{
+ *   readonly appOutDir: string;
+ *   readonly arch: Arch;
+ *   readonly electronPlatformName: string;
+ *   readonly outDir: string;
+ *   readonly packager: PlatformPackager;
+ *   readonly targets: Target[];
+ * }} context
+ */
+export async function addAssetsCar({ appOutDir }) {
+    if (process.platform !== "darwin") return;
+
+    const appName = (await readdir(appOutDir)).find(item => item.endsWith(".app"));
+
+    if (!appName) {
+        console.warn(`Could not find .app directory in ${appOutDir}. Skipping adding assets.car`);
+        return;
+    }
+
+    await copyFile("build/Assets.car", `${appOutDir}/${appName}/Contents/Resources/Assets.car`);
+}

scripts/build/afterPack.mjs

@@ -0,0 +1,5 @@
+import { addAssetsCar } from "./addAssetsCar.mjs";
+
+export default async function afterPack(context) {
+    await addAssetsCar(context);
+}

scripts/build/beforePack.mjs

@@ -0,0 +1,5 @@
+import { applyAppImageSandboxFix } from "./sandboxFix.mjs";
+
+export default async function beforePack() {
+    await applyAppImageSandboxFix();
+}

scripts/build/sandboxFix.mjs

@@ -6,18 +6,21 @@
 
 // Based on https://github.com/gergof/electron-builder-sandbox-fix/blob/master/lib/index.js
 
-const fs = require("fs/promises");
+import fs from "fs/promises";
-const path = require("path");
+import path from "path";
+import AppImageTarget from "app-builder-lib/out/targets/AppImageTarget.js";
+
 let isApplied = false;
 
-const hook = async () => {
+export async function applyAppImageSandboxFix() {
-    if (isApplied) return;
-    isApplied = true;
     if (process.platform !== "linux") {
         // this fix is only required on linux
         return;
     }
-    const AppImageTarget = require("app-builder-lib/out/targets/AppImageTarget");
+
+    if (isApplied) return;
+    isApplied = true;
+
     const oldBuildMethod = AppImageTarget.default.prototype.build;
     AppImageTarget.default.prototype.build = async function (...args) {
         console.log("Running AppImage builder hook", args);
@@ -69,6 +72,4 @@ exec "$SCRIPT_DIR/${this.packager.executableName}.bin" "$([ "$IS_STEAMOS" == 1 ]
 
         return ret;
     };
-};
+}
-
-module.exports = hook;

src/main/about.ts

@@ -6,7 +6,7 @@
 
 import { app, BrowserWindow } from "electron";
 import { join } from "path";
-import { ICON_PATH, VIEW_DIR } from "shared/paths";
+import { VIEW_DIR } from "shared/paths";
 
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
 
@@ -17,7 +17,6 @@ export async function createAboutWindow() {
     const about = new BrowserWindow({
         center: true,
         autoHideMenuBar: true,
-        icon: ICON_PATH,
         height,
         width
     });

src/main/firstLaunch.ts

@@ -9,7 +9,7 @@ import { BrowserWindow } from "electron/main";
 import { copyFileSync, mkdirSync, readdirSync } from "fs";
 import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
-import { ICON_PATH, VIEW_DIR } from "shared/paths";
+import { VIEW_DIR } from "shared/paths";
 
 import { autoStart } from "./autoStart";
 import { DATA_DIR } from "./constants";
@@ -32,8 +32,7 @@ export function createFirstLaunchTour() {
         frame: true,
         autoHideMenuBar: true,
         height: 470,
-        width: 550,
+        width: 550
-        icon: ICON_PATH
     });
 
     makeLinksOpenExternally(win);

src/main/mainWindow.ts

@@ -24,7 +24,7 @@ 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 { TRAY_ICON_PATH } from "../shared/paths";
 import { createAboutWindow } from "./about";
 import { initArRPC } from "./arrpc";
 import {
@@ -126,7 +126,7 @@ function initTray(win: BrowserWindow) {
         }
     ]);
 
-    tray = new Tray(ICON_PATH);
+    tray = new Tray(join(TRAY_ICON_PATH, `${process.platform === "darwin" ? "trayTemplate" : "tray"}.png`));
     tray.setToolTip("Vesktop");
     tray.setContextMenu(trayMenu);
     tray.on("click", onTrayClick);
@@ -439,7 +439,6 @@ function createMainWindow() {
             // disable renderer backgrounding to prevent the app from unloading when in the background
             backgroundThrottling: false
         },
-        icon: ICON_PATH,
         frame: !noFrame,
         ...(transparent && {
             transparent: true,

src/main/splash.ts

@@ -7,7 +7,7 @@
 import { BrowserWindow } from "electron";
 import { join } from "path";
 import { SplashProps } from "shared/browserWinProperties";
-import { ICON_PATH, VIEW_DIR } from "shared/paths";
+import { VIEW_DIR } from "shared/paths";
 
 import { Settings } from "./settings";
 
@@ -16,7 +16,6 @@ let splash: BrowserWindow | undefined;
 export function createSplashWindow(startMinimized = false) {
     splash = new BrowserWindow({
         ...SplashProps,
-        icon: ICON_PATH,
         show: !startMinimized,
         webPreferences: {
             preload: join(__dirname, "splashPreload.js")

src/shared/paths.ts

@@ -9,4 +9,4 @@ 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 TRAY_ICON_PATH = /* @__PURE__ */ join(STATIC_DIR, "tray");