fix: handle account switching when accounts have the same id (#1510)

components/user/UserPicker.vue

@@ -5,7 +5,7 @@ const all = useUsers()
 const router = useRouter()
 
 const clickUser = (user: UserLogin) => {
-  if (user.account.id === currentUser.value?.account.id)
+  if (user.account.acct === currentUser.value?.account.acct)
     router.push(getAccountRoute(user.account))
   else
     switchUser(user)
@@ -21,7 +21,7 @@ const clickUser = (user: UserLogin) => {
             flex rounded
             cursor-pointer
             aria-label="Switch user"
-            :class="user.account.id === currentUser?.account.id ? '' : 'op25 grayscale'"
+            :class="user.account.acct === currentUser?.account.acct ? '' : 'op25 grayscale'"
             hover="filter-none op100"
             @click="clickUser(user)"
           >

composables/users.ts

@@ -7,7 +7,6 @@ import type { UserLogin } from '~/types'
 import type { Overwrite } from '~/types/utils'
 import {
   DEFAULT_POST_CHARS_LIMIT,
-  STORAGE_KEY_CURRENT_USER,
   STORAGE_KEY_CURRENT_USER_HANDLE,
   STORAGE_KEY_NODES,
   STORAGE_KEY_NOTIFICATION,
@@ -46,7 +45,7 @@ const initializeUsers = async (): Promise<Ref<UserLogin[]> | RemovableRef<UserLo
 const users = await initializeUsers()
 export const instances = useLocalStorage<Record<string, mastodon.v1.Instance>>(STORAGE_KEY_SERVERS, mock ? mock.server : {}, { deep: true })
 export const nodes = useLocalStorage<Record<string, any>>(STORAGE_KEY_NODES, {}, { deep: true })
-const currentUserId = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER, mock ? mock.user.account.id : '')
+const currentUserHandle = useLocalStorage<string>(STORAGE_KEY_CURRENT_USER_HANDLE, mock ? mock.user.account.id : '')
 
 export type ElkInstance = Partial<mastodon.v1.Instance> & {
   uri: string
@@ -56,8 +55,8 @@ export type ElkInstance = Partial<mastodon.v1.Instance> & {
 export const getInstanceCache = (server: string): mastodon.v1.Instance | undefined => instances.value[server]
 
 export const currentUser = computed<UserLogin | undefined>(() => {
-  if (currentUserId.value) {
+  if (currentUserHandle.value) {
-    const user = users.value.find(user => user.account?.id === currentUserId.value)
+    const user = users.value.find(user => user.account?.acct === currentUserHandle.value)
     if (user)
       return user
   }
@@ -84,12 +83,12 @@ if (process.client) {
   const windowReload = () => {
     document.visibilityState === 'visible' && window.location.reload()
   }
-  watch(currentUserId, async (id, oldId) => {
+  watch(currentUserHandle, async (handle, oldHandle) => {
     // when sign in or switch account
-    if (id) {
+    if (handle) {
-      if (id === currentUser.value?.account?.id) {
+      if (handle === currentUser.value?.account?.acct) {
         // when sign in, the other tab will not have the user, idb is not reactive
-        const newUser = users.value.find(user => user.account?.id === id)
+        const newUser = users.value.find(user => user.account?.acct === handle)
         // if the user is there, then we are switching account
         if (newUser) {
           // check if the change is on current tab: if so, don't reload
@@ -101,19 +100,13 @@ if (process.client) {
       window.addEventListener('visibilitychange', windowReload, { capture: true })
     }
     // when sign out
-    else if (oldId) {
+    else if (oldHandle) {
-      const oldUser = users.value.find(user => user.account?.id === oldId)
+      const oldUser = users.value.find(user => user.account?.acct === oldHandle)
       // when sign out, the other tab will not have the user, idb is not reactive
       if (oldUser)
         window.addEventListener('visibilitychange', windowReload, { capture: true })
     }
   }, { immediate: true, flush: 'post' })
-
-  // for injected script to read
-  const currentUserHandle = computed(() => currentUser.value?.account.acct || '')
-  watchEffect(() => {
-    localStorage.setItem(STORAGE_KEY_CURRENT_USER_HANDLE, currentUserHandle.value)
-  })
 }
 
 export const useUsers = () => users
@@ -144,7 +137,7 @@ export async function loginTo(masto: ElkMasto, user: Overwrite<UserLogin, { acco
 
   const account = getUser()?.account
   if (account)
-    currentUserId.value = account.id
+    currentUserHandle.value = account.acct
 
   const [me, pushSubscription] = await Promise.all([
     fetchAccountInfo(client, user.server),
@@ -168,7 +161,7 @@ export async function loginTo(masto: ElkMasto, user: Overwrite<UserLogin, { acco
     })
   }
 
-  currentUserId.value = me.id
+  currentUserHandle.value = me.acct
 }
 
 export async function fetchAccountInfo(client: mastodon.Client, server: string) {
@@ -259,15 +252,15 @@ export async function signout() {
 
     await removePushNotificationData(currentUser.value)
 
-    currentUserId.value = ''
+    currentUserHandle.value = ''
     // Remove the current user from the users
     users.value.splice(index, 1)
   }
 
   // Set currentUserId to next user if available
-  currentUserId.value = users.value[0]?.account?.id
+  currentUserHandle.value = users.value[0]?.account?.acct
 
-  if (!currentUserId.value)
+  if (!currentUserHandle.value)
     await useRouter().push('/')
 
   loginTo(masto, currentUser.value)

constants/index.ts

@@ -7,7 +7,6 @@ export const STORAGE_KEY_DRAFTS = 'elk-drafts'
 export const STORAGE_KEY_USERS = 'elk-users'
 export const STORAGE_KEY_SERVERS = 'elk-servers'
 export const STORAGE_KEY_NODES = 'elk-nodes'
-export const STORAGE_KEY_CURRENT_USER = 'elk-current-user'
 export const STORAGE_KEY_CURRENT_USER_HANDLE = 'elk-current-user-handle'
 export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
 export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'