feat: ✨ New notifications view, refactor all composables

components/social-elements/instance/Presentation.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-const client = await useMegalodon();
-const instance = await useInstance(client);
-const description = await useExtendedDescription(client);
+const client = useMegalodon();
+const instance = useInstance(client);
+const description = useExtendedDescription(client);
 </script>

components/social-elements/notes/header.vue

@@ -0,0 +1,68 @@
+<template>
+    <div v-if="small" class="flex flex-row">
+        <Skeleton :enabled="!note" shape="rect" class="!h-6 w-6">
+            <NuxtLink :href="accountUrl">
+                <img class="h-6 w-6 rounded ring-1 ring-white/5" :src="note?.account.avatar"
+                    :alt="`${note?.account.acct}'s avatar`" />
+            </NuxtLink>
+        </Skeleton>
+        <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
+            <div class="flex flex-row text-sm items-center justify-between w-full">
+                <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
+                    <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
+                        {{
+        note?.account.display_name }}
+                    </Skeleton>
+                </NuxtLink>
+                <NuxtLink :href="noteUrl" class="text-gray-400 ml-2 line-clamp-1 break-all shrink-0">
+                    <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
+                        {{ timeAgo }}
+                    </Skeleton>
+                </NuxtLink>
+            </div>
+        </div>
+    </div>
+    <div v-else class="flex flex-row">
+        <Skeleton :enabled="!note" shape="rect" class="!h-12 w-12">
+            <NuxtLink :href="accountUrl">
+                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
+                    :alt="`${note?.account.acct}'s avatar`" />
+            </NuxtLink>
+        </Skeleton>
+        <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
+            <div class="flex flex-row items-center justify-between w-full">
+                <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
+                    <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">
+                        {{
+        note?.account.display_name }}
+                    </Skeleton>
+                </NuxtLink>
+                <NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0">
+                    <Skeleton :enabled="!note" :min-width="50" :max-width="100" shape="rect">
+                        {{ timeAgo }}
+                    </Skeleton>
+                </NuxtLink>
+            </div>
+            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+                <Skeleton :enabled="!note" :min-width="130" :max-width="250" shape="rect">
+                    @{{
+        note?.account.acct
+                    }}
+                </Skeleton>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Status } from '~/types/mastodon/status';
+
+const props = defineProps<{
+    note?: Status;
+    small?: boolean;
+}>();
+
+const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
+const accountUrl = props.note && `/@${props.note.account.acct}`;
+const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
+</script>

components/social-elements/notes/note.vue

@@ -1,49 +1,41 @@
 <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 class="flex flex-row">
-            <Skeleton :enabled="isLoading" shape="rect" class="!h-12 w-12">
-                <NuxtLink :href="accountUrl">
-                    <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar"
-                        :alt="`${note?.account.acct}'s avatar`" />
-                </NuxtLink>
+        <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="%">
+                <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>
             </Skeleton>
-            <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
-                <div class="flex flex-row items-center justify-between w-full">
-                    <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
-                        <Skeleton :enabled="isLoading" :min-width="90" :max-width="170" shape="rect">
-                            {{
-                note?.account.display_name }}
-                        </Skeleton>
-                    </NuxtLink>
-                    <NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0">
-                        <Skeleton :enabled="isLoading" :min-width="50" :max-width="100" shape="rect">
-                            {{ timeAgo }}
-                        </Skeleton>
-                    </NuxtLink>
+        </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"
+                    type="content">
+                </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>
-                <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
-                    <Skeleton :enabled="isLoading" :min-width="130" :max-width="250" shape="rect">
-                        @{{
-                note?.account.acct
-            }}
-                    </Skeleton>
-                </span>
+            </NuxtLink>
+            <div v-if="attachments.length > 0" class="[&:not(:first-child)]:mt-6">
+                <SocialElementsNotesAttachment v-for="attachment of attachments" :key="attachment.id"
+                    :attachment="attachment" />
             </div>
         </div>
-        <NuxtLink :href="noteUrl" class="mt-6">
-            <Skeleton :enabled="true" v-if="isLoading" :min-width="50" :max-width="100" width-unit="%" shape="rect"
-                type="content">
-            </Skeleton>
-            <div v-else-if="content" class="prose prose-invert 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"
-                :attachment="attachment" />
-        </div>
-        <Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="isLoading"></Skeleton>
         <div v-else
+            class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">
+            <strong v-if="note?.sensitive" class="max-w-64">This note was tagged as containing sensitive
+                content</strong>
+            <!-- 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>
+        </div>
+        <Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="!note && !small"></Skeleton>
+        <div v-else-if="!small"
             class="mt-6 flex flex-row items-stretch relative justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
             <button>
                 <Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
@@ -94,20 +86,22 @@ import type { Status } from "~/types/mastodon/status";
 
 const props = defineProps<{
     note?: Status;
-    skeleton?: boolean;
+    small?: boolean;
 }>();
 
-const isLoading = props.skeleton;
-const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
+// 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 client = await useMegalodon();
-const mentions = await useResolveMentions(props.note?.mentions ?? [], client);
+const client = useMegalodon();
+const mentions = await useResolveMentions(note.value?.mentions ?? [], client);
+const eventualReblogAccountName = props.note?.reblog ? (useParsedContent(props.note?.account.display_name, props.note?.account.emojis, mentions.value)).value : null;
 const content =
-    props.note && process.client
-        ? await useParsedContent(
-            props.note.content,
-            props.note.emojis,
+    note.value && process.client
+        ? useParsedContent(
+            note.value.content,
+            note.value.emojis,
             mentions.value,
         )
         : "";
@@ -117,9 +111,8 @@ const numberFormat = (number = 0) =>
         compactDisplay: "short",
         maximumFractionDigits: 1,
     }).format(number);
-const attachments = props.note?.media_attachments ?? [];
-const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
-const accountUrl = props.note && `/@${props.note.account.acct}`;
+const attachments = note.value?.media_attachments ?? [];
+const noteUrl = note.value && `/@${note.value.account.acct}/${note.value.id}`;
 </script>
 
 <style>

components/social-elements/notifications/notif.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="flex flex-col p-1 bg-dark-400">
+        <div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
+            <Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
+                width-unit="%">
+                <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>
+            </Skeleton>
+        </div>
+        <div>
+            <SocialElementsNotesNote v-if="notification?.status || !notification" :note="notification?.status"
+                :small="true" />
+            <div v-else-if="notification.account" class="p-6 ring-1 ring-white/5 bg-dark-800">
+                <SocialElementsUsersSmallCard :account="notification.account" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Notification } from '~/types/mastodon/notification';
+
+const props = defineProps<{
+    notification?: Notification;
+}>();
+
+const accountName = useParsedContent(props.notification?.account?.display_name ?? '', props.notification?.account?.emojis ?? [], []);
+const text = computed(() => {
+    if (!props.notification) return '';
+
+    switch (props.notification.type) {
+        case 'mention':
+            return 'mentioned you';
+        case 'reblog':
+            return 'reblogged your note';
+        case 'favourite':
+            return 'liked your note';
+        case 'follow':
+            return 'followed you';
+        case 'follow_request':
+            return 'requested to follow you';
+        default:
+            console.error('Unknown notification type', props.notification.type)
+            return '';
+    }
+});
+const icon = computed(() => {
+    if (!props.notification) return '';
+
+    switch (props.notification.type) {
+        case 'mention':
+            return 'tabler:at';
+        case 'reblog':
+            return 'tabler:repeat';
+        case 'favourite':
+            return 'tabler:heart';
+        case 'follow':
+            return 'tabler:plus';
+        case 'follow_request':
+            return 'tabler:plus';
+        default:
+            return '';
+    }
+});
+</script>

components/social-elements/users/Account.vue

@@ -116,30 +116,28 @@ watch(
     async () => {
         if (skeleton.value) return;
         parsedNote.value = (
-            await useParsedContent(
+            useParsedContent(
                 props.account?.note ?? "",
                 props.account?.emojis ?? [],
                 [],
             )
-        ).value;
-        parsedFields.value = await Promise.all(
-            props.account?.fields.map(async (field) => ({
-                name: await (
-                    await useParsedContent(
-                        field.name,
-                        props.account?.emojis ?? [],
-                        [],
-                    )
-                ).value,
-                value: await (
-                    await useParsedContent(
-                        field.value,
-                        props.account?.emojis ?? [],
-                        [],
-                    )
-                ).value,
-            })) ?? [],
-        );
+        ).value ?? "";
+        parsedFields.value = props.account?.fields.map((field) => ({
+            name: (
+                useParsedContent(
+                    field.name,
+                    props.account?.emojis ?? [],
+                    [],
+                )
+            ).value ?? "",
+            value: (
+                useParsedContent(
+                    field.value,
+                    props.account?.emojis ?? [],
+                    [],
+                )
+            ).value ?? "",
+        })) ?? [];
     },
     {
         immediate: true,

components/social-elements/users/SmallCard.vue

@@ -1,6 +1,6 @@
 <template>
     <NuxtLink :href="accountUrl" class="flex flex-row">
-        <Skeleton :enabled="skeleton" shape="rect" class="!h-12 w-12">
+        <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
             <div>
                 <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
                     :alt="`${account?.acct}'s avatar'`" />
@@ -9,14 +9,14 @@
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row items-center justify-between w-full">
                 <div class="font-semibold text-gray-200 line-clamp-1 break-all">
-                    <Skeleton :enabled="skeleton" :min-width="90" :max-width="170" shape="rect">
+                    <Skeleton :enabled="!account" :min-width="90" :max-width="170" shape="rect">
                         {{
         account?.display_name }}
                     </Skeleton>
                 </div>
             </div>
             <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
-                <Skeleton :enabled="skeleton" :min-width="130" :max-width="250" shape="rect">
+                <Skeleton :enabled="!account" :min-width="130" :max-width="250" shape="rect">
                     @{{
         account?.acct
                     }}
@@ -29,15 +29,9 @@
 <script lang="ts" setup>
 import type { Account } from "~/types/mastodon/account";
 
-const props = withDefaults(
-    defineProps<{
-        account?: Account;
-        skeleton?: boolean;
-    }>(),
-    {
-        skeleton: false,
-    },
-);
+const props = defineProps<{
+    account?: Account;
+}>();
 
 const accountUrl = props.account && `/@${props.account.acct}`;
 </script>

components/timelines/Notifications.vue

@@ -0,0 +1,50 @@
+<template>
+    <ClientOnly>
+
+        <SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" />
+        <span ref="skeleton"></span>
+        <SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
+
+        <div v-if="hasReachedEnd"
+            class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
+            <Icon name="tabler:message-off" class="h-6 w-6" />
+            <span>No more notifications, you've seen them all</span>
+        </div>
+    </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+const access_token = useLocalStorage("lysand:access_token", null);
+const client = useMegalodon(access_token);
+
+const isLoading = ref(true);
+
+const timelineParameters = ref({});
+const hasReachedEnd = ref(false);
+const { timeline, loadNext, loadPrev } = useNotificationTimeline(
+    client,
+    timelineParameters,
+);
+const skeleton = ref<HTMLSpanElement | null>(null);
+
+onMounted(() => {
+    useIntersectionObserver(skeleton, async (entries) => {
+        if (
+            entries[0].isIntersecting &&
+            !hasReachedEnd.value &&
+            !isLoading.value
+        ) {
+            isLoading.value = true;
+            await loadNext();
+        }
+    });
+});
+
+watch(timeline, (newTimeline, oldTimeline) => {
+    isLoading.value = false;
+    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
+    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
+        hasReachedEnd.value = true;
+    }
+});
+</script>

components/timelines/Public.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-const client = await useMegalodon();
+const client = useMegalodon();
 
 const isLoading = ref(true);
 

composables/Account.ts

@@ -1,12 +1,16 @@
 import type { Mastodon } from "megalodon";
+import type { Account } from "~/types/mastodon/account";
 
-export const useAccount = async (
-    client: Mastodon | null,
-    accountId: string,
-) => {
+export const useAccount = (client: Mastodon | null, accountId: string) => {
     if (!client) {
-        return null;
+        return ref(null as Account | null);
     }
 
-    return (await client.getAccount(accountId)).data;
+    const output = ref(null as Account | null);
+
+    client.getAccount(accountId).then((res) => {
+        output.value = res.data;
+    });
+
+    return output;
 };

composables/AccountTimeline.ts

@@ -4,24 +4,32 @@ import type { Status } from "~/types/mastodon/status";
 export const useAccountTimeline = (
     client: Mastodon | null,
     id: MaybeRef<string | null>,
-    options: MaybeRef<
-        Partial<{
-            limit?: number | undefined;
-            max_id?: string | undefined;
-            since_id?: string | undefined;
-            min_id?: string | undefined;
-            pinned?: boolean | undefined;
-            exclude_replies?: boolean | undefined;
-            exclude_reblogs?: boolean | undefined;
-            only_media: boolean;
-        }>
-    >,
+    options: MaybeRef<{
+        limit?: number | undefined;
+        max_id?: string | undefined;
+        since_id?: string | undefined;
+        min_id?: string | undefined;
+        pinned?: boolean | undefined;
+        exclude_replies?: boolean | undefined;
+        exclude_reblogs?: boolean | undefined;
+        only_media?: boolean;
+    }>,
 ): {
     timeline: Ref<Status[]>;
     loadNext: () => Promise<void>;
     loadPrev: () => Promise<void>;
 } => {
-    if (!client) {
+    return useIdTimeline(
+        client,
+        id,
+        (client, options) =>
+            client?.getAccountStatuses(ref(id).value ?? "", {
+                only_media: false,
+                ...options,
+            }),
+        options,
+    );
+    /* if (!client) {
         return {
             timeline: ref([]),
             loadNext: async () => {},
@@ -88,5 +96,5 @@ export const useAccountTimeline = (
         { immediate: true },
     );
 
-    return { timeline: fetchedNotes, loadNext, loadPrev };
+    return { timeline: fetchedNotes, loadNext, loadPrev }; */
 };

composables/ExtendedDescription.ts

@@ -1,13 +1,20 @@
 import type { Mastodon } from "megalodon";
 
-export const useExtendedDescription = async (client: Mastodon | null) => {
+type ExtendedDescription = {
+    updated_at: string;
+    content: string;
+};
+
+export const useExtendedDescription = (client: Mastodon | null) => {
     if (!client) {
-        return null;
+        return ref(null as ExtendedDescription | null);
     }
 
-    return (await client.client.get("/api/v1/instance/extended_description"))
-        .data as {
-        updated_at: string;
-        content: string;
-    };
+    const output = ref(null as ExtendedDescription | null);
+
+    client.client.get("/api/v1/instance/extended_description").then((res) => {
+        output.value = res.data;
+    });
+
+    return output;
 };

composables/Instance.ts

@@ -1,13 +1,21 @@
 import type { Mastodon } from "megalodon";
 import type { Instance } from "~/types/mastodon/instance";
 
-export const useInstance = async (client: Mastodon | null) => {
+type InstanceWithExtra = Instance & {
+    banner?: string;
+    lysand_version?: string;
+};
+
+export const useInstance = (client: Mastodon | null) => {
     if (!client) {
-        return null;
+        return ref(null as InstanceWithExtra | null);
     }
 
-    return (await client.getInstance()).data as Instance & {
-        banner?: string;
-        lysand_version?: string;
-    };
+    const output = ref(null as InstanceWithExtra | null);
+
+    client.getInstance().then((res) => {
+        output.value = res.data;
+    });
+
+    return output;
 };

composables/Megalodon.ts

@@ -1,13 +1,16 @@
 import { Mastodon } from "megalodon";
 
-export const useMegalodon = async (disableOnServer = false) => {
+export const useMegalodon = (
+    accessToken?: MaybeRef<string | null | undefined>,
+    disableOnServer = false,
+) => {
     if (disableOnServer && process.server) {
         return null;
     }
 
     const baseUrl = useBaseUrl().value;
 
-    const client = new Mastodon(baseUrl);
+    const client = new Mastodon(baseUrl, ref(accessToken).value);
 
     return client;
 };

composables/Note.ts

@@ -1,9 +1,16 @@
 import type { Mastodon } from "megalodon";
+import type { Status } from "~/types/mastodon/status";
 
-export const useNote = async (client: Mastodon | null, noteId: string) => {
+export const useNote = (client: Mastodon | null, noteId: string) => {
     if (!client) {
-        return null;
+        return ref(null as Status | null);
     }
 
-    return (await client.getStatus(noteId)).data;
+    const output = ref(null as Status | null);
+
+    client.getStatus(noteId).then((res) => {
+        output.value = res.data;
+    });
+
+    return output;
 };

composables/NotificationTimeline.ts

@@ -0,0 +1,24 @@
+import type { Mastodon } from "megalodon";
+import type { Notification } from "~/types/mastodon/notification";
+
+export const useNotificationTimeline = (
+    client: Mastodon | null,
+    options: MaybeRef<{
+        limit?: number | undefined;
+        max_id?: string | undefined;
+        since_id?: string | undefined;
+        min_id?: string | undefined;
+        exclude_types?: string[] | undefined;
+        account_id?: string | undefined;
+    }>,
+): {
+    timeline: Ref<Notification[]>;
+    loadNext: () => Promise<void>;
+    loadPrev: () => Promise<void>;
+} => {
+    return useTimeline(
+        client,
+        (client, options) => client?.getNotifications(options),
+        options,
+    );
+};

composables/ParsedContent.ts

@@ -9,70 +9,79 @@ import MentionComponent from "../components/social-elements/notes/mention.vue";
  * @param emojis Array of emojis to parse
  * @returns Reactive object with the parsed content
  */
-export const useParsedContent = async (
+export const useParsedContent = (
     content: string,
     emojis: Emoji[],
     mentions: Account[],
-): Promise<Ref<string>> => {
-    const contentHtml = document.createElement("div");
-    contentHtml.innerHTML = content;
+): Ref<string | null> => {
+    const result = ref(null as string | null);
 
-    // Replace emoji shortcodes with images
-    const paragraphs = contentHtml.querySelectorAll("p");
+    (async () => {
+        const contentHtml = document.createElement("div");
+        contentHtml.innerHTML = content;
 
-    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 emoji shortcodes with images
+        const paragraphs = contentHtml.querySelectorAll("p");
 
-    // 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 = 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;
-    }
-    return ref(contentHtml.innerHTML);
+
+        result.value = contentHtml.innerHTML;
+    })();
+
+    return result;
 };

composables/PublicTimeline.ts

@@ -3,84 +3,21 @@ import type { Status } from "~/types/mastodon/status";
 
 export const usePublicTimeline = (
     client: Mastodon | null,
-    options: MaybeRef<
-        Partial<{
-            only_media: boolean;
-            max_id: string;
-            since_id: string;
-            min_id: string;
-            limit: number;
-        }>
-    >,
+    options: MaybeRef<{
+        only_media?: boolean;
+        limit?: number;
+        max_id?: string;
+        since_id?: string;
+        min_id?: string;
+    }>,
 ): {
     timeline: Ref<Status[]>;
     loadNext: () => Promise<void>;
     loadPrev: () => Promise<void>;
 } => {
-    if (!client) {
-        return {
-            timeline: ref([]),
-            loadNext: async () => {},
-            loadPrev: async () => {},
-        };
-    }
-
-    const fetchedNotes = ref<Status[]>([]);
-    const fetchedNoteIds = new Set<string>();
-    let nextMaxId: string | undefined = undefined;
-    let prevMinId: string | undefined = undefined;
-
-    const loadNext = async () => {
-        const response = await client.getPublicTimeline({
-            ...ref(options).value,
-            max_id: nextMaxId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
-
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
-            nextMaxId = newNotes[newNotes.length - 1].id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            nextMaxId = undefined;
-        }
-    };
-
-    const loadPrev = async () => {
-        const response = await client.getPublicTimeline({
-            ...ref(options).value,
-            min_id: prevMinId,
-            limit: useConfig().NOTES_PER_PAGE,
-        });
-
-        const newNotes = response.data.filter(
-            (note) => !fetchedNoteIds.has(note.id),
-        );
-        if (newNotes.length > 0) {
-            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
-            prevMinId = newNotes[0].id;
-            for (const note of newNotes) {
-                fetchedNoteIds.add(note.id);
-            }
-        } else {
-            prevMinId = undefined;
-        }
-    };
-
-    watch(
-        () => ref(options).value,
-        async ({ max_id, min_id }) => {
-            nextMaxId = max_id;
-            prevMinId = min_id;
-            await loadNext();
-        },
-        { immediate: true },
+    return useTimeline(
+        client,
+        (client, options) => client?.getPublicTimeline(options),
+        options,
     );
-
-    return { timeline: fetchedNotes, loadNext, loadPrev };
 };

composables/Timeline.ts

@@ -0,0 +1,176 @@
+import type { Mastodon, Response } from "megalodon";
+
+interface BaseOptions {
+    max_id?: string;
+    min_id?: string;
+}
+
+type FetchTimelineFunction<Element, Options> = (
+    client: Mastodon,
+    options: Options & BaseOptions,
+) => Promise<Response<Element[]>>;
+
+export const useTimeline = <
+    Element extends {
+        id: string;
+    },
+    Options,
+>(
+    client: Mastodon | null,
+    fetchTimeline: FetchTimelineFunction<Element, Options> | null | undefined,
+    options: MaybeRef<Options & BaseOptions>,
+): {
+    timeline: Ref<Element[]>;
+    loadNext: () => Promise<void>;
+    loadPrev: () => Promise<void>;
+} => {
+    if (!client || !fetchTimeline) {
+        return {
+            timeline: ref([]),
+            loadNext: async () => {},
+            loadPrev: async () => {},
+        };
+    }
+
+    const fetchedNotes: Ref<Element[]> = ref([]);
+    const fetchedNoteIds = new Set<string>();
+    let nextMaxId: string | undefined = undefined;
+    let prevMinId: string | undefined = undefined;
+
+    const loadNext = async () => {
+        const response = await fetchTimeline(client, {
+            ...(ref(options).value as Options & BaseOptions),
+            max_id: nextMaxId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        const newNotes = response.data.filter(
+            (note) => !fetchedNoteIds.has(note.id),
+        );
+        if (newNotes.length > 0) {
+            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
+            nextMaxId = newNotes[newNotes.length - 1].id;
+            for (const note of newNotes) {
+                fetchedNoteIds.add(note.id);
+            }
+        } else {
+            nextMaxId = undefined;
+        }
+    };
+
+    const loadPrev = async () => {
+        const response = await fetchTimeline(client, {
+            ...(ref(options).value as Options & BaseOptions),
+            min_id: prevMinId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        const newNotes = response.data.filter(
+            (note) => !fetchedNoteIds.has(note.id),
+        );
+        if (newNotes.length > 0) {
+            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
+            prevMinId = newNotes[0].id;
+            for (const note of newNotes) {
+                fetchedNoteIds.add(note.id);
+            }
+        } else {
+            prevMinId = undefined;
+        }
+    };
+
+    watch(
+        () => ref(options).value,
+        async ({ max_id, min_id }) => {
+            nextMaxId = max_id;
+            prevMinId = min_id;
+            await loadNext();
+        },
+        { immediate: true },
+    );
+
+    return { timeline: fetchedNotes, loadNext, loadPrev };
+};
+
+export const useIdTimeline = <
+    Element extends {
+        id: string;
+    },
+    Options,
+>(
+    client: Mastodon | null,
+    id: MaybeRef<string | null>,
+    fetchTimeline: FetchTimelineFunction<Element, Options> | null | undefined,
+    options: MaybeRef<Options & BaseOptions>,
+): {
+    timeline: Ref<Element[]>;
+    loadNext: () => Promise<void>;
+    loadPrev: () => Promise<void>;
+} => {
+    if (!client || !fetchTimeline) {
+        return {
+            timeline: ref([]),
+            loadNext: async () => {},
+            loadPrev: async () => {},
+        };
+    }
+
+    const fetchedNotes: Ref<Element[]> = ref([]);
+    const fetchedNoteIds = new Set<string>();
+    let nextMaxId: string | undefined = undefined;
+    let prevMinId: string | undefined = undefined;
+
+    const loadNext = async () => {
+        const response = await fetchTimeline(client, {
+            ...(ref(options).value as Options & BaseOptions),
+            max_id: nextMaxId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        const newNotes = response.data.filter(
+            (note) => !fetchedNoteIds.has(note.id),
+        );
+        if (newNotes.length > 0) {
+            fetchedNotes.value = [...fetchedNotes.value, ...newNotes];
+            nextMaxId = newNotes[newNotes.length - 1].id;
+            for (const note of newNotes) {
+                fetchedNoteIds.add(note.id);
+            }
+        } else {
+            nextMaxId = undefined;
+        }
+    };
+
+    const loadPrev = async () => {
+        const response = await fetchTimeline(client, {
+            ...(ref(options).value as Options & BaseOptions),
+            min_id: prevMinId,
+            limit: useConfig().NOTES_PER_PAGE,
+        });
+
+        const newNotes = response.data.filter(
+            (note) => !fetchedNoteIds.has(note.id),
+        );
+        if (newNotes.length > 0) {
+            fetchedNotes.value = [...newNotes, ...fetchedNotes.value];
+            prevMinId = newNotes[0].id;
+            for (const note of newNotes) {
+                fetchedNoteIds.add(note.id);
+            }
+        } else {
+            prevMinId = undefined;
+        }
+    };
+
+    watch(
+        [() => ref(id).value, () => ref(options).value],
+        async ([id, { max_id, min_id }]) => {
+            nextMaxId = max_id;
+            prevMinId = min_id;
+            id && (await loadNext());
+        },
+        { immediate: true },
+    );
+
+    return { timeline: fetchedNotes, loadNext, loadPrev };
+};

layouts/app.vue

@@ -3,18 +3,24 @@
         <SidebarsNavigation />
         <div class="relative md:pl-20 min-h-dvh flex flex-row justify-center lg:justify-between">
             <aside
-                class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex p-10 flex-col gap-10">
-                <div class="grow">
-                    <button type="button"
-                        class="relative block w-full h-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
-                        <Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
-                        <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications will
-                            appear here
-                            when you
-                            sign in</span>
-                    </button>
-                </div>
-                <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4">
+                class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex flex-col gap-10">
+                <ClientOnly>
+                    <div class="grow p-10" v-if="!accessToken">
+                        <button type="button"
+                            class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
+                            <Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
+                            <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
+                                will
+                                appear here
+                                when you
+                                sign in</span>
+                        </button>
+                    </div>
+                    <div class="grow" v-else>
+                        <TimelinesNotifications />
+                    </div>
+                </ClientOnly>
+                <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10">
                     <div class="text-center">
                         <strong
                             class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
@@ -52,14 +58,15 @@
 <script setup lang="ts">
 import { convert } from "html-to-text";
 
-const client = await useMegalodon();
-const instance = await useInstance(client);
-const description = await useExtendedDescription(client);
+const accessToken = useLocalStorage("lysand:access_token", "");
+const client = useMegalodon(accessToken);
+const instance = useInstance(client);
+const description = useExtendedDescription(client);
 
 useServerSeoMeta({
-    title: instance?.title,
-    ogImage: instance?.banner,
-    description: convert(description?.content ?? ""),
+    title: instance.value?.title,
+    ogImage: instance.value?.banner,
+    description: convert(description.value?.content ?? ""),
     ogSiteName: "Lysand",
     colorScheme: "dark",
     referrer: "no-referrer",

pages/[username]/[uuid].vue

@@ -10,14 +10,14 @@
 import { useRoute } from "vue-router";
 
 const route = useRoute();
-const client = await useMegalodon();
+const client = useMegalodon();
 const uuid = route.params.uuid as string;
 
-const note = await useNote(client, uuid);
+const note = useNote(client, uuid);
 
 useServerSeoMeta({
-    title: note?.account.display_name,
-    description: note?.content,
-    ogImage: note?.media_attachments[0]?.preview_url,
+    title: note.value?.account.display_name,
+    description: note.value?.content,
+    ogImage: note.value?.media_attachments[0]?.preview_url,
 });
 </script>

pages/[username]/index.vue

@@ -35,7 +35,7 @@ const { width } = useWindowSize();
 const isMobile = computed(() => width.value < 1024);
 
 const route = useRoute();
-const client = await useMegalodon(true);
+const client = useMegalodon(undefined, true);
 const username = (route.params.username as string).replace("@", "");
 
 const account: Ref<Account | null> = ref(null);

pages/local.vue

@@ -16,7 +16,7 @@
 definePageMeta({
     layout: "app",
 });
-const client = await useMegalodon();
+const client = useMegalodon();
 
 const isLoading = ref(true);
 

pages/register/index.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="flex min-h-screen flex-col justify-center px-6 py-12 lg:px-8 relative">
+    <div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
         <img src="https://camo.githubusercontent.com/353460d1fdb1667ec993159270dcece12c491fb38165460215a519ab93f4e554/68747470733a2f2f63646e2d7765622e63706c757370617463682e636f6d2f6c7973616e642e77656270"
             alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
-        <div v-if="instance && instance.registrations" class="mt-10 mx-auto w-full max-w-md">
+        <div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
             <div v-if="Object.keys(errors).length > 0"
                 class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
                 <h2 class="font-bold text-lg">Error</h2>
@@ -69,7 +69,7 @@
                 </VeeField>
 
                 <ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
-                    "Register" }}</ButtonsPrimary>
+            "Register" }}</ButtonsPrimary>
             </VeeForm>
         </div>
         <div v-else>
@@ -114,8 +114,8 @@ const schema = toTypedSchema(
         }),
 );
 
-const client = await useMegalodon();
-const instance = await useInstance(client);
+const client = useMegalodon();
+const instance = useInstance(client);
 
 const errors = ref<{
     [key: string]: {