svg rework, add proposal for accent color (windows,linux), some bug fixes

src/main/firstLaunch.ts

@@ -48,6 +48,7 @@ export function createFirstLaunchTour() {
         Settings.store.minimizeToTray = data.minimizeToTray;
         Settings.store.discordBranch = data.discordBranch;
         Settings.store.arRPC = data.richPresence;
+        Settings.store.tray = true;
 
         if (data.autoStart) autoStart.enable();
 

src/main/ipc.ts

@@ -7,7 +7,17 @@
 if (process.platform === "linux") import("./venmic");
 
 import { execFile } from "child_process";
-import { app, BrowserWindow, clipboard, dialog, nativeImage, RelaunchOptions, session, shell } from "electron";
+import {
+    app,
+    BrowserWindow,
+    clipboard,
+    dialog,
+    nativeImage,
+    RelaunchOptions,
+    session,
+    shell,
+    systemPreferences
+} from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readFile } from "fs/promises";
 import { release } from "os";
@@ -156,3 +166,4 @@ watch(
 
 handle(IpcEvents.SET_TRAY_ICON, (_, iconURI) => setTrayIcon(iconURI));
 handle(IpcEvents.GET_TRAY_ICON, (_, iconName) => getTrayIconFile(iconName));
+handle(IpcEvents.GET_SYSTEM_ACCENT_COLOR, () => `#${systemPreferences.getAccentColor?.() || ""}`);

src/preload/VesktopNative.ts

@@ -26,7 +26,8 @@ export const VesktopNative = {
         setBadgeCount: (count: number) => invoke<void>(IpcEvents.SET_BADGE_COUNT, count),
         supportsWindowsTransparency: () => sendSync<boolean>(IpcEvents.SUPPORTS_WINDOWS_TRANSPARENCY),
         setTrayIcon: (iconURI: string) => invoke<void>(IpcEvents.SET_TRAY_ICON, iconURI),
-        getTrayIcon: (iconName: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconName)
+        getTrayIcon: (iconName: string) => invoke<string>(IpcEvents.GET_TRAY_ICON, iconName),
+        getAccentColor: () => invoke<string>(IpcEvents.GET_SYSTEM_ACCENT_COLOR)
     },
     autostart: {
         isEnabled: () => sendSync<boolean>(IpcEvents.AUTOSTART_ENABLED),

src/renderer/components/settings/TrayColorPicker.tsx

@@ -9,7 +9,8 @@ import "./traySetting.css";
 import { Margins } from "@vencord/types/utils";
 import { findByCodeLazy } from "@vencord/types/webpack";
 import { Forms } from "@vencord/types/webpack/common";
-import { setCurrentState } from "renderer/patches/tray";
+import { isInCall, setCurrentState } from "renderer/patches/tray";
+import { isLinux } from "renderer/utils";
 
 import { SettingsComponent } from "./Settings";
 
@@ -20,6 +21,11 @@ const presets = [
     "#F6BFAC" // Vesktop inpired
 ];
 
+if (!isLinux)
+    VesktopNative.app.getAccentColor().then(color => {
+        if (color) presets.unshift(color);
+    });
+
 export const TrayIconPicker: SettingsComponent = ({ settings }) => {
     if (!settings.tray) return null;
     return (
@@ -30,11 +36,11 @@ export const TrayIconPicker: SettingsComponent = ({ settings }) => {
                     <Forms.FormText>Choose a color for your tray icon!</Forms.FormText>
                 </div>
                 <ColorPicker
-                    color={parseInt(settings.trayColor ?? "#3DB77F", 16)}
+                    color={parseInt(settings.trayColor ?? "3DB77F", 16)}
                     onChange={newColor => {
                         const hexColor = newColor.toString(16).padStart(6, "0");
                         settings.trayColor = hexColor;
-                        setCurrentState();
+                        if (isInCall) setCurrentState();
                     }}
                     showEyeDropper={false}
                     suggestedColors={presets}

src/renderer/patches/tray.ts

@@ -11,7 +11,7 @@ import { FluxDispatcher, UserStore } from "@vencord/types/webpack/common";
 const muteActions = findByPropsLazy("isSelfMute");
 const deafActions = findByPropsLazy("isSelfDeaf");
 
-var inCall = false;
+export var isInCall = false;
 const logger = new Logger("VesktopTrayIcon");
 
 async function changeIconColor(iconName: string) {
@@ -64,20 +64,20 @@ onceReady.then(() => {
     });
 
     FluxDispatcher.subscribe("AUDIO_TOGGLE_SELF_DEAF", () => {
-        if (inCall) setCurrentState();
+        if (isInCall) setCurrentState();
     });
 
     FluxDispatcher.subscribe("AUDIO_TOGGLE_SELF_MUTE", () => {
-        if (inCall) setCurrentState();
+        if (isInCall) setCurrentState();
     });
 
     FluxDispatcher.subscribe("RTC_CONNECTION_STATE", params => {
         if (params.state === "RTC_CONNECTED") {
-            inCall = true;
+            isInCall = true;
             setCurrentState();
         } else if (params.state === "RTC_DISCONNECTED") {
             VesktopNative.app.setTrayIcon("icon");
-            inCall = false;
+            isInCall = false;
         }
     });
 });

src/shared/IpcEvents.ts

@@ -52,5 +52,6 @@ export const enum IpcEvents {
     CLIPBOARD_COPY_IMAGE = "VCD_CLIPBOARD_COPY_IMAGE",
 
     SET_TRAY_ICON = "VCD_SET_TRAY_ICON",
-    GET_TRAY_ICON = "VCD_GET_TRAY_ICON"
+    GET_TRAY_ICON = "VCD_GET_TRAY_ICON",
+    GET_SYSTEM_ACCENT_COLOR = "VCD_GET_ACCENT_COLOR"
 }

static/idle.svg

@@ -1,5 +1,5 @@
-<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
-    <circle cx="500" cy="500" r="400" stroke="#f6bfac" stroke-width="50" fill="#f6bfac" fill-opacity="0.2"/>
-    <path d="M 250 500 Q 250 250 500 250" fill="none" stroke="#f6bfac" stroke-width="50"/>
-</svg>
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+    <circle cx="500" cy="500" r="400" stroke="#f6bfac" stroke-width="50" fill="#f6bfac" fill-opacity="0.5"/>
+    <path d="M 255 600 Q 255 255 600 255" fill="none" stroke="#f6bfac" stroke-width="50"/>
+</svg>

static/speaking.svg

@@ -1,5 +1,5 @@
-<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
-    <circle cx="500" cy="500" r="400" stroke="#f6bfac" stroke-width="50" fill="#f6bfac"/>
-    <path d="M 250 500 Q 250 250 500 250" fill="none" stroke="white" stroke-width="50"/>
-</svg>
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
+    <circle cx="500" cy="500" r="400" stroke="#f6bfac" stroke-width="50" fill="#f6bfac"/>
+    <path d="M 255 600 Q 255 255 600 255" fill="none" stroke="white" stroke-width="50"/>
+</svg>