feat: ✨ New notifications view, refactor all composables

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 };
+};