feat: disable SSR

composables/accounts.ts

@@ -0,0 +1,40 @@
+import { login as loginMasto } from 'masto'
+import type { UserLogin } from '~/types'
+import { DEFAULT_SERVER } from '~/constants'
+
+const accounts = useLocalStorage<UserLogin[]>('nuxtodon-accounts', [], { deep: true })
+const currentId = useLocalStorage<string>('nuxtodon-current-user', '')
+
+export const currentUser = computed<UserLogin | undefined>(() => {
+  let user: UserLogin | undefined
+  if (currentId.value) {
+    user = accounts.value.find(user => user.account?.id === currentId.value)
+    if (user)
+      return user
+  }
+  // Fallback to the first account
+  return accounts.value[0]
+})
+
+export const currentServer = computed<string>(() => currentUser.value?.server || DEFAULT_SERVER)
+
+export async function loginCallback(user: UserLogin) {
+  const existing = accounts.value.findIndex(u => u.server === user.server && u.token === user.token)
+  if (existing !== -1) {
+    if (currentId.value === accounts.value[existing].account?.id)
+      return null
+    currentId.value = user.account?.id
+    return true
+  }
+
+  const masto = await loginMasto({
+    url: `https://${user.server}`,
+    accessToken: user.token,
+  })
+  const me = await masto.accounts.verifyCredentials()
+  user.account = me
+
+  accounts.value.push(user)
+  currentId.value = me.id
+  return true
+}

composables/client.ts

@@ -1,10 +1,9 @@
-import type { MastoClient } from 'masto'
-import type { ClientState } from '~/plugins/store.client'
+import { login } from 'masto'
+import { currentUser } from './accounts'
+import { DEFAULT_SERVER } from '~/constants'
 
-export function useMasto() {
-  return useNuxtApp().$masto as Promise<MastoClient>
-}
-
-export function useClientState() {
-  return useNuxtApp().$clientState as ClientState
-}
+// TODO: improve upsteam to make this synchronous (delayed auth)
+export const masto = await login({
+  url: `https://${currentUser.value?.server || DEFAULT_SERVER}`,
+  accessToken: currentUser.value?.token || undefined,
+})

composables/cookies.ts

@@ -1,16 +0,0 @@
-import { DEFAULT_SERVER } from '~/constants'
-
-export function useAppCookies() {
-  const server = useCookie('nuxtodon-server', { default: () => DEFAULT_SERVER })
-  const token = useCookie('nuxtodon-token')
-
-  return {
-    server,
-    token,
-  }
-}
-
-export function useLoginState() {
-  const token = useCookie('nuxtodon-token')
-  return computed(() => !!token.value)
-}

composables/masto.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { Account, MastoClient, Relationship } from 'masto'
+import type { Account, Relationship } from 'masto'
 
 export function getDisplayName(account: Account) {
   return account.displayName || account.username
@@ -28,8 +28,6 @@ export function useRelationship(account: Account): Ref<Relationship | undefined>
 }
 
 async function fetchRelationships() {
-  const masto = await useMasto()
-
   const requested = Array.from(requestedRelationships.entries())
   requestedRelationships.clear()
 

composables/servers.ts

@@ -0,0 +1,41 @@
+import type { ServerInfo } from '~/types'
+
+const ServerInfoTTL = 60 * 60 * 1000 * 12 // 12 hour
+
+const serverInfoPromise = new Map<string, Promise<ServerInfo>>()
+const serverInfos = useLocalStorage<Record<string, ServerInfo>>('nuxtodon-server-info', {})
+
+async function _fetchServerInfo(server: string) {
+  if (!serverInfos.value[server]) {
+    // @ts-expect-error init
+    serverInfos.value[server] = {
+      timeUpdated: 0,
+      server,
+    }
+  }
+  if (serverInfos.value[server].timeUpdated + ServerInfoTTL < Date.now()) {
+    await Promise.allSettled([
+      masto.instances.fetch().then((r) => {
+        Object.assign(serverInfos.value[server], r)
+      }),
+      masto.customEmojis.fetchAll().then((r) => {
+        serverInfos.value[server].customEmojis = Object.fromEntries(r.map(i => [i.shortcode, i]))
+      }),
+    ])
+  }
+  return serverInfos.value[server]
+}
+
+export function fetchServerInfo(server: string) {
+  if (!serverInfoPromise.has(server))
+    serverInfoPromise.set(server, _fetchServerInfo(server))
+  return serverInfoPromise.get(server)!
+}
+
+export function useServerInfo(server: string) {
+  const info = ref<ServerInfo | undefined>()
+  fetchServerInfo(server).then((r) => {
+    info.value = r
+  })
+  return info
+}