From 8588ab70d2d2c8541a1c63230ea51c33c2905dc8 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Wed, 11 Mar 2026 03:03:46 +0100
Subject: [PATCH 01/12] Improve TextReplace settings UX

---
 src/components/ExpandableCard.css  |  23 +++++
 src/components/ExpandableCard.tsx  |  45 +++++++++
 src/components/Icons.tsx           |  32 +++++-
 src/plugins/textReplace/index.tsx  | 156 ++++++++++++++++++-----------
 src/plugins/textReplace/styles.css |  11 ++
 5 files changed, 206 insertions(+), 61 deletions(-)
 create mode 100644 src/components/ExpandableCard.css
 create mode 100644 src/components/ExpandableCard.tsx
 create mode 100644 src/plugins/textReplace/styles.css

diff --git a/src/components/ExpandableCard.css b/src/components/ExpandableCard.css
new file mode 100644
index 000000000..54ad0f712
--- /dev/null
+++ b/src/components/ExpandableCard.css
@@ -0,0 +1,23 @@
+.vc-expandable-card {
+    color: var(--text-default);
+}
+
+.vc-expandable-card-header {
+    display: flex;
+    cursor: pointer;
+    padding: .75em 1em;
+    margin: 4px;
+    border-radius: var(--radius-xs);
+
+    .vc-expandable-card[data-expanded="true"] & {
+        background: var(--card-secondary-bg);
+    }
+}
+
+.vc-expandable-card-icon {
+    margin-left: auto;
+}
+
+.vc-expandable-card-content {
+    padding: 0.5em 1em;
+}
\ No newline at end of file
diff --git a/src/components/ExpandableCard.tsx b/src/components/ExpandableCard.tsx
new file mode 100644
index 000000000..31ee11a24
--- /dev/null
+++ b/src/components/ExpandableCard.tsx
@@ -0,0 +1,45 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./ExpandableCard.css";
+
+import { classes } from "@utils/misc";
+import { Clickable, useState } from "@webpack/common";
+import { PropsWithChildren } from "react";
+
+import { Card } from "./Card";
+import { DownArrow, RightArrow } from "./Icons";
+
+export type ExpandableSectionProps = PropsWithChildren<{
+    renderContent: () => React.ReactNode;
+    className?: string;
+    initialExpanded?: boolean;
+}>;
+
+/**
+ * A card component that can expand and collapse to show/hide content. The header (props.children) is always visible, and the content (props.renderContent) is only visible when expanded.
+ */
+export function ExpandableSection({ children, renderContent: Content, className, initialExpanded = false }: ExpandableSectionProps) {
+    const [expanded, setExpanded] = useState(initialExpanded);
+
+    const Icon = expanded ? DownArrow : RightArrow;
+
+    return (
+        <Card data-expanded={expanded} className={classes("vc-expandable-card", className)}>
+            <Clickable className="vc-expandable-card-header" onClick={() => setExpanded(c => !c)} >
+                {children}
+                <Icon className="vc-expandable-card-icon" />
+            </Clickable>
+
+            {expanded
+                ? <div className="vc-expandable-card-content">
+                    <Content />
+                </div>
+                : null
+            }
+        </Card>
+    );
+}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 6e39f3f49..eb36ede95 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -571,7 +571,7 @@ export function CloudUploadIcon(props: IconProps) {
     );
 }
 
-export const ClockIcon = (props?: any) => {
+export function ClockIcon(props: IconProps) {
     return (
         <Icon
             {...props}
@@ -585,4 +585,32 @@ export const ClockIcon = (props?: any) => {
             />
         </Icon>
     );
-};
+}
+
+export function DownArrow(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M5.3 9.3a1 1 0 0 1 1.4 0l5.3 5.29 5.3-5.3a1 1 0 1 1 1.4 1.42l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.42Z"
+            />
+        </Icon>
+    );
+}
+
+export function RightArrow(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"
+            />
+        </Icon>
+    );
+}
diff --git a/src/plugins/textReplace/index.tsx b/src/plugins/textReplace/index.tsx
index 8122ab395..8e70d85c8 100644
--- a/src/plugins/textReplace/index.tsx
+++ b/src/plugins/textReplace/index.tsx
@@ -16,22 +16,31 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./styles.css";
+
 import { definePluginSettings } from "@api/Settings";
+import { Button } from "@components/Button";
+import { ExpandableSection } from "@components/ExpandableCard";
 import { Flex } from "@components/Flex";
-import { DeleteIcon } from "@components/Icons";
+import { HeadingSecondary } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
+import { Span } from "@components/Span";
+import { TooltipContainer } from "@components/TooltipContainer";
 import { Devs } from "@utils/constants";
+import { classNameFactory } from "@utils/css";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, Forms, React, TextInput, useState } from "@webpack/common";
+import { React, TextInput, useState } from "@webpack/common";
 
-const STRING_RULES_KEY = "TextReplace_rulesString";
-const REGEX_RULES_KEY = "TextReplace_rulesRegex";
+const cl = classNameFactory("vc-textReplace-");
 
 type Rule = Record<"find" | "replace" | "onlyIfIncludes", string>;
 
 interface TextReplaceProps {
     title: string;
+    description: string;
     rulesArray: Rule[];
+    isRegex?: boolean;
 }
 
 const makeEmptyRule: () => Rule = () => ({
@@ -49,15 +58,18 @@ const settings = definePluginSettings({
 
             return (
                 <>
+                    <TextReplaceTesting />
                     <TextReplace
-                        title="Using String"
+                        title="Simple Replacements"
+                        description="Simple find and replace rules. For example, find 'brb' and replace it with 'be right back'"
                         rulesArray={stringRules}
                     />
                     <TextReplace
-                        title="Using Regex"
+                        title="Regex Replacements"
+                        description="More powerful replacements using Regular Expressions. This section is for advanced users. If you don't understand it, just ignore it"
                         rulesArray={regexRules}
+                        isRegex
                     />
-                    <TextReplaceTesting />
                 </>
             );
         }
@@ -116,21 +128,32 @@ function Input({ initialValue, onChange, placeholder }: {
     );
 }
 
-function TextReplace({ title, rulesArray }: TextReplaceProps) {
-    const isRegexRules = title === "Using Regex";
+function TextRow({ label, description, value, onChange }: { label: string; description: string; value: string; onChange(value: string): void; }) {
+    return (
+        <>
+            <TooltipContainer text={description}>
+                <Span weight="medium" size="md">{label}</Span>
+            </TooltipContainer>
+            <Input
+                placeholder={description}
+                initialValue={value}
+                onChange={onChange}
+            />
+        </>
+    );
+}
 
-    async function onClickRemove(index: number) {
-        if (index === rulesArray.length - 1) return;
+const isEmptyRule = (rule: Rule) => !rule.find;
+
+function TextReplace({ title, description, rulesArray, isRegex = false }: TextReplaceProps) {
+    function onClickRemove(index: number) {
         rulesArray.splice(index, 1);
     }
 
-    async function onChange(e: string, index: number, key: string) {
-        if (index === rulesArray.length - 1) {
-            rulesArray.push(makeEmptyRule());
-        }
-
+    function onChange(e: string, index: number, key: string) {
         rulesArray[index][key] = e;
 
+        // If a rule is empty after editing and is not the last rule, remove it
         if (rulesArray[index].find === "" && rulesArray[index].replace === "" && rulesArray[index].onlyIfIncludes === "" && index !== rulesArray.length - 1) {
             rulesArray.splice(index, 1);
         }
@@ -138,49 +161,61 @@ function TextReplace({ title, rulesArray }: TextReplaceProps) {
 
     return (
         <>
-            <Forms.FormTitle tag="h4">{title}</Forms.FormTitle>
+            <div>
+                <HeadingSecondary>{title}</HeadingSecondary>
+                <Paragraph>{description}</Paragraph>
+            </div>
             <Flex flexDirection="column" style={{ gap: "0.5em" }}>
-                {
-                    rulesArray.map((rule, index) =>
-                        <React.Fragment key={`${rule.find}-${index}`}>
-                            <Flex gap="0.5em" flexDirection="row" style={{ flexGrow: 1 }}>
-                                <Input
-                                    placeholder="Find"
-                                    initialValue={rule.find}
-                                    onChange={e => onChange(e, index, "find")}
-                                />
-                                <Input
-                                    placeholder="Replace"
-                                    initialValue={rule.replace}
-                                    onChange={e => onChange(e, index, "replace")}
-                                />
-                                <Input
-                                    placeholder="Only if includes"
-                                    initialValue={rule.onlyIfIncludes}
-                                    onChange={e => onChange(e, index, "onlyIfIncludes")}
-                                />
+                {rulesArray.map((rule, index) =>
+                    <ExpandableSection
+                        key={`${rule.find}-${index}`}
+                        renderContent={() => (
+                            <>
+                                <div className={cl("input-grid")}>
+                                    <TextRow
+                                        label="Find"
+                                        description={isRegex ? "The regex pattern" : "The text to replace"}
+                                        value={rule.find}
+                                        onChange={e => onChange(e, index, "find")}
+                                    />
+                                    <TextRow
+                                        label="Replace"
+                                        description="The text to replace the found text with"
+                                        value={rule.replace}
+                                        onChange={e => onChange(e, index, "replace")}
+                                    />
+                                    <TextRow
+                                        label="Only if includes"
+                                        description="This rule will only be applied if the message includes this text. This is optional"
+                                        value={rule.onlyIfIncludes}
+                                        onChange={e => onChange(e, index, "onlyIfIncludes")}
+                                    />
+                                </div>
+                                {isRegex && renderFindError(rule.find)}
                                 <Button
-                                    size={Button.Sizes.MIN}
+                                    className={cl("delete-button")}
+                                    variant="dangerPrimary"
                                     onClick={() => onClickRemove(index)}
-                                    style={{
-                                        background: "none",
-                                        color: "var(--status-danger)",
-                                        ...(index === rulesArray.length - 1
-                                            ? {
-                                                visibility: "hidden",
-                                                pointerEvents: "none"
-                                            }
-                                            : {}
-                                        )
-                                    }}
                                 >
-                                    <DeleteIcon />
+                                    Delete Rule
                                 </Button>
-                            </Flex>
-                            {isRegexRules && renderFindError(rule.find)}
-                        </React.Fragment>
-                    )
-                }
+                            </>
+                        )}
+                    >
+                        <Paragraph weight="medium" size="md">
+                            {isEmptyRule(rule)
+                                ? `Empty Rule ${index + 1}`
+                                : `Rule ${index + 1} - ${rule.find}`
+                            }
+                        </Paragraph>
+                    </ExpandableSection>
+                )}
+                <Button
+                    onClick={() => rulesArray.push(makeEmptyRule())}
+                    disabled={rulesArray.length > 0 && isEmptyRule(rulesArray[rulesArray.length - 1])}
+                >
+                    Add Rule
+                </Button>
             </Flex>
         </>
     );
@@ -188,12 +223,15 @@ function TextReplace({ title, rulesArray }: TextReplaceProps) {
 
 function TextReplaceTesting() {
     const [value, setValue] = useState("");
+
     return (
-        <>
-            <Forms.FormTitle tag="h4">Test Rules</Forms.FormTitle>
-            <TextInput placeholder="Type a message" onChange={setValue} />
-            <TextInput placeholder="Message with rules applied" editable={false} value={applyRules(value)} />
-        </>
+        <div>
+            <HeadingSecondary>Rule Tester</HeadingSecondary>
+            <Flex flexDirection="column" gap={6}>
+                <TextInput placeholder="Type a message to test rules on" onChange={setValue} />
+                <TextInput placeholder="Message with rules applied" editable={false} value={applyRules(value)} style={{ opacity: 0.7 }} />
+            </Flex>
+        </div>
     );
 }
 
diff --git a/src/plugins/textReplace/styles.css b/src/plugins/textReplace/styles.css
new file mode 100644
index 000000000..51a65fe1a
--- /dev/null
+++ b/src/plugins/textReplace/styles.css
@@ -0,0 +1,11 @@
+.vc-textReplace-input-grid {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 0.25em 1em;
+    align-items: center;
+}
+
+.vc-textReplace-delete-button {
+    width: 100%;
+    margin-block: 0.75em 0.5em
+}
\ No newline at end of file

From f766ea6b4959d5a0bc4515fac5d3613d5bf35d48 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Wed, 11 Mar 2026 03:41:28 +0100
Subject: [PATCH 02/12] TextReplace: fix rule section closing when changing
 find

---
 src/plugins/textReplace/index.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/plugins/textReplace/index.tsx b/src/plugins/textReplace/index.tsx
index 8e70d85c8..81cea86e0 100644
--- a/src/plugins/textReplace/index.tsx
+++ b/src/plugins/textReplace/index.tsx
@@ -34,7 +34,7 @@ import { React, TextInput, useState } from "@webpack/common";
 
 const cl = classNameFactory("vc-textReplace-");
 
-type Rule = Record<"find" | "replace" | "onlyIfIncludes", string>;
+type Rule = Record<"find" | "replace" | "onlyIfIncludes" | "id", string>;
 
 interface TextReplaceProps {
     title: string;
@@ -46,7 +46,8 @@ interface TextReplaceProps {
 const makeEmptyRule: () => Rule = () => ({
     find: "",
     replace: "",
-    onlyIfIncludes: ""
+    onlyIfIncludes: "",
+    id: crypto.randomUUID()
 });
 const makeEmptyRuleArray = () => [makeEmptyRule()];
 
@@ -123,7 +124,7 @@ function Input({ initialValue, onChange, placeholder }: {
             value={value}
             onChange={setValue}
             spellCheck={false}
-            onBlur={() => value !== initialValue && onChange(value)}
+            onBlur={() => value !== initialValue && setTimeout(() => onChange(value), 0)}
         />
     );
 }
@@ -168,7 +169,7 @@ function TextReplace({ title, description, rulesArray, isRegex = false }: TextRe
             <Flex flexDirection="column" style={{ gap: "0.5em" }}>
                 {rulesArray.map((rule, index) =>
                     <ExpandableSection
-                        key={`${rule.find}-${index}`}
+                        key={rule.id}
                         renderContent={() => (
                             <>
                                 <div className={cl("input-grid")}>
@@ -272,6 +273,11 @@ export default definePlugin({
 
     settings,
 
+    start() {
+        settings.store.regexRules.forEach(rule => rule.id ??= crypto.randomUUID());
+        settings.store.stringRules.forEach(rule => rule.id ??= crypto.randomUUID());
+    },
+
     onBeforeMessageSend(channelId, msg) {
         // Channel used for sharing rules, applying rules here would be messy
         if (channelId === TEXT_REPLACE_RULES_CHANNEL_ID) return;

From 143bb60051b02e50c8536eeb2fc111f573f57dd3 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Wed, 11 Mar 2026 05:27:41 +0100
Subject: [PATCH 03/12] MessageTags: add argument support & considerably
 improve UX

---
 src/plugins/messageTags/CreateTagModal.tsx  | 134 +++++++++++++
 src/plugins/messageTags/SettingsTagList.tsx |  41 ++++
 src/plugins/messageTags/index.ts            | 201 +++++++-------------
 src/plugins/messageTags/settings.ts         |  42 ++++
 src/plugins/messageTags/styles.css          |   8 +
 5 files changed, 293 insertions(+), 133 deletions(-)
 create mode 100644 src/plugins/messageTags/CreateTagModal.tsx
 create mode 100644 src/plugins/messageTags/SettingsTagList.tsx
 create mode 100644 src/plugins/messageTags/settings.ts
 create mode 100644 src/plugins/messageTags/styles.css

diff --git a/src/plugins/messageTags/CreateTagModal.tsx b/src/plugins/messageTags/CreateTagModal.tsx
new file mode 100644
index 000000000..c12ec8f56
--- /dev/null
+++ b/src/plugins/messageTags/CreateTagModal.tsx
@@ -0,0 +1,134 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { BaseText } from "@components/BaseText";
+import { Button } from "@components/Button";
+import { Card } from "@components/Card";
+import { InlineCode } from "@components/CodeBlock";
+import { ExpandableSection } from "@components/ExpandableCard";
+import { Flex } from "@components/Flex";
+import { HeadingSecondary } from "@components/Heading";
+import { InfoIcon } from "@components/Icons";
+import { Margins } from "@components/margins";
+import { Paragraph } from "@components/Paragraph";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { TextArea, TextInput, useState } from "@webpack/common";
+
+import { parseTagArguments, registerTagCommand } from ".";
+import { addTag, getTag, Tag } from "./settings";
+
+export function openCreateTagModal(initialValue: Tag = { name: "", message: "" }) {
+    openModal(modalProps => (
+        <Modal initialValue={initialValue} modalProps={modalProps} />
+    ));
+}
+
+const EXAMPLE_RESPONSE = "Hello {{user}}! I am feeling {{mood = great}}.";
+
+function Modal({ initialValue, modalProps }: { initialValue: Tag; modalProps: ModalProps; }) {
+    const [name, setName] = useState(initialValue.name);
+    const [message, setMessage] = useState(initialValue.message.replaceAll("\\n", "\n"));
+
+    const detectedArguments = parseTagArguments(message);
+    const hasReservedEphemeral = detectedArguments.some(arg => arg.name === "ephemeral");
+    const nameAlreadyExists = name !== initialValue.name && getTag(name);
+
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
+            <ModalHeader>
+                <BaseText size="lg" weight="semibold" style={{ flexGrow: 1 }}>Create Tag</BaseText>
+                <ModalCloseButton onClick={modalProps.onClose} />
+            </ModalHeader>
+
+            <ModalContent>
+                <Flex flexDirection="column" gap={12}>
+                    <Paragraph>Create a new tag which will be registered as a slash command.</Paragraph>
+
+                    <section className={Margins.top8}>
+                        <HeadingSecondary>Name</HeadingSecondary>
+                        <TextInput value={name} onChange={setName} placeholder="greet" />
+                    </section>
+
+                    <section>
+                        <HeadingSecondary>Response</HeadingSecondary>
+                        <TextArea value={message} onChange={setMessage} placeholder={EXAMPLE_RESPONSE} />
+                    </section>
+
+                    {detectedArguments.length > 0 && (
+                        <section>
+                            <HeadingSecondary>Detected Arguments</HeadingSecondary>
+                            <Paragraph>
+                                <ul>
+                                    {detectedArguments.map(arg => (
+                                        <li key={arg.name}>
+                                            &mdash; <b>{arg.name}</b>{arg.defaultValue ? ` (default: ${arg.defaultValue})` : ""}
+                                        </li>
+                                    ))}
+                                </ul>
+                            </Paragraph>
+                        </section>
+                    )}
+
+                    <ExpandableSection
+                        renderContent={() => (
+                            <Flex flexDirection="column" gap={12}>
+                                <Paragraph>
+                                    Your response can include variables wrapped in double curly braces which will become command arguments, for example <InlineCode>{"Hello {{user}}"}</InlineCode>.
+                                </Paragraph>
+                                <Paragraph>
+                                    You can specify arguments with default values by using an equals sign, for example <InlineCode>{"Hello {{user = pal}}"}</InlineCode>.
+                                </Paragraph>
+
+                                <section>
+                                    <Paragraph><b>Example Command response:</b> <InlineCode>{EXAMPLE_RESPONSE}</InlineCode></Paragraph>
+                                    <Paragraph><b>Example usage:</b> <InlineCode>{"/greet user:@Clyde"}</InlineCode></Paragraph>
+                                    <Paragraph><b>Example output:</b> <InlineCode>{"Hello @Clyde! I am feeling great."}</InlineCode></Paragraph>
+                                </section>
+                            </Flex>
+                        )}
+                    >
+                        <Flex alignItems="center" gap={8}>
+                            <InfoIcon color="var(--text-muted)" height={16} width={16} />
+                            View Arguments guide
+                        </Flex>
+                    </ExpandableSection>
+                    {hasReservedEphemeral &&
+                        <Card variant="danger" className={Margins.top8} defaultPadding>
+                            <Paragraph>The argument name "ephemeral" is reserved and cannot be used.</Paragraph>
+                        </Card>
+                    }
+                    {nameAlreadyExists &&
+                        <Card variant="warning" className={Margins.top8} defaultPadding>
+                            <Paragraph>A tag with the name <InlineCode>{name}</InlineCode> already exists and will be overwritten.</Paragraph>
+                        </Card>
+                    }
+                </Flex>
+            </ModalContent>
+
+            <ModalFooter>
+                <Flex>
+                    <Button
+                        variant="secondary"
+                        onClick={modalProps.onClose}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            const tag = { name, message };
+                            addTag(tag);
+                            registerTagCommand(tag);
+                            modalProps.onClose();
+                        }}
+                        disabled={!name || !message || hasReservedEphemeral}
+                    >
+                        Create
+                    </Button>
+                </Flex>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
diff --git a/src/plugins/messageTags/SettingsTagList.tsx b/src/plugins/messageTags/SettingsTagList.tsx
new file mode 100644
index 000000000..dd3e31b1b
--- /dev/null
+++ b/src/plugins/messageTags/SettingsTagList.tsx
@@ -0,0 +1,41 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { BaseText } from "@components/BaseText";
+import { Button } from "@components/Button";
+import { Card } from "@components/Card";
+import { Flex } from "@components/Flex";
+import { DeleteIcon, PencilIcon } from "@components/Icons";
+import { Margins } from "@components/margins";
+import { Paragraph } from "@components/Paragraph";
+
+import { openCreateTagModal } from "./CreateTagModal";
+import { removeTag, settings } from "./settings";
+
+export function SettingsTagList() {
+    const { tagsList } = settings.use(["tagsList"]);
+
+    return (
+        <section className={Margins.top8}>
+            <BaseText size="md" weight="semibold">Registered Tags</BaseText>
+            <Flex flexDirection="column" gap="0.5em" className={Margins.top8}>
+                {Object.values(tagsList).map(tag => (
+                    <Card key={tag.name} className="vc-messageTags-card">
+                        <Paragraph size="md" weight="medium">{tag.name}</Paragraph>
+
+                        <Button variant="secondary" size="iconOnly" onClick={() => openCreateTagModal(tag)}>
+                            <PencilIcon aria-label="Edit Tag" width={20} height={20} />
+                        </Button>
+                        <Button variant="dangerSecondary" size="iconOnly" onClick={() => removeTag(tag.name)}>
+                            <DeleteIcon aria-label="Delete Tag" width={20} height={20} />
+                        </Button>
+                    </Card>
+                ))}
+                <Button onClick={() => openCreateTagModal()}>Create Tag</Button>
+            </Flex>
+        </section>
+    );
+}
diff --git a/src/plugins/messageTags/index.ts b/src/plugins/messageTags/index.ts
index 08b035b17..dd664730b 100644
--- a/src/plugins/messageTags/index.ts
+++ b/src/plugins/messageTags/index.ts
@@ -16,81 +16,85 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./styles.css";
+
 import { ApplicationCommandInputType, ApplicationCommandOptionType, findOption, registerCommand, sendBotMessage, unregisterCommand } from "@api/Commands";
-import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
+import { sendMessage } from "@utils/discord";
+import definePlugin from "@utils/types";
+
+import { openCreateTagModal } from "./CreateTagModal";
+import { getTag, getTags, removeTag, settings, Tag } from "./settings";
 
-const EMOTE = "<:luna:1035316192220553236>";
-const DATA_KEY = "MessageTags_TAGS";
 const MessageTagsMarker = Symbol("MessageTags");
+const ArgumentRegex = /{{(.+?)}}/g;
 
-interface Tag {
-    name: string;
-    message: string;
+export function parseTagArguments(message: string) {
+    const args = [] as { name: string, defaultValue: string | null; }[];
+
+    for (const [, value] of message.matchAll(ArgumentRegex)) {
+        const [name, defaultValue] = value.split("=").map(s => s.trim());
+
+        if (!name) continue;
+        if (args.some(arg => arg.name === name)) continue;
+
+        args.push({ name: name.toLowerCase(), defaultValue: defaultValue ?? null });
+    }
+
+    return args;
 }
 
-function getTags() {
-    return settings.store.tagsList;
-}
+export function registerTagCommand(tag: Tag) {
+    const tagArguments = parseTagArguments(tag.message);
 
-function getTag(name: string) {
-    return settings.store.tagsList[name] ?? null;
-}
-
-function addTag(tag: Tag) {
-    settings.store.tagsList[tag.name] = tag;
-}
-
-function removeTag(name: string) {
-    delete settings.store.tagsList[name];
-}
-
-function createTagCommand(tag: Tag) {
     registerCommand({
         name: tag.name,
         description: tag.name,
-        inputType: ApplicationCommandInputType.BUILT_IN_TEXT,
-        execute: async (_, ctx) => {
-            if (!getTag(tag.name)) {
-                sendBotMessage(ctx.channel.id, {
-                    content: `${EMOTE} The tag **${tag.name}** does not exist anymore! Please reload ur Discord to fix :)`
-                });
-                return { content: `/${tag.name}` };
+        inputType: ApplicationCommandInputType.BUILT_IN,
+        options: [
+            ...tagArguments.map(arg => ({
+                name: arg.name,
+                description: arg.name,
+                type: ApplicationCommandOptionType.STRING,
+                required: arg.defaultValue === null
+            })),
+            {
+                name: "ephemeral",
+                description: "Whether the response should only be visible to you",
+                type: ApplicationCommandOptionType.BOOLEAN,
+                required: false
             }
+        ],
 
-            if (settings.store.clyde) sendBotMessage(ctx.channel.id, {
-                content: `${EMOTE} The tag **${tag.name}** has been sent!`
-            });
-            return { content: tag.message.replaceAll("\\n", "\n") };
+        execute: async (args, ctx) => {
+            const ephemeral = findOption(args, "ephemeral", false);
+
+            const response = tag.message
+                .replace(ArgumentRegex, (fullMatch, value: string) => {
+                    const [argName, defaultValue] = value.split("=").map(s => s.trim());
+                    return findOption(args, argName, null) ?? defaultValue ?? fullMatch;
+                })
+                .replaceAll("\\n", "\n");
+
+            const doSend = ephemeral ? sendBotMessage : sendMessage;
+            doSend(ctx.channel.id, { content: response });
         },
         [MessageTagsMarker]: true,
     }, "CustomTags");
 }
 
-const settings = definePluginSettings({
-    clyde: {
-        name: "Clyde message on send",
-        description: "If enabled, clyde will send you an ephemeral message when a tag was used.",
-        type: OptionType.BOOLEAN,
-        default: true
-    },
-    tagsList: {
-        type: OptionType.CUSTOM,
-        default: {} as Record<string, Tag>,
-    }
-});
+
 
 export default definePlugin({
     name: "MessageTags",
-    description: "Allows you to save messages and to use them with a simple command.",
-    authors: [Devs.Luna],
+    description: "Allows you to create custom slash commands",
+    authors: [Devs.Luna, Devs.Ven],
     settings,
 
     async start() {
         const tags = getTags();
         for (const tagName in tags) {
-            createTagCommand(tags[tagName]);
+            registerTagCommand(tags[tagName]);
         }
     },
 
@@ -104,131 +108,62 @@ export default definePlugin({
                     name: "create",
                     description: "Create a new tag",
                     type: ApplicationCommandOptionType.SUB_COMMAND,
-                    options: [
-                        {
-                            name: "tag-name",
-                            description: "The name of the tag to trigger the response",
-                            type: ApplicationCommandOptionType.STRING,
-                            required: true
-                        },
-                        {
-                            name: "message",
-                            description: "The message that you will send when using this tag",
-                            type: ApplicationCommandOptionType.STRING,
-                            required: true
-                        }
-                    ]
                 },
                 {
                     name: "list",
-                    description: "List all tags from yourself",
+                    description: "List all your tags",
                     type: ApplicationCommandOptionType.SUB_COMMAND,
                     options: []
                 },
                 {
                     name: "delete",
-                    description: "Remove a tag from your yourself",
+                    description: "Remove a tag by name",
                     type: ApplicationCommandOptionType.SUB_COMMAND,
                     options: [
                         {
                             name: "tag-name",
-                            description: "The name of the tag to trigger the response",
+                            description: "The name of the tag",
                             type: ApplicationCommandOptionType.STRING,
                             required: true
                         }
                     ]
                 },
-                {
-                    name: "preview",
-                    description: "Preview a tag without sending it publicly",
-                    type: ApplicationCommandOptionType.SUB_COMMAND,
-                    options: [
-                        {
-                            name: "tag-name",
-                            description: "The name of the tag to trigger the response",
-                            type: ApplicationCommandOptionType.STRING,
-                            required: true
-                        }
-                    ]
-                }
             ],
 
             async execute(args, ctx) {
-
                 switch (args[0].name) {
                     case "create": {
-                        const name: string = findOption(args[0].options, "tag-name", "");
-                        const message: string = findOption(args[0].options, "message", "");
-
-                        if (getTag(name))
-                            return sendBotMessage(ctx.channel.id, {
-                                content: `${EMOTE} A Tag with the name **${name}** already exists!`
-                            });
-
-                        const tag = {
-                            name: name,
-                            message: message
-                        };
-
-                        createTagCommand(tag);
-                        addTag(tag);
-
-                        sendBotMessage(ctx.channel.id, {
-                            content: `${EMOTE} Successfully created the tag **${name}**!`
-                        });
-                        break; // end 'create'
+                        openCreateTagModal();
+                        break;
                     }
+
                     case "delete": {
                         const name: string = findOption(args[0].options, "tag-name", "");
 
                         if (!getTag(name))
                             return sendBotMessage(ctx.channel.id, {
-                                content: `${EMOTE} A Tag with the name **${name}** does not exist!`
+                                content: `A Tag with the name **${name}** does not exist!`
                             });
 
                         unregisterCommand(name);
                         removeTag(name);
 
                         sendBotMessage(ctx.channel.id, {
-                            content: `${EMOTE} Successfully deleted the tag **${name}**!`
+                            content: `Successfully deleted the tag **${name}**!`
                         });
-                        break; // end 'delete'
+
+                        break;
                     }
+
                     case "list": {
-                        sendBotMessage(ctx.channel.id, {
-                            embeds: [
-                                {
-                                    title: "All Tags:",
-                                    description: Object.values(getTags())
-                                        .map(tag => `\`${tag.name}\`: ${tag.message.slice(0, 72).replaceAll("\\n", " ")}${tag.message.length > 72 ? "..." : ""}`)
-                                        .join("\n") || `${EMOTE} Woops! There are no tags yet, use \`/tags create\` to create one!`,
-                                    // @ts-expect-error
-                                    color: 0xd77f7f,
-                                    type: "rich",
-                                }
-                            ]
-                        });
-                        break; // end 'list'
-                    }
-                    case "preview": {
-                        const name: string = findOption(args[0].options, "tag-name", "");
-                        const tag = getTag(name);
-
-                        if (!tag)
-                            return sendBotMessage(ctx.channel.id, {
-                                content: `${EMOTE} A Tag with the name **${name}** does not exist!`
-                            });
+                        const content = Object.values(getTags())
+                            .map(tag => `\`${tag.name}\`: ${tag.message.slice(0, 72).replaceAll("\\n", " ")}${tag.message.length > 72 ? "..." : ""}`)
+                            .join("\n");
 
                         sendBotMessage(ctx.channel.id, {
-                            content: tag.message.replaceAll("\\n", "\n")
+                            content: content || "Woops! There are no tags yet, use `/tags create` to create one!",
                         });
-                        break; // end 'preview'
-                    }
 
-                    default: {
-                        sendBotMessage(ctx.channel.id, {
-                            content: "Invalid sub-command"
-                        });
                         break;
                     }
                 }
diff --git a/src/plugins/messageTags/settings.ts b/src/plugins/messageTags/settings.ts
new file mode 100644
index 000000000..a30b38ab3
--- /dev/null
+++ b/src/plugins/messageTags/settings.ts
@@ -0,0 +1,42 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+
+import { SettingsTagList } from "./SettingsTagList";
+
+export const settings = definePluginSettings({
+    tagsList: {
+        type: OptionType.CUSTOM,
+        default: {} as Record<string, Tag>,
+    },
+    tagComponent: {
+        type: OptionType.COMPONENT,
+        component: SettingsTagList
+    }
+});
+
+export interface Tag {
+    name: string;
+    message: string;
+}
+
+export function getTags() {
+    return settings.store.tagsList;
+}
+
+export function getTag(name: string) {
+    return settings.store.tagsList[name];
+}
+
+export function addTag(tag: Tag) {
+    settings.store.tagsList[tag.name] = tag;
+}
+
+export function removeTag(name: string) {
+    delete settings.store.tagsList[name];
+}
diff --git a/src/plugins/messageTags/styles.css b/src/plugins/messageTags/styles.css
new file mode 100644
index 000000000..bac6d40e9
--- /dev/null
+++ b/src/plugins/messageTags/styles.css
@@ -0,0 +1,8 @@
+.vc-messageTags-card {
+    padding: 0.5em;
+    padding-left: 1em;
+    display: grid;
+    grid-template-columns: 1fr min-content min-content;
+    align-items: center;
+    gap: 0.25em;
+}
\ No newline at end of file

From 06afe5fb2130df92324b061869a1457bc323ac03 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Wed, 11 Mar 2026 05:34:41 +0100
Subject: [PATCH 04/12] MessageTags: rename to CustomCommands & fix some logic
 errors

---
 .../CreateTagModal.tsx                        |  3 +--
 .../SettingsTagList.tsx                       |  2 +-
 .../{messageTags => customCommands}/index.ts  | 21 ++++++++++---------
 .../settings.ts                               |  6 ++++++
 .../styles.css                                |  2 +-
 5 files changed, 20 insertions(+), 14 deletions(-)
 rename src/plugins/{messageTags => customCommands}/CreateTagModal.tsx (98%)
 rename src/plugins/{messageTags => customCommands}/SettingsTagList.tsx (95%)
 rename src/plugins/{messageTags => customCommands}/index.ts (91%)
 rename src/plugins/{messageTags => customCommands}/settings.ts (83%)
 rename src/plugins/{messageTags => customCommands}/styles.css (86%)

diff --git a/src/plugins/messageTags/CreateTagModal.tsx b/src/plugins/customCommands/CreateTagModal.tsx
similarity index 98%
rename from src/plugins/messageTags/CreateTagModal.tsx
rename to src/plugins/customCommands/CreateTagModal.tsx
index c12ec8f56..652f18503 100644
--- a/src/plugins/messageTags/CreateTagModal.tsx
+++ b/src/plugins/customCommands/CreateTagModal.tsx
@@ -17,7 +17,7 @@ import { Paragraph } from "@components/Paragraph";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { TextArea, TextInput, useState } from "@webpack/common";
 
-import { parseTagArguments, registerTagCommand } from ".";
+import { parseTagArguments } from ".";
 import { addTag, getTag, Tag } from "./settings";
 
 export function openCreateTagModal(initialValue: Tag = { name: "", message: "" }) {
@@ -120,7 +120,6 @@ function Modal({ initialValue, modalProps }: { initialValue: Tag; modalProps: Mo
                         onClick={() => {
                             const tag = { name, message };
                             addTag(tag);
-                            registerTagCommand(tag);
                             modalProps.onClose();
                         }}
                         disabled={!name || !message || hasReservedEphemeral}
diff --git a/src/plugins/messageTags/SettingsTagList.tsx b/src/plugins/customCommands/SettingsTagList.tsx
similarity index 95%
rename from src/plugins/messageTags/SettingsTagList.tsx
rename to src/plugins/customCommands/SettingsTagList.tsx
index dd3e31b1b..f79dfe4c9 100644
--- a/src/plugins/messageTags/SettingsTagList.tsx
+++ b/src/plugins/customCommands/SettingsTagList.tsx
@@ -23,7 +23,7 @@ export function SettingsTagList() {
             <BaseText size="md" weight="semibold">Registered Tags</BaseText>
             <Flex flexDirection="column" gap="0.5em" className={Margins.top8}>
                 {Object.values(tagsList).map(tag => (
-                    <Card key={tag.name} className="vc-messageTags-card">
+                    <Card key={tag.name} className="vc-customCommands-card">
                         <Paragraph size="md" weight="medium">{tag.name}</Paragraph>
 
                         <Button variant="secondary" size="iconOnly" onClick={() => openCreateTagModal(tag)}>
diff --git a/src/plugins/messageTags/index.ts b/src/plugins/customCommands/index.ts
similarity index 91%
rename from src/plugins/messageTags/index.ts
rename to src/plugins/customCommands/index.ts
index dd664730b..e9d857bd5 100644
--- a/src/plugins/messageTags/index.ts
+++ b/src/plugins/customCommands/index.ts
@@ -18,7 +18,8 @@
 
 import "./styles.css";
 
-import { ApplicationCommandInputType, ApplicationCommandOptionType, findOption, registerCommand, sendBotMessage, unregisterCommand } from "@api/Commands";
+import { ApplicationCommandInputType, ApplicationCommandOptionType, findOption, registerCommand, sendBotMessage } from "@api/Commands";
+import { migratePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { sendMessage } from "@utils/discord";
 import definePlugin from "@utils/types";
@@ -26,7 +27,7 @@ import definePlugin from "@utils/types";
 import { openCreateTagModal } from "./CreateTagModal";
 import { getTag, getTags, removeTag, settings, Tag } from "./settings";
 
-const MessageTagsMarker = Symbol("MessageTags");
+const CustomCommandsMarker = Symbol("CustomCommands");
 const ArgumentRegex = /{{(.+?)}}/g;
 
 export function parseTagArguments(message: string) {
@@ -79,16 +80,17 @@ export function registerTagCommand(tag: Tag) {
             const doSend = ephemeral ? sendBotMessage : sendMessage;
             doSend(ctx.channel.id, { content: response });
         },
-        [MessageTagsMarker]: true,
-    }, "CustomTags");
+        [CustomCommandsMarker]: true,
+    }, "CustomCommands");
 }
 
 
-
+migratePluginSettings("CustomCommands", "MessageTags");
 export default definePlugin({
-    name: "MessageTags",
-    description: "Allows you to create custom slash commands",
-    authors: [Devs.Luna, Devs.Ven],
+    name: "CustomCommands",
+    description: "Allows you to create custom slash commands / tags",
+    tags: ["MessageTags"],
+    authors: [Devs.Ven, Devs.Luna,],
     settings,
 
     async start() {
@@ -101,7 +103,7 @@ export default definePlugin({
     commands: [
         {
             name: "tags",
-            description: "Manage all the tags for yourself",
+            description: "Manage all custom commands",
             inputType: ApplicationCommandInputType.BUILT_IN,
             options: [
                 {
@@ -145,7 +147,6 @@ export default definePlugin({
                                 content: `A Tag with the name **${name}** does not exist!`
                             });
 
-                        unregisterCommand(name);
                         removeTag(name);
 
                         sendBotMessage(ctx.channel.id, {
diff --git a/src/plugins/messageTags/settings.ts b/src/plugins/customCommands/settings.ts
similarity index 83%
rename from src/plugins/messageTags/settings.ts
rename to src/plugins/customCommands/settings.ts
index a30b38ab3..418f06fa2 100644
--- a/src/plugins/messageTags/settings.ts
+++ b/src/plugins/customCommands/settings.ts
@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { unregisterCommand } from "@api/Commands";
 import { definePluginSettings } from "@api/Settings";
 import { OptionType } from "@utils/types";
 
+import { registerTagCommand } from ".";
 import { SettingsTagList } from "./SettingsTagList";
 
 export const settings = definePluginSettings({
@@ -34,9 +36,13 @@ export function getTag(name: string) {
 }
 
 export function addTag(tag: Tag) {
+    unregisterCommand(tag.name);
+
     settings.store.tagsList[tag.name] = tag;
+    registerTagCommand(tag);
 }
 
 export function removeTag(name: string) {
     delete settings.store.tagsList[name];
+    unregisterCommand(name);
 }
diff --git a/src/plugins/messageTags/styles.css b/src/plugins/customCommands/styles.css
similarity index 86%
rename from src/plugins/messageTags/styles.css
rename to src/plugins/customCommands/styles.css
index bac6d40e9..012a72ea1 100644
--- a/src/plugins/messageTags/styles.css
+++ b/src/plugins/customCommands/styles.css
@@ -1,4 +1,4 @@
-.vc-messageTags-card {
+.vc-customCommands-card {
     padding: 0.5em;
     padding-left: 1em;
     display: grid;

From b442f4e6750c2a011a71662f7cee18d62fc50828 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Wed, 11 Mar 2026 15:46:37 -0400
Subject: [PATCH 05/12] HeaderBarAPI: Fix CSS & Patch

---
 src/api/HeaderBar.tsx                 | 4 ++--
 src/equicordplugins/_api/headerBar.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/HeaderBar.tsx b/src/api/HeaderBar.tsx
index 3b2aa3447..161904c9b 100644
--- a/src/api/HeaderBar.tsx
+++ b/src/api/HeaderBar.tsx
@@ -13,7 +13,7 @@ import type { ComponentType, JSX, MouseEventHandler, ReactNode } from "react";
 
 const logger = new Logger("HeaderBarAPI");
 
-const HeaderBarClasses = findCssClassesLazy("clickable", "withHighlight");
+const HeaderBarClasses = findCssClassesLazy("clickable", "selected", "badge", "badgeContainer");
 const HeaderBarIcon = findComponentByCodeLazy(".HEADER_BAR_BADGE_TOP:", '"aria-haspopup":') as ComponentType<ChannelToolbarButtonProps>;
 
 export interface HeaderBarButtonProps {
@@ -101,7 +101,7 @@ export function HeaderBarButton(props: HeaderBarButtonProps & { ref?: React.RefO
             {({ onMouseEnter, onMouseLeave }) => (
                 <Clickable
                     {...{ innerRef: ref } as any}
-                    className={classes(HeaderBarClasses.clickable, HeaderBarClasses.withHighlight, className)}
+                    className={classes(HeaderBarClasses.clickable, className)}
                     style={{ width: iconSize, boxSizing: "content-box", justifyContent: "center" }}
                     onClick={onClick}
                     onContextMenu={onContextMenu}
diff --git a/src/equicordplugins/_api/headerBar.ts b/src/equicordplugins/_api/headerBar.ts
index ff05d2ee6..e9f50be8f 100644
--- a/src/equicordplugins/_api/headerBar.ts
+++ b/src/equicordplugins/_api/headerBar.ts
@@ -16,7 +16,7 @@ export default definePlugin({
         {
             find: '?"BACK_FORWARD_NAVIGATION":',
             replacement: {
-                match: /(?<="HELP"===.{0,150}className:\i\.\i\}\))(?=\])/,
+                match: /(?<="HELP"===.{0,75}\{\}\))(?=\])/,
                 replace: ",...Vencord.Api.HeaderBar._addHeaderBarButtons()"
             }
         },

From 8efccc960e3b2c4efc93280c7a345392a40c84bc Mon Sep 17 00:00:00 2001
From: Etorix <92535668+EtorixDev@users.noreply.github.com>
Date: Wed, 11 Mar 2026 13:18:21 -0700
Subject: [PATCH 06/12] Questify: Fixes. (#904)

---
 src/equicordplugins/questify/index.tsx      | 12 ++++++++++--
 src/equicordplugins/questify/utils/misc.tsx |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/equicordplugins/questify/index.tsx b/src/equicordplugins/questify/index.tsx
index ba25393b2..9a1f9c544 100644
--- a/src/equicordplugins/questify/index.tsx
+++ b/src/equicordplugins/questify/index.tsx
@@ -1388,8 +1388,8 @@ export default definePlugin({
                 },
                 {
                     // Prevent SearchableSelect from force-scrolling into view, causing the dropdown to close.
-                    match: /(?<=\.scrollIntoView\()/,
-                    replace: "{block:\"nearest\",inline:\"nearest\"}"
+                    match: /(&&\i.current\?\.scrollIntoView\(\))/,
+                    replace: ""
                 },
                 {
                     // Passes a popoutClassName and optionClassName to the popout handler.
@@ -1419,6 +1419,14 @@ export default definePlugin({
                 }
             ]
         },
+        {
+            // Prevent the new version of SearchableSelect from force-scrolling into view.
+            find: '"data-mana-component":"combobox",',
+            replacement: {
+                match: /\i.current\?\.scrollIntoView\({.{0,50}?}\)/,
+                replace: ""
+            }
+        },
         {
             // Formats the Orbs balance on the Quests page with locale string formatting.
             find: '("BalanceCounter")',
diff --git a/src/equicordplugins/questify/utils/misc.tsx b/src/equicordplugins/questify/utils/misc.tsx
index df2e3bec5..3434629e0 100644
--- a/src/equicordplugins/questify/utils/misc.tsx
+++ b/src/equicordplugins/questify/utils/misc.tsx
@@ -77,7 +77,7 @@ export function getQuestProgress(quest: Quest, task: QuestTask) {
 export function getQuestTarget(task: QuestTask) {
     const isWatch = task.type === QuestTaskType.WATCH_VIDEO || task.type === QuestTaskType.WATCH_VIDEO_ON_MOBILE;
     const raw = task.target;
-    const adjusted = raw - (isWatch ? videoQuestLeeway : 0);
+    const adjusted = Math.max(0, raw - (isWatch ? videoQuestLeeway : 0));
     return { raw, adjusted };
 }
 

From 377f751d46e6251e14c9fb81da5b92dcf852b461 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Wed, 11 Mar 2026 20:38:13 -0400
Subject: [PATCH 07/12] MusicControls: Fix YTM Text Color

---
 src/equicordplugins/musicControls/settings.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/equicordplugins/musicControls/settings.tsx b/src/equicordplugins/musicControls/settings.tsx
index 299f8b7d8..b3bda9c26 100644
--- a/src/equicordplugins/musicControls/settings.tsx
+++ b/src/equicordplugins/musicControls/settings.tsx
@@ -170,7 +170,9 @@ export const settings = definePluginSettings({
         component: () => (
             <section>
                 <HeadingSecondary>Youtube Music</HeadingSecondary>
-                <MaskedLink href="https://github.com/pear-devs/pear-desktop">Pear Desktop</MaskedLink> is required for these settings
+                <Paragraph>
+                    Install <MaskedLink href="https://github.com/pear-devs/pear-desktop">Pear Desktop</MaskedLink> from here, then go to Plugins &rarr; API Server &rarr; Enabled
+                </Paragraph>
             </section>
         )
     },

From 9b69d9b33f6ae5c2e546b64a55c31e169f3cbf85 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Thu, 12 Mar 2026 21:28:22 -0400
Subject: [PATCH 08/12] Fix Patches

---
 src/equicordplugins/equicordHelper/index.tsx  | 2 +-
 src/equicordplugins/timezones/index.tsx       | 2 +-
 src/plugins/_api/badges/index.tsx             | 2 +-
 src/plugins/_api/messageDecorations/index.tsx | 2 +-
 src/plugins/decor/index.tsx                   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/equicordplugins/equicordHelper/index.tsx b/src/equicordplugins/equicordHelper/index.tsx
index 54b79e9e1..87cec07b1 100644
--- a/src/equicordplugins/equicordHelper/index.tsx
+++ b/src/equicordplugins/equicordHelper/index.tsx
@@ -206,7 +206,7 @@ export default definePlugin({
         },
         // Force Role Icon
         {
-            find: "Message Username",
+            find: '"role-icon-children"',
             predicate: () => settings.store.forceRoleIcon,
             replacement: {
                 match: /(?<=\}\):null\].{0,150}\?2:)0(?=\})/,
diff --git a/src/equicordplugins/timezones/index.tsx b/src/equicordplugins/timezones/index.tsx
index ae5d08995..158be77f9 100644
--- a/src/equicordplugins/timezones/index.tsx
+++ b/src/equicordplugins/timezones/index.tsx
@@ -271,7 +271,7 @@ export default definePlugin({
             }
         },
         {
-            find: '"Message Username"',
+            find: '"role-icon-children"',
             replacement: {
                 // thanks https://github.com/Syncxv/vc-timezones/pull/4
                 match: /(?<=isVisibleOnlyOnHover.+?)id:.{1,11},timestamp.{1,50}}\),/,
diff --git a/src/plugins/_api/badges/index.tsx b/src/plugins/_api/badges/index.tsx
index cd366010c..4b743a478 100644
--- a/src/plugins/_api/badges/index.tsx
+++ b/src/plugins/_api/badges/index.tsx
@@ -138,7 +138,7 @@ export default definePlugin({
                     replace: "...$1.props,$&"
                 },
                 {
-                    match: /(?<=forceOpen:.{0,40}?\i\((\i)\.id\).{0,100}?)children:/,
+                    match: /(?<=__unsupportedReactNodeAsText:\i,forceOpen:.{0,40}?)children:(?=.{0,5}\$\{(\i)\.id\})/,
                     replace: "children:$1.component?$self.renderBadgeComponent({...$1}) :"
                 },
                 // handle onClick and onContextMenu
diff --git a/src/plugins/_api/messageDecorations/index.tsx b/src/plugins/_api/messageDecorations/index.tsx
index 590e50bd7..6d6dec25d 100644
--- a/src/plugins/_api/messageDecorations/index.tsx
+++ b/src/plugins/_api/messageDecorations/index.tsx
@@ -30,7 +30,7 @@ export default definePlugin({
 
     patches: [
         {
-            find: '"Message Username"',
+            find: '"role-icon-children"',
             replacement: {
                 match: /#{intl::GUILD_COMMUNICATION_DISABLED_BOTTOM_SHEET_TITLE}.+?renderPopout:.+?(?=\])/,
                 replace: "$&,Vencord.Api.MessageDecorations.__addDecorationsToMessage(arguments[0])"
diff --git a/src/plugins/decor/index.tsx b/src/plugins/decor/index.tsx
index ea6a1e610..0eb044f19 100644
--- a/src/plugins/decor/index.tsx
+++ b/src/plugins/decor/index.tsx
@@ -97,7 +97,7 @@ export default definePlugin({
             ]
         },
         ...[
-            '"Message Username"', // Messages
+            '"role-icon-children"', // Messages
             "#{intl::COLLECTIBLES_NAMEPLATE_PREVIEW_A11Y}", // Nameplate preview
             "#{intl::COLLECTIBLES_PROFILE_PREVIEW_A11Y}", // Avatar preview
         ].map(find => ({

From 92b7df7b3c99f0618a4e172376497204eb1b1b1a Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Fri, 13 Mar 2026 08:55:22 -0400
Subject: [PATCH 09/12] BadgesAPI: Update Patch to be stable compat

---
 src/plugins/_api/badges/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/_api/badges/index.tsx b/src/plugins/_api/badges/index.tsx
index 4b743a478..53b69c0c1 100644
--- a/src/plugins/_api/badges/index.tsx
+++ b/src/plugins/_api/badges/index.tsx
@@ -138,7 +138,7 @@ export default definePlugin({
                     replace: "...$1.props,$&"
                 },
                 {
-                    match: /(?<=__unsupportedReactNodeAsText:\i,forceOpen:.{0,40}?)children:(?=.{0,5}\$\{(\i)\.id\})/,
+                    match: /(?<=__unsupportedReactNodeAsText:\i,forceOpen:.{0,70}?)children:(?=.{0,5}\$\{(\i)\.id\})/,
                     replace: "children:$1.component?$self.renderBadgeComponent({...$1}) :"
                 },
                 // handle onClick and onContextMenu

From 5861dd7fa463ba1afa78d5c224cadff9ff3bd438 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Fri, 13 Mar 2026 14:20:14 +0100
Subject: [PATCH 10/12] fix toolbox

---
 src/plugins/vencordToolbox/index.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/plugins/vencordToolbox/index.tsx b/src/plugins/vencordToolbox/index.tsx
index 5f4f78fc1..fb9541968 100644
--- a/src/plugins/vencordToolbox/index.tsx
+++ b/src/plugins/vencordToolbox/index.tsx
@@ -28,7 +28,7 @@ import type { PropsWithChildren } from "react";
 
 import { renderPopout } from "./menu";
 
-const HeaderBarIcon = findComponentByCodeLazy(".HEADER_BAR_BADGE_TOP:", '"aria-haspopup":');
+const HeaderBarIcon = findComponentByCodeLazy(".HEADER_BAR_BADGE_BOTTOM,", 'position:"bottom"');
 
 export const settings = definePluginSettings({
     showPluginMenu: {
@@ -40,7 +40,7 @@ export const settings = definePluginSettings({
 
 function Icon({ isShown }: { isShown: boolean; }) {
     return (
-        <svg viewBox="0 0 27 27" width={24} height={24} className="vc-toolbox-icon">
+        <svg viewBox="0 0 27 27" width={18} height={18} className="vc-toolbox-icon">
             {isShown
                 ? <path fill="currentColor" d="M9 0h1v1h1v2h1v2h3V3h1V1h1V0h1v2h1v2h1v7h-1v-1h-3V9h1V6h-1v4h-3v1h1v-1h2v1h3v1h-1v1h-3v2h1v1h1v1h1v3h-1v4h-2v-1h-1v-4h-1v4h-1v1h-2v-4H9v-3h1v-1h1v-1h1v-2H9v-1H8v-1h3V6h-1v3h1v1H8v1H7V4h1V2h1M5 19h2v1h1v1h1v3H4v-1h2v-1H4v-2h1m15-1h2v1h1v2h-2v1h2v1h-5v-3h1v-1h1m4 3h4v1h-4" />
                 : <path fill="currentColor" d="M0 0h7v1H6v1H5v1H4v1H3v1H2v1h5v1H0V6h1V5h1V4h1V3h1V2h1V1H0m13 2h5v1h-1v1h-1v1h-1v1h3v1h-5V7h1V6h1V5h1V4h-3m8 5h1v5h1v-1h1v1h-1v1h1v-1h1v1h-1v3h-1v1h-2v1h-1v1h1v-1h2v-1h1v2h-1v1h-2v1h-1v-1h-1v1h-6v-1h-1v-1h-1v-2h1v1h2v1h3v1h1v-1h-1v-1h-3v-1h-4v-4h1v-2h1v-1h1v-1h1v2h1v1h1v-1h1v1h-1v1h2v-2h1v-2h1v-1h1M8 14h2v1H9v4h1v2h1v1h1v1h1v1h4v1h-6v-1H5v-1H4v-5h1v-1h1v-2h2m17 3h1v3h-1v1h-1v1h-1v2h-2v-2h2v-1h1v-1h1m1 0h1v3h-1v1h-2v-1h1v-1h1" />
@@ -49,7 +49,7 @@ function Icon({ isShown }: { isShown: boolean; }) {
     );
 }
 
-function VencordPopoutButton({ buttonClass }: { buttonClass: string; }) {
+function VencordPopoutButton() {
     const buttonRef = useRef(null);
     const [show, setShow] = useState(false);
 
@@ -66,7 +66,7 @@ function VencordPopoutButton({ buttonClass }: { buttonClass: string; }) {
             {(_, { isShown }) => (
                 <HeaderBarIcon
                     ref={buttonRef}
-                    className={`vc-toolbox-btn ${buttonClass}`}
+                    className="vc-toolbox-btn"
                     onClick={() => setShow(v => !v)}
                     tooltip={isShown ? null : "Vencord Toolbox"}
                     icon={() => <Icon isShown={isShown} />}
@@ -88,18 +88,18 @@ export default definePlugin({
         {
             find: '?"BACK_FORWARD_NAVIGATION":',
             replacement: {
-                match: /(?<=trailing:.{0,50})\i\.Fragment,\{(?=.+?className:(\i\.\i))/,
-                replace: "$self.TrailingWrapper,{className:$1,"
+                match: /(?<=trailing:.{0,50})\i\.Fragment,(?=\{children:\[)/,
+                replace: "$self.TrailingWrapper,"
             }
         }
     ],
 
-    TrailingWrapper({ children, className }: PropsWithChildren<{ className: string; }>) {
+    TrailingWrapper({ children }: PropsWithChildren) {
         return (
             <>
                 {children}
-                <ErrorBoundary noop>
-                    <VencordPopoutButton buttonClass={className} />
+                <ErrorBoundary key="vc-toolbox" noop>
+                    <VencordPopoutButton />
                 </ErrorBoundary>
             </>
         );

From f768065b6d66255fc214eaa5697103b9d4156777 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Fri, 13 Mar 2026 14:25:20 +0100
Subject: [PATCH 11/12] fix Decor & Message decorations

---
 src/plugins/_api/messageDecorations/index.tsx | 2 +-
 src/plugins/decor/index.tsx                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/_api/messageDecorations/index.tsx b/src/plugins/_api/messageDecorations/index.tsx
index 590e50bd7..c21e691d1 100644
--- a/src/plugins/_api/messageDecorations/index.tsx
+++ b/src/plugins/_api/messageDecorations/index.tsx
@@ -30,7 +30,7 @@ export default definePlugin({
 
     patches: [
         {
-            find: '"Message Username"',
+            find: "#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}",
             replacement: {
                 match: /#{intl::GUILD_COMMUNICATION_DISABLED_BOTTOM_SHEET_TITLE}.+?renderPopout:.+?(?=\])/,
                 replace: "$&,Vencord.Api.MessageDecorations.__addDecorationsToMessage(arguments[0])"
diff --git a/src/plugins/decor/index.tsx b/src/plugins/decor/index.tsx
index e66bd1e7e..30100d1d6 100644
--- a/src/plugins/decor/index.tsx
+++ b/src/plugins/decor/index.tsx
@@ -97,7 +97,7 @@ export default definePlugin({
             ]
         },
         ...[
-            '"Message Username"', // Messages
+            "#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}", // Messages
             "#{intl::COLLECTIBLES_NAMEPLATE_PREVIEW_A11Y}", // Nameplate preview
             "#{intl::COLLECTIBLES_PROFILE_PREVIEW_A11Y}", // Avatar preview
         ].map(find => ({

From 1b2d9c1b22602873b2dc3061712555c94c0b475c Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Fri, 13 Mar 2026 09:51:32 -0400
Subject: [PATCH 12/12] TextReplace: Fix Layout

---
 src/equicordplugins/equicordHelper/index.tsx |  2 +-
 src/equicordplugins/timezones/index.tsx      |  2 +-
 src/plugins/textReplace/index.tsx            | 18 ++++++++----------
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/equicordplugins/equicordHelper/index.tsx b/src/equicordplugins/equicordHelper/index.tsx
index 87cec07b1..94a043fcb 100644
--- a/src/equicordplugins/equicordHelper/index.tsx
+++ b/src/equicordplugins/equicordHelper/index.tsx
@@ -206,7 +206,7 @@ export default definePlugin({
         },
         // Force Role Icon
         {
-            find: '"role-icon-children"',
+            find: "#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}",
             predicate: () => settings.store.forceRoleIcon,
             replacement: {
                 match: /(?<=\}\):null\].{0,150}\?2:)0(?=\})/,
diff --git a/src/equicordplugins/timezones/index.tsx b/src/equicordplugins/timezones/index.tsx
index 158be77f9..b40c3a515 100644
--- a/src/equicordplugins/timezones/index.tsx
+++ b/src/equicordplugins/timezones/index.tsx
@@ -271,7 +271,7 @@ export default definePlugin({
             }
         },
         {
-            find: '"role-icon-children"',
+            find: "#{intl::GUILD_COMMUNICATION_DISABLED_ICON_TOOLTIP_BODY}",
             replacement: {
                 // thanks https://github.com/Syncxv/vc-timezones/pull/4
                 match: /(?<=isVisibleOnlyOnHover.+?)id:.{1,11},timestamp.{1,50}}\),/,
diff --git a/src/plugins/textReplace/index.tsx b/src/plugins/textReplace/index.tsx
index 7aba14bc1..af82393b7 100644
--- a/src/plugins/textReplace/index.tsx
+++ b/src/plugins/textReplace/index.tsx
@@ -205,16 +205,14 @@ function TextReplace({ title, description, rulesArray, isRegex = false }: TextRe
                                         onChange={e => onChange(e, index, "onlyIfIncludes")}
                                     />
                                 </div>
-                                <Flex flexDirection="row" style={{ gap: "0.5em" }}>
-                                    <div style={{ flex: 0.9 }}>
-                                        <Select
-                                            options={scopeOptions}
-                                            isSelected={e => e === rule.scope}
-                                            select={e => onChange(e, index, "scope")}
-                                            serialize={e => e}
-                                        />
-                                    </div>
-                                </Flex>
+                                <div style={{ marginTop: "0.25em" }}>
+                                    <Select
+                                        options={scopeOptions}
+                                        isSelected={e => e === rule.scope}
+                                        select={e => onChange(e, index, "scope")}
+                                        serialize={e => e}
+                                    />
+                                </div>
                                 {isRegex && renderFindError(rule.find)}
                                 <Button
                                     className={cl("delete-button")}