feat: ✨ Add mentions autocompleter

components/composer/composer.vue

@@ -15,8 +15,10 @@
                 aria-live="polite">
                 {{ remainingCharacters }}
             </div>
-            <ComposerEmojiSuggestbox :currently-typing-emoji="currentlyBeingTypedEmoji"
+            <ComposerEmojiSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedEmoji"
-                @autocomplete="autocompleteEmoji" />
+                :currently-typing-emoji="currentlyBeingTypedEmoji" @autocomplete="autocompleteEmoji" />
+            <ComposerMentionSuggestbox :textarea="textarea" v-if="!!currentlyBeingTypedMention"
+                :currently-typing-mention="currentlyBeingTypedMention" @autocomplete="autocompleteMention" />
         </div>
         <!-- Content warning textbox -->
         <div v-if="cw" class="mb-4">
@@ -82,6 +84,10 @@ const currentlyBeingTypedEmoji = computed(() => {
     const match = content.value?.match(partiallyTypedEmojiValidator);
     return match ? match.at(-1)?.replace(":", "") ?? "" : null;
 });
+const currentlyBeingTypedMention = computed(() => {
+    const match = content.value?.match(partiallyTypedMentionValidator);
+    return match ? match.at(-1)?.replace("@", "") ?? "" : null;
+});
 
 const openFilePicker = () => {
     uploader.value?.openFilePicker();
@@ -98,6 +104,17 @@ const autocompleteEmoji = (emoji: string) => {
     );
 };
 
+const autocompleteMention = (mention: string) => {
+    // Replace the end of the string with the mention
+    content.value = content.value?.replace(
+        createRegExp(
+            exactly("@"),
+            exactly(currentlyBeingTypedMention.value ?? "").notBefore(char),
+        ),
+        `@${mention} `,
+    );
+};
+
 const files = ref<
     {
         id: string;

components/composer/emoji-suggestbox.vue

@@ -14,10 +14,12 @@ import { distance } from "fastest-levenshtein";
 import type { CustomEmoji } from "~/composables/Identities";
 const props = defineProps<{
     currentlyTypingEmoji: string | null;
+    textarea: HTMLTextAreaElement | undefined;
 }>();
 
 const emojiRefs = ref<Element[]>([]);
 const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
+    target: props.textarea,
     passive: false,
     onEventFired(e) {
         if (

components/composer/mention-suggestbox.vue

@@ -0,0 +1,98 @@
+<template>
+    <ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
+        <div v-for="(user, index) in topUsers" :key="user.username" @click="emit('autocomplete', user.acct)"
+            :ref="el => { if (el) userRefs[index] = el as Element }" :title="user.acct"
+            :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedUserIndex }]">
+            <img :src="user.avatar" class="w-full h-full object-contain" :alt="`User ${user.acct}`" />
+        </div>
+    </ComposerSuggestbox>
+</template>
+
+<script lang="ts" setup>
+import { distance } from "fastest-levenshtein";
+import type { Account } from "~/types/mastodon/account";
+const props = defineProps<{
+    currentlyTypingMention: string | null;
+    textarea: HTMLTextAreaElement | undefined;
+}>();
+
+const userRefs = ref<Element[]>([]);
+const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
+    target: props.textarea,
+    passive: false,
+    onEventFired(e) {
+        if (
+            ["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
+            topUsers.value !== null
+        )
+            e.preventDefault();
+    },
+});
+const topUsers = ref<Account[] | null>(null);
+const selectedUserIndex = ref<number | null>(null);
+const client = useClient();
+
+watch(
+    [ArrowRight, ArrowLeft, Tab, Enter, () => props.currentlyTypingMention],
+    async () => {
+        if (props.currentlyTypingMention !== null) {
+            const users = await client.value.searchAccount(
+                props.currentlyTypingMention,
+                { limit: 20 },
+            );
+            topUsers.value = users.data
+                .map((user) => ({
+                    ...user,
+                    distance: distance(
+                        props.currentlyTypingMention as string,
+                        user.username,
+                    ),
+                }))
+                .sort((a, b) => a.distance - b.distance)
+                .slice(0, 20);
+        } else {
+            topUsers.value = null;
+        }
+
+        if (ArrowRight?.value && topUsers.value !== null) {
+            selectedUserIndex.value = (selectedUserIndex.value ?? -1) + 1;
+            if (selectedUserIndex.value >= topUsers.value.length) {
+                selectedUserIndex.value = 0;
+            }
+            userRefs.value[selectedUserIndex.value]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        }
+
+        if (ArrowLeft?.value && topUsers.value !== null) {
+            selectedUserIndex.value =
+                (selectedUserIndex.value ?? topUsers.value.length) - 1;
+            if (selectedUserIndex.value < 0) {
+                selectedUserIndex.value = topUsers.value.length - 1;
+            }
+            userRefs.value[selectedUserIndex.value]?.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+            });
+        }
+
+        if ((Tab?.value || Enter?.value) && topUsers.value !== null) {
+            const user = topUsers.value[selectedUserIndex.value ?? 0];
+            if (user) emit("autocomplete", user.username);
+        }
+    },
+);
+
+// When currentlyTypingMention changes, reset the selected user index
+watch(
+    () => props.currentlyTypingMention,
+    () => {
+        selectedUserIndex.value = null;
+    },
+);
+
+const emit = defineEmits<{
+    autocomplete: [username: string];
+}>();
+</script>

utils/validators.ts

@@ -23,3 +23,9 @@ export const partiallyTypedEmojiValidator = createRegExp(
     ),
     [caseInsensitive, multiline],
 );
+
+export const partiallyTypedMentionValidator = createRegExp(
+    exactly("@"),
+    oneOrMore(letter.or(digit).or(exactly("_"))).notBefore(char),
+    [caseInsensitive, multiline],
+);