feat: use ref instanceStorage

app/composables/masto/masto.ts

@@ -26,7 +26,6 @@ export function mastoLogin(masto: ElkMasto, user: Pick<UserLogin, 'server' | 'to
   const instance: ElkInstance = reactive(getInstanceCache(server) || { uri: server, accountDomain: server })
   const accessToken = user.token
   const streamingApiUrl = instance?.configuration?.urls?.streaming
-  instanceStorage.value[server] = instance
 
   let createStreamingClient: (streamingApiUrl: string | undefined) => mastodon.streaming.Client | undefined
 
@@ -38,50 +37,49 @@ export function mastoLogin(masto: ElkMasto, user: Pick<UserLogin, 'server' | 'to
     }
 
     masto.streamingClient.value = createStreamingClient(streamingApiUrl)
-
-    // Refetch instance info in the background on login
-    masto.client.value.v2.instance.fetch().catch(error => new Promise<mastodon.v2.Instance>((resolve, reject) => {
-      if (error instanceof MastoHttpError && error.statusCode === 404) {
-        return masto.client.value.v1.instance.fetch().then((newInstance) => {
-          console.warn(`Instance ${server} on version ${newInstance.version} does not support "GET /api/v2/instance" API, try converting to v2 instance... expect some errors`)
-          const v2Instance = {
-            ...newInstance,
-            domain: newInstance.uri,
-            sourceUrl: '',
-            usage: {
-              users: {
-                activeMonth: 0,
-              },
-            },
-            icon: [],
-            apiVersions: {
-              mastodon: newInstance.version,
-            },
-            contact: {
-              email: newInstance.email,
-            },
-            configuration: {
-              ...(newInstance.configuration ?? {}),
-              urls: {
-                streaming: newInstance.urls.streamingApi,
-              },
-            },
-          } as unknown as mastodon.v2.Instance
-          return resolve(v2Instance)
-        }).catch(reject)
-      }
-
-      return reject(error)
-    })).then((newInstance) => {
-      Object.assign(instance, newInstance)
-      if (newInstance.configuration.urls.streaming !== streamingApiUrl)
-        masto.streamingClient.value = createStreamingClient(newInstance.configuration.urls.streaming)
-
-      // update localstorage instance
-      instanceStorage.value[server] = newInstance
-    })
   }
 
+  // Refetch instance info in the background on login
+  masto.client.value.v2.instance.fetch().catch(error => new Promise<mastodon.v2.Instance>((resolve, reject) => {
+    if (error instanceof MastoHttpError && error.statusCode === 404) {
+      return masto.client.value.v1.instance.fetch().then((newInstance) => {
+        console.warn(`Instance ${server} on version ${newInstance.version} does not support "GET /api/v2/instance" API, try converting to v2 instance... expect some errors`)
+        const v2Instance = {
+          ...newInstance,
+          domain: newInstance.uri,
+          sourceUrl: '',
+          usage: {
+            users: {
+              activeMonth: 0,
+            },
+          },
+          icon: [],
+          apiVersions: {
+            mastodon: newInstance.version,
+          },
+          contact: {
+            email: newInstance.email,
+          },
+          configuration: {
+            ...(newInstance.configuration ?? {}),
+            urls: {
+              streaming: newInstance.urls.streamingApi,
+            },
+          },
+        } as unknown as mastodon.v2.Instance
+        return resolve(v2Instance)
+      }).catch(reject)
+    }
+
+    return reject(error)
+  })).then((newInstance) => {
+    Object.assign(instance, newInstance)
+    if (newInstance.configuration.urls.streaming !== streamingApiUrl)
+      masto.streamingClient.value = createStreamingClient(newInstance.configuration.urls.streaming)
+
+    instanceStorage.value[server] = newInstance
+  })
+
   return instance
 }
 

app/composables/users.ts

@@ -20,7 +20,7 @@ const mock = process.mock
 const users: Ref<UserLogin[]> | RemovableRef<UserLogin[]> = import.meta.server ? ref<UserLogin[]>([]) : ref<UserLogin[]>([]) as RemovableRef<UserLogin[]>
 const nodes = useLocalStorage<Record<string, any>>(STORAGE_KEY_NODES, {}, { deep: true })
 export const currentUserHandle = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, mock ? mock.user.account.id : '')
-export const instanceStorage = useLocalStorage<Record<string, mastodon.v2.Instance | ElkInstance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
+export const instanceStorage = useLocalStorage<Record<string, mastodon.v2.Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
 
 export type ElkInstance = Partial<mastodon.v2.Instance> & {
   /** support GoToSocial */

app/layouts/default.vue

@@ -12,7 +12,6 @@ const showUserPicker = logicAnd(
 )
 
 const isGrayscale = usePreferences('grayscaleMode')
-const instance = instanceStorage.value[currentServer.value]
 </script>
 
 <template>
@@ -67,10 +66,10 @@ const instance = instanceStorage.value[currentServer.value]
 
             <!-- server info -->
             <div v-if="!currentUser" grid gap-3 m3>
-              <span text-size-lg text-primary font-bold>{{ instance.title }}</span>
-              <img rounded-3 :src="instance.thumbnail.url">
+              <span text-size-lg text-primary font-bold>{{ instanceStorage[currentServer].title }}</span>
+              <img rounded-3 :src="instanceStorage[currentServer].thumbnail?.url">
               <p text-secondary>
-                {{ instance.description }}
+                {{ instanceStorage[currentServer].description }}
               </p>
             </div>