feat: ✨ Add new navigation sidebar and instance description block on /

composables/ExtendedDescription.ts

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

composables/Instance.ts

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

composables/LocalTimeline.ts

@@ -0,0 +1,86 @@
+import type { Mastodon } from "megalodon";
+import type { Status } from "~/types/mastodon/status";
+
+export const useLocalTimeline = (
+    client: Mastodon | null,
+    options: MaybeRef<
+        Partial<{
+            only_media: boolean;
+            max_id: string;
+            since_id: string;
+            min_id: string;
+            limit: number;
+        }>
+    >,
+): {
+    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.getLocalTimeline({
+            ...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.getLocalTimeline({
+            ...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 { timeline: fetchedNotes, loadNext, loadPrev };
+};