feat: ✨ Implement proper login and logout using UI

composables/AccessToken.ts

@@ -0,0 +1,8 @@
+import { StorageSerializers } from "@vueuse/core";
+import type { OAuth } from "megalodon";
+
+export const useTokenData = () => {
+    return useLocalStorage<OAuth.TokenData | null>("lysand:token_data", null, {
+        serializer: StorageSerializers.object,
+    });
+};

composables/Account.ts

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

composables/AccountSearch.ts

@@ -1,13 +1,19 @@
 import type { Mastodon } from "megalodon";
+import type { Account } from "~/types/mastodon/account";
 
-export const useAccountSearch = async (client: Mastodon | null, q: string) => {
-    if (!client) {
-        return null;
-    }
+export const useAccountSearch = (
+    client: MaybeRef<Mastodon | null>,
+    q: string,
+): Ref<Account[] | null> => {
+    const output = ref(null as Account[] | null);
 
-    return (
-        await client.searchAccount(q, {
+    ref(client)
+        .value?.searchAccount(q, {
             resolve: true,
         })
-    ).data;
+        .then((res) => {
+            output.value = res.data;
+        });
+
+    return output;
 };

composables/AccountTimeline.ts

@@ -29,72 +29,4 @@ export const useAccountTimeline = (
             }),
         options,
     );
-    /* 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.getAccountStatuses(ref(id).value ?? "", {
-            only_media: false,
-            ...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.getAccountStatuses(ref(id).value ?? "", {
-            only_media: false,
-            ...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(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 }; */
 };

composables/AppData.ts

@@ -0,0 +1,8 @@
+import { StorageSerializers } from "@vueuse/core";
+import type { OAuth } from "megalodon";
+
+export const useAppData = () => {
+    return useLocalStorage<OAuth.AppData | null>("lysand:app_data", null, {
+        serializer: StorageSerializers.object,
+    });
+};

composables/ExtendedDescription.ts

@@ -5,16 +5,18 @@ type ExtendedDescription = {
     content: string;
 };
 
-export const useExtendedDescription = (client: Mastodon | null) => {
-    if (!client) {
+export const useExtendedDescription = (client: MaybeRef<Mastodon | null>) => {
+    if (!ref(client).value) {
         return ref(null as ExtendedDescription | null);
     }
 
     const output = ref(null as ExtendedDescription | null);
 
-    client.client.get("/api/v1/instance/extended_description").then((res) => {
-        output.value = res.data;
-    });
+    ref(client)
+        .value?.client.get("/api/v1/instance/extended_description")
+        .then((res) => {
+            output.value = res.data;
+        });
 
     return output;
 };

composables/Instance.ts

@@ -6,16 +6,18 @@ type InstanceWithExtra = Instance & {
     lysand_version?: string;
 };
 
-export const useInstance = (client: Mastodon | null) => {
-    if (!client) {
+export const useInstance = (client: MaybeRef<Mastodon | null>) => {
+    if (!ref(client).value) {
         return ref(null as InstanceWithExtra | null);
     }
 
     const output = ref(null as InstanceWithExtra | null);
 
-    client.getInstance().then((res) => {
-        output.value = res.data;
-    });
+    ref(client)
+        .value?.getInstance()
+        .then((res) => {
+            output.value = res.data;
+        });
 
     return output;
 };

composables/Megalodon.ts

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

composables/Note.ts

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