feat: Better(?) title bar options

feat: Add ability for macOS to use the native title bar

src/main/mainWindow.ts

@@ -389,11 +389,11 @@ function createMainWindow() {
     removeSettingsListeners();
     removeVencordSettingsListeners();
 
-    const { staticTitle, transparencyOption, enableMenu, customTitleBar } = Settings.store;
+    const { staticTitle, transparencyOption, enableMenu, titleBar } = Settings.store;
 
     const { frameless, transparent } = VencordSettings.store;
 
-    const noFrame = frameless === true || customTitleBar === true;
+    const noFrame = frameless === true || titleBar === "hidden";
 
     const win = (mainWin = new BrowserWindow({
         show: false,
@@ -419,18 +419,19 @@ function createMainWindow() {
                 backgroundMaterial: transparencyOption
             }),
         // Fix transparencyOption for custom discord titlebar
-        ...(customTitleBar &&
+        ...(titleBar === "custom" &&
             transparencyOption &&
             transparencyOption !== "none" && {
                 transparent: true
             }),
+        
         ...(staticTitle && { title: "Vesktop" }),
-        ...(process.platform === "darwin" && getDarwinOptions()),
+        ...(process.platform === "darwin" && titleBar !== "shown" && getDarwinOptions()),  // Show/Hide titlebar depending on settings on Mac
         ...getWindowBoundsOptions(),
         autoHideMenuBar: enableMenu
     }));
     win.setMenuBarVisibility(false);
-    if (process.platform === "darwin" && customTitleBar) win.setWindowButtonVisibility(false);
+    if (process.platform === "darwin" && titleBar === "custom") { win.setWindowButtonVisibility(false); } // Hide the traffic lights
     
     win.on("close", e => {
         const useTray = !isDeckGameMode && Settings.store.minimizeToTray !== false && Settings.store.tray !== false;

src/main/utils/popout.ts

@@ -37,7 +37,7 @@ const DEFAULT_POPOUT_OPTIONS: BrowserWindowConstructorOptions = {
     backgroundColor: "#2f3136",
     minWidth: MIN_POPOUT_WIDTH,
     minHeight: MIN_POPOUT_HEIGHT,
-    frame: Settings.store.customTitleBar !== true,
+    frame: Settings.store.titleBar !== "custom",
     titleBarStyle: process.platform === "darwin" ? "hidden" : undefined,
     trafficLightPosition:
         process.platform === "darwin"

src/renderer/components/settings/Settings.tsx

@@ -16,6 +16,7 @@ import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
 import { VencordLocationPicker } from "./VencordLocationPicker";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
+import { TitleBarPicker } from "./TitleBarPicker";
 
 interface BooleanSetting {
     key: keyof typeof Settings.store;
@@ -39,13 +40,8 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             defaultValue: true
         }
     ],
-    "User Interface": [
+    "Title Bar": [
-        {
+        TitleBarPicker,
-            key: "customTitleBar",
-            title: "Discord Titlebar",
-            description: "Use Discord's custom title bar instead of the native system one. Requires a full restart.",
-            defaultValue: isWindows
-        },
         {
             key: "staticTitle",
             title: "Static Title",
@@ -57,8 +53,11 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             title: "Enable Menu Bar",
             description: "Enables the application menu bar. Press ALT to toggle visibility.",
             defaultValue: false,
+            invisible: () => isMac,
             disabled: () => Settings.store.customTitleBar ?? isWindows
         },
+    ],
+    "User Interface": [
         {
             key: "splashTheming",
             title: "Splash theming",

src/renderer/components/settings/TitleBarPicker.tsx

@@ -0,0 +1,34 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2024 Vendicated and Vencord contributors
+ */
+
+import { Margins } from "@vencord/types/utils";
+import { Select, Forms } from "@vencord/types/webpack/common";
+import { isMac, isWindows } from "renderer/utils";
+
+import { SettingsComponent } from "./Settings";
+
+export const TitleBarPicker: SettingsComponent = ({ settings }) => {
+    return (
+        <>
+            <Forms.FormText className={Margins.bottom8}>
+                Customize apps title bar. Pick Discord if you want to use Discord's custom title bar. Requires a full restart
+            </Forms.FormText>
+            <Select
+                placeholder="Hidden"
+                options={[
+                    ...(isMac ? [{ label: "Hidden", value: "hidden", default: isMac }] : []),
+                    { label: "Native", value: "shown" },
+                    { label: "Discord", value: "custom", default: isWindows }
+                ]}
+                closeOnSelect={true}
+                select={v => (settings.titleBar = v)}
+                isSelected={v => v === settings.titleBar}
+                serialize={s => s}
+            />
+            <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
+        </>
+    );
+};

src/renderer/patches/platformClass.tsx

@@ -22,7 +22,7 @@ addPatch({
     ],
 
     getPlatformClass() {
-        if (Settings.store.customTitleBar) return "platform-win";
+        if (Settings.store.titleBar !== "hidden") return "platform-win";
         if (isMac) return "platform-osx";
         return "platform-web";
     }

src/renderer/patches/windowsTitleBar.tsx

@@ -8,7 +8,7 @@ import { Settings } from "renderer/settings";
 
 import { addPatch } from "./shared";
 
-if (Settings.store.customTitleBar)
+if (Settings.store.titleBar === "custom")
     addPatch({
         patches: [
             {

src/shared/settings.d.ts

@@ -20,7 +20,7 @@ export interface Settings {
     appBadge?: boolean;
     disableMinSize?: boolean;
     clickTrayToShowHide?: boolean;
-    customTitleBar?: boolean;
+    titleBar?: "hidden" | "shown" | "custom";
 
     splashTheming?: boolean;
     splashColor?: string;