From ae65883335f24c999e134403a6cddceed5ad39d4 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Thu, 9 Oct 2025 21:01:48 +0200
Subject: [PATCH] fix broken Settings ui

---
 src/components/settings/tabs/BaseTab.tsx      |   4 +-
 .../settings/tabs/plugins/PluginModal.tsx     |  29 ++--
 .../settings/tabs/plugins/index.tsx           |  31 +++--
 .../settings/tabs/sync/CloudTab.tsx           |  12 +-
 .../settings/tabs/themes/LocalThemesTab.tsx   |   5 +-
 .../settings/tabs/themes/OnlineThemesTab.tsx  |   5 +-
 .../tabs/vencord/MacVibrancySettings.tsx      | 124 +++++++++---------
 .../tabs/vencord/NotificationSettings.tsx     |   5 +-
 .../settings/tabs/vencord/index.tsx           |  11 +-
 .../decor/ui/modals/CreateDecorationModal.tsx |  10 +-
 src/plugins/fakeProfileThemes/index.tsx       |   4 +-
 src/plugins/ignoreActivities/index.tsx        |   4 +-
 .../pinDms/components/CreateCategoryModal.tsx |   8 +-
 .../startupTimings/StartupTimingPage.tsx      |  10 +-
 src/plugins/vcNarrator/VoiceSetting.tsx       |   4 +-
 src/plugins/vcNarrator/index.tsx              |   4 +-
 src/webpack/common/components.ts              |   8 +-
 17 files changed, 151 insertions(+), 127 deletions(-)

diff --git a/src/components/settings/tabs/BaseTab.tsx b/src/components/settings/tabs/BaseTab.tsx
index 9ef95463c..9a2b7f6d4 100644
--- a/src/components/settings/tabs/BaseTab.tsx
+++ b/src/components/settings/tabs/BaseTab.tsx
@@ -25,7 +25,7 @@ import type { ComponentType, PropsWithChildren } from "react";
 
 export function SettingsTab({ title, children }: PropsWithChildren<{ title: string; }>) {
     return (
-        <Forms.FormSection>
+        <section>
             <Text
                 variant="heading-lg/semibold"
                 tag="h2"
@@ -35,7 +35,7 @@ export function SettingsTab({ title, children }: PropsWithChildren<{ title: stri
             </Text>
 
             {children}
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/components/settings/tabs/plugins/PluginModal.tsx b/src/components/settings/tabs/plugins/PluginModal.tsx
index 3332b1fc1..e402e40b6 100644
--- a/src/components/settings/tabs/plugins/PluginModal.tsx
+++ b/src/components/settings/tabs/plugins/PluginModal.tsx
@@ -105,14 +105,15 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
             const Component = OptionComponentMap[setting.type];
             return (
-                <Component
-                    id={key}
-                    key={key}
-                    option={setting}
-                    onChange={debounce(onChange)}
-                    pluginSettings={pluginSettings}
-                    definedSettings={plugin.settings}
-                />
+                <ErrorBoundary noop key={key}>
+                    <Component
+                        id={key}
+                        option={setting}
+                        onChange={debounce(onChange)}
+                        pluginSettings={pluginSettings}
+                        definedSettings={plugin.settings}
+                    />
+                </ErrorBoundary>
             );
         });
 
@@ -153,7 +154,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
             </ModalHeader>
 
             <ModalContent className={Margins.bottom16}>
-                <Forms.FormSection>
+                <section>
                     <Flex className={cl("info")}>
                         <Forms.FormText className={cl("description")}>{plugin.description}</Forms.FormText>
                         {!pluginMeta.userPlugin && (
@@ -193,22 +194,22 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                             )}
                         />
                     </div>
-                </Forms.FormSection>
+                </section>
 
                 {!!plugin.settingsAboutComponent && (
                     <div className={Margins.top16}>
-                        <Forms.FormSection>
+                        <section>
                             <ErrorBoundary message="An error occurred while rendering this plugin's custom Info Component">
                                 <plugin.settingsAboutComponent />
                             </ErrorBoundary>
-                        </Forms.FormSection>
+                        </section>
                     </div>
                 )}
 
-                <Forms.FormSection>
+                <section>
                     <Text variant="heading-lg/semibold" className={classes(Margins.top16, Margins.bottom8)}>Settings</Text>
                     {renderSettings()}
-                </Forms.FormSection>
+                </section>
             </ModalContent>
         </ModalRoot>
     );
diff --git a/src/components/settings/tabs/plugins/index.tsx b/src/components/settings/tabs/plugins/index.tsx
index 4db9699ac..8326adaea 100644
--- a/src/components/settings/tabs/plugins/index.tsx
+++ b/src/components/settings/tabs/plugins/index.tsx
@@ -21,6 +21,7 @@ import "./styles.css";
 import * as DataStore from "@api/DataStore";
 import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { SettingsTab, wrapTab } from "@components/settings/tabs/BaseTab";
 import { ChangeList } from "@utils/ChangeList";
 import { Logger } from "@utils/Logger";
@@ -249,20 +250,24 @@ function PluginSettings() {
             </Forms.FormTitle>
 
             <div className={classes(Margins.bottom20, cl("filter-controls"))}>
-                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} />
+                <ErrorBoundary noop>
+                    <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} />
+                </ErrorBoundary>
                 <div className={InputStyles.inputWrapper}>
-                    <Select
-                        options={[
-                            { label: "Show All", value: SearchStatus.ALL, default: true },
-                            { label: "Show Enabled", value: SearchStatus.ENABLED },
-                            { label: "Show Disabled", value: SearchStatus.DISABLED },
-                            { label: "Show New", value: SearchStatus.NEW }
-                        ]}
-                        serialize={String}
-                        select={onStatusChange}
-                        isSelected={v => v === searchValue.status}
-                        closeOnSelect={true}
-                    />
+                    <ErrorBoundary noop>
+                        <Select
+                            options={[
+                                { label: "Show All", value: SearchStatus.ALL, default: true },
+                                { label: "Show Enabled", value: SearchStatus.ENABLED },
+                                { label: "Show Disabled", value: SearchStatus.DISABLED },
+                                { label: "Show New", value: SearchStatus.NEW }
+                            ]}
+                            serialize={String}
+                            select={onStatusChange}
+                            isSelected={v => v === searchValue.status}
+                            closeOnSelect={true}
+                        />
+                    </ErrorBoundary>
                 </div>
             </div>
 
diff --git a/src/components/settings/tabs/sync/CloudTab.tsx b/src/components/settings/tabs/sync/CloudTab.tsx
index 0afa575df..33045ae88 100644
--- a/src/components/settings/tabs/sync/CloudTab.tsx
+++ b/src/components/settings/tabs/sync/CloudTab.tsx
@@ -70,7 +70,9 @@ function SettingsSyncSection() {
     const sectionEnabled = cloud.authenticated && cloud.settingsSync;
 
     return (
-        <Forms.FormSection title="Settings Sync" className={Margins.top16}>
+        <section className={Margins.top16}>
+            <Forms.FormTitle tag="h5">Settings Sync</Forms.FormTitle>
+
             <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
                 Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with
                 minimal effort.
@@ -113,7 +115,7 @@ function SettingsSyncSection() {
                     Delete Cloud Settings
                 </Button>
             </div>
-        </Forms.FormSection>
+        </section>
     );
 }
 
@@ -122,7 +124,9 @@ function CloudTab() {
 
     return (
         <SettingsTab title="Vencord Cloud">
-            <Forms.FormSection title="Cloud Settings" className={Margins.top16}>
+            <section className={Margins.top16}>
+                <Forms.FormTitle tag="h5">Cloud Settings</Forms.FormTitle>
+
                 <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
                     Vencord comes with a cloud integration that adds goodies like settings sync across devices.
                     It <Link href="https://vencord.dev/cloud/privacy">respects your privacy</Link>, and
@@ -186,7 +190,7 @@ function CloudTab() {
                 </Grid>
 
                 <Forms.FormDivider className={Margins.top16} />
-            </Forms.FormSection >
+            </section >
             <SettingsSyncSection />
         </SettingsTab>
     );
diff --git a/src/components/settings/tabs/themes/LocalThemesTab.tsx b/src/components/settings/tabs/themes/LocalThemesTab.tsx
index 8d07a27cd..a958ab77a 100644
--- a/src/components/settings/tabs/themes/LocalThemesTab.tsx
+++ b/src/components/settings/tabs/themes/LocalThemesTab.tsx
@@ -99,7 +99,8 @@ export function LocalThemesTab() {
                 <Forms.FormText>Make sure all your assets are hosted on GitHub, GitLab, Codeberg, Imgur, Discord or Google Fonts.</Forms.FormText>
             </Card>
 
-            <Forms.FormSection title="Local Themes">
+            <section>
+                <Forms.FormTitle tag="h5">Local Themes</Forms.FormTitle>
                 <QuickActionCard>
                     <>
                         {IS_WEB ?
@@ -164,7 +165,7 @@ export function LocalThemesTab() {
                         />
                     ))}
                 </div>
-            </Forms.FormSection>
+            </section>
         </>
     );
 }
diff --git a/src/components/settings/tabs/themes/OnlineThemesTab.tsx b/src/components/settings/tabs/themes/OnlineThemesTab.tsx
index faca96dcb..87f583810 100644
--- a/src/components/settings/tabs/themes/OnlineThemesTab.tsx
+++ b/src/components/settings/tabs/themes/OnlineThemesTab.tsx
@@ -40,7 +40,8 @@ export function OnlineThemesTab() {
                 <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
             </Card>
 
-            <Forms.FormSection title="Online Themes" tag="h5">
+            <section>
+                <Forms.FormTitle tag="h5">Online Themes</Forms.FormTitle>
                 <TextArea
                     value={themeText}
                     onChange={setThemeText}
@@ -50,7 +51,7 @@ export function OnlineThemesTab() {
                     onBlur={onBlur}
                     rows={10}
                 />
-            </Forms.FormSection>
+            </section>
         </>
     );
 }
diff --git a/src/components/settings/tabs/vencord/MacVibrancySettings.tsx b/src/components/settings/tabs/vencord/MacVibrancySettings.tsx
index 2f6810645..784b0be00 100644
--- a/src/components/settings/tabs/vencord/MacVibrancySettings.tsx
+++ b/src/components/settings/tabs/vencord/MacVibrancySettings.tsx
@@ -5,6 +5,7 @@
  */
 
 import { useSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
 import { Forms, Select } from "@webpack/common";
@@ -15,66 +16,69 @@ export function VibrancySettings() {
     return (
         <>
             <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", 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",
-                        value: "sidebar"
-                    },
-                    {
-                        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} />
+            <ErrorBoundary noop>
+                <Select
+                    className={Margins.bottom20}
+                    placeholder="Window vibrancy style"
+                    options={[
+                        // Sorted from most opaque to most transparent
+                        {
+                            label: "No vibrancy", 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",
+                            value: "sidebar"
+                        },
+                        {
+                            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}
+                />
+            </ErrorBoundary>
         </>
     );
 }
diff --git a/src/components/settings/tabs/vencord/NotificationSettings.tsx b/src/components/settings/tabs/vencord/NotificationSettings.tsx
index 18b423cc9..f47f4d63b 100644
--- a/src/components/settings/tabs/vencord/NotificationSettings.tsx
+++ b/src/components/settings/tabs/vencord/NotificationSettings.tsx
@@ -15,7 +15,8 @@ import { Button, Forms, Select, Slider, Text } from "@webpack/common";
 
 export function NotificationSection() {
     return (
-        <Forms.FormSection className={Margins.top16} title="Vencord Notifications" tag="h5">
+        <section className={Margins.top16}>
+            <Forms.FormTitle tag="h5">Vencord Notifications</Forms.FormTitle>
             <Flex>
                 <Button onClick={openNotificationSettingsModal}>
                     Notification Settings
@@ -24,7 +25,7 @@ export function NotificationSection() {
                     View Notification Log
                 </Button>
             </Flex>
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/components/settings/tabs/vencord/index.tsx b/src/components/settings/tabs/vencord/index.tsx
index 4ca4f6a60..377bf37fc 100644
--- a/src/components/settings/tabs/vencord/index.tsx
+++ b/src/components/settings/tabs/vencord/index.tsx
@@ -153,7 +153,9 @@ function VencordSettings() {
                 />
             )}
 
-            <Forms.FormSection title="Quick Actions">
+            <section>
+                <Forms.FormTitle tag="h5">Quick Actions</Forms.FormTitle>
+
                 <QuickActionCard>
                     <QuickAction
                         Icon={LogIcon}
@@ -185,11 +187,12 @@ function VencordSettings() {
                         action={() => VencordNative.native.openExternal("https://github.com/" + gitRemote)}
                     />
                 </QuickActionCard>
-            </Forms.FormSection>
+            </section>
 
             <Forms.FormDivider />
 
-            <Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
+            <section className={Margins.top16}>
+                <Forms.FormTitle tag="h5">Settings</Forms.FormTitle>
                 <Forms.FormText className={Margins.bottom20} style={{ color: "var(--text-muted)" }}>
                     Hint: You can change the position of this settings section in the{" "}
                     <a onClick={() => openPluginModal(Vencord.Plugins.plugins.Settings)}>
@@ -198,7 +201,7 @@ function VencordSettings() {
                 </Forms.FormText>
 
                 <Switches />
-            </Forms.FormSection>
+            </section>
 
 
             {needsVibrancySettings && <VibrancySettings />}
diff --git a/src/plugins/decor/ui/modals/CreateDecorationModal.tsx b/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
index 6feb3b4f8..2b273f1c6 100644
--- a/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
+++ b/src/plugins/decor/ui/modals/CreateDecorationModal.tsx
@@ -89,7 +89,8 @@ function CreateDecorationModal(props: ModalProps) {
                 <div className={cl("create-decoration-modal-form-preview-container")}>
                     <div className={cl("create-decoration-modal-form")}>
                         {error !== null && <Text color="text-danger" variant="text-xs/normal">{error.message}</Text>}
-                        <Forms.FormSection title="File">
+                        <section>
+                            <Forms.FormTitle tag="h5">File</Forms.FormTitle>
                             <FileUpload
                                 filename={file?.name}
                                 placeholder="Choose a file"
@@ -100,8 +101,9 @@ function CreateDecorationModal(props: ModalProps) {
                             <Forms.FormText className={Margins.top8}>
                                 File should be APNG or PNG.
                             </Forms.FormText>
-                        </Forms.FormSection>
-                        <Forms.FormSection title="Name">
+                        </section>
+                        <section>
+                            <Forms.FormTitle tag="h5">Name</Forms.FormTitle>
                             <TextInput
                                 placeholder="Companion Cube"
                                 value={name}
@@ -110,7 +112,7 @@ function CreateDecorationModal(props: ModalProps) {
                             <Forms.FormText className={Margins.top8}>
                                 This name will be used when referring to this decoration.
                             </Forms.FormText>
-                        </Forms.FormSection>
+                        </section>
                     </div>
                     <div>
                         <AvatarDecorationModalPreview
diff --git a/src/plugins/fakeProfileThemes/index.tsx b/src/plugins/fakeProfileThemes/index.tsx
index 5d16a842c..973c2e208 100644
--- a/src/plugins/fakeProfileThemes/index.tsx
+++ b/src/plugins/fakeProfileThemes/index.tsx
@@ -113,7 +113,7 @@ function SettingsAboutComponent() {
     const [color2, setColor2] = useState(existingColors[1]);
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h3">Usage</Forms.FormTitle>
             <Forms.FormText>
                 After enabling this plugin, you will see custom colors in
@@ -191,7 +191,7 @@ function SettingsAboutComponent() {
                     />
                 </div>
             </Forms.FormText>
-        </Forms.FormSection>);
+        </section>);
 }
 
 export default definePlugin({
diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx
index 014c1abd9..2b9fa6946 100644
--- a/src/plugins/ignoreActivities/index.tsx
+++ b/src/plugins/ignoreActivities/index.tsx
@@ -131,7 +131,7 @@ function IdsListComponent(props: { setValue: (value: string) => void; }) {
     }
 
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle tag="h3">Filter List</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom8}>Comma separated list of activity IDs to filter (Useful for filtering specific RPC activities and CustomRPC</Forms.FormText>
             <TextInput
@@ -140,7 +140,7 @@ function IdsListComponent(props: { setValue: (value: string) => void; }) {
                 onChange={handleChange}
                 placeholder="235834946571337729, 343383572805058560"
             />
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/plugins/pinDms/components/CreateCategoryModal.tsx b/src/plugins/pinDms/components/CreateCategoryModal.tsx
index e769f4b66..2257aa298 100644
--- a/src/plugins/pinDms/components/CreateCategoryModal.tsx
+++ b/src/plugins/pinDms/components/CreateCategoryModal.tsx
@@ -81,15 +81,15 @@ export function NewCategoryModal({ categoryId, modalProps, initialChannelId }: P
             {/* form is here so when you press enter while in the text input it submits */}
             <form onSubmit={onSave}>
                 <ModalContent className={cl("content")}>
-                    <Forms.FormSection>
+                    <section>
                         <Forms.FormTitle>Name</Forms.FormTitle>
                         <TextInput
                             value={name}
                             onChange={e => setName(e)}
                         />
-                    </Forms.FormSection>
+                    </section>
                     <Forms.FormDivider />
-                    <Forms.FormSection>
+                    <section>
                         <Forms.FormTitle>Color</Forms.FormTitle>
                         <ColorPickerWithSwatches
                             key={category.id}
@@ -107,7 +107,7 @@ export function NewCategoryModal({ categoryId, modalProps, initialChannelId }: P
                                 />
                             )}
                         />
-                    </Forms.FormSection>
+                    </section>
                 </ModalContent>
                 <ModalFooter>
                     <Button type="submit" onClick={onSave} disabled={!name}>{categoryId ? "Save" : "Create"}</Button>
diff --git a/src/plugins/startupTimings/StartupTimingPage.tsx b/src/plugins/startupTimings/StartupTimingPage.tsx
index b12df47ff..4e5ed166f 100644
--- a/src/plugins/startupTimings/StartupTimingPage.tsx
+++ b/src/plugins/startupTimings/StartupTimingPage.tsx
@@ -88,7 +88,8 @@ function TimingSection({ title, logs, traceEnd }: TimingSectionProps) {
     });
 
     return (
-        <Forms.FormSection title={title} tag="h1">
+        <section>
+            <Forms.FormTitle tag="h2">{title}</Forms.FormTitle>
             <code>
                 {traceEnd && (
                     <div style={{ color: "var(--header-primary)", marginBottom: 5, userSelect: "text" }}>
@@ -105,7 +106,7 @@ function TimingSection({ title, logs, traceEnd }: TimingSectionProps) {
                     ))}
                 </div>
             </code>
-        </Forms.FormSection>
+        </section>
     );
 }
 
@@ -117,7 +118,8 @@ function ServerTrace({ trace }: ServerTraceProps) {
     const lines = trace.split("\n");
 
     return (
-        <Forms.FormSection title="Server Trace" tag="h2">
+        <section>
+            <Forms.FormTitle tag="h3">Server Trace</Forms.FormTitle>
             <code>
                 <Flex flexDirection="column" style={{ color: "var(--header-primary)", gap: 5, userSelect: "text" }}>
                     {lines.map((line, idx) => (
@@ -125,7 +127,7 @@ function ServerTrace({ trace }: ServerTraceProps) {
                     ))}
                 </Flex>
             </code>
-        </Forms.FormSection>
+        </section>
     );
 }
 
diff --git a/src/plugins/vcNarrator/VoiceSetting.tsx b/src/plugins/vcNarrator/VoiceSetting.tsx
index fb5c739c2..87869c933 100644
--- a/src/plugins/vcNarrator/VoiceSetting.tsx
+++ b/src/plugins/vcNarrator/VoiceSetting.tsx
@@ -118,9 +118,9 @@ function VoiceSetting() {
 
 export function VoiceSettingSection() {
     return (
-        <Forms.FormSection>
+        <section>
             <Forms.FormTitle>Voice</Forms.FormTitle>
             <VoiceSetting />
-        </Forms.FormSection>
+        </section>
     );
 }
diff --git a/src/plugins/vcNarrator/index.tsx b/src/plugins/vcNarrator/index.tsx
index 5b7b3f82a..d52f83a0c 100644
--- a/src/plugins/vcNarrator/index.tsx
+++ b/src/plugins/vcNarrator/index.tsx
@@ -242,7 +242,7 @@ export default definePlugin({
         }
 
         return (
-            <Forms.FormSection>
+            <section>
                 <Forms.FormText>
                     You can customise the spoken messages below. You can disable specific messages by setting them to nothing
                 </Forms.FormText>
@@ -270,7 +270,7 @@ export default definePlugin({
                     </>
                 )}
                 {errorComponent}
-            </Forms.FormSection>
+            </section>
         );
     }
 });
diff --git a/src/webpack/common/components.ts b/src/webpack/common/components.ts
index c4e0ac8e9..699ba8133 100644
--- a/src/webpack/common/components.ts
+++ b/src/webpack/common/components.ts
@@ -26,13 +26,13 @@ import { waitForComponent } from "./internal";
 
 
 const FormTitle = waitForComponent<t.FormTitle>("FormTitle", filters.componentByCode('["defaultMargin".concat', '="h5"'));
-const FormSection = waitForComponent<t.FormSection>("FormSection", filters.componentByCode(".titleId)"));
 const FormDivider = waitForComponent<t.FormDivider>("FormDivider", filters.componentByCode(".divider,", ",style:", '"div"', /\.divider,\i\),style:/));
 
 export const Forms = {
     FormTitle,
     FormText,
-    FormSection,
+    /** @deprecated don't use this */
+    FormSection: "section" as never, // Backwards compat since Vesktop uses this
     FormDivider
 };
 
@@ -57,8 +57,8 @@ export const TextInput = waitForComponent<t.TextInput>("TextInput", filters.comp
 export const TextArea = waitForComponent<t.TextArea>("TextArea", filters.componentByCode("this.getPaddingRight()},id:"));
 export const Text = waitForComponent<t.Text>("Text", filters.componentByCode('case"always-white"'));
 export const Heading = waitForComponent<t.Heading>("Heading", filters.componentByCode(">6?{", "variant:"));
-export const Select = waitForComponent<t.Select>("Select", filters.componentByCode('="bottom",', ".select,", '"Escape"==='));
-export const SearchableSelect = waitForComponent<t.SearchableSelect>("SearchableSelect", filters.componentByCode(".setSelectionRange(", ".multi]:"));
+export const Select = waitForComponent<t.Select>("Select", filters.componentByCode('"Select"', ".newOptionLabel"));
+export const SearchableSelect = waitForComponent<t.SearchableSelect>("SearchableSelect", filters.componentByCode(".searchableSelect"));
 export const Slider = waitForComponent<t.Slider>("Slider", filters.componentByCode('"markDash".concat('));
 export const Popout = waitForComponent<t.Popout>("Popout", filters.componentByCode("ref:this.ref,", "renderPopout:this.renderPopout,"));
 export const Dialog = waitForComponent<t.Dialog>("Dialog", filters.componentByCode('role:"dialog",tabIndex:-1'));