add/emojiAliases (#737)

* woaho new plugin

* Refactor emoji query regex patterns and replacements

* Refactor emoji query service usage and styles

* Update and rename index.tsx to styles.css

* Create index.tsx

---------

Co-authored-by: thororen <78185467+thororen1234@users.noreply.github.com>

src/equicordplugins/emojiAlias/components/modals/ClearAliasesConfirmModal.tsx

@@ -0,0 +1,38 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Button } from "@components/Button";
+import { Heading } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize } from "@utils/modal";
+
+import { ClearAliasesConfirmModalProps } from "./types";
+
+export function ClearAliasesConfirmModal({ modalProps, onConfirm }: ClearAliasesConfirmModalProps) {
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.SMALL}>
+            <ModalHeader>
+                <Heading style={{ flexGrow: 1 }}>Delete all aliases</Heading>
+                <ModalCloseButton onClick={modalProps.onClose} />
+            </ModalHeader>
+            <ModalContent>
+                <Paragraph>This will remove every emoji alias you saved.</Paragraph>
+            </ModalContent>
+            <ModalFooter>
+                <Button
+                    variant="dangerPrimary"
+                    style={{ marginLeft: "auto" }}
+                    onClick={async () => {
+                        await onConfirm();
+                        modalProps.onClose();
+                    }}
+                >
+                    Delete all aliases
+                </Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}

src/equicordplugins/emojiAlias/components/modals/SetAliasModal.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 { Heading } from "@components/Heading";
+import { Paragraph } from "@components/Paragraph";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize } from "@utils/modal";
+import { TextInput, useState } from "@webpack/common";
+
+import { SetAliasModalProps } from "./types";
+
+export function SetAliasModal({
+    modalProps,
+    emojiDisplayName,
+    initialAlias,
+    getValidationError,
+    isDuplicateAlias,
+    onSave
+}: SetAliasModalProps) {
+    const [input, setInput] = useState(initialAlias);
+    const [error, setError] = useState<string | null>(null);
+
+    const validationError = getValidationError(input);
+    const duplicateAlias = isDuplicateAlias(input);
+    const finalError = duplicateAlias ? "Duplicate alias" : error ?? validationError;
+    const canSave = !validationError && !duplicateAlias;
+
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.SMALL}>
+            <ModalHeader>
+                <Heading style={{ flexGrow: 1 }}>Set alias</Heading>
+                <ModalCloseButton onClick={modalProps.onClose} />
+            </ModalHeader>
+
+            <ModalContent style={{ overflowY: "hidden" }}>
+                <Paragraph style={{ margin: 0, marginBottom: 8 }}>Set an alias for {emojiDisplayName}</Paragraph>
+                <TextInput
+                    value={input}
+                    onChange={value => {
+                        setInput(value);
+                        setError(null);
+                    }}
+                    placeholder='Alias, e.g. "sob"'
+                />
+                {finalError && (
+                    <BaseText style={{ color: "var(--text-feedback-critical)", marginTop: 8 }}>
+                        {finalError}
+                    </BaseText>
+                )}
+            </ModalContent>
+
+            <ModalFooter>
+                <Button
+                    variant="primary"
+                    disabled={!canSave}
+                    onClick={async () => {
+                        const result = await onSave(input);
+                        if (!result.ok) {
+                            setError(result.error);
+                            return;
+                        }
+                        modalProps.onClose();
+                    }}
+                >
+                    Save
+                </Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}

src/equicordplugins/emojiAlias/components/modals/types.ts

@@ -0,0 +1,23 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2026 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { ModalProps } from "@utils/modal";
+
+export type SetAliasSaveResult = { ok: true; } | { ok: false; error: string; };
+
+export interface SetAliasModalProps {
+    modalProps: ModalProps;
+    emojiDisplayName: string;
+    initialAlias: string;
+    getValidationError: (input: string) => string | null;
+    isDuplicateAlias: (input: string) => boolean;
+    onSave: (input: string) => Promise<SetAliasSaveResult>;
+}
+
+export interface ClearAliasesConfirmModalProps {
+    modalProps: ModalProps;
+    onConfirm: () => Promise<void>;
+}

src/equicordplugins/emojiAlias/styles.css

@@ -0,0 +1,39 @@
+.vc-emoji-alias-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px;
+    border-radius: 8px;
+    background: var(--background-secondary);
+}
+
+.vc-emoji-alias-row-editing {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.vc-emoji-alias-row-editing-text-input {
+    width: 180px;
+}
+
+.vc-emoji-alias-row-arrow {
+    color: var(--text-muted);
+}
+
+.vc-emoji-alias-row-error {
+    color: var(--text-feedback-critical);
+}
+
+.vc-emoji-alias-row-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.vc-emoji-alias-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}