From 0f214b6a1760c8d5054cd2d3c1220deea7ee2e20 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 27 Apr 2024 19:02:27 -1000
Subject: [PATCH] refactor: :art: Refactor notes, event system and timelines

---
 bun.lockb                                     | Bin 494484 -> 494516 bytes
 components/composer/composer.vue              |  46 +++----
 components/composer/modal.vue                 |  19 ++-
 components/sidebars/navigation.vue            |   4 +-
 components/social-elements/notes/note.vue     |  91 +++++--------
 .../social-elements/notifications/notif.vue   |   4 +-
 components/social-elements/users/Account.vue  |  15 +--
 components/timelines/Account.vue              |   6 +-
 components/timelines/Local.vue                |   6 +-
 components/timelines/Public.vue               |   6 +-
 components/timelines/timeline.vue             |  13 +-
 composables/EventBus.ts                       |  16 +++
 composables/NoteData.ts                       |  66 ++++++++++
 composables/ParsedContent.ts                  | 122 ++++++++++--------
 composables/ResolveMentions.ts                |  17 ++-
 layouts/app.vue                               |   9 ++
 nuxt.config.ts                                |  13 ++
 package.json                                  |   1 +
 18 files changed, 266 insertions(+), 188 deletions(-)
 create mode 100644 composables/EventBus.ts
 create mode 100644 composables/NoteData.ts

diff --git a/bun.lockb b/bun.lockb
index ac63b836ea0bc9bd9253e2cb534277eeb07342eb..26f9be64b070185febf947bb552a9e3062d57f6e 100755
GIT binary patch
delta 25390
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

delta 25448
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

diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index 9a356aa..ce4b90b 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -32,10 +32,6 @@ const props = defineProps<{
     instance: Instance;
 }>();
 
-const emits = defineEmits<{
-    send: [];
-}>();
-
 const submitting = ref(false);
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);
@@ -43,29 +39,29 @@ const client = useMegalodon(tokenData);
 const send = async () => {
     submitting.value = true;
 
-    await fetch(
-        new URL("/api/v1/statuses", client.value?.baseUrl ?? "").toString(),
-        {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                Authorization: `Bearer ${tokenData.value?.access_token}`,
-            },
-            body: JSON.stringify({
-                status: content.value,
-                content_type: "text/markdown",
-            }),
+    fetch(new URL("/api/v1/statuses", client.value?.baseUrl ?? "").toString(), {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${tokenData.value?.access_token}`,
         },
-    ).then((res) => {
-        if (!res.ok) {
-            throw new Error("Failed to send status");
-        }
+        body: JSON.stringify({
+            status: content.value,
+            content_type: "text/markdown",
+        }),
+    })
+        .then(async (res) => {
+            if (!res.ok) {
+                throw new Error("Failed to send status");
+            }
 
-        content.value = "";
-        submitting.value = false;
-    });
-
-    emits("send");
+            content.value = "";
+            submitting.value = false;
+            useEvent("composer:send", await res.json());
+        })
+        .finally(() => {
+            useEvent("composer:close");
+        });
 };
 
 const characterLimit = computed(
diff --git a/components/composer/modal.vue b/components/composer/modal.vue
index 0f52262..61008d9 100644
--- a/components/composer/modal.vue
+++ b/components/composer/modal.vue
@@ -1,6 +1,6 @@
 <template>
     <HeadlessTransitionRoot as="template" :show="open">
-        <HeadlessDialog as="div" class="relative z-50" @close="emits('close')">
+        <HeadlessDialog as="div" class="relative z-50" @close="useEvent('composer:close')">
             <HeadlessTransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
                 enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
                 <div class="fixed inset-0 bg-black/70 transition-opacity" />
@@ -15,7 +15,7 @@
                         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-white/10 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
-                            <Composer v-if="instance" :instance="instance" @send="emits('close')" />
+                            <Composer v-if="instance" :instance="instance" />
                         </HeadlessDialogPanel>
                     </HeadlessTransitionChild>
                 </div>
@@ -25,14 +25,13 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{
-    open: boolean;
-}>();
-
+const open = ref(false);
+useListen("composer:open", () => {
+    open.value = true;
+});
+useListen("composer:close", () => {
+    open.value = false;
+});
 const client = useMegalodon();
 const instance = useInstance(client);
-
-const emits = defineEmits<{
-    close: [];
-}>();
 </script>
\ No newline at end of file
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index cce384f..453bf5e 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -47,7 +47,6 @@
             </ButtonsBase>
         </div>
     </aside>
-    <ComposerModal :open="composerOpen" @close="composerOpen = false" />
 </template>
 
 <script lang="ts" setup>
@@ -64,7 +63,6 @@ const timelines = ref([
     },
 ]);
 
-const composerOpen = ref(false);
 const loadingAuth = ref(false);
 
 const appData = useAppData();
@@ -72,7 +70,7 @@ const tokenData = useTokenData();
 const client = useMegalodon();
 
 const compose = () => {
-    composerOpen.value = true;
+    useEvent("composer:open");
 };
 
 const signIn = async () => {
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 635c6f8..029e8c5 100644
--- a/components/social-elements/notes/note.vue
+++ b/components/social-elements/notes/note.vue
@@ -1,27 +1,27 @@
 <template>
     <div
         class="first:rounded-t last:rounded-b ring-1 ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
-        <div v-if="props.note?.reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
-            <Skeleton :enabled="!props.note" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
+        <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
+            <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
                 <Icon name="tabler:repeat" class="h-6 w-6" aria-hidden="true" />
-                <img v-if="props.note?.account.avatar" :src="props.note?.account.avatar"
-                    :alt="`${props.note?.account.acct}'s avatar'`" class="h-6 w-6 rounded ring-1 ring-white/10" />
-                <span><strong v-html="eventualReblogAccountName"></strong> reblogged</span>
+                <img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
+                    class="h-6 w-6 rounded ring-1 ring-white/10" />
+                <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
             </Skeleton>
         </div>
         <SocialElementsNotesHeader :note="note" :small="small" />
-        <div v-if="!noteClosed">
-            <NuxtLink :href="noteUrl" class="mt-6 block relative">
-                <Skeleton :enabled="true" v-if="!note" :min-width="50" :max-width="100" width-unit="%" shape="rect"
+        <div v-if="!collapsed">
+            <NuxtLink :href="url" class="mt-6 block relative">
+                <Skeleton :enabled="!loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
                     type="content">
+                    <div v-if="content"
+                        :class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline content']"
+                        v-html="content">
+                    </div>
                 </Skeleton>
-                <div v-else-if="content"
-                    :class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline content']"
-                    v-html="content">
-                </div>
             </NuxtLink>
-            <div v-if="attachments.length > 0" class="[&:not(:first-child)]:mt-6">
-                <SocialElementsNotesAttachment v-for="attachment of attachments" :key="attachment.id"
+            <div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
+                <SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
                     :attachment="attachment" />
             </div>
         </div>
@@ -32,7 +32,7 @@
             <!-- Spoiler text is it's specified -->
             <span v-if="note?.spoiler_text" class="mt-2 break-all">{{ note.spoiler_text
                 }}</span>
-            <ButtonsSecondary @click="noteClosed = false" class="mt-4">Show content</ButtonsSecondary>
+            <ButtonsSecondary @click="collapsed = false" class="mt-4">Show content</ButtonsSecondary>
         </div>
         <Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="!note && !small"></Skeleton>
         <div v-else-if="!small"
@@ -70,12 +70,12 @@
                         </ButtonsDropdownElement>
                     </HeadlessMenuItem>
                     <HeadlessMenuItem>
-                        <ButtonsDropdownElement @click="note && copy(note.uri)" icon="tabler:link" class="w-full">
+                        <ButtonsDropdownElement @click="copy(url)" icon="tabler:link" class="w-full">
                             Copy Link
                         </ButtonsDropdownElement>
                     </HeadlessMenuItem>
                     <HeadlessMenuItem>
-                        <ButtonsDropdownElement @click="note && deleteNote()" icon="tabler:backspace"
+                        <ButtonsDropdownElement @click="remove" icon="tabler:backspace"
                             class="w-full border-r-2 border-red-500">
                             Delete
                         </ButtonsDropdownElement>
@@ -95,55 +95,30 @@ const props = defineProps<{
     small?: boolean;
 }>();
 
-const emits = defineEmits<{
-    delete: [];
-}>();
-
-// Handle reblogs
-const note = computed(() => props.note?.reblog ?? props.note);
-const noteClosed = ref(
-    note.value?.sensitive || !!note.value?.spoiler_text || false,
-);
-
-const { copy } = useClipboard();
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);
-const mentions = await useResolveMentions(
-    note.value?.mentions ?? [],
-    client.value,
-);
-const eventualReblogAccountName = props.note?.reblog
-    ? useParsedContent(
-          props.note?.account.display_name,
-          props.note?.account.emojis,
-          mentions.value,
-      ).value
-    : null;
-const content =
-    note.value && process.client
-        ? useParsedContent(
-              note.value.content,
-              note.value.emojis,
-              mentions.value,
-          )
-        : "";
+const {
+    loaded,
+    note,
+    remove,
+    content,
+    shouldHide,
+    url,
+    reblog,
+    reblogDisplayName,
+} = useNoteData(ref(props.note), client);
+
+console.log(props.note?.account.display_name ?? "");
+
+const collapsed = ref(shouldHide.value);
+
+const { copy } = useClipboard();
 const numberFormat = (number = 0) =>
     new Intl.NumberFormat(undefined, {
         notation: "compact",
         compactDisplay: "short",
         maximumFractionDigits: 1,
     }).format(number);
-const attachments = note.value?.media_attachments ?? [];
-const noteUrl = note.value && `/@${note.value.account.acct}/${note.value.id}`;
-
-const deleteNote = async () => {
-    const result = await client.value?.deleteStatus(note.value?.id ?? "");
-
-    if (result?.data) {
-        console.log("Status deleted", result.data);
-        emits("delete");
-    }
-};
 </script>
 
 <style>
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index e40f829..49e7a12 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -6,7 +6,8 @@
                 <Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
                 <img v-if="notification?.account?.avatar" :src="notification?.account.avatar"
                     :alt="`${notification?.account.acct}'s avatar'`" class="h-6 w-6 rounded ring-1 ring-white/10" />
-                <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text }}</span>
+                <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text
+                    }}</span>
             </Skeleton>
         </div>
         <div>
@@ -29,7 +30,6 @@ const props = defineProps<{
 const accountName = useParsedContent(
     props.notification?.account?.display_name ?? "",
     props.notification?.account?.emojis ?? [],
-    [],
 );
 const text = computed(() => {
     if (!props.notification) return "";
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 2603e09..d986aaa 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -119,22 +119,15 @@ watch(
             useParsedContent(
                 props.account?.note ?? "",
                 props.account?.emojis ?? [],
-                [],
             ).value ?? "";
         parsedFields.value =
             props.account?.fields.map((field) => ({
                 name:
-                    useParsedContent(
-                        field.name,
-                        props.account?.emojis ?? [],
-                        [],
-                    ).value ?? "",
+                    useParsedContent(field.name, props.account?.emojis ?? [])
+                        .value ?? "",
                 value:
-                    useParsedContent(
-                        field.value,
-                        props.account?.emojis ?? [],
-                        [],
-                    ).value ?? "",
+                    useParsedContent(field.value, props.account?.emojis ?? [])
+                        .value ?? "",
             })) ?? [];
     },
     {
diff --git a/components/timelines/Account.vue b/components/timelines/Account.vue
index 51d5cc0..eacf4e2 100644
--- a/components/timelines/Account.vue
+++ b/components/timelines/Account.vue
@@ -1,5 +1,5 @@
 <template>
-    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
+    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
 </template>
 
 <script lang="ts" setup>
@@ -15,7 +15,7 @@ const { timeline, loadNext, loadPrev } = useAccountTimeline(
     timelineParameters,
 );
 
-const noteDelete = async (id: string) => {
+useListen("note:delete", ({ id }) => {
     timeline.value = timeline.value.filter((note) => note.id !== id);
-};
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/Local.vue b/components/timelines/Local.vue
index 43ffcf0..7892d32 100644
--- a/components/timelines/Local.vue
+++ b/components/timelines/Local.vue
@@ -1,5 +1,5 @@
 <template>
-    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
+    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
 </template>
 
 <script lang="ts" setup>
@@ -10,7 +10,7 @@ const { timeline, loadNext, loadPrev } = useLocalTimeline(
     timelineParameters,
 );
 
-const noteDelete = async (id: string) => {
+useListen("note:delete", ({ id }) => {
     timeline.value = timeline.value.filter((note) => note.id !== id);
-};
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/Public.vue b/components/timelines/Public.vue
index 03f6e13..6c390da 100644
--- a/components/timelines/Public.vue
+++ b/components/timelines/Public.vue
@@ -1,5 +1,5 @@
 <template>
-    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" @delete="noteDelete" />
+    <TimelinesTimeline :timeline="timeline" :load-next="loadNext" :load-prev="loadPrev" />
 </template>
 
 <script lang="ts" setup>
@@ -10,7 +10,7 @@ const { timeline, loadNext, loadPrev } = usePublicTimeline(
     timelineParameters,
 );
 
-const noteDelete = async (id: string) => {
+useListen("note:delete", ({ id }) => {
     timeline.value = timeline.value.filter((note) => note.id !== id);
-};
+});
 </script>
\ No newline at end of file
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index 7b35e2d..8668af4 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -2,8 +2,7 @@
     <ClientOnly>
         <TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
             leave-to-class="opacity-0 scale-90">
-            <SocialElementsNotesNote @delete="emits('delete', note.id)" v-for="note of timeline" :key="note.id"
-                :note="note" />
+            <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
         </TransitionGroup>
         <span ref="skeleton"></span>
         <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
@@ -25,10 +24,6 @@ const props = defineProps<{
     loadPrev: () => Promise<void>;
 }>();
 
-const emits = defineEmits<{
-    delete: [id: string];
-}>();
-
 const isLoading = ref(true);
 
 const hasReachedEnd = ref(false);
@@ -47,10 +42,14 @@ onMounted(() => {
     });
 });
 
+useListen("composer:send", () => {
+    props.loadPrev();
+});
+
 // Every 5 seconds, load newer posts (prev)
 useIntervalFn(() => {
     props.loadPrev();
-}, 5000);
+}, 10000);
 
 watch(
     () => props.timeline,
diff --git a/composables/EventBus.ts b/composables/EventBus.ts
new file mode 100644
index 0000000..cd1a04f
--- /dev/null
+++ b/composables/EventBus.ts
@@ -0,0 +1,16 @@
+import mitt from "mitt";
+import type { Status } from "~/types/mastodon/status";
+
+type ApplicationEvents = {
+    "note:reply": Status;
+    "note:delete": Status;
+    "note:edit": Status;
+    "composer:open": undefined;
+    "composer:send": Status;
+    "composer:close": undefined;
+};
+
+const emitter = mitt<ApplicationEvents>();
+
+export const useEvent = emitter.emit;
+export const useListen = emitter.on;
diff --git a/composables/NoteData.ts b/composables/NoteData.ts
new file mode 100644
index 0000000..65d5bab
--- /dev/null
+++ b/composables/NoteData.ts
@@ -0,0 +1,66 @@
+import type { Mastodon } from "megalodon";
+import type { Status } from "~/types/mastodon/status";
+
+export const useNoteData = (
+    noteProp: MaybeRef<Status | undefined>,
+    client: Ref<Mastodon | null>,
+) => {
+    const renderedNote = computed(
+        () => toValue(noteProp)?.reblog ?? toValue(noteProp),
+    );
+    const isReblog = computed(() => !!toValue(noteProp)?.reblog);
+    const shouldHide = computed(
+        () =>
+            renderedNote.value?.sensitive ||
+            !!renderedNote.value?.spoiler_text ||
+            false,
+    );
+    const mentions = useResolveMentions(
+        renderedNote.value?.mentions ?? [],
+        client.value,
+    );
+    const content = useParsedContent(
+        renderedNote.value?.content ?? "",
+        renderedNote.value?.emojis ?? [],
+        mentions,
+    );
+    const loaded = computed(() => content.value !== null);
+
+    const reblogDisplayName = useParsedContent(
+        renderedNote.value?.account.display_name ?? "",
+        renderedNote.value?.account.emojis ?? [],
+    );
+    const reblog = computed(() =>
+        isReblog.value && renderedNote.value
+            ? {
+                  avatar: renderedNote.value.account.avatar,
+                  acct: renderedNote.value.account.acct,
+              }
+            : null,
+    );
+
+    const url = computed(
+        () => `/@${renderedNote.value?.account.acct}/${renderedNote.value?.id}`,
+    );
+
+    const remove = async () => {
+        const result = await client.value?.deleteStatus(
+            renderedNote.value?.id ?? "",
+        );
+
+        if (result?.data) {
+            useEvent("note:delete", result.data);
+        }
+    };
+
+    return {
+        loaded,
+        note: renderedNote,
+        content,
+        reblog,
+        reblogDisplayName,
+        shouldHide,
+        url,
+        remove,
+    };
+};
diff --git a/composables/ParsedContent.ts b/composables/ParsedContent.ts
index 6c0dd62..995e94d 100644
--- a/composables/ParsedContent.ts
+++ b/composables/ParsedContent.ts
@@ -12,76 +12,84 @@ import MentionComponent from "../components/social-elements/notes/mention.vue";
 export const useParsedContent = (
     content: string,
     emojis: Emoji[],
-    mentions: Account[],
+    mentions: MaybeRef<Account[]> = ref([]),
 ): Ref<string | null> => {
     const result = ref(null as string | null);
 
-    (async () => {
-        const contentHtml = document.createElement("div");
-        contentHtml.innerHTML = content;
+    watch(
+        mentions,
+        async () => {
+            const contentHtml = document.createElement("div");
+            contentHtml.innerHTML = content;
 
-        // Replace emoji shortcodes with images
-        const paragraphs = contentHtml.querySelectorAll("p");
+            // Replace emoji shortcodes with images
+            const paragraphs = contentHtml.querySelectorAll("p");
 
-        for (const paragraph of paragraphs) {
-            paragraph.innerHTML = paragraph.innerHTML.replace(
-                /:([a-z0-9_-]+):/g,
-                (match, emoji) => {
-                    const emojiData = emojis.find((e) => e.shortcode === emoji);
-                    if (!emojiData) {
-                        return match;
-                    }
-                    const image = document.createElement("img");
-                    image.src = emojiData.url;
-                    image.alt = `:${emoji}:`;
-                    image.title = emojiData.shortcode;
-                    image.className =
-                        "h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
-                    return image.outerHTML;
-                },
-            );
-        }
-
-        // Replace links containing mentions with interactive mentions
-        const links = contentHtml.querySelectorAll("a");
-
-        for (const link of links) {
-            const mention = mentions.find(
-                (m) => link.textContent === `@${m.acct}`,
-            );
-            if (!mention) {
-                continue;
+            for (const paragraph of paragraphs) {
+                paragraph.innerHTML = paragraph.innerHTML.replace(
+                    /:([a-z0-9_-]+):/g,
+                    (match, emoji) => {
+                        const emojiData = emojis.find(
+                            (e) => e.shortcode === emoji,
+                        );
+                        if (!emojiData) {
+                            return match;
+                        }
+                        const image = document.createElement("img");
+                        image.src = emojiData.url;
+                        image.alt = `:${emoji}:`;
+                        image.title = emojiData.shortcode;
+                        image.className =
+                            "h-6 align-text-bottom inline not-prose hover:scale-110 transition-transform duration-75 ease-in-out";
+                        return image.outerHTML;
+                    },
+                );
             }
 
-            const renderedMention = h(MentionComponent);
-            renderedMention.props = {
-                account: mention,
-            };
+            // Replace links containing mentions with interactive mentions
+            const links = contentHtml.querySelectorAll("a");
 
-            link.outerHTML = await renderToString(renderedMention);
-        }
+            for (const link of links) {
+                const mention = toValue(mentions).find(
+                    (m) => link.textContent === `@${m.acct}`,
+                );
+                if (!mention) {
+                    continue;
+                }
 
-        // Highlight code blocks
-        const codeBlocks = contentHtml.querySelectorAll("pre code");
-        for (const codeBlock of codeBlocks) {
-            const code = codeBlock.textContent;
-            if (!code) {
-                continue;
+                const renderedMention = h(MentionComponent);
+                renderedMention.props = {
+                    account: mention,
+                };
+
+                link.outerHTML = await renderToString(renderedMention);
             }
-            const newCode = (await getShikiHighlighter()).highlight(code, {
-                lang: codeBlock.getAttribute("class")?.replace("language-", ""),
-            });
 
-            // Replace parent pre tag with highlighted code
-            const parent = codeBlock.parentElement;
-            if (!parent) {
-                continue;
+            // Highlight code blocks
+            const codeBlocks = contentHtml.querySelectorAll("pre code");
+            for (const codeBlock of codeBlocks) {
+                const code = codeBlock.textContent;
+                if (!code) {
+                    continue;
+                }
+                const newCode = (await getShikiHighlighter()).highlight(code, {
+                    lang: codeBlock
+                        .getAttribute("class")
+                        ?.replace("language-", ""),
+                });
+
+                // Replace parent pre tag with highlighted code
+                const parent = codeBlock.parentElement;
+                if (!parent) {
+                    continue;
+                }
+                parent.outerHTML = newCode;
             }
-            parent.outerHTML = newCode;
-        }
 
-        result.value = contentHtml.innerHTML;
-    })();
+            result.value = contentHtml.innerHTML;
+        },
+        { immediate: true },
+    );
 
     return result;
 };
diff --git a/composables/ResolveMentions.ts b/composables/ResolveMentions.ts
index 0616ff0..5e9de63 100644
--- a/composables/ResolveMentions.ts
+++ b/composables/ResolveMentions.ts
@@ -2,19 +2,24 @@ import type { Mastodon } from "megalodon";
 import type { Account } from "~/types/mastodon/account";
 import type { Mention } from "~/types/mastodon/mention";
 
-export const useResolveMentions = async (
+export const useResolveMentions = (
     mentions: Mention[],
     client: Mastodon | null,
-): Promise<Ref<Account[]>> => {
+): Ref<Account[]> => {
     if (!client) {
         return ref([]);
     }
-    return ref(
-        await Promise.all(
+
+    const output = ref<Account[]>([]);
+
+    (async () => {
+        output.value = await Promise.all(
             mentions.map(async (mention) => {
                 const response = await client.getAccount(mention.id);
                 return response.data;
             }),
-        ),
-    );
+        );
+    })();
+
+    return output;
 };
diff --git a/layouts/app.vue b/layouts/app.vue
index f5b9249..3f7c77d 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -53,6 +53,7 @@
             </aside>
         </div>
     </div>
+    <ComposerModal />
 </template>
 
 <script setup lang="ts">
@@ -71,4 +72,12 @@ useServerSeoMeta({
     colorScheme: "dark",
     referrer: "no-referrer",
 });
+
+const { n } = useMagicKeys();
+
+watchEffect(() => {
+    if (n.value) {
+        useEvent("composer:open");
+    }
+});
 </script>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 56f9320..d8e3643 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -10,6 +10,7 @@ export default defineNuxtConfig({
         "@vee-validate/nuxt",
         "nuxt-shiki",
     ],
+
     app: {
         head: {
             link: [
@@ -22,6 +23,7 @@ export default defineNuxtConfig({
             htmlAttrs: { lang: "en-us" },
         },
     },
+
     shiki: {
         defaultTheme: "rose-pine",
         bundledLangs: [
@@ -40,6 +42,7 @@ export default defineNuxtConfig({
             "yaml",
         ],
     },
+
     nitro: {
         preset: "bun",
         minify: true,
@@ -51,12 +54,15 @@ export default defineNuxtConfig({
             gzip: false,
         },
     },
+
     schemaOrg: {
         enabled: false,
     },
+
     ogImage: {
         enabled: false,
     },
+
     vite: {
         define: {
             __VERSION__: JSON.stringify("0.4"),
@@ -69,6 +75,7 @@ export default defineNuxtConfig({
             },
         },
     },
+
     veeValidate: {
         autoImports: true,
         componentNames: {
@@ -78,6 +85,7 @@ export default defineNuxtConfig({
             ErrorMessage: "VeeErrorMessage",
         },
     },
+
     runtimeConfig: {
         public: {
             language: "en-US",
@@ -87,7 +95,12 @@ export default defineNuxtConfig({
             apiHost: "https://social.lysand.org",
         },
     },
+
     site: {
         url: "https://social.lysand.org",
     },
+
+    devtools: {
+        enabled: true,
+    },
 });
diff --git a/package.json b/package.json
index 8f44b72..c89ded5 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
         "c12": "^1.10.0",
         "html-to-text": "^9.0.5",
         "megalodon": "^10.0.0",
+        "mitt": "^3.0.1",
         "nuxt": "^3.11.2",
         "nuxt-headlessui": "^1.2.0",
         "nuxt-icon": "^0.6.10",