refactor: ♻️ Refactor suggestboxes to follow text cursor

app.vue

@@ -76,4 +76,8 @@ body {
 .os-scrollbar .os-scrollbar-handle {
     background: #9999;
 }
+
+.os-scrollbar .os-scrollbar-handle:hover {
+    background: #6666;
+}
 </style>

components/composer/autocomplete-suggestbox.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="max-h-40 max-w-full rounded ring-1 ring-dark-300 bg-dark-800 fixed z-20" :style="{
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${width}px`,
+    }" v-show="topSuggestions && topSuggestions.length > 0">
+        <OverlayScrollbarsComponent class="w-full [&>div]:flex">
+            <div v-for="(suggestion, index) in topSuggestions" :key="suggestion.key"
+                @click="emit('autocomplete', suggestion.key)"
+                :ref="el => { if (el) suggestionRefs[index] = el as Element }" :title="suggestion.key"
+                :class="['flex justify-center shrink-0 items-center size-12 p-2 hover:bg-dark-900/70', index === selectedSuggestionIndex && 'bg-primary-500']">
+                <slot :suggestion="suggestion"></slot>
+            </div>
+        </OverlayScrollbarsComponent>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { OverlayScrollbarsComponent } from "#imports";
+
+const props = defineProps<{
+    currentlyTyping: string | null;
+    textarea: HTMLTextAreaElement | undefined;
+    suggestions: Array<{ key: string; value: unknown }>;
+    distanceFunction: (a: string, b: string) => number;
+}>();
+
+const suggestionRefs = ref<Element[]>([]);
+// Allow the user to navigate the suggestions with the arrow keys
+// and select a suggestion with the Tab or Enter key
+const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
+    target: props.textarea,
+    passive: false,
+    onEventFired(e) {
+        if (
+            ["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
+            topSuggestions.value !== null
+        ) {
+            e.preventDefault();
+        }
+    },
+});
+const topSuggestions = ref<Array<{ key: string; value: unknown }> | null>(null);
+const selectedSuggestionIndex = ref<number | null>(null);
+
+const x = ref(0);
+const y = ref(0);
+const width = ref(0);
+const TOP_PADDING = 10;
+
+useEventListener(props.textarea, "keyup", () => {
+    recalculatePosition();
+});
+
+const recalculatePosition = () => {
+    if (props.textarea) {
+        const target = props.textarea;
+        const position = target.selectionEnd;
+        // Get x, y position of the cursor in the textarea
+        const { top, left } = target.getBoundingClientRect();
+        const lineHeight = Number.parseInt(
+            getComputedStyle(target).lineHeight ?? "0",
+            10,
+        );
+        const lines = target.value.slice(0, position).split("\n");
+        const line = lines.length - 1;
+        x.value = left;
+        // Spawn one line below the cursor, so add +1
+        y.value = top + (line + 1) * lineHeight + TOP_PADDING;
+        width.value = target.clientWidth;
+    }
+};
+
+watchEffect(() => {
+    if (props.currentlyTyping !== null) {
+        topSuggestions.value = props.suggestions
+            .map((suggestion) => ({
+                ...suggestion,
+                distance: props.distanceFunction(
+                    props.currentlyTyping as string,
+                    suggestion.key,
+                ),
+            }))
+            .sort((a, b) => a.distance - b.distance)
+            .slice(0, 20);
+    } else {
+        topSuggestions.value = null;
+    }
+
+    if (ArrowRight?.value && topSuggestions.value !== null) {
+        selectedSuggestionIndex.value =
+            (selectedSuggestionIndex.value ?? -1) + 1;
+        if (selectedSuggestionIndex.value >= topSuggestions.value.length) {
+            selectedSuggestionIndex.value = 0;
+        }
+        suggestionRefs.value[selectedSuggestionIndex.value]?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+        });
+    }
+
+    if (ArrowLeft?.value && topSuggestions.value !== null) {
+        selectedSuggestionIndex.value =
+            (selectedSuggestionIndex.value ?? topSuggestions.value.length) - 1;
+        if (selectedSuggestionIndex.value < 0) {
+            selectedSuggestionIndex.value = topSuggestions.value.length - 1;
+        }
+        suggestionRefs.value[selectedSuggestionIndex.value]?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+        });
+    }
+
+    if ((Tab?.value || Enter?.value) && topSuggestions.value !== null) {
+        const suggestion =
+            topSuggestions.value[selectedSuggestionIndex.value ?? 0];
+        if (suggestion) {
+            emit("autocomplete", suggestion.key);
+        }
+    }
+});
+
+const emit = defineEmits<{
+    autocomplete: [suggestion: string];
+}>();
+</script>

components/composer/emoji-suggestbox.vue

@@ -1,100 +1,29 @@
 <template>
-    <Suggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
+    <AutocompleteSuggestbox :currently-typing="currentlyTypingEmoji" :textarea="textarea" :suggestions="emojis"
-        <div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
+        :distance-function="distance">
-            :ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
+        <template #default="{ suggestion }">
-            :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedEmojiIndex }]">
+            <Avatar :src="(suggestion.value as Emoji).url" class="w-full h-full [&>img]:object-contain rounded"
-            <img :src="emoji.url" class="w-full h-full object-contain"
+                :alt="`Emoji with shortcode ${(suggestion.value as Emoji).shortcode}`" />
-                :alt="`Emoji with shortcode ${emoji.shortcode}`" />
+        </template>
-        </div>
+    </AutocompleteSuggestbox>
-    </Suggestbox>
 </template>
 
 <script lang="ts" setup>
 import type { Emoji } from "@lysand-org/client/types";
 import { distance } from "fastest-levenshtein";
-import Suggestbox from "./suggestbox.vue";
+import Avatar from "../avatars/avatar.vue";
-const props = defineProps<{
+import AutocompleteSuggestbox from "./autocomplete-suggestbox.vue";
+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 (
-            ["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
-            topEmojis.value !== null
-        ) {
-            e.preventDefault();
-        }
-    },
-});
 const identity = useCurrentIdentity();
-const topEmojis = ref<Emoji[] | null>(null);
+const emojis = computed(
-const selectedEmojiIndex = ref<number | null>(null);
+    () =>
-
+        identity.value?.emojis.map((emoji) => ({
-watchEffect(() => {
+            key: emoji.shortcode,
-    if (!identity.value) {
+            value: emoji,
-        return;
+        })) ?? [],
-    }
-
-    if (props.currentlyTypingEmoji !== null) {
-        topEmojis.value = identity.value.emojis
-            .map((emoji) => ({
-                ...emoji,
-                distance: distance(
-                    props.currentlyTypingEmoji as string,
-                    emoji.shortcode,
-                ),
-            }))
-            .sort((a, b) => a.distance - b.distance)
-            .slice(0, 20);
-    } else {
-        topEmojis.value = null;
-    }
-
-    if (ArrowRight?.value && topEmojis.value !== null) {
-        selectedEmojiIndex.value = (selectedEmojiIndex.value ?? -1) + 1;
-        if (selectedEmojiIndex.value >= topEmojis.value.length) {
-            selectedEmojiIndex.value = 0;
-        }
-        emojiRefs.value[selectedEmojiIndex.value]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-        });
-    }
-
-    if (ArrowLeft?.value && topEmojis.value !== null) {
-        selectedEmojiIndex.value =
-            (selectedEmojiIndex.value ?? topEmojis.value.length) - 1;
-        if (selectedEmojiIndex.value < 0) {
-            selectedEmojiIndex.value = topEmojis.value.length - 1;
-        }
-        emojiRefs.value[selectedEmojiIndex.value]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-        });
-    }
-
-    if ((Tab?.value || Enter?.value) && topEmojis.value !== null) {
-        const emoji = topEmojis.value[selectedEmojiIndex.value ?? 0];
-        if (emoji) {
-            emit("autocomplete", emoji.shortcode);
-        }
-    }
-});
-
-// When currentlyTypingEmoji changes, reset the selected emoji index
-watch(
-    () => props.currentlyTypingEmoji,
-    () => {
-        selectedEmojiIndex.value = null;
-    },
 );
-
-const emit = defineEmits<{
-    autocomplete: [emoji: string];
-}>();
 </script>

components/composer/mention-suggestbox.vue

@@ -1,102 +1,42 @@
 <template>
-    <Suggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
+    <AutocompleteSuggestbox :currently-typing="currentlyTypingMention" :textarea="textarea" :suggestions="mentions"
-        <div v-for="(user, index) in topUsers" :key="user.username" @click="emit('autocomplete', user.acct)"
+        :distance-function="distance">
-            :ref="el => { if (el) userRefs[index] = el as Element }" :title="user.acct"
+        <template #default="{ suggestion }">
-            :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'size-12', 'hover:bg-dark-900/70', { 'bg-primary-500': index === selectedUserIndex }]">
+            <Avatar :src="(suggestion.value as Account).avatar" class="w-full h-full rounded"
-            <img :src="user.avatar" class="w-full h-full object-contain" :alt="`User ${user.acct}`" />
+                :alt="`User ${(suggestion.value as Account).acct}`" />
-        </div>
+        </template>
-    </Suggestbox>
+    </AutocompleteSuggestbox>
 </template>
 
 <script lang="ts" setup>
 import type { Account } from "@lysand-org/client/types";
 import { distance } from "fastest-levenshtein";
-import Suggestbox from "./suggestbox.vue";
+import Avatar from "../avatars/avatar.vue";
+import AutocompleteSuggestbox from "./autocomplete-suggestbox.vue";
 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();
+const mentions = ref<{ key: string; value: Account }[]>([]);
 
-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,
-    () => {
+    async (value) => {
-        selectedUserIndex.value = null;
+        if (!value) {
+            return;
+        }
+
+        const users = await client.value.searchAccount(value, { limit: 20 });
+        mentions.value = users.data
+            .map((user) => ({
+                key: user.username,
+                value: user,
+                distance: distance(value, user.username),
+            }))
+            .sort((a, b) => a.distance - b.distance)
+            .slice(0, 20);
     },
 );
-
-const emit = defineEmits<{
-    autocomplete: [username: string];
-}>();
 </script>