feat: ✨ Rework OIDC flow, add emoji autosuggestions

components/composer/composer.vue

@@ -22,6 +22,8 @@
                 :class="['absolute bottom-0 right-0 p-2 text-gray-400 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']">
                 {{ remainingCharacters }}
             </div>
+            <ComposerEmojiSuggestbox :currently-typing-emoji="currentlyBeingTypedEmoji"
+                @autocomplete="autocompleteEmoji" />
         </div>
         <!-- Content warning textbox -->
         <div v-if="cw" class="mb-4">
@@ -56,6 +58,7 @@
 </template>
 
 <script lang="ts" setup>
+import { char, createRegExp, exactly } from "magic-regexp";
 import type { Instance } from "~/types/mastodon/instance";
 import type { Status } from "~/types/mastodon/status";
 import { OverlayScrollbarsComponent } from "#imports";
@@ -74,10 +77,25 @@ const markdown = ref(true);
 
 const splashes = useConfig().COMPOSER_SPLASHES;
 const chosenSplash = ref(splashes[Math.floor(Math.random() * splashes.length)]);
+const currentlyBeingTypedEmoji = computed(() => {
+    const match = content.value?.match(partiallyTypedEmojiValidator);
+    return match ? match.at(-1)?.replace(":", "") ?? "" : null;
+});
+
+const autocompleteEmoji = (emoji: string) => {
+    // Replace the end of the string with the emoji
+    content.value = content.value?.replace(
+        createRegExp(
+            exactly(":"),
+            exactly(currentlyBeingTypedEmoji.value ?? "").notBefore(char),
+        ),
+        `:${emoji}:`,
+    );
+};
+
 watch(Control_Alt, () => {
     chosenSplash.value = splashes[Math.floor(Math.random() * splashes.length)];
 });
-
 onMounted(() => {
     useListen("composer:reply", (note: Status) => {
         respondingTo.value = note;

components/composer/emoji-suggestbox.vue

@@ -0,0 +1,87 @@
+<template>
+    <ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
+        <div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
+            :ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
+            :class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'hover:bg-dark-900/70', { 'bg-pink-500': index === selectedEmojiIndex }]">
+            <img :src="emoji.url" class="w-8 h-8" :alt="`Emoji with shortcode ${emoji.shortcode}`" />
+        </div>
+    </ComposerSuggestbox>
+</template>
+
+<script lang="ts" setup>
+import { distance } from "fastest-levenshtein";
+import type { UnwrapRef } from "vue";
+const props = defineProps<{
+    currentlyTypingEmoji: string | null;
+}>();
+
+const emojiRefs = ref<Element[]>([]);
+const customEmojis = useCustomEmojis();
+const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
+    passive: false,
+    onEventFired(e) {
+        if (
+            ["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
+            topEmojis.value !== null
+        )
+            e.preventDefault();
+    },
+});
+const topEmojis = ref<UnwrapRef<typeof customEmojis> | null>(null);
+const selectedEmojiIndex = ref<number | null>(null);
+
+watchEffect(() => {
+    if (props.currentlyTypingEmoji !== null)
+        topEmojis.value = customEmojis.value
+            .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/modal.vue

@@ -14,7 +14,7 @@
                         leave-from="opacity-100 translate-y-0 sm:scale-100"
                         leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                         <HeadlessDialogPanel
-                            class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
+                            class="relative transform rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
                             <Composer v-if="instance" :instance="instance" />
                         </HeadlessDialogPanel>
                     </HeadlessTransitionChild>
@@ -44,5 +44,5 @@ useListen("composer:close", () => {
 });
 const client = useMegalodon();
 const tokenData = useTokenData();
-const instance = useInstance(client);
+const instance = useInstance();
 </script>

components/composer/suggestbox.vue

@@ -0,0 +1,8 @@
+<template>
+    <div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts" setup>
+</script>