Clean up all finds; Make common components NoopComponents by default

I went through every single find and made sure every component find is using the proper method

src/api/Notices.ts

@@ -18,7 +18,7 @@
 
 import { find } from "@webpack";
 
-const NoticesModule = find(m => m.show && m.dismiss && !m.suppressAll, m => m);
+const NoticesModule = find(m => m.show && m.dismiss && !m.suppressAll);
 
 export const noticesQueue = [] as any[];
 export let currentNotice: any = null;

src/components/VencordSettings/ThemesTab.tsx

@@ -29,7 +29,7 @@ import { classes } from "@utils/misc";
 import { openModal } from "@utils/modal";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { find, findComponent } from "@webpack";
+import { findByProps, findComponent } from "@webpack";
 import { Button, Card, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
 import type { Ref, SyntheticEvent } from "react";
 
@@ -44,7 +44,7 @@ type FileInputProps = {
 };
 
 const FileInput = findComponent<FileInputProps>(m => m.prototype?.activateUploadDialogue && m.prototype.setRef);
-const TextAreaProps = find(m => typeof m.textarea === "string");
+const TextAreaProps = findByProps("textarea");
 
 const cl = classNameFactory("vc-settings-theme-");
 

src/plugins/anonymiseFileNames/index.tsx

@@ -21,11 +21,11 @@ import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByCode, findByProps } from "@webpack";
+import { findByProps, findComponentByCode } from "@webpack";
 
 type AnonUpload = Upload & { anonymise?: boolean; };
 
-const ActionBarIcon = findByCode(".actionBarIcon)");
+const ActionBarIcon = findComponentByCode(".actionBarIcon)");
 const UploadDraft = findByProps("popFirstFile", "update");
 
 const enum Methods {

src/plugins/decor/ui/components/DecorSection.tsx

@@ -5,7 +5,7 @@
  */
 
 import { Flex } from "@components/Flex";
-import { findByCode } from "@webpack";
+import { findComponentByCode } from "@webpack";
 import { Button, useEffect } from "@webpack/common";
 
 import { useAuthorizationStore } from "../../lib/stores/AuthorizationStore";
@@ -13,7 +13,7 @@ import { useCurrentUserDecorationsStore } from "../../lib/stores/CurrentUserDeco
 import { cl } from "../";
 import { openChangeDecorationModal } from "../modals/ChangeDecorationModal";
 
-const CustomizationSection = findByCode(".customizationSectionBackground");
+const CustomizationSection = findComponentByCode(".customizationSectionBackground");
 
 interface DecorSectionProps {
     hideTitle?: boolean;

src/plugins/decor/ui/components/index.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { NoopComponent } from "@utils/react";
 import { filters, findComponent } from "@webpack";
 import { React } from "@webpack/common";
 import type { ComponentType, HTMLProps, PropsWithChildren } from "react";
@@ -15,7 +16,7 @@ type DecorationGridItemComponent = ComponentType<PropsWithChildren<HTMLProps<HTM
     isSelected: boolean,
 }>;
 
-export let DecorationGridItem: DecorationGridItemComponent;
+export let DecorationGridItem: DecorationGridItemComponent = NoopComponent;
 export const setDecorationGridItem = v => DecorationGridItem = v;
 
 export const AvatarDecorationModalPreview = findComponent(filters.componentByCode(".shopPreviewBanner"), component => {
@@ -28,5 +29,5 @@ type DecorationGridDecorationComponent = React.ComponentType<HTMLProps<HTMLDivEl
     isSelected: boolean,
 }>;
 
-export let DecorationGridDecoration: DecorationGridDecorationComponent;
+export let DecorationGridDecoration: DecorationGridDecorationComponent = NoopComponent;
 export const setDecorationGridDecoration = v => DecorationGridDecoration = v;

src/plugins/moreUserTags/index.tsx

@@ -21,19 +21,17 @@ import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
-import { find, findByProps } from "@webpack";
-import { Card, ChannelStore, Forms, GuildStore, PermissionsBits, Switch, TextInput, Tooltip, useState } from "@webpack/common";
+import { findByProps, findComponentByCode } from "@webpack";
+import { Card, ChannelStore, Forms, GuildStore, PermissionsBits, Switch, TextInput, Tooltip, useState, UtilTypes } from "@webpack/common";
 import { Channel, Message, User } from "discord-types/general";
 
-type PermissionName = "CREATE_INSTANT_INVITE" | "KICK_MEMBERS" | "BAN_MEMBERS" | "ADMINISTRATOR" | "MANAGE_CHANNELS" | "MANAGE_GUILD" | "CHANGE_NICKNAME" | "MANAGE_NICKNAMES" | "MANAGE_ROLES" | "MANAGE_WEBHOOKS" | "MANAGE_GUILD_EXPRESSIONS" | "CREATE_GUILD_EXPRESSIONS" | "VIEW_AUDIT_LOG" | "VIEW_CHANNEL" | "VIEW_GUILD_ANALYTICS" | "VIEW_CREATOR_MONETIZATION_ANALYTICS" | "MODERATE_MEMBERS" | "SEND_MESSAGES" | "SEND_TTS_MESSAGES" | "MANAGE_MESSAGES" | "EMBED_LINKS" | "ATTACH_FILES" | "READ_MESSAGE_HISTORY" | "MENTION_EVERYONE" | "USE_EXTERNAL_EMOJIS" | "ADD_REACTIONS" | "USE_APPLICATION_COMMANDS" | "MANAGE_THREADS" | "CREATE_PUBLIC_THREADS" | "CREATE_PRIVATE_THREADS" | "USE_EXTERNAL_STICKERS" | "SEND_MESSAGES_IN_THREADS" | "CONNECT" | "SPEAK" | "MUTE_MEMBERS" | "DEAFEN_MEMBERS" | "MOVE_MEMBERS" | "USE_VAD" | "PRIORITY_SPEAKER" | "STREAM" | "USE_EMBEDDED_ACTIVITIES" | "USE_SOUNDBOARD" | "USE_EXTERNAL_SOUNDS" | "REQUEST_TO_SPEAK" | "MANAGE_EVENTS" | "CREATE_EVENTS";
-
 interface Tag {
     // name used for identifying, must be alphanumeric + underscores
     name: string;
     // name shown on the tag itself, can be anything probably; automatically uppercase'd
     displayName: string;
     description: string;
-    permissions?: PermissionName[];
+    permissions?: UtilTypes.Permissions[];
     condition?(message: Message | null, user: User, channel: Channel): boolean;
 }
 
@@ -57,7 +55,7 @@ const PermissionUtil = findByProps("computePermissions", "canEveryoneRole") as {
     computePermissions({ ...args }): bigint;
 };
 
-const Tag = find(m => m.Types?.[0] === "BOT") as React.ComponentType<{ type?: number, className?: string, useRemSizes?: boolean; }> & { Types: Record<string, number>; };
+const Tag = findComponentByCode(".DISCORD_SYSTEM_MESSAGE_BOT_TAG_TOOLTIP,") as React.ComponentType<{ type?: number, className?: string, useRemSizes?: boolean; }> & { Types: Record<string, number>; };
 
 const isWebhook = (message: Message, user: User) => !!message?.webhookId && user.isNonUserBot();
 

src/plugins/pauseInvitesForever/index.tsx

@@ -19,9 +19,8 @@
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { findByProps } from "@webpack";
-import { GuildStore, RestAPI } from "@webpack/common";
+import { GuildStore, i18n, RestAPI } from "@webpack/common";
 
-const Messages = findByProps("GUILD_INVITE_DISABLE_ACTION_SHEET_DESCRIPTION");
 const { InvitesDisabledExperiment } = findByProps("InvitesDisabledExperiment");
 
 export default definePlugin({
@@ -63,7 +62,7 @@ export default definePlugin({
     renderInvitesLabel(guildId: string, setChecked: Function) {
         return (
             <div>
-                {Messages.GUILD_INVITE_DISABLE_ACTION_SHEET_DESCRIPTION}
+                {i18n.Messages.GUILD_INVITE_DISABLE_ACTION_SHEET_DESCRIPTION}
                 {this.showDisableInvites(guildId) && <a role="button" onClick={() => {
                     setChecked(true);
                     this.disableInvites(guildId);

src/plugins/reviewDB/auth.tsx

@@ -7,14 +7,14 @@
 import { DataStore } from "@api/index";
 import { Logger } from "@utils/Logger";
 import { openModal } from "@utils/modal";
-import { findByProps } from "@webpack";
+import { findExportedComponent } from "@webpack";
 import { showToast, Toasts, UserStore } from "@webpack/common";
 
 import { ReviewDBAuth } from "./entities";
 
 const DATA_STORE_KEY = "rdb-auth";
 
-const { OAuth2AuthorizeModal } = findByProps("OAuth2AuthorizeModal");
+const OAuth2AuthorizeModal = findExportedComponent("OAuth2AuthorizeModal");
 
 export let Auth: ReviewDBAuth = {};
 

src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx

@@ -19,7 +19,7 @@
 import { Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { formatDuration } from "@utils/text";
-import { findByProps, findComponent, findComponentByCode } from "@webpack";
+import { findByProps, findComponentByCode } from "@webpack";
 import { EmojiStore, FluxDispatcher, GuildMemberStore, GuildStore, Parser, PermissionsBits, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip, useEffect, useState } from "@webpack/common";
 import type { Channel } from "discord-types/general";
 
@@ -81,13 +81,7 @@ const enum ChannelFlags {
 const ChatScrollClasses = findByProps("auto", "content", "scrollerBase");
 const ChatClasses = findByProps("chat", "content", "noChat", "chatContent");
 const ChannelBeginHeader = findComponentByCode(".Messages.ROLE_REQUIRED_SINGLE_USER_MESSAGE");
-const TagComponent = findComponent(m => {
-    if (typeof m !== "function") return false;
-
-    const code = Function.prototype.toString.call(m);
-    // Get the component which doesn't include increasedActivity
-    return code.includes(".Messages.FORUM_TAG_A11Y_FILTER_BY_TAG") && !code.includes("increasedActivityPill");
-});
+const TagComponent = findComponentByCode(".Messages.FORUM_TAG_A11Y_FILTER_BY_TAG");
 
 const EmojiParser = findByProps("convertSurrogateToName");
 const EmojiUtils = findByProps("getURL", "getEmojiColors");

src/plugins/userVoiceShow/components/VoiceChannelSection.tsx

@@ -18,12 +18,12 @@
 
 import "./VoiceChannelSection.css";
 
-import { findByCode, findByProps } from "@webpack";
+import { findByProps, findComponentByCode } from "@webpack";
 import { Button, Forms, PermissionStore, Toasts } from "@webpack/common";
 import { Channel } from "discord-types/general";
 
 const ChannelActions = findByProps("selectChannel", "selectVoiceChannel");
-const UserPopoutSection = findByCode(".lastSection", "children:");
+const UserPopoutSection = findComponentByCode(".lastSection", "children:");
 
 const CONNECT = 1n << 20n;
 

src/utils/modal.tsx

@@ -19,6 +19,8 @@
 import { filters, find, findByProps, findExportedComponent } from "@webpack";
 import type { ComponentType, PropsWithChildren, ReactNode, Ref } from "react";
 
+import { NoopComponent } from "./react";
+
 export const enum ModalSize {
     SMALL = "small",
     MEDIUM = "medium",
@@ -100,11 +102,11 @@ type Modals = {
 };
 
 
-export let ModalRoot: Modals["ModalRoot"];
-export let ModalHeader: Modals["ModalHeader"];
-export let ModalContent: Modals["ModalContent"];
-export let ModalFooter: Modals["ModalFooter"];
-export let ModalCloseButton: Modals["ModalCloseButton"];
+export let ModalRoot: Modals["ModalRoot"] = NoopComponent;
+export let ModalHeader: Modals["ModalHeader"] = NoopComponent;
+export let ModalContent: Modals["ModalContent"] = NoopComponent;
+export let ModalFooter: Modals["ModalFooter"] = NoopComponent;
+export let ModalCloseButton: Modals["ModalCloseButton"] = NoopComponent;
 
 export const Modals = find<Modals>(filters.byProps("ModalRoot", "ModalCloseButton"), m => {
     ({ ModalRoot, ModalHeader, ModalContent, ModalFooter, ModalCloseButton } = m);

src/webpack/common/components.ts

@@ -16,30 +16,32 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { NoopComponent } from "@utils/react";
+
 // eslint-disable-next-line path-alias/no-relative
 import { filters, find, findComponent, findExportedComponent } from "../webpack";
 import * as t from "./types/components";
 
-export let Card: t.Card;
-export let Button: t.Button;
-export let Switch: t.Switch;
-export let Tooltip: t.Tooltip;
-export let TextInput: t.TextInput;
-export let TextArea: t.TextArea;
-export let Text: t.Text;
-export let Heading: t.Heading;
-export let Select: t.Select;
-export let SearchableSelect: t.SearchableSelect;
-export let Slider: t.Slider;
+export let Card: t.Card = NoopComponent as any;
+export let Button: t.Button = NoopComponent as any;
+export let Switch: t.Switch = NoopComponent;
+export let Tooltip: t.Tooltip = NoopComponent as any;
+export let TextInput: t.TextInput = NoopComponent as any;
+export let TextArea: t.TextArea = NoopComponent;
+export let Text: t.Text = NoopComponent;
+export let Heading: t.Heading = NoopComponent;
+export let Select: t.Select = NoopComponent;
+export let SearchableSelect: t.SearchableSelect = NoopComponent;
+export let Slider: t.Slider = NoopComponent;
 export let ButtonLooks: t.ButtonLooks;
-export let Popout: t.Popout;
-export let Dialog: t.Dialog;
-export let TabBar: any;
-export let Paginator: t.Paginator;
-export let ScrollerThin: t.ScrollerThin;
-export let Clickable: t.Clickable;
-export let Avatar: t.Avatar;
-export let FocusLock: t.FocusLock;
+export let Popout: t.Popout = NoopComponent as any;
+export let Dialog: t.Dialog = NoopComponent;
+export let TabBar: t.TabBar = NoopComponent as any;
+export let Paginator: t.Paginator = NoopComponent;
+export let ScrollerThin: t.ScrollerThin = NoopComponent;
+export let Clickable: t.Clickable = NoopComponent;
+export let Avatar: t.Avatar = NoopComponent;
+export let FocusLock: t.FocusLock = NoopComponent;
 // token lagger real
 /** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */
 export let useToken: t.useToken;

src/webpack/common/stores.ts

@@ -37,7 +37,7 @@ export const MessageStore = findStore("MessageStore") as Omit<Stores.MessageStor
     getMessages(chanId: string): any;
 };
 
-// this is not actually a FluxStore
+// This is not actually a FluxStore
 export const PrivateChannelsStore = findByProps("openPrivateChannel");
 export const PermissionStore = findStore<GenericStore>("PermissionStore");
 export const GuildChannelStore = findStore<GenericStore>("GuildChannelStore");

src/webpack/common/types/components.d.ts

@@ -377,6 +377,13 @@ export type Popout = ComponentType<{
 
 export type Dialog = ComponentType<PropsWithChildren<any>>;
 
+export type TabBar = ComponentType<PropsWithChildren<any>> & {
+    Header: ComponentType<PropsWithChildren<any>>;
+    Item: ComponentType<PropsWithChildren<any>>;
+    Separator: ComponentType<PropsWithChildren<any>>;
+    Panel: ComponentType<PropsWithChildren<any>>;
+};
+
 type Resolve = (data: { theme: "light" | "dark", saturation: number; }) => {
     hex(): string;
     hsl(): string;

src/webpack/common/utils.ts

@@ -35,7 +35,7 @@ export const FluxDispatcher = find<t.FluxDispatcher>(filters.byProps("dispatch",
     return m;
 });
 
-export const { ComponentDispatch } = findByProps("ComponentDispatch", "ComponentDispatcher");
+export const ComponentDispatch = find(filters.byProps("ComponentDispatch", "ComponentDispatcher"), m => m.ComponentDispatch);
 
 export const Constants = findByProps("Endpoints");
 
@@ -123,12 +123,12 @@ export const NavigationRouter = findByProps<t.NavigationRouter>("transitionTo",
 
 export const SettingsRouter = findByProps("open", "saveAccountChanges");
 
-export const { Permissions: PermissionsBits } = find(m => typeof m.Permissions?.ADMINISTRATOR === "bigint") as { Permissions: t.PermissionsBits; };
+export const PermissionsBits = find<t.PermissionsBits>(m => typeof m.Permissions?.ADMINISTRATOR === "bigint", m => m.Permissions);
 
 export const zustandCreate = findByCode<typeof import("zustand").default>("will be removed in v4");
 
 const persistFilter = filters.byCode("[zustand persist middleware]");
-export const { persist: zustandPersist } = find<typeof import("zustand/middleware")>(m => m.persist && persistFilter(m.persist));
+export const zustandPersist = find<typeof import("zustand/middleware").persist>(m => m.persist && persistFilter(m.persist), m => m.persist);
 
 export const MessageActions = findByProps("editMessage", "sendMessage");
 export const UserProfileActions = findByProps("openUserProfileModal", "closeUserProfileModal");