Merge 7274df130d into a015cf96f6

src/components/PluginSettings/index.tsx

@@ -292,10 +292,10 @@ export default function PluginSettings() {
 
         if (!pluginFilter(p)) continue;
 
-        const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
+        const isRequired = p.required || p.isDependency || depMap[p.name]?.some(d => settings.plugins[d].enabled);
 
         if (isRequired) {
-            const tooltipText = p.required
+            const tooltipText = p.required || !depMap[p.name]
                 ? "This plugin is required for Vencord to function."
                 : makeDependencyList(depMap[p.name]?.filter(d => settings.plugins[d].enabled));
 

src/plugins/_core/supportHelper.tsx

@@ -142,7 +142,7 @@ export default definePlugin({
     required: true,
     description: "Helps us provide support to you",
     authors: [Devs.Ven],
-    dependencies: ["CommandsAPI", "UserSettingsAPI", "MessageAccessoriesAPI"],
+    dependencies: ["UserSettingsAPI", "MessageAccessoriesAPI"],
 
     settings,
 

src/plugins/friendInvites/index.ts

@@ -27,7 +27,6 @@ export default definePlugin({
     name: "FriendInvites",
     description: "Create and manage friend invite links via slash commands (/create friend invite, /view friend invites, /revoke friend invites).",
     authors: [Devs.afn, Devs.Dziurwa],
-    dependencies: ["CommandsAPI"],
     commands: [
         {
             name: "create friend invite",

src/plugins/fullSearchContext/README.md

@@ -0,0 +1,5 @@
+# FullSearchContext
+
+Makes the message context menu in message search results have all options you'd expect.
+
+![](https://github.com/user-attachments/assets/472d1327-3935-44c7-b7c4-0978b5348550)

src/plugins/fullSearchContext/index.tsx

@@ -0,0 +1,82 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { migratePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { findByPropsLazy } from "@webpack";
+import { ChannelStore, ContextMenuApi, i18n, UserStore } from "@webpack/common";
+import { Message } from "discord-types/general";
+import type { MouseEvent } from "react";
+
+const { useMessageMenu } = findByPropsLazy("useMessageMenu");
+
+function MessageMenu({ message, channel, onHeightUpdate }) {
+    const canReport = message.author &&
+        !(message.author.id === UserStore.getCurrentUser().id || message.author.system);
+
+    return useMessageMenu({
+        navId: "message-actions",
+        ariaLabel: i18n.Messages.MESSAGE_UTILITIES_A11Y_LABEL,
+
+        message,
+        channel,
+        canReport,
+        onHeightUpdate,
+        onClose: () => ContextMenuApi.closeContextMenu(),
+
+        textSelection: "",
+        favoriteableType: null,
+        favoriteableId: null,
+        favoriteableName: null,
+        itemHref: void 0,
+        itemSrc: void 0,
+        itemSafeSrc: void 0,
+        itemTextContent: void 0,
+    });
+}
+
+migratePluginSettings("FullSearchContext", "SearchReply");
+export default definePlugin({
+    name: "FullSearchContext",
+    description: "Makes the message context menu in message search results have all options you'd expect",
+    authors: [Devs.Ven, Devs.Aria],
+
+    patches: [{
+        find: "onClick:this.handleMessageClick,",
+        replacement: {
+            match: /this(?=\.handleContextMenu\(\i,\i\))/,
+            replace: "$self"
+        }
+    }],
+
+    handleContextMenu(event: MouseEvent, message: Message) {
+        const channel = ChannelStore.getChannel(message.channel_id);
+        if (!channel) return;
+
+        event.stopPropagation();
+
+        ContextMenuApi.openContextMenu(event, contextMenuProps =>
+            <MessageMenu
+                message={message}
+                channel={channel}
+                onHeightUpdate={contextMenuProps.onHeightUpdate}
+            />
+        );
+    }
+});

src/plugins/index.ts

@@ -105,6 +105,11 @@ for (const p of pluginsValues) if (isPluginEnabled(p.name)) {
         settings[d].enabled = true;
         dep.isDependency = true;
     });
+
+    if (p.commands?.length) {
+        Plugins.CommandsAPI.isDependency = true;
+        settings.CommandsAPI.enabled = true;
+    }
 }
 
 for (const p of pluginsValues) {

src/plugins/messageTags/index.ts

@@ -82,7 +82,6 @@ export default definePlugin({
             default: true
         }
     },
-    dependencies: ["CommandsAPI"],
 
     async start() {
         for (const tag of await getTags()) createTagCommand(tag);

src/plugins/moreCommands/index.ts

@@ -33,7 +33,6 @@ export default definePlugin({
     name: "MoreCommands",
     description: "echo, lenny, mock",
     authors: [Devs.Arjix, Devs.echo, Devs.Samu],
-    dependencies: ["CommandsAPI"],
     commands: [
         {
             name: "echo",

src/plugins/moreKaomoji/index.ts

@@ -24,7 +24,6 @@ export default definePlugin({
     name: "MoreKaomoji",
     description: "Adds more Kaomoji to discord. ヽ(´▽`)/",
     authors: [Devs.JacobTm],
-    dependencies: ["CommandsAPI"],
     commands: [
         { name: "dissatisfaction", description: " ＞﹏＜" },
         { name: "smug", description: "ಠ_ಠ" },

src/plugins/passwordProtect/README.md

@@ -0,0 +1,5 @@
+# PasswordProtect
+
+Allows you to password protect your dms and channels!
+
+![A popup warning you that a channel is password protected](https://github.com/Vendicated/Vencord/assets/44179559/2424085e-3090-4310-9d56-62667941c57c)

src/plugins/passwordProtect/components/accessModal.tsx

@@ -0,0 +1,22 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openModalLazy } from "@utils/modal";
+
+import { checkPassword } from "../data";
+import { ModalType, PasswordModal } from "./modal";
+
+export async function openAccessModal(channelId: string, cb: (success: boolean) => void) {
+    await openModalLazy(async () => {
+        return modalProps => <PasswordModal modalProps={modalProps} channelId={channelId} type={ModalType.Access} callback={async password => {
+            if (password) {
+                cb(await checkPassword(password, channelId));
+            } else {
+                cb(false);
+            }
+        }} />;
+    });
+}

src/plugins/passwordProtect/components/contextMenus.tsx

@@ -0,0 +1,71 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
+import { Menu } from "@webpack/common";
+
+import { isPasswordProtected } from "../data";
+import { openLockModal } from "./lockModal";
+import { openUnlockModal } from "./unlockModal";
+
+function createPasswordItem(channelId: string) {
+    const isProtected = isPasswordProtected(channelId);
+
+    return (
+        <Menu.MenuItem
+            id="password-protect"
+            label="Password Protect"
+        >
+            {!isProtected && (
+                <>
+                    <Menu.MenuItem
+                        id="vc-password-protect-lock"
+                        label="Lock"
+                        color="brand"
+                        action={() => openLockModal(channelId)}
+                    />
+                </>
+            )}
+
+            {isProtected && (
+                <>
+                    <Menu.MenuItem
+                        id="vc-password-protect-unlock"
+                        label="Unlock"
+                        color="danger"
+                        action={() => openUnlockModal(channelId)}
+                    />
+                </>
+            )}
+
+        </Menu.MenuItem>
+    );
+}
+
+const GroupDMContext: NavContextMenuPatchCallback = (children, props) => {
+    const container = findGroupChildrenByChildId("leave-channel", children);
+    container?.unshift(createPasswordItem(props.channel.id));
+};
+
+const UserContext: NavContextMenuPatchCallback = (children, props) => {
+    const container = findGroupChildrenByChildId("close-dm", children);
+    if (container) {
+        const idx = container.findIndex(c => c?.props?.id === "close-dm");
+        container.splice(idx, 0, createPasswordItem(props.channel.id));
+    }
+};
+
+const ChannelContect: NavContextMenuPatchCallback = (children, props) => {
+    const container = findGroupChildrenByChildId(["mute-channel", "unmute-channel"], children);
+    container?.unshift(createPasswordItem(props.channel.id));
+};
+
+
+export const contextMenus = {
+    "gdm-context": GroupDMContext,
+    "user-context": UserContext,
+    "channel-context": ChannelContect
+};

src/plugins/passwordProtect/components/lockModal.tsx

@@ -0,0 +1,24 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openModalLazy } from "@utils/modal";
+
+import { setPassword } from "../data";
+import { isChannelCurrent, reloadChannel } from "../utils";
+import { ModalType, PasswordModal } from "./modal";
+
+export async function openLockModal(channelId: string) {
+    await openModalLazy(async () => {
+        return modalProps => <PasswordModal modalProps={modalProps} channelId={channelId} type={ModalType.Lock} callback={password => {
+            if (password) {
+                setPassword(channelId, password);
+                if (isChannelCurrent(channelId)) {
+                    reloadChannel();
+                }
+            }
+        }} />;
+    });
+}

src/plugins/passwordProtect/components/modal.tsx

@@ -0,0 +1,91 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { classNameFactory } from "@api/Styles";
+import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
+import { Button, Forms, Text, TextInput, useEffect, useState } from "@webpack/common";
+
+import { checkPassword } from "../data";
+
+export enum ModalType {
+    Lock = "Lock",
+    Unlock = "Unlock",
+    Access = "Access"
+}
+
+interface Props {
+    channelId: string;
+    type: ModalType;
+    callback: (password?: string) => void;
+    modalProps: ModalProps;
+}
+
+const cl = classNameFactory("vc-password-modal-");
+
+export function PasswordModal({ channelId, type, callback, modalProps }: Props) {
+
+    const [password, setPassword] = useState("");
+    const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
+    const [error, setError] = useState("");
+
+    useEffect(() => {
+        (async () => {
+            if (password !== confirmPasswordValue && [ModalType.Lock, ModalType.Unlock].includes(type)) {
+                setError("Passwords do not match");
+            } else if (password === "") {
+                setError("Please enter a password");
+            }
+            else if (type !== ModalType.Lock && !(await checkPassword(password, channelId))) {
+                setError("Incorrect Password");
+            } else {
+                setError("");
+            }
+        })();
+    }, [password, confirmPasswordValue]);
+
+    const onSubmit = async (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        if (error) return callback();
+        modalProps.onClose();
+        callback(password);
+    };
+    return (
+        <ModalRoot {...modalProps}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{type}</Text>
+            </ModalHeader>
+
+            {/* form is here so when you press enter while in the text input it submits */}
+            <form onSubmit={onSubmit}>
+                <ModalContent className={cl("content")}>
+                    <Forms.FormSection>
+                        <Forms.FormTitle>Password</Forms.FormTitle>
+                        <TextInput
+                            type="password"
+                            value={password}
+                            onChange={e => setPassword(e)}
+                        />
+                    </Forms.FormSection>
+                    {[ModalType.Lock, ModalType.Unlock].includes(type) && (
+                        <Forms.FormSection>
+                            <Forms.FormTitle>Confirm Password</Forms.FormTitle>
+                            <TextInput
+                                type="password"
+                                value={confirmPasswordValue}
+                                onChange={e => setConfirmPasswordValue(e)}
+                            />
+                        </Forms.FormSection>
+                    )}
+                    <Forms.FormDivider />
+                    {error && <Text color="text-danger">{error}</Text>}
+                </ModalContent>
+                <ModalFooter>
+                    <Button type="submit" onClick={onSubmit} disabled={!!error}>{type}</Button>
+                </ModalFooter>
+            </form>
+        </ModalRoot>
+    );
+}

src/plugins/passwordProtect/components/unlockModal.tsx

@@ -0,0 +1,26 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { openModalLazy } from "@utils/modal";
+
+import { checkPassword, removePassword } from "../data";
+import { isChannelCurrent, reloadChannel } from "../utils";
+import { ModalType, PasswordModal } from "./modal";
+
+export async function openUnlockModal(channelId: string) {
+    await openModalLazy(async () => {
+        return modalProps => <PasswordModal modalProps={modalProps} channelId={channelId} type={ModalType.Unlock} callback={async password => {
+            if (password) {
+                if (await checkPassword(password, channelId)) {
+                    removePassword(channelId);
+                    if (isChannelCurrent(channelId)) {
+                        reloadChannel();
+                    }
+                }
+            }
+        }} />;
+    });
+}

src/plugins/passwordProtect/data.ts

@@ -0,0 +1,60 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { DataStore } from "@api/index";
+import { Channel } from "discord-types/general";
+
+import { isChannelCurrent, reloadChannel, sha256 } from "./utils";
+
+let data: Record<string, string> = {};
+const accessedChannels: string[] = [];
+
+export async function initData() {
+    const newData = await DataStore.get("passwordProtect");
+    if (newData) {
+        data = newData;
+    }
+}
+
+export async function saveData() {
+    await DataStore.set("passwordProtect", data);
+}
+
+export function isLocked(channelId: string) {
+    if (accessedChannels.includes(channelId)) return false;
+    return isPasswordProtected(channelId);
+}
+
+export function isPasswordProtected(channelId: string) {
+    return data?.[channelId] !== undefined;
+}
+
+export function getPasswordHash(channelId: string) {
+    return data?.[channelId];
+}
+
+export async function setPassword(channelId: string, password: string) {
+    data![channelId] = await sha256(password);
+    await saveData();
+}
+
+export async function removePassword(channelId: string) {
+    delete data![channelId];
+    await saveData();
+}
+
+export async function checkPassword(input: string, channelId: string) {
+    return await sha256(input) === getPasswordHash(channelId);
+}
+
+
+export function accessChannel(channel: Channel) {
+    accessedChannels.push(channel.id);
+    if (isChannelCurrent(channel.id)) reloadChannel();
+    setTimeout(() => {
+        accessedChannels.splice(accessedChannels.indexOf(channel.id), 1);
+    }, 1000);
+}

src/plugins/passwordProtect/index.tsx

@@ -0,0 +1,84 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import { getCurrentChannel } from "@utils/discord";
+import definePlugin from "@utils/types";
+
+import { openAccessModal } from "./components/accessModal";
+import { contextMenus } from "./components/contextMenus";
+import { accessChannel, initData, isLocked, isPasswordProtected, saveData } from "./data";
+
+interface NSFWBlockProps {
+    title: string;
+    description: string;
+    agreement: string;
+    disagreement: string;
+    onAgree: () => void;
+    onDisagree: () => void;
+}
+
+export default definePlugin({
+    name: "PasswordProtect",
+    description: "Passcode protect servers, channels, and dms. WARNING: Disabling the plugin will allow anyone to open the channels!",
+    authors: [Devs.ImLvna],
+
+    contextMenus: contextMenus,
+
+    patches: [
+        {
+            find: "GuildNSFWAgreeStore",
+            replacement: {
+                match: /didAgree\((\i)\){/,
+                replace: "$&if($self.isLocked($1)) return false; if($self.isPasswordProtected($1)) return true;"
+            }
+        },
+        {
+            find: "return this.nsfw",
+            replacement: {
+                match: /return this.nsfw/,
+                replace: "if($self.isLocked(this.id)) return true;$&"
+            }
+        },
+        {
+            find: ".gatedContent,",
+            replacement: {
+                match: /this.props/,
+                replace: "$self.patchProps($&)"
+            }
+        }
+    ],
+
+    patchProps(props: NSFWBlockProps) {
+        const channel = getCurrentChannel();
+        if (!isPasswordProtected(channel.id)) return props;
+        props.title = "This channel is password protected";
+        props.description = "This channel is password protected. Please enter the password to view the content.";
+        props.agreement = "Enter password";
+        props.disagreement = "Cancel";
+        props.onAgree = () => {
+            openAccessModal(channel.id, async success => {
+                console.log(success);
+                if (success) {
+                    accessChannel(channel);
+                }
+            }
+            );
+        };
+        return props;
+    },
+
+    isLocked,
+
+    isPasswordProtected,
+
+    start() {
+        initData();
+    },
+    stop() {
+        saveData();
+    },
+});

src/plugins/passwordProtect/utils.ts

@@ -0,0 +1,26 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { getCurrentChannel } from "@utils/discord";
+import { NavigationRouter } from "@webpack/common";
+
+export async function sha256(message) {
+    const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(message));
+    const array = Array.from(new Uint8Array(buf));
+    const str = array.map(b => b.toString(16).padStart(2, "0")).join("");
+    return str;
+}
+
+export function isChannelCurrent(channelId: string) {
+    return getCurrentChannel()?.id === channelId;
+}
+
+export async function reloadChannel() {
+    const channel = getCurrentChannel();
+    NavigationRouter.transitionTo("/channels/@me");
+    await new Promise(r => setTimeout(r, 0));
+    NavigationRouter.transitionTo(`/channels/${channel.guild_id || "@me"}/${channel.id}`);
+}

src/plugins/petpet/index.ts

@@ -88,7 +88,6 @@ export default definePlugin({
     name: "petpet",
     description: "Adds a /petpet slash command to create headpet gifs from any image",
     authors: [Devs.Ven],
-    dependencies: ["CommandsAPI"],
     commands: [
         {
             inputType: ApplicationCommandInputType.BUILT_IN,

src/plugins/searchReply/README.md

@@ -1,6 +0,0 @@
-# SearchReply
-
-Adds a reply button to search results.
-
-![the plugin in action](https://github.com/Vendicated/Vencord/assets/45497981/07e741d3-0f97-4e5c-82b0-80712ecf2cbb)
-

src/plugins/searchReply/index.tsx

@@ -1,75 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2023 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
-import { ReplyIcon } from "@components/Icons";
-import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
-import { findByCodeLazy } from "@webpack";
-import { ChannelStore, i18n, Menu, PermissionsBits, PermissionStore, SelectedChannelStore } from "@webpack/common";
-import { Message } from "discord-types/general";
-
-
-const replyToMessage = findByCodeLazy(".TEXTAREA_FOCUS)", "showMentionToggle:");
-
-const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { message }: { message: Message; }) => {
-    // make sure the message is in the selected channel
-    if (SelectedChannelStore.getChannelId() !== message.channel_id) return;
-    const channel = ChannelStore.getChannel(message?.channel_id);
-    if (!channel) return;
-    if (channel.guild_id && !PermissionStore.can(PermissionsBits.SEND_MESSAGES, channel)) return;
-
-    // dms and group chats
-    const dmGroup = findGroupChildrenByChildId("pin", children);
-    if (dmGroup && !dmGroup.some(child => child?.props?.id === "reply")) {
-        const pinIndex = dmGroup.findIndex(c => c?.props.id === "pin");
-        dmGroup.splice(pinIndex + 1, 0, (
-            <Menu.MenuItem
-                id="reply"
-                label={i18n.Messages.MESSAGE_ACTION_REPLY}
-                icon={ReplyIcon}
-                action={(e: React.MouseEvent) => replyToMessage(channel, message, e)}
-            />
-        ));
-        return;
-    }
-
-    // servers
-    const serverGroup = findGroupChildrenByChildId("mark-unread", children);
-    if (serverGroup && !serverGroup.some(child => child?.props?.id === "reply")) {
-        serverGroup.unshift((
-            <Menu.MenuItem
-                id="reply"
-                label={i18n.Messages.MESSAGE_ACTION_REPLY}
-                icon={ReplyIcon}
-                action={(e: React.MouseEvent) => replyToMessage(channel, message, e)}
-            />
-        ));
-        return;
-    }
-};
-
-
-export default definePlugin({
-    name: "SearchReply",
-    description: "Adds a reply button to search results",
-    authors: [Devs.Aria],
-    contextMenus: {
-        "message": messageContextMenuPatch
-    }
-});

src/plugins/silentTyping/index.tsx

@@ -88,7 +88,7 @@ export default definePlugin({
     name: "SilentTyping",
     authors: [Devs.Ven, Devs.Rini, Devs.ImBanana],
     description: "Hide that you are typing",
-    dependencies: ["CommandsAPI", "ChatInputButtonAPI"],
+    dependencies: ["ChatInputButtonAPI"],
     settings,
     contextMenus: {
         "textarea-context": ChatBarContextCheckbox

src/plugins/spotifyShareCommands/index.ts

@@ -76,7 +76,6 @@ export default definePlugin({
     name: "SpotifyShareCommands",
     description: "Share your current Spotify track, album or artist via slash command (/track, /album, /artist)",
     authors: [Devs.katlyn],
-    dependencies: ["CommandsAPI"],
     commands: [
         {
             name: "track",

src/plugins/userVoiceShow/components.tsx

@@ -8,7 +8,7 @@ import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { classes } from "@utils/misc";
 import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
-import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, showToast, Text, Toasts, Tooltip, useCallback, useMemo, UserStore, useStateFromStores } from "@webpack/common";
+import { ChannelStore, GuildStore, IconUtils, NavigationRouter, PermissionsBits, PermissionStore, React, showToast, Text, Toasts, Tooltip, useMemo, UserStore, useStateFromStores } from "@webpack/common";
 import { Channel } from "discord-types/general";
 
 const cl = classNameFactory("vc-uvs-");
@@ -17,7 +17,7 @@ const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChan
 const VoiceStateStore = findStoreLazy("VoiceStateStore");
 const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
 
-interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IconProps extends React.ComponentPropsWithoutRef<"div"> {
     size?: number;
 }
 
@@ -71,23 +71,18 @@ interface VoiceChannelTooltipProps {
 
 function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
     const voiceStates = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStatesForChannel(channel.id));
+
     const users = useMemo(
         () => Object.values<any>(voiceStates).map(voiceState => UserStore.getUser(voiceState.userId)).filter(user => user != null),
         [voiceStates]
     );
 
-    const guild = useMemo(
-        () => channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId()),
-        [channel]
-    );
-
-    const guildIcon = useMemo(() => {
-        return guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
-            id: guild.id,
-            icon: guild.icon,
-            size: 30
-        });
-    }, [guild]);
+    const guild = channel.getGuildId() == null ? undefined : GuildStore.getGuild(channel.getGuildId());
+    const guildIcon = guild?.icon == null ? undefined : IconUtils.getGuildIconURL({
+        id: guild.id,
+        icon: guild.icon,
+        size: 30
+    });
 
     return (
         <>
@@ -103,7 +98,7 @@ function VoiceChannelTooltip({ channel }: VoiceChannelTooltipProps) {
                 <UserSummaryItem
                     users={users}
                     renderIcon={false}
-                    max={7}
+                    max={13}
                     size={18}
                 />
             </div>
@@ -119,11 +114,14 @@ const clickTimers = {} as Record<string, any>;
 
 export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChannelIndicatorProps) => {
     const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
-    const channel = useMemo(() => channelId == null ? undefined : ChannelStore.getChannel(channelId), [channelId]);
 
-    const onClick = useCallback((e: React.MouseEvent) => {
+    const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
+    if (channel == null) return null;
+
+    function onClick(e: React.MouseEvent) {
         e.preventDefault();
         e.stopPropagation();
+
         if (channel == null || channelId == null) return;
 
         if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
@@ -147,18 +145,15 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId }: VoiceChanne
                 delete clickTimers[channelId];
             }, 250);
         }
-    }, [channelId]);
+    }
 
-    const isLocked = useMemo(() => {
-        return !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
-    }, [channelId]);
-
-    if (channel == null) return null;
+    const isLocked = !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel) || !PermissionStore.can(PermissionsBits.CONNECT, channel);
 
     return (
         <Tooltip
             text={<VoiceChannelTooltip channel={channel} />}
             tooltipClassName={cl("tooltip-container")}
+            tooltipContentClassName={cl("tooltip-content")}
         >
             {props =>
                 isLocked ?

src/plugins/userVoiceShow/index.tsx

@@ -32,7 +32,7 @@ const settings = definePluginSettings({
         default: true,
         restartNeeded: true
     },
-    showInVoiceMemberList: {
+    showInMemberList: {
         type: OptionType.BOOLEAN,
         description: "Show a user's Voice Channel indicator in the member and DMs list",
         default: true,
@@ -82,12 +82,12 @@ export default definePlugin({
                 match: /\.subtext,children:.+?}\)\]}\)(?=])/,
                 replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
             },
-            predicate: () => settings.store.showInVoiceMemberList
+            predicate: () => settings.store.showInMemberList
         }
     ],
 
     start() {
-        if (settings.store.showInVoiceMemberList) {
+        if (settings.store.showInMemberList) {
             addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
         }
     },

src/plugins/userVoiceShow/style.css

@@ -15,7 +15,13 @@
 }
 
 .vc-uvs-tooltip-container {
-    max-width: 200px;
+    max-width: 300px;
+}
+
+.vc-uvs-tooltip-content {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
 .vc-uvs-guild-name {
@@ -31,7 +37,5 @@
 
 .vc-uvs-vc-members {
     display: flex;
-    margin: 8px 0;
-    flex-direction: row;
     gap: 6px;
 }

src/utils/types.ts

@@ -72,13 +72,13 @@ export interface PluginDef {
     stop?(): void;
     patches?: Omit<Patch, "plugin">[];
     /**
-     * List of commands. If you specify these, you must add CommandsAPI to dependencies
+     * List of commands that your plugin wants to register
      */
     commands?: Command[];
     /**
      * A list of other plugins that your plugin depends on.
      * These will automatically be enabled and loaded before your plugin
-     * Common examples are CommandsAPI, MessageEventsAPI...
+     * Generally these will be API plugins
      */
     dependencies?: string[],
     /**

src/webpack/common/components.ts

@@ -28,6 +28,8 @@ export let Forms = {} as {
     FormText: t.FormText,
 };
 
+export let Icons = {} as t.Icons;
+
 export let Card: t.Card;
 export let Button: t.Button;
 export let Switch: t.Switch;
@@ -85,4 +87,5 @@ waitFor(["FormItem", "Button"], m => {
         Heading
     } = m);
     Forms = m;
+    Icons = m;
 });

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

@@ -18,6 +18,8 @@
 
 import type { ComponentType, CSSProperties, FunctionComponent, HtmlHTMLAttributes, HTMLProps, KeyboardEvent, MouseEvent, PropsWithChildren, PropsWithRef, ReactNode, Ref } from "react";
 
+import { IconNames } from "./iconNames";
+
 export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/semibold" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/semibold" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/semibold" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
 export type FormTextTypes = Record<"DEFAULT" | "INPUT_PLACEHOLDER" | "DESCRIPTION" | "LABEL_BOLD" | "LABEL_SELECTED" | "LABEL_DESCRIPTOR" | "ERROR" | "SUCCESS", string>;
 export type HeadingTag = `h${1 | 2 | 3 | 4 | 5 | 6}`;
@@ -69,7 +71,7 @@ export type FormText = ComponentType<PropsWithChildren<{
 }> & TextProps> & { Types: FormTextTypes; };
 
 export type Tooltip = ComponentType<{
-    text: ReactNode;
+    text: ReactNode | ComponentType;
     children: FunctionComponent<{
         onClick(): void;
         onMouseEnter(): void;
@@ -502,3 +504,10 @@ export type Avatar = ComponentType<PropsWithChildren<{
 type FocusLock = ComponentType<PropsWithChildren<{
     containerRef: RefObject<HTMLElement>;
 }>>;
+
+export type Icon = ComponentType<JSX.IntrinsicElements["svg"] & {
+    size?: string;
+    colorClass?: string;
+} & Record<string, any>>;
+
+export type Icons = Record<IconNames, Icon>;