fix Settings UI and various plugins (#3608)

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

packages/discord-types/src/components.d.ts

@@ -43,12 +43,7 @@ export type FormDivider = ComponentType<{
 }>;
 
 
-export type FormText = ComponentType<PropsWithChildren<{
-    disabled?: boolean;
-    selectable?: boolean;
-    /** defaults to FormText.Types.DEFAULT */
-    type?: string;
-}> & TextProps> & { Types: FormTextTypes; };
+export type FormText = ComponentType<TextProps>;
 
 export type Tooltip = ComponentType<{
     text: ReactNode | ComponentType;

src/plugins/betterSettings/index.tsx

@@ -123,8 +123,8 @@ export default definePlugin({
             find: "#{intl::USER_SETTINGS_ACTIONS_MENU_LABEL}",
             replacement: [
                 {
-                    match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
-                    replace: "$1$self.wrapMenu($2)"
+                    match: /(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
+                    replace: "$self.wrapMenu($1)"
                 },
                 {
                     match: /case \i\.\i\.DEVELOPER_OPTIONS:return \i;/,

src/plugins/consoleJanitor/index.tsx

@@ -60,7 +60,7 @@ const AllowLevelSettings = ErrorBoundary.wrap(() => {
     return (
         <Forms.FormSection>
             <Forms.FormTitle tag="h3">Filter List</Forms.FormTitle>
-            <Forms.FormText className={Margins.bottom8} type={Forms.FormText.Types.DESCRIPTION}>Always allow loggers of these types</Forms.FormText>
+            <Forms.FormText className={Margins.bottom8}>Always allow loggers of these types</Forms.FormText>
             <Flex flexDirection="row">
                 {Object.keys(settings.store.allowLevel).map(key => (
                     <AllowLevelSetting key={key} settingKey={key as keyof AllowLevels} />

src/plugins/decor/settings.tsx

@@ -24,7 +24,7 @@ export const settings = definePluginSettings({
 
             return <div>
                 <DecorSection hideTitle hideDivider noMargin />
-                <Forms.FormText type="description" className={classes(Margins.top8, Margins.bottom8)}>
+                <Forms.FormText className={classes(Margins.top8, Margins.bottom8)}>
                     You can also access Decor decorations from the <Link
                         href="/settings/profile-customization"
                         onClick={e => {

src/plugins/decor/ui/modals/ChangeDecorationModal.tsx

@@ -83,7 +83,7 @@ function SectionHeader({ section }: SectionHeaderProps) {
             />}
         </Flex>
         {hasSubtitle &&
-            <Forms.FormText type="description" className={Margins.bottom8}>
+            <Forms.FormText className={Margins.bottom8}>
                 {section.subtitle}
             </Forms.FormText>
         }

src/plugins/decor/ui/modals/CreateDecorationModal.tsx

@@ -97,7 +97,7 @@ function CreateDecorationModal(props: ModalProps) {
                                 filters={[{ name: "Decoration file", extensions: ["png", "apng"] }]}
                                 onFileSelect={setFile}
                             />
-                            <Forms.FormText type="description" className={Margins.top8}>
+                            <Forms.FormText className={Margins.top8}>
                                 File should be APNG or PNG.
                             </Forms.FormText>
                         </Forms.FormSection>
@@ -107,7 +107,7 @@ function CreateDecorationModal(props: ModalProps) {
                                 value={name}
                                 onChange={setName}
                             />
-                            <Forms.FormText type="description" className={Margins.top8}>
+                            <Forms.FormText className={Margins.top8}>
                                 This name will be used when referring to this decoration.
                             </Forms.FormText>
                         </Forms.FormSection>

src/plugins/fakeNitro/index.tsx

@@ -800,7 +800,7 @@ export default definePlugin({
                             however you do not have permissions to embed links in the current channel.
                             Are you sure you want to send this message? Your FakeNitro items will appear as a link only.
                         </Forms.FormText>
-                        <Forms.FormText type={Forms.FormText.Types.DESCRIPTION}>
+                        <Forms.FormText>
                             You can disable this notice in the plugin settings.
                         </Forms.FormText>
                     </div>,

src/plugins/ignoreActivities/index.tsx

@@ -82,7 +82,7 @@ function recalculateActivities() {
 function ImportCustomRPCComponent() {
     return (
         <Flex flexDirection="column">
-            <Forms.FormText type={Forms.FormText.Types.DESCRIPTION}>Import the application id of the CustomRPC plugin to the filter list</Forms.FormText>
+            <Forms.FormText>Import the application id of the CustomRPC plugin to the filter list</Forms.FormText>
             <div>
                 <Button
                     onClick={() => {
@@ -133,7 +133,7 @@ function IdsListComponent(props: { setValue: (value: string) => void; }) {
     return (
         <Forms.FormSection>
             <Forms.FormTitle tag="h3">Filter List</Forms.FormTitle>
-            <Forms.FormText className={Margins.bottom8} type={Forms.FormText.Types.DESCRIPTION}>Comma separated list of activity IDs to filter (Useful for filtering specific RPC activities and CustomRPC</Forms.FormText>
+            <Forms.FormText className={Margins.bottom8}>Comma separated list of activity IDs to filter (Useful for filtering specific RPC activities and CustomRPC</Forms.FormText>
             <TextInput
                 type="text"
                 value={idsList}

src/plugins/showHiddenChannels/index.tsx

@@ -200,7 +200,7 @@ export default definePlugin({
         },
         {
             // Hide the new version of unreads box for hidden channels
-            find: '="ChannelListUnreadsStore",',
+            find: '"ChannelListUnreadsStore",',
             replacement: {
                 match: /(?<=\.id\)\))(?=&&\(0,\i\.\i\)\((\i)\))/,
                 replace: (_, channel) => `&&!$self.isHiddenChannel(${channel})`

src/webpack/common/FormText.tsx

@@ -0,0 +1,25 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import * as t from "@vencord/discord-types";
+
+import { Text } from "./components";
+
+// TODO: replace with our own component soon
+export const FormText: t.FormText = function FormText(props) {
+    const variant = props.variant || "text-sm/normal";
+    return (
+        <Text
+            variant={variant}
+            {...props}
+        >
+            {props.children}
+        </Text>
+    );
+} as any;
+
+// @ts-expect-error
+FormText.Types = {};

src/webpack/common/components.ts

@@ -20,11 +20,11 @@ import { LazyComponent } from "@utils/lazyReact";
 import * as t from "@vencord/discord-types";
 import { filters, mapMangledModuleLazy, waitFor } from "@webpack";
 
+import { FormText } from "./FormText";
 import { waitForComponent } from "./internal";
 
 
 const FormTitle = waitForComponent<t.FormTitle>("FormTitle", filters.componentByCode('["defaultMargin".concat', '="h5"'));
-const FormText = waitForComponent<t.FormText>("FormText", filters.componentByCode(".SELECTABLE),", ".DISABLED:"));
 const FormSection = waitForComponent<t.FormSection>("FormSection", filters.componentByCode(".titleId)"));
 const FormDivider = waitForComponent<t.FormDivider>("FormDivider", filters.componentByCode(".divider,", ",style:", '"div"', /\.divider,\i\),style:/));
 

src/webpack/common/utils.ts

@@ -203,6 +203,6 @@ export const DisplayProfileUtils: t.DisplayProfileUtils = mapMangledModuleLazy(/
 export const DateUtils: t.DateUtils = mapMangledModuleLazy("millisecondsInUnit:", {
     calendarFormat: filters.byCode("sameElse"),
     dateFormat: filters.byCode('":'),
-    isSameDay: filters.byCode("Math.abs(+"),
+    isSameDay: filters.byCode(/Math\.abs\(\i-\i\)/),
     diffAsUnits: filters.byCode("days:0", "millisecondsInUnit")
 });