Merge 565ad7c98c into bcfef05a8a

src/components/PluginSettings/index.tsx

@@ -292,10 +292,10 @@ export default function PluginSettings() {
 
         if (!pluginFilter(p)) continue;
 
-        const isRequired = p.required || p.isDependency || depMap[p.name]?.some(d => settings.plugins[d].enabled);
+        const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
 
         if (isRequired) {
-            const tooltipText = p.required || !depMap[p.name]
+            const tooltipText = p.required
                 ? "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: ["UserSettingsAPI", "MessageAccessoriesAPI"],
+    dependencies: ["CommandsAPI", "UserSettingsAPI", "MessageAccessoriesAPI"],
 
     settings,
 

src/plugins/appleMusic.desktop/index.tsx

@@ -24,7 +24,7 @@ interface ActivityButton {
 }
 
 interface Activity {
-    state?: string;
+    state: string;
     details?: string;
     timestamps?: {
         start?: number;
@@ -52,8 +52,8 @@ const enum ActivityFlag {
 
 export interface TrackData {
     name: string;
-    album?: string;
+    album: string;
-    artist?: string;
+    artist: string;
 
     appleMusicLink?: string;
     songLink?: string;
@@ -61,8 +61,8 @@ export interface TrackData {
     albumArtwork?: string;
     artistArtwork?: string;
 
-    playerPosition?: number;
+    playerPosition: number;
-    duration?: number;
+    duration: number;
 }
 
 const enum AssetImageType {
@@ -155,8 +155,8 @@ const settings = definePluginSettings({
 function customFormat(formatStr: string, data: TrackData) {
     return formatStr
         .replaceAll("{name}", data.name)
-        .replaceAll("{album}", data.album ?? "")
+        .replaceAll("{album}", data.album)
-        .replaceAll("{artist}", data.artist ?? "");
+        .replaceAll("{artist}", data.artist);
 }
 
 function getImageAsset(type: AssetImageType, data: TrackData) {
@@ -212,16 +212,14 @@ export default definePlugin({
 
         const assets: ActivityAssets = {};
 
-        const isRadio = Number.isNaN(trackData.duration) && (trackData.playerPosition === 0);
-
         if (settings.store.largeImageType !== AssetImageType.Disabled) {
             assets.large_image = largeImageAsset;
-            if (!isRadio) assets.large_text = customFormat(settings.store.largeTextString, trackData);
+            assets.large_text = customFormat(settings.store.largeTextString, trackData);
         }
 
         if (settings.store.smallImageType !== AssetImageType.Disabled) {
             assets.small_image = smallImageAsset;
-            if (!isRadio) assets.small_text = customFormat(settings.store.smallTextString, trackData);
+            assets.small_text = customFormat(settings.store.smallTextString, trackData);
         }
 
         const buttons: ActivityButton[] = [];
@@ -245,17 +243,17 @@ export default definePlugin({
 
             name: customFormat(settings.store.nameString, trackData),
             details: customFormat(settings.store.detailsString, trackData),
-            state: isRadio ? undefined : customFormat(settings.store.stateString, trackData),
+            state: customFormat(settings.store.stateString, trackData),
 
-            timestamps: (trackData.playerPosition && trackData.duration && settings.store.enableTimestamps) ? {
+            timestamps: (settings.store.enableTimestamps ? {
                 start: Date.now() - (trackData.playerPosition * 1000),
                 end: Date.now() - (trackData.playerPosition * 1000) + (trackData.duration * 1000),
-            } : undefined,
+            } : undefined),
 
             assets,
 
-            buttons: !isRadio && buttons.length ? buttons.map(v => v.label) : undefined,
+            buttons: buttons.length ? buttons.map(v => v.label) : undefined,
-            metadata: !isRadio && buttons.length ? { button_urls: buttons.map(v => v.url) } : undefined,
+            metadata: { button_urls: buttons.map(v => v.url) || undefined, },
 
             type: settings.store.activityType,
             flags: ActivityFlag.INSTANCE,

src/plugins/betterSettings/PluginsSubmenu.tsx

@@ -1,68 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { openPluginModal } from "@components/PluginSettings/PluginModal";
-import { isObjectEmpty } from "@utils/misc";
-import { Alerts, i18n, Menu, useMemo, useState } from "@webpack/common";
-
-import Plugins from "~plugins";
-
-function onRestartNeeded() {
-    Alerts.show({
-        title: "Restart required",
-        body: <p>You have changed settings that require a restart.</p>,
-        confirmText: "Restart now",
-        cancelText: "Later!",
-        onConfirm: () => location.reload()
-    });
-}
-
-export default function PluginsSubmenu() {
-    const sortedPlugins = useMemo(() => Object.values(Plugins)
-        .sort((a, b) => a.name.localeCompare(b.name)), []);
-    const [query, setQuery] = useState("");
-
-    const search = query.toLowerCase();
-    const include = (p: typeof Plugins[keyof typeof Plugins]) => (
-        Vencord.Plugins.isPluginEnabled(p.name)
-        && p.options && !isObjectEmpty(p.options)
-        && (
-            p.name.toLowerCase().includes(search)
-            || p.description.toLowerCase().includes(search)
-            || p.tags?.some(t => t.toLowerCase().includes(search))
-        )
-    );
-
-    const plugins = sortedPlugins.filter(include);
-
-    return (
-        <>
-            <Menu.MenuControlItem
-                id="vc-plugins-search"
-                control={(props, ref) => (
-                    <Menu.MenuSearchControl
-                        {...props}
-                        query={query}
-                        onChange={setQuery}
-                        ref={ref}
-                        placeholder={i18n.Messages.SEARCH}
-                    />
-                )}
-            />
-
-            {!!plugins.length && <Menu.MenuSeparator />}
-
-            {plugins.map(p => (
-                <Menu.MenuItem
-                    key={p.name}
-                    id={p.name}
-                    label={p.name}
-                    action={() => openPluginModal(p, onRestartNeeded)}
-                />
-            ))}
-        </>
-    );
-}

src/plugins/betterSettings/index.tsx

@@ -13,8 +13,6 @@ import { waitFor } from "@webpack";
 import { ComponentDispatch, FocusLock, i18n, Menu, useEffect, useRef } from "@webpack/common";
 import type { HTMLAttributes, ReactElement } from "react";
 
-import PluginsSubmenu from "./PluginsSubmenu";
-
 type SettingsEntry = { section: string, label: string; };
 
 const cl = classNameFactory("");
@@ -120,21 +118,13 @@ export default definePlugin({
         },
         { // Settings cog context menu
             find: "Messages.USER_SETTINGS_ACTIONS_MENU_LABEL",
-            replacement: [
+            replacement: {
-                {
+                match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
-                    match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
+                replace: "$1$self.wrapMenu($2)"
-                    replace: "$1$self.wrapMenu($2)"
+            }
-                },
+        }
-                {
-                    match: /case \i\.\i\.DEVELOPER_OPTIONS:return \i;/,
-                    replace: "$&case 'VencordPlugins':return $self.PluginsSubmenu();"
-                }
-            ]
-        },
     ],
 
-    PluginsSubmenu,
-
     // This is the very outer layer of the entire ui, so we can't wrap this in an ErrorBoundary
     // without possibly also catching unrelated errors of children.
     //

src/plugins/consoleJanitor/index.ts

@@ -126,7 +126,7 @@ export default definePlugin({
             }
         },
         {
-            find: '"_handleLocalVideoDisabled: ',
+            find: '"Handling ping: "',
             predicate: () => settings.store.disableNoisyLoggers,
             replacement: {
                 match: /new \i\.\i\("RTCConnection\("\.concat.+?\)\)(?=,)/,

src/plugins/experiments/index.tsx

@@ -23,13 +23,12 @@ import { ErrorCard } from "@components/ErrorCard";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy, findLazy } from "@webpack";
+import { findByPropsLazy } from "@webpack";
 import { Forms, React } from "@webpack/common";
 
 import hideBugReport from "./hideBugReport.css?managed";
 
 const KbdStyles = findByPropsLazy("key", "combo");
-const BugReporterExperiment = findLazy(m => m?.definition?.id === "2024-09_bug_reporter");
 
 const settings = definePluginSettings({
     toolbarDevMenu: {
@@ -79,8 +78,8 @@ export default definePlugin({
         {
             find: "toolbar:function",
             replacement: {
-                match: /hasBugReporterAccess:(\i)/,
+                match: /\i\.isStaff\(\)/,
-                replace: "_hasBugReporterAccess:$1=true"
+                replace: "true"
             },
             predicate: () => settings.store.toolbarDevMenu
         },
@@ -92,18 +91,10 @@ export default definePlugin({
                 match: /\i\.isDM\(\)\|\|\i\.isThread\(\)/,
                 replace: "false",
             }
-        },
-        // enable option to always record clips even if you are not streaming
-        {
-            find: "isDecoupledGameClippingEnabled(){",
-            replacement: {
-                match: /\i\.isStaff\(\)/,
-                replace: "true"
-            }
         }
     ],
 
-    start: () => !BugReporterExperiment.getCurrentConfig().hasBugReporterAccess && enableStyle(hideBugReport),
+    start: () => enableStyle(hideBugReport),
     stop: () => disableStyle(hideBugReport),
 
     settingsAboutComponent: () => {

src/plugins/friendInvites/index.ts

@@ -27,6 +27,7 @@ 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

@@ -1,5 +0,0 @@
-# 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

@@ -1,82 +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 { 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,11 +105,6 @@ 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,6 +82,7 @@ export default definePlugin({
             default: true
         }
     },
+    dependencies: ["CommandsAPI"],
 
     async start() {
         for (const tag of await getTags()) createTagCommand(tag);

src/plugins/moreCommands/index.ts

@@ -33,6 +33,7 @@ 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,6 +24,7 @@ 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/noDefaultHangStatus/README.md

@@ -0,0 +1,5 @@
+# NoDefaultHangStatus
+
+Disable the default hang status when joining voice channels
+
+![Visualization](https://github.com/Vendicated/Vencord/assets/24937357/329a9742-236f-48f7-94ff-c3510eca505a)

src/plugins/noDefaultHangStatus/index.ts

@@ -0,0 +1,24 @@
+/*
+ * 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 definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "NoDefaultHangStatus",
+    description: "Disable the default hang status when joining voice channels",
+    authors: [Devs.D3SOX],
+
+    patches: [
+        {
+            find: ".CHILLING)",
+            replacement: {
+                match: /{enableHangStatus:(\i),/,
+                replace: "{_enableHangStatus:$1=false,"
+            }
+        }
+    ]
+});

src/plugins/petpet/index.ts

@@ -88,6 +88,7 @@ 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/reviewDB/index.tsx

@@ -91,7 +91,7 @@ export default definePlugin({
             }
         },
         {
-            find: ".PANEL,interactionType:",
+            find: ".PANEL,isInteractionSource:",
             replacement: {
                 match: /{profileType:\i\.\i\.PANEL,children:\[/,
                 replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"

src/plugins/searchReply/README.md

@@ -0,0 +1,6 @@
+# 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

@@ -0,0 +1,75 @@
+/*
+ * 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: ["ChatInputButtonAPI"],
+    dependencies: ["CommandsAPI", "ChatInputButtonAPI"],
     settings,
     contextMenus: {
         "textarea-context": ChatBarContextCheckbox

src/plugins/spotifyShareCommands/index.ts

@@ -76,6 +76,7 @@ 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/README.md

@@ -1,7 +0,0 @@
-# User Voice Show
-
-Shows an indicator when a user is in a Voice Channel
-
-![a preview of the indicator in the user profile](https://github.com/user-attachments/assets/48f825e4-fad5-40d7-bb4f-41d5e595aae0)
-
-![a preview of the indicator in the member list](https://github.com/user-attachments/assets/51be081d-7bbb-45c5-8533-d565228e50c1)

src/plugins/userVoiceShow/components.tsx

@@ -1,171 +0,0 @@
-/*
- * 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 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 { Channel } from "discord-types/general";
-
-const cl = classNameFactory("vc-uvs-");
-
-const { selectVoiceChannel } = findByPropsLazy("selectChannel", "selectVoiceChannel");
-const VoiceStateStore = findStoreLazy("VoiceStateStore");
-const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
-
-interface IconProps extends React.HTMLAttributes<HTMLDivElement> {
-    size?: number;
-}
-
-function SpeakerIcon(props: IconProps) {
-    props.size ??= 16;
-
-    return (
-        <div
-            {...props}
-            role={props.onClick != null ? "button" : undefined}
-            className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
-        >
-            <svg
-                width={props.size}
-                height={props.size}
-                viewBox="0 0 24 24"
-                fill="currentColor"
-            >
-                <path d="M12 3a1 1 0 0 0-1-1h-.06a1 1 0 0 0-.74.32L5.92 7H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.92l4.28 4.68a1 1 0 0 0 .74.32H11a1 1 0 0 0 1-1V3ZM15.1 20.75c-.58.14-1.1-.33-1.1-.92v-.03c0-.5.37-.92.85-1.05a7 7 0 0 0 0-13.5A1.11 1.11 0 0 1 14 4.2v-.03c0-.6.52-1.06 1.1-.92a9 9 0 0 1 0 17.5Z" />
-                <path d="M15.16 16.51c-.57.28-1.16-.2-1.16-.83v-.14c0-.43.28-.8.63-1.02a3 3 0 0 0 0-5.04c-.35-.23-.63-.6-.63-1.02v-.14c0-.63.59-1.1 1.16-.83a5 5 0 0 1 0 9.02Z" />
-            </svg>
-        </div>
-    );
-}
-
-function LockedSpeakerIcon(props: IconProps) {
-    props.size ??= 16;
-
-    return (
-        <div
-            {...props}
-            role={props.onClick != null ? "button" : undefined}
-            className={classes(cl("speaker"), props.onClick != null ? cl("clickable") : undefined)}
-        >
-            <svg
-                width={props.size}
-                height={props.size}
-                viewBox="0 0 24 24"
-                fill="currentColor"
-            >
-                <path fillRule="evenodd" clipRule="evenodd" d="M16 4h.5v-.5a2.5 2.5 0 0 1 5 0V4h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Zm4-.5V4h-2v-.5a1 1 0 1 1 2 0Z" />
-                <path d="M11 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1h-.06a1 1 0 0 1-.74-.32L5.92 17H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.92l4.28-4.68a1 1 0 0 1 .74-.32H11ZM20.5 12c-.28 0-.5.22-.52.5a7 7 0 0 1-5.13 6.25c-.48.13-.85.55-.85 1.05v.03c0 .6.52 1.06 1.1.92a9 9 0 0 0 6.89-8.25.48.48 0 0 0-.49-.5h-1ZM16.5 12c-.28 0-.5.23-.54.5a3 3 0 0 1-1.33 2.02c-.35.23-.63.6-.63 1.02v.14c0 .63.59 1.1 1.16.83a5 5 0 0 0 2.82-4.01c.02-.28-.2-.5-.48-.5h-1Z" />
-            </svg>
-        </div>
-    );
-}
-
-interface VoiceChannelTooltipProps {
-    channel: Channel;
-}
-
-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]);
-
-    return (
-        <>
-            {guild != null && (
-                <div className={cl("guild-name")}>
-                    {guildIcon != null && <img className={cl("guild-icon")} src={guildIcon} alt="" />}
-                    <Text variant="text-sm/bold">{guild.name}</Text>
-                </div>
-            )}
-            <Text variant="text-sm/semibold">{channel.name}</Text>
-            <div className={cl("vc-members")}>
-                <SpeakerIcon size={18} />
-                <UserSummaryItem
-                    users={users}
-                    renderIcon={false}
-                    max={14}
-                    size={18}
-                />
-            </div>
-        </>
-    );
-}
-
-interface VoiceChannelIndicatorProps {
-    userId: string;
-}
-
-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) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (channel == null || channelId == null) return;
-
-        if (!PermissionStore.can(PermissionsBits.VIEW_CHANNEL, channel)) {
-            showToast("You cannot view the user's Voice Channel", Toasts.Type.FAILURE);
-            return;
-        }
-
-        clearTimeout(clickTimers[channelId]);
-        delete clickTimers[channelId];
-
-        if (e.detail > 1) {
-            if (!PermissionStore.can(PermissionsBits.CONNECT, channel)) {
-                showToast("You cannot join the user's Voice Channel", Toasts.Type.FAILURE);
-                return;
-            }
-
-            selectVoiceChannel(channelId);
-        } else {
-            clickTimers[channelId] = setTimeout(() => {
-                NavigationRouter.transitionTo(`/channels/${channel.getGuildId() ?? "@me"}/${channelId}`);
-                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;
-
-    return (
-        <Tooltip
-            text={<VoiceChannelTooltip channel={channel} />}
-            tooltipClassName={cl("tooltip-container")}
-            tooltipContentClassName={cl("tooltip-content")}
-        >
-            {props =>
-                isLocked ?
-                    <LockedSpeakerIcon {...props} onClick={onClick} />
-                    : <SpeakerIcon {...props} onClick={onClick} />
-            }
-        </Tooltip>
-    );
-}, { noop: true });

src/plugins/userVoiceShow/components/VoiceChannelSection.css

@@ -0,0 +1,27 @@
+.vc-uvs-button>div {
+    white-space: normal !important;
+}
+
+.vc-uvs-button {
+    width: 100%;
+    margin: auto;
+    height: unset;
+}
+
+.vc-uvs-header {
+    color: var(--header-primary);
+    margin-bottom: 6px;
+}
+
+.vc-uvs-modal-margin {
+    margin: 0 12px;
+}
+
+.vc-uvs-modal-margin div {
+    margin-bottom: 0 !important;
+}
+
+.vc-uvs-popout-margin-self>[class^="section"] {
+    padding-top: 0;
+    padding-bottom: 12px;
+}

src/plugins/userVoiceShow/components/VoiceChannelSection.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 "./VoiceChannelSection.css";
+
+import { findByPropsLazy } from "@webpack";
+import { Button, Forms, PermissionStore, Toasts } from "@webpack/common";
+import { Channel } from "discord-types/general";
+
+const ChannelActions = findByPropsLazy("selectChannel", "selectVoiceChannel");
+
+const CONNECT = 1n << 20n;
+
+interface VoiceChannelFieldProps {
+    channel: Channel;
+    label: string;
+    showHeader: boolean;
+}
+
+export const VoiceChannelSection = ({ channel, label, showHeader }: VoiceChannelFieldProps) => (
+    // @TODO The div is supposed to be a UserPopoutSection
+    <div>
+        {showHeader && <Forms.FormTitle className="vc-uvs-header">In a voice channel</Forms.FormTitle>}
+        <Button
+            className="vc-uvs-button"
+            color={Button.Colors.TRANSPARENT}
+            size={Button.Sizes.SMALL}
+
+            onClick={() => {
+                if (PermissionStore.can(CONNECT, channel))
+                    ChannelActions.selectVoiceChannel(channel.id);
+                else
+                    Toasts.show({
+                        message: "Insufficient permissions to enter the channel.",
+                        id: "user-voice-show-insufficient-permissions",
+                        type: Toasts.Type.FAILURE,
+                        options: {
+                            position: Toasts.Position.BOTTOM,
+                        }
+                    });
+            }}
+        >
+            {label}
+        </Button>
+    </div>
+);

src/plugins/userVoiceShow/index.tsx

@@ -16,85 +16,85 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "./style.css";
-
-import { addDecorator, removeDecorator } from "@api/MemberListDecorators";
 import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
+import { findStoreLazy } from "@webpack";
+import { ChannelStore, GuildStore, UserStore } from "@webpack/common";
+import { User } from "discord-types/general";
 
-import { VoiceChannelIndicator } from "./components";
+import { VoiceChannelSection } from "./components/VoiceChannelSection";
+
+const VoiceStateStore = findStoreLazy("VoiceStateStore");
 
 const settings = definePluginSettings({
     showInUserProfileModal: {
         type: OptionType.BOOLEAN,
-        description: "Show a user's Voice Channel indicator in their profile next to the name",
+        description: "Show a user's voice channel in their profile modal",
         default: true,
-        restartNeeded: true
     },
-    showInMemberList: {
+    showVoiceChannelSectionHeader: {
         type: OptionType.BOOLEAN,
-        description: "Show a user's Voice Channel indicator in the member and DMs list",
+        description: 'Whether to show "IN A VOICE CHANNEL" above the join button',
         default: true,
-        restartNeeded: true
     }
 });
 
+interface UserProps {
+    user: User;
+}
+
+const VoiceChannelField = ErrorBoundary.wrap(({ user }: UserProps) => {
+    const { channelId } = VoiceStateStore.getVoiceStateForUser(user.id) ?? {};
+    if (!channelId) return null;
+
+    const channel = ChannelStore.getChannel(channelId);
+    if (!channel) return null;
+
+    const guild = GuildStore.getGuild(channel.guild_id);
+
+    if (!guild) return null; // When in DM call
+
+    const result = `${guild.name} | ${channel.name}`;
+
+    return (
+        <VoiceChannelSection
+            channel={channel}
+            label={result}
+            showHeader={settings.store.showVoiceChannelSectionHeader}
+        />
+    );
+});
+
 export default definePlugin({
     name: "UserVoiceShow",
-    description: "Shows an indicator when a user is in a Voice Channel",
+    description: "Shows whether a User is currently in a voice channel somewhere in their profile",
-    authors: [Devs.LordElias, Devs.Nuckyz],
+    authors: [Devs.LordElias],
     settings,
 
+    patchModal({ user }: UserProps) {
+        if (!settings.store.showInUserProfileModal)
+            return null;
+
+        return (
+            <div className="vc-uvs-modal-margin">
+                <VoiceChannelField user={user} />
+            </div>
+        );
+    },
+
+    patchProfilePopout: ({ user }: UserProps) => {
+        const isSelfUser = user.id === UserStore.getCurrentUser().id;
+        return (
+            <div className={isSelfUser ? "vc-uvs-popout-margin-self" : ""}>
+                <VoiceChannelField user={user} />
+            </div>
+        );
+    },
+
     patches: [
-        // User Popout, Full Size Profile, Direct Messages Side Profile
+        // @TODO Maybe patch UserVoiceShow in simplified profile popout
-        {
+        // @TODO Patch new profile modal
-            find: ".Messages.USER_PROFILE_LOAD_ERROR",
-            replacement: {
-                match: /(\.fetchError.+?\?)null/,
-                replace: (_, rest) => `${rest}$self.VoiceChannelIndicator({userId:arguments[0]?.userId})`
-            },
-            predicate: () => settings.store.showInUserProfileModal
-        },
-        // To use without the MemberList decorator API
-        /* // Guild Members List
-        {
-            find: ".lostPermission)",
-            replacement: {
-                match: /\.lostPermission\).+?(?=avatar:)/,
-                replace: "$&children:[$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})],"
-            },
-            predicate: () => settings.store.showVoiceChannelIndicator
-        },
-        // Direct Messages List
-        {
-            find: "PrivateChannel.renderAvatar",
-            replacement: {
-                match: /\.Messages\.CLOSE_DM.+?}\)(?=])/,
-                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
-            },
-            predicate: () => settings.store.showVoiceChannelIndicator
-        }, */
-        // Friends List
-        {
-            find: ".avatar,animate:",
-            replacement: {
-                match: /\.subtext,children:.+?}\)\]}\)(?=])/,
-                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
-            },
-            predicate: () => settings.store.showInMemberList
-        }
     ],
-
-    start() {
-        if (settings.store.showInMemberList) {
-            addDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
-        }
-    },
-
-    stop() {
-        removeDecorator("UserVoiceShow");
-    },
-
-    VoiceChannelIndicator
 });

src/plugins/userVoiceShow/style.css

@@ -1,41 +0,0 @@
-.vc-uvs-speaker {
-    color: var(--interactive-normal);
-    padding: 0 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.vc-uvs-clickable {
-    cursor: pointer;
-}
-
-.vc-uvs-clickable:hover {
-    color: var(--interactive-hover);
-}
-
-.vc-uvs-tooltip-container {
-    max-width: 300px;
-}
-
-.vc-uvs-tooltip-content {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.vc-uvs-guild-name {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.vc-uvs-guild-icon {
-    border-radius: 100%;
-    align-self: center;
-}
-
-.vc-uvs-vc-members {
-    display: flex;
-    gap: 6px;
-}

src/utils/types.ts

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

src/webpack/common/components.ts

@@ -28,8 +28,6 @@ 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;
@@ -87,5 +85,4 @@ waitFor(["FormItem", "Button"], m => {
         Heading
     } = m);
     Forms = m;
-    Icons = m;
 });

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

@@ -18,8 +18,6 @@
 
 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}`;
@@ -71,7 +69,7 @@ export type FormText = ComponentType<PropsWithChildren<{
 }> & TextProps> & { Types: FormTextTypes; };
 
 export type Tooltip = ComponentType<{
-    text: ReactNode | ComponentType;
+    text: ReactNode;
     children: FunctionComponent<{
         onClick(): void;
         onMouseEnter(): void;
@@ -504,10 +502,3 @@ 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>;

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

@@ -72,11 +72,6 @@ export interface Menu {
         onChange(value: number): void,
         renderValue?(value: number): string,
     }>;
-    MenuSearchControl: RC<{
-        query: string
-        onChange(query: string): void;
-        placeholder?: string;
-    }>;
 }
 
 export interface ContextMenuApi {