add hardware video acceleration switch & improve settings ui

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>
         );