MoreUserTags Chat

README.md

@@ -11,7 +11,7 @@ You can join our [discord server](https://discord.gg/5Xh2W87egW) for commits, ch
 ### Extra included plugins
 
 <details>
-<summary>170 additional plugins</summary>
+<summary>171 additional plugins</summary>
 
 ### All Platforms
 
@@ -108,6 +108,7 @@ You can join our [discord server](https://discord.gg/5Xh2W87egW) for commits, ch
 - MessageTranslate by Samwich
 - ModalFade by Kyuuhachi
 - MoreStickers by Leko & Arjix
+- MoreUserTags by Cyn, TheSun, RyanCaoDev, LordElias, AutumnVN, hen
 - Morse by zyqunix
 - NeverPausePreviews by vappstar
 - NewPluginsManager by Sqaaakoi

src/api/NicknameIcons.tsx

@@ -0,0 +1,40 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Logger } from "@utils/Logger";
+import { ReactNode } from "react";
+
+export interface NicknameIconProps {
+    userId: string;
+}
+
+export type NicknameIconFactory = (props: NicknameIconProps) => ReactNode | Promise<ReactNode>;
+
+export interface NicknameIcon {
+    priority: number;
+    factory: NicknameIconFactory;
+}
+
+const nicknameIcons = new Map<string, NicknameIcon>();
+const logger = new Logger("NicknameIcons");
+
+export function addNicknameIcon(id: string, factory: NicknameIconFactory, priority = 0) {
+    return nicknameIcons.set(id, {
+        priority,
+        factory: ErrorBoundary.wrap(factory, { noop: true, onError: error => logger.error(`Failed to render ${id}`, error) })
+    });
+}
+
+export function removeNicknameIcon(id: string) {
+    return nicknameIcons.delete(id);
+}
+
+export function _renderIcons(props: NicknameIconProps) {
+    return Array.from(nicknameIcons)
+        .sort((a, b) => b[1].priority - a[1].priority)
+        .map(([id, { factory: NicknameIcon }]) => <NicknameIcon key={id} {...props} />);
+}

src/api/index.ts

@@ -27,6 +27,7 @@ import * as $MessageDecorations from "./MessageDecorations";
 import * as $MessageEventsAPI from "./MessageEvents";
 import * as $MessagePopover from "./MessagePopover";
 import * as $MessageUpdater from "./MessageUpdater";
+import * as $NicknameIcons from "./NicknameIcons";
 import * as $Notices from "./Notices";
 import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
@@ -123,6 +124,11 @@ export const MessageUpdater = $MessageUpdater;
  */
 export const UserSettings = $UserSettings;
 
+/**
+ * An API allowing you to add icons to the nickname, in profiles
+ */
+export const NicknameIcons = $NicknameIcons;
+
 /**
  * Just used to identify if user is on Equicord as Vencord doesnt have this
  */

src/equicordplugins/moreUserTags/consts.ts

@@ -0,0 +1,63 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { findByCodeLazy, findLazy } from "@webpack";
+import { GuildStore } from "@webpack/common";
+import { RC } from "@webpack/types";
+import { Channel, Guild, Message, User } from "discord-types/general";
+
+import type { ITag } from "./types";
+
+export const isWebhook = (message: Message, user: User) => !!message?.webhookId && user.isNonUserBot();
+export const tags = [
+    {
+        name: "WEBHOOK",
+        displayName: "Webhook",
+        description: "Messages sent by webhooks",
+        condition: isWebhook
+    }, {
+        name: "OWNER",
+        displayName: "Owner",
+        description: "Owns the server",
+        condition: (_, user, channel) => GuildStore.getGuild(channel?.guild_id)?.ownerId === user.id
+    }, {
+        name: "ADMINISTRATOR",
+        displayName: "Admin",
+        description: "Has the administrator permission",
+        permissions: ["ADMINISTRATOR"]
+    }, {
+        name: "MODERATOR_STAFF",
+        displayName: "Staff",
+        description: "Can manage the server, channels or roles",
+        permissions: ["MANAGE_GUILD", "MANAGE_CHANNELS", "MANAGE_ROLES"]
+    }, {
+        name: "MODERATOR",
+        displayName: "Mod",
+        description: "Can manage messages or kick/ban people",
+        permissions: ["MANAGE_MESSAGES", "KICK_MEMBERS", "BAN_MEMBERS"]
+    }, {
+        name: "VOICE_MODERATOR",
+        displayName: "VC Mod",
+        description: "Can manage voice chats",
+        permissions: ["MOVE_MEMBERS", "MUTE_MEMBERS", "DEAFEN_MEMBERS"]
+    }, {
+        name: "CHAT_MODERATOR",
+        displayName: "Chat Mod",
+        description: "Can timeout people",
+        permissions: ["MODERATE_MEMBERS"]
+    }
+] as const satisfies ITag[];
+
+export const Tag = findLazy(m => m.Types?.[0] === "BOT") as RC<{ type?: number | null, className?: string, useRemSizes?: boolean; }> & { Types: Record<string, number>; };
+
+// PermissionStore.computePermissions will not work here since it only gets permissions for the current user
+export const computePermissions: (options: {
+    user?: { id: string; } | string | null;
+    context?: Guild | Channel | null;
+    overwrites?: Channel["permissionOverwrites"] | null;
+    checkElevated?: boolean /* = true */;
+    excludeGuildPermissions?: boolean /* = false */;
+}) => bigint = findByCodeLazy(".getCurrentUser()", ".computeLurkerPermissionsAllowList()");

src/equicordplugins/moreUserTags/index.tsx

@@ -0,0 +1,183 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { classNameFactory } from "@api/Styles";
+import { Devs } from "@utils/constants";
+import { getCurrentChannel, getIntlMessage } from "@utils/discord";
+import definePlugin from "@utils/types";
+import { ChannelStore, GuildStore, PermissionsBits, SelectedChannelStore, UserStore } from "@webpack/common";
+import { Channel, Message, User } from "discord-types/general";
+
+import { computePermissions, Tag, tags } from "./consts";
+import { settings } from "./settings";
+import { TagSettings } from "./types";
+
+const cl = classNameFactory("vc-mut-");
+
+const genTagTypes = () => {
+    let i = 100;
+    const obj = {};
+
+    for (const { name } of tags) {
+        obj[name] = ++i;
+        obj[i] = name;
+    }
+
+    return obj;
+};
+
+export default definePlugin({
+    name: "MoreUserTags",
+    description: "Adds tags for webhooks and moderative roles (owner, admin, etc.)",
+    authors: [Devs.Cyn, Devs.TheSun, Devs.RyanCaoDev, Devs.LordElias, Devs.AutumnVN, Devs.hen],
+    dependencies: ["MemberListDecoratorsAPI", "NicknameIconsAPI", "MessageDecorationsAPI"],
+    settings,
+    patches: [
+        // Make discord actually use our tags
+        {
+            find: ".STAFF_ONLY_DM:",
+            replacement: [{
+                match: /(?<=type:(\i).{10,1000}.REMIX.{10,100})default:(\i)=/,
+                replace: "default:$2=$self.getTagText($self.localTags[$1]);",
+            }, {
+                match: /(?<=type:(\i).{10,1000}.REMIX.{10,100})\.BOT:(?=default:)/,
+                replace: "$&return null;",
+                predicate: () => settings.store.dontShowBotTag
+            },
+            ],
+        }
+    ],
+    start() {
+        const tagSettings = settings.store.tagSettings || {} as TagSettings;
+        for (const tag of Object.values(tags)) {
+            tagSettings[tag.name] ??= {
+                showInChat: true,
+                showInNotChat: true,
+                text: tag.displayName
+            };
+        }
+
+        settings.store.tagSettings = tagSettings;
+    },
+    localTags: genTagTypes(),
+    getChannelId() {
+        return SelectedChannelStore.getChannelId();
+    },
+    renderNicknameIcon(props) {
+        const tagId = this.getTag({
+            user: UserStore.getUser(props.userId),
+            channel: ChannelStore.getChannel(this.getChannelId()),
+            channelId: this.getChannelId(),
+            isChat: false
+        });
+
+        return tagId && <Tag
+            type={tagId}
+            verified={false}>
+        </Tag>;
+
+    },
+    renderMessageDecoration(props) {
+        const tagId = this.getTag({
+            message: props.message,
+            user: UserStore.getUser(props.message.author.id),
+            channelId: props.message.channel_id,
+            isChat: false
+        });
+
+        return tagId && <Tag
+            useRemSizes={true}
+            className={cl("message-tag", props.message.author.isVerifiedBot() && "message-verified")}
+            type={tagId}
+            verified={false}>
+        </Tag>;
+    },
+    renderMemberListDecorator(props) {
+        const tagId = this.getTag({
+            user: props.user,
+            channel: getCurrentChannel(),
+            channelId: this.getChannelId(),
+            isChat: false
+        });
+
+        return tagId && <Tag
+            type={tagId}
+            verified={false}>
+        </Tag>;
+    },
+
+    getTagText(tagName: string) {
+        if (!tagName) return getIntlMessage("APP_TAG");
+        const tag = tags.find(({ name }) => tagName === name);
+        if (!tag) return tagName || getIntlMessage("APP_TAG");
+
+        return settings.store.tagSettings?.[tag.name]?.text || tag.displayName;
+    },
+
+    getTag({
+        message, user, channelId, isChat, channel
+    }: {
+        message?: Message,
+        user?: User & { isClyde(): boolean; },
+        channel?: Channel & { isForumPost(): boolean; isMediaPost(): boolean; },
+        channelId?: string;
+        isChat?: boolean;
+    }): number | null {
+        const settings = this.settings.store;
+
+        if (!user) return null;
+        if (isChat && user.id === "1") return null;
+        if (user.isClyde()) return null;
+        if (user.bot && settings.dontShowForBots) return null;
+
+        channel ??= ChannelStore.getChannel(channelId!) as any;
+        if (!channel) return null;
+
+        const perms = this.getPermissions(user, channel);
+
+        for (const tag of tags) {
+            if (isChat && !settings.tagSettings[tag.name].showInChat)
+                continue;
+            if (!isChat && !settings.tagSettings[tag.name].showInNotChat)
+                continue;
+
+            // If the owner tag is disabled, and the user is the owner of the guild,
+            // avoid adding other tags because the owner will always match the condition for them
+            if (
+                (tag.name !== "OWNER" &&
+                    GuildStore.getGuild(channel?.guild_id)?.ownerId ===
+                    user.id &&
+                    isChat &&
+                    !settings.tagSettings.OWNER.showInChat) ||
+                (!isChat &&
+                    !settings.tagSettings.OWNER.showInNotChat)
+            )
+                continue;
+
+            if ("permissions" in tag ?
+                tag.permissions.some(perm => perms.includes(perm)) :
+                tag.condition(message!, user, channel)) {
+
+                return this.localTags[tag.name];
+            }
+        }
+
+        return null;
+    },
+    getPermissions(user: User, channel: Channel): string[] {
+        const guild = GuildStore.getGuild(channel?.guild_id);
+        if (!guild) return [];
+
+        const permissions = computePermissions({ user, context: guild, overwrites: channel.permissionOverwrites });
+        return Object.entries(PermissionsBits)
+            .map(([perm, permInt]) =>
+                permissions & permInt ? perm : ""
+            )
+            .filter(Boolean);
+    },
+});

src/equicordplugins/moreUserTags/settings.tsx

@@ -0,0 +1,81 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { Margins } from "@utils/margins";
+import { OptionType } from "@utils/types";
+import { Card, Flex, Forms, Switch, TextInput, Tooltip } from "@webpack/common";
+
+import { Tag, tags } from "./consts";
+import { TagSettings } from "./types";
+
+function SettingsComponent() {
+    const tagSettings = settings.store.tagSettings as TagSettings;
+
+    return (
+        <Flex flexDirection="column">
+            {tags.map(t => (
+                <Card key={t.name} style={{ padding: "1em 1em 0" }}>
+                    <Forms.FormTitle style={{ width: "fit-content" }}>
+                        <Tooltip text={t.description}>
+                            {({ onMouseEnter, onMouseLeave }) => (
+                                <div
+                                    onMouseEnter={onMouseEnter}
+                                    onMouseLeave={onMouseLeave}
+                                >
+                                    {t.displayName} Tag <Tag type={Tag.Types[t.name]} />
+                                </div>
+                            )}
+                        </Tooltip>
+                    </Forms.FormTitle>
+
+                    <TextInput
+                        type="text"
+                        value={tagSettings[t.name]?.text ?? t.displayName}
+                        placeholder={`Text on tag (default: ${t.displayName})`}
+                        onChange={v => tagSettings[t.name].text = v}
+                        className={Margins.bottom16}
+                    />
+
+                    <Switch
+                        value={tagSettings[t.name]?.showInChat ?? true}
+                        onChange={v => tagSettings[t.name].showInChat = v}
+                        hideBorder
+                    >
+                        Show in messages
+                    </Switch>
+
+                    <Switch
+                        value={tagSettings[t.name]?.showInNotChat ?? true}
+                        onChange={v => tagSettings[t.name].showInNotChat = v}
+                        hideBorder
+                    >
+                        Show in member list and profiles
+                    </Switch>
+                </Card>
+            ))}
+        </Flex>
+    );
+}
+
+export const settings = definePluginSettings({
+    dontShowForBots: {
+        description: "Don't show extra tags for bots (excluding webhooks)",
+        type: OptionType.BOOLEAN,
+        default: false
+    },
+    dontShowBotTag: {
+        description: "Only show extra tags for bots / Hide [APP] text",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: true
+    },
+    tagSettings: {
+        type: OptionType.COMPONENT,
+        component: SettingsComponent,
+        description: "fill me"
+    }
+});

src/equicordplugins/moreUserTags/styles.css

@@ -0,0 +1,20 @@
+.vc-mut-message-tag {
+    /* Remove default margin from tags in messages */
+    margin-top: unset !important;
+
+    /* Align with Discord default tags in messages */
+    position: relative;
+    bottom: 0.01em;
+}
+
+.vc-mut-message-verified {
+    height: 1rem !important;
+}
+
+span[class*="botTagCozy"][data-moreTags-darkFg="true"]>svg>path {
+    fill: #000;
+}
+
+span[class*="botTagCozy"][data-moreTags-darkFg="false"]>svg>path {
+    fill: #fff;
+}

src/equicordplugins/moreUserTags/types.ts

@@ -0,0 +1,32 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import type { Permissions } from "@webpack/types";
+import type { Channel, Message, User } from "discord-types/general";
+
+import { tags } from "./consts";
+
+export type ITag = {
+    // 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: Permissions[];
+} | {
+    condition?(message: Message | null, user: User, channel: Channel): boolean;
+});
+
+export interface TagSetting {
+    text: string;
+    showInChat: boolean;
+    showInNotChat: boolean;
+}
+
+export type TagSettings = {
+    [k in typeof tags[number]["name"]]: TagSetting;
+};

src/equicordplugins/toastNotifications/components/NotificationComponent.tsx

@@ -125,7 +125,14 @@ export default ErrorBoundary.wrap(function NotificationComponent({
                         </button>
                     </div>
                     <div>
-                        {renderBody ? richBody ?? <p className="toastnotifications-notification-p">{body}</p> : null}
+                        {renderBody ? (
+                            richBody ?? (
+                                <p className="toastnotifications-notification-p">
+                                    {body.length > 500 ? body.slice(0, 500) + "..." : body}
+                                </p>
+                            )
+                        ) : null}
+
                         {PluginSettings.store.renderImages && image && <img className="toastnotifications-notification-img" src={image} alt="ToastNotification Image" />}
                         {footer && <p className="toastnotifications-notification-footer">{`${attachments} attachment${attachments > 1 ? "s" : ""} ${attachments > 1 ? "were" : "was"} sent.`}</p>}
                     </div>

src/plugins/_api/nicknameIcons.ts

@@ -0,0 +1,23 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 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: "NicknameIconsAPI",
+    description: "API to add icons to the nickname, in profiles",
+    authors: [Devs.Nuckyz],
+    patches: [
+        {
+            find: "#{intl::USER_PROFILE_LOAD_ERROR}",
+            replacement: {
+                match: /(\.fetchError.+?\?)null/,
+                replace: (_, rest) => `${rest}Vencord.Api.NicknameIcons._renderIcons(arguments[0])`
+            }
+        }
+    ]
+});

src/plugins/index.ts

@@ -25,6 +25,7 @@ import { addMessageAccessory, removeMessageAccessory } from "@api/MessageAccesso
 import { addMessageDecoration, removeMessageDecoration } from "@api/MessageDecorations";
 import { addMessageClickListener, addMessagePreEditListener, addMessagePreSendListener, removeMessageClickListener, removeMessagePreEditListener, removeMessagePreSendListener } from "@api/MessageEvents";
 import { addMessagePopoverButton, removeMessagePopoverButton } from "@api/MessagePopover";
+import { addNicknameIcon, removeNicknameIcon } from "@api/NicknameIcons";
 import { Settings, SettingsStore } from "@api/Settings";
 import { disableStyle, enableStyle } from "@api/Styles";
 import { Logger } from "@utils/Logger";
@@ -96,7 +97,7 @@ function isReporterTestable(p: Plugin, part: ReporterTestable) {
 
 const pluginKeysToBind: Array<keyof PluginDef & `${"on" | "render"}${string}`> = [
     "onBeforeMessageEdit", "onBeforeMessageSend", "onMessageClick",
-    "renderChatBarButton", "renderMemberListDecorator", "renderMessageAccessory", "renderMessageDecoration", "renderMessagePopoverButton"
+    "renderChatBarButton", "renderMemberListDecorator", "renderNicknameIcon", "renderMessageAccessory", "renderMessageDecoration", "renderMessagePopoverButton"
 ];
 
 const neededApiPlugins = new Set<string>();
@@ -128,6 +129,7 @@ for (const p of pluginsValues) if (isPluginEnabled(p.name)) {
     if (p.onBeforeMessageEdit || p.onBeforeMessageSend || p.onMessageClick) neededApiPlugins.add("MessageEventsAPI");
     if (p.renderChatBarButton) neededApiPlugins.add("ChatInputButtonAPI");
     if (p.renderMemberListDecorator) neededApiPlugins.add("MemberListDecoratorsAPI");
+    if (p.renderNicknameIcon) neededApiPlugins.add("NicknameIconsAPI");
     if (p.renderMessageAccessory) neededApiPlugins.add("MessageAccessoriesAPI");
     if (p.renderMessageDecoration) neededApiPlugins.add("MessageDecorationsAPI");
     if (p.renderMessagePopoverButton) neededApiPlugins.add("MessagePopoverAPI");
@@ -261,7 +263,7 @@ export const startPlugin = traceFunction("startPlugin", function startPlugin(p:
     const {
         name, commands, contextMenus, managedStyle, userProfileBadge,
         onBeforeMessageEdit, onBeforeMessageSend, onMessageClick,
-        renderChatBarButton, renderMemberListDecorator, renderMessageAccessory, renderMessageDecoration, renderMessagePopoverButton
+        renderChatBarButton, renderMemberListDecorator, renderNicknameIcon, renderMessageAccessory, renderMessageDecoration, renderMessagePopoverButton
     } = p;
 
     if (p.start) {
@@ -313,6 +315,7 @@ export const startPlugin = traceFunction("startPlugin", function startPlugin(p:
 
     if (renderChatBarButton) addChatBarButton(name, renderChatBarButton);
     if (renderMemberListDecorator) addMemberListDecorator(name, renderMemberListDecorator);
+    if (renderNicknameIcon) addNicknameIcon(name, renderNicknameIcon);
     if (renderMessageDecoration) addMessageDecoration(name, renderMessageDecoration);
     if (renderMessageAccessory) addMessageAccessory(name, renderMessageAccessory);
     if (renderMessagePopoverButton) addMessagePopoverButton(name, renderMessagePopoverButton);
@@ -324,7 +327,7 @@ export const stopPlugin = traceFunction("stopPlugin", function stopPlugin(p: Plu
     const {
         name, commands, contextMenus, managedStyle, userProfileBadge,
         onBeforeMessageEdit, onBeforeMessageSend, onMessageClick,
-        renderChatBarButton, renderMemberListDecorator, renderMessageAccessory, renderMessageDecoration, renderMessagePopoverButton
+        renderChatBarButton, renderMemberListDecorator, renderNicknameIcon, renderMessageAccessory, renderMessageDecoration, renderMessagePopoverButton
     } = p;
 
     if (p.stop) {
@@ -374,6 +377,7 @@ export const stopPlugin = traceFunction("stopPlugin", function stopPlugin(p: Plu
 
     if (renderChatBarButton) removeChatBarButton(name);
     if (renderMemberListDecorator) removeMemberListDecorator(name);
+    if (renderNicknameIcon) removeNicknameIcon(name);
     if (renderMessageDecoration) removeMessageDecoration(name);
     if (renderMessageAccessory) removeMessageAccessory(name);
     if (renderMessagePopoverButton) removeMessagePopoverButton(name);

src/plugins/platformIndicators/index.tsx

@@ -18,15 +18,15 @@
 
 import "./style.css";
 
-import { addProfileBadge, BadgePosition, BadgeUserArgs, ProfileBadge, removeProfileBadge } from "@api/Badges";
 import { addMemberListDecorator, removeMemberListDecorator } from "@api/MemberListDecorators";
 import { addMessageDecoration, removeMessageDecoration } from "@api/MessageDecorations";
-import { Settings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
+import { addNicknameIcon, removeNicknameIcon } from "@api/NicknameIcons";
+import { definePluginSettings, migratePluginSetting } from "@api/Settings";
 import { Devs } from "@utils/constants";
+import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
 import { filters, findStoreLazy, mapMangledModuleLazy } from "@webpack";
-import { PresenceStore, Tooltip, UserStore } from "@webpack/common";
+import { PresenceStore, Tooltip, UserStore, useStateFromStores } from "@webpack/common";
 import { User } from "discord-types/general";
 
 export interface Session {
@@ -44,10 +44,26 @@ const SessionsStore = findStoreLazy("SessionsStore") as {
     getSessions(): Record<string, Session>;
 };
 
-function Icon(path: string, opts?: { viewBox?: string; width?: number; height?: number; }) {
-    return ({ color, tooltip, small }: { color: string; tooltip: string; small: boolean; }) => (
+const { useStatusFillColor } = mapMangledModuleLazy(".concat(.5625*", {
+    useStatusFillColor: filters.byCode(".hex")
+});
+
+interface IconFactoryOpts {
+    viewBox?: string;
+    width?: number;
+    height?: number;
+}
+
+interface IconProps {
+    color: string;
+    tooltip: string;
+    small?: boolean;
+}
+
+function Icon(path: string, opts?: IconFactoryOpts) {
+    return ({ color, tooltip, small }: IconProps) => (
         <Tooltip text={tooltip} >
-            {(tooltipProps: any) => (
+            {tooltipProps => (
                 <svg
                     {...tooltipProps}
                     height={(opts?.height ?? 20) - (small ? 3 : 0)}
@@ -70,18 +86,22 @@ const Icons = {
     suncord: Icon("M7 4a6 6 0 00-6 6v4a6 6 0 006 6h10a6 6 0 006-6v-4a6 6 0 00-6-6H7zm0 11a1 1 0 01-1-1v-1H5a1 1 0 010-2h1v-1a1 1 0 012 0v1h1a1 1 0 010 2H8v1a1 1 0 01-1 1zm10-4a1 1 0 100-2 1 1 0 000 2zm1 3a1 1 0 11-2 0 1 1 0 012 0zm0-2a1 1 0 102 0 1 1 0 00-2 0zm-3 1a1 1 0 110-2 1 1 0 010 2z", { viewBox: "0 0 24 24", height: 24, width: 24 }),
     vencord: Icon("M14.8 2.7 9 3.1V47h3.3c1.7 0 6.2.3 10 .7l6.7.6V2l-4.2.2c-2.4.1-6.9.3-10 .5zm1.8 6.4c1 1.7-1.3 3.6-2.7 2.2C12.7 10.1 13.5 8 15 8c.5 0 1.2.5 1.6 1.1zM16 33c0 6-.4 10-1 10s-1-4-1-10 .4-10 1-10 1 4 1 10zm15-8v23.3l3.8-.7c2-.3 4.7-.6 6-.6H43V3h-2.2c-1.3 0-4-.3-6-.6L31 1.7V25z", { viewBox: "0 0 50 50" }),
 };
+
 type Platform = keyof typeof Icons;
 
-const { useStatusFillColor } = mapMangledModuleLazy(".concat(.5625*", {
-    useStatusFillColor: filters.byCode(".hex")
-});
+interface PlatformIconProps {
+    platform: Platform;
+    status: string;
+    small?: boolean;
+    isProfile?: boolean;
+}
 
-const PlatformIcon = ({ platform, status, small }: { platform: Platform, status: string; small: boolean; }) => {
+const PlatformIcon = ({ platform, status, small }: PlatformIconProps) => {
     const tooltip = platform === "embedded"
         ? "Console"
         : platform[0].toUpperCase() + platform.slice(1);
     let Icon = Icons[platform] ?? Icons.desktop;
-    const { ConsoleIcon } = Settings.plugins.PlatformIndicators;
+    const { ConsoleIcon } = settings.store;
     if (platform === "embedded" && ConsoleIcon === "vencord") {
         Icon = Icons.vencord;
     }
@@ -92,159 +112,166 @@ const PlatformIcon = ({ platform, status, small }: { platform: Platform, status:
     return <Icon color={useStatusFillColor(status)} tooltip={tooltip} small={small} />;
 };
 
-function ensureOwnStatus(user: User) {
-    if (user.id === UserStore.getCurrentUser().id) {
-        const sessions = SessionsStore.getSessions();
-        if (typeof sessions !== "object") return null;
-        const sortedSessions = Object.values(sessions).sort(({ status: a }, { status: b }) => {
-            if (a === b) return 0;
-            if (a === "online") return 1;
-            if (b === "online") return -1;
-            if (a === "idle") return 1;
-            if (b === "idle") return -1;
-            return 0;
-        });
-
-        const ownStatus = Object.values(sortedSessions).reduce((acc, curr) => {
-            if (curr.clientInfo.client !== "unknown")
-                acc[curr.clientInfo.client] = curr.status;
-            return acc;
-        }, {});
-
-        const { clientStatuses } = PresenceStore.getState();
-        clientStatuses[UserStore.getCurrentUser().id] = ownStatus;
+function useEnsureOwnStatus(user: User) {
+    if (user.id !== UserStore.getCurrentUser()?.id) {
+        return;
     }
+
+    const sessions = useStateFromStores([SessionsStore], () => SessionsStore.getSessions());
+    if (typeof sessions !== "object") return null;
+    const sortedSessions = Object.values(sessions).sort(({ status: a }, { status: b }) => {
+        if (a === b) return 0;
+        if (a === "online") return 1;
+        if (b === "online") return -1;
+        if (a === "idle") return 1;
+        if (b === "idle") return -1;
+        return 0;
+    });
+
+    const ownStatus = Object.values(sortedSessions).reduce((acc, curr) => {
+        if (curr.clientInfo.client !== "unknown")
+            acc[curr.clientInfo.client] = curr.status;
+        return acc;
+    }, {});
+
+    const { clientStatuses } = PresenceStore.getState();
+    clientStatuses[UserStore.getCurrentUser().id] = ownStatus;
 }
 
-function getBadges({ userId }: BadgeUserArgs): ProfileBadge[] {
-    const user = UserStore.getUser(userId);
-
-    if (!user || (user.bot && !Settings.plugins.PlatformIndicators.showBots)) return [];
-
-    ensureOwnStatus(user);
-
-    const status = PresenceStore.getState()?.clientStatuses?.[user.id] as Record<Platform, string>;
-    if (!status) return [];
-
-    return Object.entries(status).map(([platform, status]) => ({
-        component: () => (
-            <span className="vc-platform-indicator">
-                <PlatformIcon
-                    key={platform}
-                    platform={platform as Platform}
-                    status={status}
-                    small={false}
-                />
-            </span>
-        ),
-        key: `vc-platform-indicator-${platform}`
-    }));
+interface PlatformIndicatorProps {
+    user: User;
+    isProfile?: boolean;
+    isMessage?: boolean;
+    isMemberList?: boolean;
 }
 
-const PlatformIndicator = ({ user, small = false }: { user: User; small?: boolean; }) => {
-    if (!user || (user.bot && !Settings.plugins.PlatformIndicators.showBots)) return null;
+const PlatformIndicator = ({ user, isProfile, isMessage, isMemberList }: PlatformIndicatorProps) => {
+    if (user == null || user.bot) return null;
+    useEnsureOwnStatus(user);
 
-    ensureOwnStatus(user);
+    const status: Record<Platform, string> | undefined = useStateFromStores([PresenceStore], () => PresenceStore.getState()?.clientStatuses?.[user.id]);
+    if (status == null) {
+        return null;
+    }
 
-    const status = PresenceStore.getState()?.clientStatuses?.[user.id] as Record<Platform, string>;
-    if (!status) return null;
-
-    const icons = Object.entries(status).map(([platform, status]) => (
+    const icons = Array.from(Object.entries(status), ([platform, status]) => (
         <PlatformIcon
             key={platform}
             platform={platform as Platform}
             status={status}
-            small={small}
+            small={isProfile || isMemberList}
         />
     ));
 
-    if (!icons.length) return null;
+    if (!icons.length) {
+        return null;
+    }
 
     return (
-        <span
-            className="vc-platform-indicator"
-            style={{ gap: "2px" }}
+        <div
+            className={classes("vc-platform-indicator", isProfile && "vc-platform-indicator-profile", isMessage && "vc-platform-indicator-message")}
+            style={{ marginLeft: isMemberList ? "4px" : undefined }}
         >
             {icons}
-        </span>
+        </div>
     );
 };
 
-const badge: ProfileBadge = {
-    getBadges,
-    position: BadgePosition.START,
-};
+function toggleMemberListDecorators(enabled: boolean) {
+    if (enabled) {
+        addMemberListDecorator("PlatformIndicators", props => <PlatformIndicator user={props.user} isMemberList />);
+    } else {
+        removeMemberListDecorator("PlatformIndicators");
+    }
+}
 
-const indicatorLocations = {
+function toggleNicknameIcons(enabled: boolean) {
+    if (enabled) {
+        addNicknameIcon("PlatformIndicators", props => <PlatformIndicator user={UserStore.getUser(props.userId)} isProfile />, 1);
+    } else {
+        removeNicknameIcon("PlatformIndicators");
+    }
+}
+
+function toggleMessageDecorators(enabled: boolean) {
+    if (enabled) {
+        addMessageDecoration("PlatformIndicators", props => <PlatformIndicator user={props.message?.author} isMessage />);
+    } else {
+        removeMessageDecoration("PlatformIndicators");
+    }
+}
+
+migratePluginSetting("PlatformIndicators", "badges", "profiles");
+const settings = definePluginSettings({
     list: {
-        description: "In the member list",
-        onEnable: () => addMemberListDecorator("platform-indicator", props =>
-            <ErrorBoundary noop>
-                <PlatformIndicator user={props.user} small={true} />
-            </ErrorBoundary>
-        ),
-        onDisable: () => removeMemberListDecorator("platform-indicator")
+        type: OptionType.BOOLEAN,
+        description: "Show indicators in the member list",
+        default: true,
+        onChange: toggleMemberListDecorators
     },
-    badges: {
-        description: "In user profiles, as badges",
-        onEnable: () => addProfileBadge(badge),
-        onDisable: () => removeProfileBadge(badge)
+    profiles: {
+        type: OptionType.BOOLEAN,
+        description: "Show indicators in user profiles",
+        default: true,
+        onChange: toggleNicknameIcons
     },
     messages: {
-        description: "Inside messages",
-        onEnable: () => addMessageDecoration("platform-indicator", props =>
-            <ErrorBoundary noop>
-                <PlatformIndicator user={props.message?.author} />
-            </ErrorBoundary>
-        ),
-        onDisable: () => removeMessageDecoration("platform-indicator")
+        type: OptionType.BOOLEAN,
+        description: "Show indicators inside messages",
+        default: true,
+        onChange: toggleMessageDecorators
+    },
+    colorMobileIndicator: {
+        type: OptionType.BOOLEAN,
+        description: "Whether to make the mobile indicator match the color of the user status.",
+        default: true,
+        restartNeeded: true
+    },
+    ConsoleIcon: {
+        type: OptionType.SELECT,
+        description: "What console icon to use",
+        restartNeeded: true,
+        options: [
+            {
+                label: "Equicord",
+                value: "equicord",
+                default: true
+            },
+            {
+                label: "Suncord",
+                value: "suncord",
+            },
+            {
+                label: "Vencord",
+                value: "vencord",
+            },
+        ],
     }
-};
-
-function addAllIndicators() {
-    const settings = Settings.plugins.PlatformIndicators;
-    const { displayMode } = settings;
-
-    // transfer settings from the old ones, which had a select menu instead of booleans
-    if (displayMode) {
-        if (displayMode !== "both") settings[displayMode] = true;
-        else {
-            settings.list = true;
-            settings.badges = true;
-        }
-        settings.messages = true;
-        delete settings.displayMode;
-    }
-
-    Object.entries(indicatorLocations).forEach(([key, value]) => {
-        if (settings[key]) value.onEnable();
-    });
-}
-
-function deleteAllIndicators() {
-    Object.entries(indicatorLocations).forEach(([_, value]) => {
-        value.onDisable();
-    });
-}
+});
 
 export default definePlugin({
     name: "PlatformIndicators",
     description: "Adds platform indicators (Desktop, Mobile, Web...) to users",
     authors: [Devs.kemo, Devs.TheSun, Devs.Nuckyz, Devs.Ven],
-    dependencies: ["MessageDecorationsAPI", "MemberListDecoratorsAPI"],
+    dependencies: ["MemberListDecoratorsAPI", "NicknameIconsAPI", "MessageDecorationsAPI"],
+    settings,
 
     start() {
-        addAllIndicators();
+        if (settings.store.list) toggleMemberListDecorators(true);
+        if (settings.store.profiles) toggleNicknameIcons(true);
+        if (settings.store.messages) toggleMessageDecorators(true);
     },
 
     stop() {
-        deleteAllIndicators();
+        if (settings.store.list) toggleMemberListDecorators(false);
+        if (settings.store.profiles) toggleNicknameIcons;
+        if (settings.store.messages) toggleMessageDecorators(false);
     },
 
     patches: [
         {
             find: ".Masks.STATUS_ONLINE_MOBILE",
-            predicate: () => Settings.plugins.PlatformIndicators.colorMobileIndicator,
+            predicate: () => settings.store.colorMobileIndicator,
             replacement: [
                 {
                     // Return the STATUS_ONLINE_MOBILE mask if the user is on mobile, no matter the status
@@ -260,7 +287,7 @@ export default definePlugin({
         },
         {
             find: ".AVATAR_STATUS_MOBILE_16;",
-            predicate: () => Settings.plugins.PlatformIndicators.colorMobileIndicator,
+            predicate: () => settings.store.colorMobileIndicator,
             replacement: [
                 {
                     // Return the AVATAR_STATUS_MOBILE size mask if the user is on mobile, no matter the status
@@ -281,58 +308,12 @@ export default definePlugin({
         },
         {
             find: "}isMobileOnline(",
-            predicate: () => Settings.plugins.PlatformIndicators.colorMobileIndicator,
+            predicate: () => settings.store.colorMobileIndicator,
             replacement: {
                 // Make isMobileOnline return true no matter what is the user status
                 match: /(?<=\i\[\i\.\i\.MOBILE\])===\i\.\i\.ONLINE/,
                 replace: "!= null"
             }
         }
-    ],
-
-    options: {
-        ...Object.fromEntries(
-            Object.entries(indicatorLocations).map(([key, value]) => {
-                return [key, {
-                    type: OptionType.BOOLEAN,
-                    description: `Show indicators ${value.description.toLowerCase()}`,
-                    // onChange doesn't give any way to know which setting was changed, so restart required
-                    restartNeeded: true,
-                    default: true
-                }];
-            })
-        ),
-        colorMobileIndicator: {
-            type: OptionType.BOOLEAN,
-            description: "Whether to make the mobile indicator match the color of the user status.",
-            default: true,
-            restartNeeded: true
-        },
-        showBots: {
-            type: OptionType.BOOLEAN,
-            description: "Whether to show platform indicators on bots",
-            default: false,
-            restartNeeded: false
-        },
-        ConsoleIcon: {
-            type: OptionType.SELECT,
-            description: "What console icon to use",
-            restartNeeded: true,
-            options: [
-                {
-                    label: "Equicord",
-                    value: "equicord",
-                    default: true
-                },
-                {
-                    label: "Suncord",
-                    value: "suncord",
-                },
-                {
-                    label: "Vencord",
-                    value: "vencord",
-                },
-            ],
-        },
-    }
+    ]
 });

src/plugins/platformIndicators/style.css

@@ -2,6 +2,20 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    vertical-align: top;
-    position: relative;
+    gap: 2px;
+}
+
+.vc-platform-indicator-profile {
+    background: rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-6));
+    border: 1px solid var(--border-faint);
+    border-radius: var(--radius-xs);
+    border-color: var(--profile-body-border-color);
+    margin: 0 1px;
+    padding: 0 1px;
+}
+
+.vc-platform-indicator-message {
+    position: relative;
+    vertical-align: top;
+    top: 2px;
 }

src/plugins/userVoiceShow/components.tsx

@@ -111,32 +111,32 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
                     <Text variant="text-sm/bold">{guild.name}</Text>
                 </div>
             )}
-           <div className={cl("name2")} style={{ display: 'flex', alignItems: 'center' }}>
+            <div className={cl("name2")} style={{ display: "flex", alignItems: "center" }}>
                 {channelIcon}
                 <Text variant="text-sm/semibold">
                     {channelName}
                 </Text>
-                <div style={{ display: 'flex', alignItems: 'center', marginLeft: '10px' }}>
-                    <Text 
-                        style={{ 
-                            color: 'gray', 
-                            fontSize: '12px', 
-                            boxSizing: 'border-box', 
-                            padding: '0 6px 0 0', 
-                            backgroundColor: 'var(--background-tertiary)', 
-                            borderRadius: '0 8px 0 0',
+                <div style={{ display: "flex", alignItems: "center", marginLeft: "10px" }}>
+                    <Text
+                        style={{
+                            color: "gray",
+                            fontSize: "12px",
+                            boxSizing: "border-box",
+                            padding: "0 6px 0 0",
+                            backgroundColor: "var(--background-tertiary)",
+                            borderRadius: "0 8px 0 0",
                         }}
                     >
                         {users.length < 10 ? `0${users.length}` : `${users.length}`}
                     </Text>
-                    <Text 
-                        style={{ 
-                            color: 'gray', 
-                            fontSize: '12px', 
-                            boxSizing: 'border-box', 
-                            padding: '0 6px 0 0', 
-                            backgroundColor: 'var(--background-mod-strong)',
-                            borderRadius: '0 8px 0 0',
+                    <Text
+                        style={{
+                            color: "gray",
+                            fontSize: "12px",
+                            boxSizing: "border-box",
+                            padding: "0 6px 0 0",
+                            backgroundColor: "var(--background-mod-strong)",
+                            borderRadius: "0 8px 0 0",
                         }}
                     >
                         {channel.userLimit < 10 ? `0${channel.userLimit}` : `${channel.userLimit}`}
@@ -156,8 +156,10 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
     );
 }
 
-export interface VoiceChannelIndicatorProps {
+interface VoiceChannelIndicatorProps {
     userId: string;
+    isMessageIndicator?: boolean;
+    isProfile?: boolean;
     isActionButton?: boolean;
     shouldHighlight?: boolean;
 }

src/plugins/userVoiceShow/index.tsx

@@ -20,6 +20,7 @@ import "./style.css";
 
 import { addMemberListDecorator, removeMemberListDecorator } from "@api/MemberListDecorators";
 import { addMessageDecoration, removeMessageDecoration } from "@api/MessageDecorations";
+import { addNicknameIcon, removeNicknameIcon } from "@api/NicknameIcons";
 import { definePluginSettings } from "@api/Settings";
 import { Devs, EquicordDevs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
@@ -51,38 +52,10 @@ export default definePlugin({
     name: "UserVoiceShow",
     description: "Shows an indicator when a user is in a Voice Channel",
     authors: [Devs.Nuckyz, Devs.LordElias, EquicordDevs.omaw],
-    dependencies: ["MemberListDecoratorsAPI", "MessageDecorationsAPI"],
+    dependencies: ["NicknameIconsAPI", "MemberListDecoratorsAPI", "MessageDecorationsAPI"],
     settings,
 
     patches: [
-        // User Popout, Full Size Profile, Direct Messages Side Profile
-        {
-            find: "#{intl::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: /#{intl::CLOSE_DM}.+?}\)(?=])/,
-                replace: "$&,$self.VoiceChannelIndicator({userId:arguments[0]?.user?.id})"
-            },
-            predicate: () => settings.store.showVoiceChannelIndicator
-        }, */
         // Friends List
         {
             find: "null!=this.peopleListItemRef.current",
@@ -95,15 +68,19 @@ export default definePlugin({
     ],
 
     start() {
+        if (settings.store.showInUserProfileModal) {
+            addNicknameIcon("UserVoiceShow", ({ userId }) => <VoiceChannelIndicator userId={userId} isProfile />);
+        }
         if (settings.store.showInMemberList) {
             addMemberListDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
         }
         if (settings.store.showInMessages) {
-            addMessageDecoration("UserVoiceShow", ({ message }) => message?.author == null ? null : <VoiceChannelIndicator userId={message.author.id} />);
+            addMessageDecoration("UserVoiceShow", ({ message }) => message?.author == null ? null : <VoiceChannelIndicator userId={message.author.id} isMessageIndicator />);
         }
     },
 
     stop() {
+        removeNicknameIcon("UserVoiceShow");
         removeMemberListDecorator("UserVoiceShow");
         removeMessageDecoration("UserVoiceShow");
     },

src/utils/constants.ts

@@ -606,6 +606,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "samsam",
         id: 836452332387565589n,
     },
+    hen: {
+        id: 279266228151779329n,
+        name: "Hen"
+    },
 } satisfies Record<string, Dev>);
 
 export const EquicordDevs = Object.freeze({

src/utils/types.ts

@@ -25,6 +25,7 @@ import { MessageAccessoryFactory } from "@api/MessageAccessories";
 import { MessageDecorationFactory } from "@api/MessageDecorations";
 import { MessageClickListener, MessageEditListener, MessageSendListener } from "@api/MessageEvents";
 import { MessagePopoverButtonFactory } from "@api/MessagePopover";
+import { NicknameIconFactory } from "@api/NicknameIcons";
 import { FluxEvents } from "@webpack/types";
 import { ReactNode } from "react";
 import { Promisable } from "type-fest";
@@ -187,6 +188,7 @@ export interface PluginDef {
     renderMessageDecoration?: MessageDecorationFactory;
 
     renderMemberListDecorator?: MemberListDecoratorFactory;
+    renderNicknameIcon?: NicknameIconFactory;
 
     renderChatBarButton?: ChatBarButtonFactory;
 }