diff --git a/composables/users.ts b/composables/users.ts index f43bd79d..103847f5 100644 --- a/composables/users.ts +++ b/composables/users.ts @@ -60,6 +60,41 @@ export const currentInstance = computed(() => currentUser.value export const publicServer = ref(DEFAULT_SERVER) export const currentServer = computed(() => currentUser.value?.server || publicServer.value) +// when multiple tabs: we need to reload window when sign in, switch account or sign out +if (process.client) { + const windowReload = () => { + document.visibilityState === 'visible' && window.location.reload() + } + watch(currentUserId, async (id, oldId) => { + // when sign in or switch account + if (id) { + // initial load + if (!oldId) + return + + if (id === currentUser.value?.account?.id) { + // 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) + // 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 + if (document.hasFocus() || document.visibilityState === 'visible') + return + } + } + + window.addEventListener('visibilitychange', windowReload, { capture: true }) + } + // when sign out + else if (oldId) { + const oldUser = users.value.find(user => user.account?.id === oldId) + // 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' }) +} + export const currentUserHandle = computed(() => currentUser.value?.account.id ? `${currentUser.value.account.acct}@${currentInstance.value?.uri || currentServer.value}` : '[anonymous]',