add hardware video acceleration switch & improve settings ui

src/renderer/components/settings/AutoStartToggle.tsx

@@ -4,15 +4,16 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Switch, useState } from "@vencord/types/webpack/common";
+import { useState } from "@vencord/types/webpack/common";
 
 import { SettingsComponent } from "./Settings";
+import { VesktopSettingsSwitch } from "./VesktopSettingsSwitch";
 
 export const AutoStartToggle: SettingsComponent = () => {
     const [autoStartEnabled, setAutoStartEnabled] = useState(VesktopNative.autostart.isEnabled());
 
     return (
-        <Switch
+        <VesktopSettingsSwitch
             value={autoStartEnabled}
             onChange={async v => {
                 await VesktopNative.autostart[v ? "enable" : "disable"]();
@@ -21,6 +22,6 @@ export const AutoStartToggle: SettingsComponent = () => {
             note="Automatically start Vesktop on computer start-up"
         >
             Start With System
-        </Switch>
+        </VesktopSettingsSwitch>
     );
 };

src/renderer/components/settings/NotificationBadgeToggle.tsx

@@ -4,14 +4,14 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { Switch } from "@vencord/types/webpack/common";
 import { setBadge } from "renderer/appBadge";
 
 import { SettingsComponent } from "./Settings";
+import { VesktopSettingsSwitch } from "./VesktopSettingsSwitch";
 
 export const NotificationBadgeToggle: SettingsComponent = ({ settings }) => {
     return (
-        <Switch
+        <VesktopSettingsSwitch
             value={settings.appBadge ?? true}
             onChange={v => {
                 settings.appBadge = v;
@@ -21,6 +21,6 @@ export const NotificationBadgeToggle: SettingsComponent = ({ settings }) => {
             note="Show mention badge on the app icon"
         >
             Notification Badge
-        </Switch>
+        </VesktopSettingsSwitch>
     );
 };

src/renderer/components/settings/Settings.tsx

@@ -7,7 +7,7 @@
 import "./settings.css";
 
 import { ErrorBoundary } from "@vencord/types/components";
-import { Forms, Switch, Text } from "@vencord/types/webpack/common";
+import { Forms, Text } from "@vencord/types/webpack/common";
 import { ComponentType } from "react";
 import { Settings, useSettings } from "renderer/settings";
 import { isMac, isWindows } from "renderer/utils";
@@ -16,6 +16,7 @@ import { AutoStartToggle } from "./AutoStartToggle";
 import { DeveloperOptionsButton } from "./DeveloperOptions";
 import { DiscordBranchPicker } from "./DiscordBranchPicker";
 import { NotificationBadgeToggle } from "./NotificationBadgeToggle";
+import { VesktopSettingsSwitch } from "./VesktopSettingsSwitch";
 import { WindowsTransparencyControls } from "./WindowsTransparencyControls";
 
 interface BooleanSetting {
@@ -38,6 +39,14 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
             title: "Hardware Acceleration",
             description: "Enable hardware acceleration",
             defaultValue: true
+        },
+        {
+            key: "hardwareVideoAcceleration",
+            title: "Video Hardware Acceleration",
+            description:
+                "Enable hardware video acceleration. This can improve performance of screenshare and video playback, but may cause graphical glitches and infinitely loading streams.",
+            defaultValue: false,
+            disabled: () => !Settings.store.hardwareAcceleration
         }
     ],
     "User Interface": [
@@ -132,32 +141,35 @@ const SettingsOptions: Record<string, Array<BooleanSetting | SettingsComponent>>
 function SettingsSections() {
     const Settings = useSettings();
 
-    const sections = Object.entries(SettingsOptions).map(([title, settings]) => (
-        <Forms.FormSection
-            title={title}
-            key={title}
-            className="vcd-settings-section"
-            titleClassName="vcd-settings-title"
-        >
-            {settings.map(Setting => {
-                if (typeof Setting === "function") return <Setting settings={Settings} />;
+    const sections = Object.entries(SettingsOptions).map(([title, settings], i, arr) => (
+        <div key={title} className="vcd-settings-category">
+            <Text variant="heading-lg/semibold" color="header-primary" className="vcd-settings-category-title">
+                {title}
+            </Text>
 
-                const { defaultValue, title, description, key, disabled, invisible } = Setting;
-                if (invisible?.()) return null;
+            <div className="vcd-settings-category-content">
+                {settings.map(Setting => {
+                    if (typeof Setting === "function") return <Setting settings={Settings} />;
 
-                return (
-                    <Switch
-                        value={Settings[key as any] ?? defaultValue}
-                        onChange={v => (Settings[key as any] = v)}
-                        note={description}
-                        disabled={disabled?.()}
-                        key={key}
-                    >
-                        {title}
-                    </Switch>
-                );
-            })}
-        </Forms.FormSection>
+                    const { defaultValue, title, description, key, disabled, invisible } = Setting;
+                    if (invisible?.()) return null;
+
+                    return (
+                        <VesktopSettingsSwitch
+                            value={Settings[key as any] ?? defaultValue}
+                            onChange={v => (Settings[key as any] = v)}
+                            note={description}
+                            disabled={disabled?.()}
+                            key={key}
+                        >
+                            {title}
+                        </VesktopSettingsSwitch>
+                    );
+                })}
+            </div>
+
+            {i < arr.length - 1 && <Forms.FormDivider className="vcd-settings-category-divider" />}
+        </div>
     ));
 
     return <>{sections}</>;
@@ -167,10 +179,11 @@ export default ErrorBoundary.wrap(
     function SettingsUI() {
         return (
             <Forms.FormSection>
-                <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">
+                {/* FIXME: Outdated type */}
+                {/* @ts-expect-error Outdated type */}
+                <Text variant="heading-xl/semibold" color="header-primary" className="vcd-settings-title">
                     Vesktop Settings
                 </Text>
-
                 <SettingsSections />
             </Forms.FormSection>
         );

src/renderer/components/settings/VesktopSettingsSwitch.tsx

@@ -0,0 +1,16 @@
+/*
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2025 Vendicated and Vesktop contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Switch } from "@vencord/types/webpack/common";
+import { ComponentProps } from "react";
+
+export function VesktopSettingsSwitch(props: ComponentProps<typeof Switch>) {
+    return (
+        <Switch {...props} hideBorder className="vcd-settings-switch">
+            {props.children}
+        </Switch>
+    );
+}

src/renderer/components/settings/WindowsTransparencyControls.tsx

@@ -13,8 +13,8 @@ export const WindowsTransparencyControls: SettingsComponent = ({ settings }) =>
     if (!VesktopNative.app.supportsWindowsTransparency()) return null;
 
     return (
-        <>
-            <Forms.FormTitle className={Margins.top16 + " " + Margins.bottom8}>Transparency Options</Forms.FormTitle>
+        <div>
+            <Forms.FormTitle className={Margins.bottom8}>Transparency Options</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom8}>
                 Requires a full restart. You will need a theme that supports transparency for this to work.
             </Forms.FormText>
@@ -42,8 +42,6 @@ export const WindowsTransparencyControls: SettingsComponent = ({ settings }) =>
                 isSelected={v => v === settings.transparencyOption}
                 serialize={s => s}
             />
-
-            <Forms.FormDivider className={Margins.top16 + " " + Margins.bottom16} />
-        </>
+        </div>
     );
 };

src/renderer/components/settings/settings.css

@@ -5,10 +5,30 @@
     margin-top: 0.5em;
 }
 
-.vcd-settings-section {
-    margin-top: 1.5rem;
+.vcd-settings-title {
+    margin-bottom: 32px;
 }
 
-.vcd-settings-title {
-    margin-bottom: 0.5rem;
+.vcd-settings-category {
+    display: flex;
+    flex-direction: column;
+}
+
+.vcd-settings-category-title {
+    margin-bottom: 16px;
+}
+
+.vcd-settings-category-content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.vcd-settings-category-divider {
+    margin-top: 32px;
+    margin-bottom: 32px;
+}
+
+.vcd-settings-switch {
+    margin-bottom: 0;
 }