feat: add dropdown to choose vibrancy value on macOS (#1941)

Co-authored-by: V <vendicated@riseup.net>

src/api/Settings.ts

@@ -38,7 +38,21 @@ export interface Settings {
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
-    macosTranslucency: boolean;
+    macosVibrancyStyle:
+    | "content"
+    | "fullscreen-ui"
+    | "header"
+    | "hud"
+    | "menu"
+    | "popover"
+    | "selection"
+    | "sidebar"
+    | "titlebar"
+    | "tooltip"
+    | "under-page"
+    | "window"
+    | undefined;
+    macosTranslucency: boolean | undefined;
     disableMinSize: boolean;
     winNativeTitleBar: boolean;
     plugins: {
@@ -74,7 +88,9 @@ const DefaultSettings: Settings = {
     frameless: false,
     transparent: false,
     winCtrlQ: false,
-    macosTranslucency: false,
+    // Replaced by macosVibrancyStyle
+    macosTranslucency: undefined,
+    macosVibrancyStyle: undefined,
     disableMinSize: false,
     winNativeTitleBar: false,
     plugins: {},

src/components/VencordSettings/VencordTab.tsx

@@ -48,6 +48,15 @@ function VencordSettings() {
 
     const isWindows = navigator.platform.toLowerCase().startsWith("win");
     const isMac = navigator.platform.toLowerCase().startsWith("mac");
+    const needsVibrancySettings = IS_DISCORD_DESKTOP && isMac;
+
+    // One-time migration of the old setting to the new one if necessary.
+    React.useEffect(() => {
+        if (settings.macosTranslucency === true && !settings.macosVibrancyStyle) {
+            settings.macosVibrancyStyle = "sidebar";
+            settings.macosTranslucency = undefined;
+        }
+    }, []);
 
     const Switches: Array<false | {
         key: KeysOfType<typeof settings, boolean>;
@@ -89,11 +98,6 @@ function VencordSettings() {
                 title: "Disable minimum window size",
                 note: "Requires a full restart"
             },
-            IS_DISCORD_DESKTOP && isMac && {
-                key: "macosTranslucency",
-                title: "Enable translucent window",
-                note: "Requires a full restart"
-            }
         ];
 
     return (
@@ -152,6 +156,71 @@ function VencordSettings() {
             </Forms.FormSection>
 
 
+            {needsVibrancySettings && <>
+                <Forms.FormTitle tag="h5">Window vibrancy style (requires restart)</Forms.FormTitle>
+                <Select
+                    className={Margins.bottom20}
+                    placeholder="Window vibrancy style"
+                    options={[
+                        // Sorted from most opaque to most transparent
+                        {
+                            label: "No vibrancy", default: !settings.macosTranslucency, value: undefined
+                        },
+                        {
+                            label: "Under Page (window tinting)",
+                            value: "under-page"
+                        },
+                        {
+                            label: "Content",
+                            value: "content"
+                        },
+                        {
+                            label: "Window",
+                            value: "window"
+                        },
+                        {
+                            label: "Selection",
+                            value: "selection"
+                        },
+                        {
+                            label: "Titlebar",
+                            value: "titlebar"
+                        },
+                        {
+                            label: "Header",
+                            value: "header"
+                        },
+                        {
+                            label: "Sidebar (old value for transparent windows)",
+                            value: "sidebar",
+                            default: settings.macosTranslucency
+                        },
+                        {
+                            label: "Tooltip",
+                            value: "tooltip"
+                        },
+                        {
+                            label: "Menu",
+                            value: "menu"
+                        },
+                        {
+                            label: "Popover",
+                            value: "popover"
+                        },
+                        {
+                            label: "Fullscreen UI (transparent but slightly muted)",
+                            value: "fullscreen-ui"
+                        },
+                        {
+                            label: "HUD (Most transparent)",
+                            value: "hud"
+                        },
+                    ]}
+                    select={v => settings.macosVibrancyStyle = v}
+                    isSelected={v => settings.macosVibrancyStyle === v}
+                    serialize={identity} />
+            </>}
+
             {typeof Notification !== "undefined" && <NotificationSection settings={settings.notifications} />}
         </SettingsTab>
     );

src/main/patcher.ts

@@ -85,9 +85,15 @@ if (!IS_VANILLA) {
                     options.backgroundColor = "#00000000";
                 }
 
-                if (settings.macosTranslucency && process.platform === "darwin") {
+                const needsVibrancy = process.platform === "darwin" || (settings.macosVibrancyStyle || settings.macosTranslucency);
+
+                if (needsVibrancy) {
                     options.backgroundColor = "#00000000";
-                    options.vibrancy = "sidebar";
+                    if (settings.macosTranslucency) {
+                        options.vibrancy = "sidebar";
+                    } else if (settings.macosVibrancyStyle) {
+                        options.vibrancy = settings.macosVibrancyStyle;
+                    }
                 }
 
                 process.env.DISCORD_PRELOAD = original;