From a26cedbdd40141603d36d67385c4be0874f2a3d8 Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Sun, 11 Dec 2022 16:43:23 +0100
Subject: [PATCH 1/5] feat: add bot label (#392)

---
 components/account/AccountBotIndicator.vue |  5 +++++
 components/account/AccountHeader.vue       | 13 ++++++++-----
 components/account/AccountInfo.vue         | 13 ++++++++-----
 components/status/StatusCard.vue           |  1 +
 4 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 components/account/AccountBotIndicator.vue

diff --git a/components/account/AccountBotIndicator.vue b/components/account/AccountBotIndicator.vue
new file mode 100644
index 00000000..9f9c6aee
--- /dev/null
+++ b/components/account/AccountBotIndicator.vue
@@ -0,0 +1,5 @@
+<template>
+  <div flex="~" items-center border="~" rounded-md px-2 text-xs>
+    BOT
+  </div>
+</template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 776b21cf..68e054b0 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -76,11 +76,14 @@ watchEffect(() => {
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>
-            <ContentRich
-              font-bold sm:text-2xl text-xl
-              :content="getDisplayName(account, { rich: true })"
-              :emojis="account.emojis"
-            />
+            <div flex justify-between>
+              <ContentRich
+                font-bold sm:text-2xl text-xl
+                :content="getDisplayName(account, { rich: true })"
+                :emojis="account.emojis"
+              />
+              <AccountBotIndicator v-if="account.bot" />
+            </div>
             <AccountHandle :account="account" />
           </div>
         </div>
diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 1b9f9679..7ed0e444 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -20,11 +20,14 @@ defineOptions({
       <AccountAvatar :account="account" w-12 h-12 />
     </AccountHoverWrapper>
     <div flex="~ col" shrink overflow-hidden>
-      <ContentRich
-        font-bold line-clamp-1 ws-pre-wrap break-all
-        :content="getDisplayName(account, { rich: true })"
-        :emojis="account.emojis"
-      />
+      <div flex="~" gap-2>
+        <ContentRich
+          font-bold line-clamp-1 ws-pre-wrap break-all
+          :content="getDisplayName(account, { rich: true })"
+          :emojis="account.emojis"
+        />
+        <AccountBotIndicator v-if="account.bot" />
+      </div>
       <AccountHandle :account="account" text-sm text-secondary-light />
     </div>
   </component>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 516d1282..1a9c011f 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -85,6 +85,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
           </AccountHoverWrapper>
           <div flex-auto />
           <div v-if="!isZenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
+            <AccountBotIndicator v-if="status.account.bot" mr-2 />
             <CommonTooltip :content="createdAt">
               <a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
                 <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">

From 33b0f295f67af561736e6f1640ccfea7e33e36dc Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Sun, 11 Dec 2022 23:40:40 +0100
Subject: [PATCH 2/5] feat: notification improvements (#396)

---
 components/account/AccountInlineInfo.vue      |  2 +-
 components/common/CommonMetaWrapper.vue       |  2 +-
 components/notification/NotificationCard.vue  | 44 +++++----
 .../notification/NotificationGroupedLikes.vue | 21 ++++
 .../notification/NotificationPaginator.vue    | 98 ++++++++++++++-----
 components/status/StatusCard.vue              |  4 +-
 components/status/StatusReplyingTo.vue        |  2 +-
 pages/notifications.vue                       |  5 +-
 types/index.ts                                | 19 +++-
 9 files changed, 146 insertions(+), 51 deletions(-)
 create mode 100644 components/notification/NotificationGroupedLikes.vue

diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index ba036178..2ed69617 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/components/account/AccountInlineInfo.vue
@@ -13,7 +13,7 @@ const { link = true, avatar = true } = defineProps<{
     <NuxtLink
       :to="link ? getAccountRoute(account) : undefined"
       :class="link ? 'text-link-rounded ml-0 pl-0' : ''"
-      min-w-0 flex gap-1 items-center
+      min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
       <ContentRich
diff --git a/components/common/CommonMetaWrapper.vue b/components/common/CommonMetaWrapper.vue
index d9aef409..d7c8927b 100644
--- a/components/common/CommonMetaWrapper.vue
+++ b/components/common/CommonMetaWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div flex="~" gap-1 items-center absolute top-0 pt-2 left-0 px-3>
+  <div flex="~" gap-1 items-center absolute top-0 left-0 py-3 px-4>
     <slot />
   </div>
 </template>
diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index 5fbebc4f..8397bb26 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -9,47 +9,55 @@ const { notification } = defineProps<{
 <template>
   <article flex flex-col relative>
     <template v-if="notification.type === 'follow'">
-      <div flex ml-4 items-center absolute class="-top-2.5" right-2 px-2>
+      <div flex items-center absolute px-3 py-3 bg-base rounded-br-3 top-0 left-0>
         <div i-ri:user-follow-fill mr-1 color-primary />
-        <AccountInlineInfo :account="notification.account" mr1 />
+        <ContentRich
+          text-primary mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
+          :content="getDisplayName(notification.account, { rich: true })"
+          :emojis="notification.account.emojis"
+        />
         <span ws-nowrap>
           {{ $t('notification.followed_you') }}
         </span>
       </div>
-      <AccountCard :account="notification.account" />
+      <AccountBigCard :account="notification.account" />
     </template>
-    <template v-if="notification.type === 'admin.sign_up'">
-      <div flex p2 items-center gap-2>
+    <template v-else-if="notification.type === 'admin.sign_up'">
+      <div flex p3 items-center bg-shaded>
         <div i-ri:admin-fill mr-1 color-purple />
-        <span>New Sign Up</span>
+        <ContentRich
+          text-purple mr-1 font-bold line-clamp-1 ws-pre-wrap break-all
+          :content="getDisplayName(notification.account, { rich: true })"
+          :emojis="notification.account.emojis"
+        />
+        <span>signed up</span>
       </div>
-      <AccountCard :account="notification.account" px2 pb2 />
     </template>
     <template v-else-if="notification.type === 'follow_request'">
       <div flex ml-4 items-center class="-top-2.5" absolute right-2 px-2>
-        <div i-ri:user-follow-fill mr-1 />
+        <div i-ri:user-follow-fill text-xl mr-1 />
         <AccountInlineInfo :account="notification.account" mr1 />
       </div>
       <!-- TODO: accept request -->
       <AccountCard :account="notification.account" />
     </template>
     <template v-else-if="notification.type === 'favourite'">
-      <CommonMetaWrapper>
-        <div i-ri:heart-fill mr-1 color-red />
-        <AccountInlineInfo :account="notification.account" mr1 />
+      <CommonMetaWrapper z-1>
+        <div i-ri:heart-fill text-xl mr-1 color-red />
+        <AccountInlineInfo text-primary font-bold :account="notification.account" mr1 />
       </CommonMetaWrapper>
-      <StatusCard :status="notification.status!" :decorated="true" />
+      <StatusCard op50 hover:op100 :status="notification.status!" :decorated="true" />
     </template>
     <template v-else-if="notification.type === 'reblog'">
-      <CommonMetaWrapper>
-        <div i-ri:repeat-fill mr-1 color-green />
-        <AccountInlineInfo :account="notification.account" mr1 />
+      <CommonMetaWrapper z-1>
+        <div i-ri:repeat-fill text-xl mr-1 color-green />
+        <AccountInlineInfo text-primary font-bold :account="notification.account" mr1 />
       </CommonMetaWrapper>
-      <StatusCard :status="notification.status!" :decorated="true" />
+      <StatusCard op50 hover:op100 :status="notification.status!" :decorated="true" />
     </template>
     <template v-else-if="notification.type === 'update'">
-      <CommonMetaWrapper>
-        <div i-ri:edit-2-fill mr-1 text-secondary />
+      <CommonMetaWrapper z-1>
+        <div i-ri:edit-2-fill text-xl mr-1 text-secondary />
         <AccountInlineInfo :account="notification.account" mr1 />
         <span ws-nowrap>
           {{ $t('notification.update_status') }}
diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
new file mode 100644
index 00000000..770eff32
--- /dev/null
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { GroupedLikeNotifications } from '~/types'
+
+const { group } = defineProps<{
+  group: GroupedLikeNotifications
+}>()
+</script>
+
+<template>
+  <article flex flex-col relative>
+    <div flex flex-col class="-mb-12" py-3>
+      <div v-for="like of group.likes" :key="like.account.id" flex px-3 py-1>
+        <div v-if="like.reblog" i-ri:repeat-fill text-xl mr-2 color-green />
+        <div v-if="like.favourite && !like.reblog" i-ri:heart-fill text-xl mr-2 color-red />
+        <AccountInlineInfo text-primary font-bold :account="like.account" mr2 />
+        <div v-if="like.favourite && like.reblog" i-ri:heart-fill text-xl mr-2 color-red />
+      </div>
+    </div>
+    <StatusCard op50 hover:op100 :status="group.status!" :decorated="true" />
+  </article>
+</template>
diff --git a/components/notification/NotificationPaginator.vue b/components/notification/NotificationPaginator.vue
index f46f1481..d8defb3d 100644
--- a/components/notification/NotificationPaginator.vue
+++ b/components/notification/NotificationPaginator.vue
@@ -1,45 +1,90 @@
 <script setup lang="ts">
 import type { Notification, Paginator, WsEvents } from 'masto'
-import type { GroupedNotifications } from '~/types'
+import type { GroupedAccountLike, NotificationSlot } from '~/types'
 
 const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Notification[]>
   stream?: WsEvents
 }>()
 
-function groupItems(items: Notification[]): (Notification | GroupedNotifications)[] {
-  const results: (Notification | GroupedNotifications)[] = []
+const groupCapacity = Number.MAX_VALUE // No limit
+const minFollowGroupSize = 5 // Below this limit, show a profile card for each follow
+
+// Group by type (and status when applicable)
+const groupId = (item: Notification): string => {
+  // If the update is related to an status, group notifications from the same account (boost + favorite the same status)
+  const id = item.status
+    ? {
+        status: item.status?.id,
+        type: (item.type === 'reblog' || item.type === 'favourite') ? 'like' : item.type,
+      }
+    : {
+        type: item.type,
+      }
+  return JSON.stringify(id)
+}
+
+function groupItems(items: Notification[]): NotificationSlot[] {
+  const results: NotificationSlot[] = []
 
   let id = 0
-  let followGroup: Notification[] = []
+  let currentGroupId = ''
+  let currentGroup: Notification[] = []
+  const processGroup = () => {
+    if (currentGroup.length === 0)
+      return
 
-  const bump = () => {
-    const alwaysGroup = true
-    if (!alwaysGroup && followGroup.length === 1) {
-      results.push(followGroup[0])
-      followGroup = []
-    }
-    else if (followGroup.length > 0) {
+    const group = currentGroup
+    currentGroup = []
+
+    // Only group follow notifications when there are too many in a row
+    // This normally happens when you transfer an account, if not, show
+    // a big profile card for each follow
+    if (group[0].type === 'follow' && group.length > minFollowGroupSize) {
       results.push({
         id: `grouped-${id++}`,
-        type: 'grouped-follow',
-        items: followGroup,
+        type: `grouped-${group[0].type}`,
+        items: group,
       })
-      followGroup = []
+      return
     }
+
+    const { status } = group[0]
+    if (status && group.length > 1 && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
+      // All notifications in these group are reblogs or favourites of the same status
+      const likes: GroupedAccountLike[] = []
+      for (const notification of group) {
+        let like = likes.find(like => like.account.id === notification.account.id)
+        if (!like) {
+          like = { account: notification.account }
+          likes.push(like)
+        }
+        like[notification.type === 'reblog' ? 'reblog' : 'favourite'] = notification
+      }
+      likes.sort((a, b) => b.reblog && !a.reblog ? 1 : -1)
+      results.push({
+        id: `grouped-${id++}`,
+        type: 'grouped-reblogs-and-favourites',
+        status,
+        likes,
+      })
+      return
+    }
+
+    results.push(...group)
   }
 
   for (const item of items) {
-    if (item.type === 'follow') {
-      followGroup.push(item)
-    }
-    else {
-      bump()
-      results.push(item)
-    }
-  }
+    const itemId = groupId(item)
+    // Finalize group if it already has too many notifications
+    if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
+      processGroup()
 
-  bump()
+    currentGroup.push(item)
+    currentGroupId = itemId
+  }
+  // Finalize remaining groups
+  processGroup()
 
   return results
 }
@@ -48,7 +93,7 @@ const { clearNotifications } = useNotifications()
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator" :stream="stream" event-type="notification">
+  <CommonPaginator :paginator="paginator" :stream="stream" :eager="3" event-type="notification">
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
         {{ $t('timeline.show_new_items', [number]) }}
@@ -61,6 +106,11 @@ const { clearNotifications } = useNotifications()
           :items="item"
           border="b base"
         />
+        <NotificationGroupedLikes
+          v-else-if="item.type === 'grouped-reblogs-and-favourites'"
+          :group="item"
+          border="b base"
+        />
         <NotificationCard
           v-else
           :notification="item"
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 1a9c011f..cba329fd 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -66,7 +66,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
       <div i-ri:repeat-fill mr-1 text-primary />
       <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
     </CommonMetaWrapper>
-    <div v-if="decorated || rebloggedBy || (showReplyTo && status.inReplyToAccountId)" h-4 />
+    <div v-if="decorated || rebloggedBy || (showReplyTo && status.inReplyToAccountId)" h-6 />
     <div flex gap-4>
       <div relative>
         <AccountHoverWrapper :account="status.account" :class="rebloggedBy && avatarOnAvatar ? 'mt-4' : 'mt-1'">
@@ -74,7 +74,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
             <AccountAvatar w-12 h-12 :account="status.account" />
           </NuxtLink>
         </AccountHoverWrapper>
-        <div v-if="(rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)" absolute class="-top-1 -left-2" w-8 h-8 border-bg-base border-3 rounded-full>
+        <div v-if="(rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)" absolute class="-top-2 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
           <AccountAvatar :account="rebloggedBy" />
         </div>
       </div>
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 39cafbdf..517d8648 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/components/status/StatusReplyingTo.vue
@@ -9,7 +9,7 @@ const account = useAccountById(status.inReplyToAccountId)
 </script>
 
 <template>
-  <div v-if="status.inReplyToAccountId" absolute top-0 pt-2 right-0 px-4 flex="~ wrap" gap-1>
+  <div v-if="status.inReplyToAccountId" absolute top-0 right-0 px-4 py-3 flex="~ wrap" gap-1>
     <NuxtLink
       v-if="status.inReplyToId"
       flex="~" items-center font-bold text-sm text-secondary gap-1
diff --git a/pages/notifications.vue b/pages/notifications.vue
index b9565df8..6731efa6 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -5,8 +5,9 @@ definePageMeta({
 
 const { t } = useI18n()
 
-const paginatorAll = useMasto().notifications.iterate()
-const paginatorMention = useMasto().notifications.iterate({ types: ['mention'] })
+// Default limit is 20 notifications, and servers are normally caped to 30
+const paginatorAll = useMasto().notifications.iterate({ limit: 30 })
+const paginatorMention = useMasto().notifications.iterate({ limit: 30, types: ['mention'] })
 
 const { clearNotifications } = useNotifications()
 onActivated(clearNotifications)
diff --git a/types/index.ts b/types/index.ts
index dd7ae9e9..e9fa2bea 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -1,4 +1,4 @@
-import type { AccountCredentials, Emoji, Instance, Notification } from 'masto'
+import type { Account, AccountCredentials, Emoji, Instance, Notification, Status } from 'masto'
 
 export interface AppInfo {
   id: string
@@ -26,8 +26,23 @@ export interface ServerInfo extends Instance {
 
 export interface GroupedNotifications {
   id: string
-  type: string
+  type: Exclude<string, 'grouped-reblogs-and-favourites'>
   items: Notification[]
 }
 
+export interface GroupedAccountLike {
+  account: Account
+  favourite?: Notification
+  reblog?: Notification
+}
+
+export interface GroupedLikeNotifications {
+  id: string
+  type: 'grouped-reblogs-and-favourites'
+  status: Status
+  likes: GroupedAccountLike[]
+}
+
+export type NotificationSlot = GroupedNotifications | GroupedLikeNotifications | Notification
+
 export type TranslateFn = ReturnType<typeof useI18n>['t']

From 8c82c9105635e23a9c2336c72cb17669ac8a98ab Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 11 Dec 2022 23:18:09 +0000
Subject: [PATCH 3/5] chore: simplify test for mock user

---
 nuxt.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2dba5217..bbabadbc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url'
 import Inspect from 'vite-plugin-inspect'
-import { isCI, isDevelopment } from 'std-env'
+import { isCI } from 'std-env'
 import { i18n } from './config/i18n'
 
 const isPreview = process.env.PULL_REQUEST === 'true'
@@ -36,7 +36,7 @@ export default defineNuxtConfig({
       'import.meta.env.__BUILD_TIME__': JSON.stringify(new Date().toISOString()),
       'import.meta.env.__BUILD_COMMIT__': JSON.stringify(process.env.COMMIT_REF || ''),
       'process.env.VSCODE_TEXTMATE_DEBUG': 'false',
-      'process.mock': ((isDevelopment || (isCI && process.env.PULL_REQUEST === 'true')) && process.env.MOCK_USER) || 'false',
+      'process.mock': ((!isCI || isPreview) && process.env.MOCK_USER) || 'false',
     },
     build: {
       target: 'esnext',

From de160c219a84e718d1792de633789d248fd33fa7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Mon, 12 Dec 2022 00:30:26 +0100
Subject: [PATCH 4/5] feat: prevent mixing data on account switch (#384)

---
 composables/cache.ts                     | 36 +++++++++++++++---------
 composables/users.ts                     | 12 ++------
 middleware/permalink.global.ts           | 15 ++++++++--
 pages/[[server]]/@[account]/[status].vue |  1 +
 pages/[[server]]/@[account]/index.vue    |  4 +++
 5 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/composables/cache.ts b/composables/cache.ts
index c496567f..536efdf5 100644
--- a/composables/cache.ts
+++ b/composables/cache.ts
@@ -15,7 +15,8 @@ export function setCached(key: string, value: any, override = false) {
 }
 
 export function fetchStatus(id: string, force = false): Promise<Status> {
-  const key = `status:${id}`
+  const server = currentServer.value
+  const key = `${server}:status:${id}`
   const cached = cache.get(key)
   if (cached && !force)
     return cached
@@ -32,30 +33,37 @@ export function fetchAccountById(id?: string | null): Promise<Account | null> {
   if (!id)
     return Promise.resolve(null)
 
-  const key = `account:${id}`
+  const server = currentServer.value
+  const key = `${server}:account:${id}`
   const cached = cache.get(key)
   if (cached)
     return cached
+  const uri = currentInstance.value?.uri
   const promise = useMasto().accounts.fetch(id)
-    .then((account) => {
-      cacheAccount(account, true)
-      return account
+    .then((r) => {
+      if (!r.acct.includes('@') && uri)
+        r.acct = `${r.acct}@${uri}`
+
+      cacheAccount(r, server, true)
+      return r
     })
   cache.set(key, promise)
   return promise
 }
 
 export async function fetchAccountByHandle(acct: string): Promise<Account> {
-  const key = `account:${acct}`
+  const server = currentServer.value
+  const key = `${server}:account:${acct}`
   const cached = cache.get(key)
   if (cached)
     return cached
+  const uri = currentInstance.value?.uri
   const account = useMasto().accounts.lookup({ acct })
     .then((r) => {
-      if (!r.acct.includes('@') && currentInstance.value)
-        r.acct = `${r.acct}@${currentInstance.value.uri}`
+      if (!r.acct.includes('@') && uri)
+        r.acct = `${r.acct}@${uri}`
 
-      cacheAccount(r, true)
+      cacheAccount(r, server, true)
       return r
     })
   cache.set(key, account)
@@ -70,11 +78,11 @@ export function useAccountById(id?: string | null) {
   return useAsyncState(() => fetchAccountById(id), null).state
 }
 
-export function cacheStatus(status: Status, override?: boolean) {
-  setCached(`status:${status.id}`, status, override)
+export function cacheStatus(status: Status, server = currentServer.value, override?: boolean) {
+  setCached(`${server}:status:${status.id}`, status, override)
 }
 
-export function cacheAccount(account: Account, override?: boolean) {
-  setCached(`account:${account.id}`, account, override)
-  setCached(`account:${account.acct}`, account, override)
+export function cacheAccount(account: Account, server = currentServer.value, override?: boolean) {
+  setCached(`${server}:account:${account.id}`, account, override)
+  setCached(`${server}:account:${account.acct}`, account, override)
 }
diff --git a/composables/users.ts b/composables/users.ts
index 8e7c9390..4250f85d 100644
--- a/composables/users.ts
+++ b/composables/users.ts
@@ -31,12 +31,6 @@ export const currentInstance = computed<null | Instance>(() => currentUserId.val
 export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
 
 export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: AccountCredentials }) {
-  if (user) {
-    const existing = users.value.find(u => u.server === user.server && u.token === user.token)
-    if (existing && currentUserId.value !== user.account?.id)
-      currentUserId.value = user.account?.id
-  }
-
   const config = useRuntimeConfig()
   const route = useRoute()
   const router = useRouter()
@@ -76,7 +70,7 @@ export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: Ac
 
   setMasto(masto)
 
-  if ('server' in route.params) {
+  if ('server' in route.params && user?.token) {
     await router.push({
       ...route,
       force: true,
@@ -110,7 +104,7 @@ export async function signout() {
   currentUserId.value = users.value[0]?.account?.id
 
   if (!currentUserId.value)
-    await useRouter().push(`/${currentServer.value}/public`)
+    await useRouter().push('/')
 
   await loginTo(currentUser.value)
 }
@@ -127,7 +121,7 @@ export const useNotifications = () => {
   }
 
   async function connect(): Promise<void> {
-    if (!id || notifications[id])
+    if (!id || notifications[id] || !currentUser.value?.token)
       return
 
     const masto = useMasto()
diff --git a/middleware/permalink.global.ts b/middleware/permalink.global.ts
index c0350207..d9f621a0 100644
--- a/middleware/permalink.global.ts
+++ b/middleware/permalink.global.ts
@@ -6,7 +6,9 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   if (!('server' in to.params))
     return
 
-  if (!currentUser.value) {
+  const user = currentUser.value
+
+  if (!user) {
     if (from.params.server !== to.params.server) {
       await loginTo({
         server: to.params.server as string,
@@ -16,7 +18,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
   }
 
   // No need to additionally resolve an id if we're already logged in
-  if (currentUser.value.server === to.params.server)
+  if (user.server === to.params.server)
     return
 
   // Tags don't need to be redirected to a local id
@@ -29,12 +31,19 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
       ...to,
       params: {
         ...to.params,
-        server: currentUser.value.server,
+        server: user.server,
       },
     }
   }
 
   try {
+    // If we're already on an account page, we can search for this on the new instance
+    if (to.params.account) {
+      const account = await fetchAccountByHandle(to.params.account as string)
+      if (account)
+        return getAccountRoute(account)
+    }
+
     // If we're logged in, search for the local id the account or status corresponds to
     const { value } = await useMasto().search({ q: `https:/${to.fullPath}`, resolve: true, limit: 1 }).next()
 
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 642db1f0..3f5fdbd7 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -4,6 +4,7 @@ import type { ComponentPublicInstance } from 'vue'
 
 definePageMeta({
   name: 'status',
+  key: route => route.path,
 })
 
 const route = useRoute()
diff --git a/pages/[[server]]/@[account]/index.vue b/pages/[[server]]/@[account]/index.vue
index 01e81a7d..a6bbb4d5 100644
--- a/pages/[[server]]/@[account]/index.vue
+++ b/pages/[[server]]/@[account]/index.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+definePageMeta({
+  key: route => `${route.params.server}:${route.params.account}`,
+})
+
 const params = useRoute().params
 const accountName = $(computedEager(() => toShortHandle(params.account as string)))
 

From f3566ec9b5f333cba53eca4df6fc53f0270143bf Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 12 Dec 2022 11:03:39 +0000
Subject: [PATCH 5/5] chore: update mock acct

---
 .env.mock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.mock b/.env.mock
index 8ac755cf..df788721 100644
--- a/.env.mock
+++ b/.env.mock
@@ -1 +1 @@
-MOCK_USER='{"user":{"server":"universeodon.com","token":"BLMfvYGgiEPgLpiunVS0JYxxqzga3S58C60DDwu1jvw","account":{"id":"109424142224653388","username":"elkdev","acct":"elkdev","displayName":"Elk Dev Team","locked":false,"bot":false,"discoverable":null,"group":false,"createdAt":"2022-11-28T00:00:00.000Z","note":"","url":"https://universeodon.com/@elkdev","avatar":"https://universeodon.com/avatars/original/missing.png","avatarStatic":"https://universeodon.com/avatars/original/missing.png","header":"https://universeodon.com/headers/original/missing.png","headerStatic":"https://universeodon.com/headers/original/missing.png","followersCount":0,"followingCount":0,"statusesCount":0,"lastStatusAt":null,"noindex":false,"source":{"privacy":"public","sensitive":false,"language":null,"note":"","fields":[],"followRequestsCount":0},"emojis":[],"fields":[],"role":{"id":"-99","name":"","permissions":"65536","color":"","highlighted":false}}},"server":{"109424142224653388":{"uri":"universeodon.com","title":"Universeodon","shortDescription":"Be one with the fediverse.","description":"","email":"novae@universeodon.com","version":"4.0.2","urls":{"streamingApi":"wss://universeodon.com"},"stats":{"userCount":57026,"statusCount":283364,"domainCount":11515},"thumbnail":"https://media.universeodon.com/site_uploads/files/000/000/003/@1x/9de6fc1bbd150b05.png","languages":["en"],"registrations":true,"approvalRequired":false,"invitesEnabled":true,"configuration":{"accounts":{"maxFeaturedTags":10},"statuses":{"maxCharacters":500,"maxMediaAttachments":4,"charactersReservedPerUrl":23},"mediaAttachments":{"supportedMimeTypes":["image/jpeg","image/png","image/gif","image/heic","image/heif","image/webp","image/avif","video/webm","video/mp4","video/quicktime","video/ogg","audio/wave","audio/wav","audio/x-wav","audio/x-pn-wave","audio/vnd.wave","audio/ogg","audio/vorbis","audio/mpeg","audio/mp3","audio/webm","audio/flac","audio/aac","audio/m4a","audio/x-m4a","audio/mp4","audio/3gpp","video/x-ms-asf"],"imageSizeLimit":10485760,"imageMatrixLimit":16777216,"videoSizeLimit":41943040,"videoFrameRateLimit":60,"videoMatrixLimit":2304000},"polls":{"maxOptions":4,"maxCharactersPerOption":50,"minExpiration":300,"maxExpiration":2629746}},"contactAccount":{"id":"109287809647205395","username":"supernovae","acct":"supernovae","displayName":"Supernovae","locked":false,"bot":false,"discoverable":true,"group":false,"createdAt":"2022-11-04T00:00:00.000Z","note":"","url":"https://universeodon.com/@supernovae","avatar":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","avatarStatic":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","header":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","headerStatic":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","followersCount":6387,"followingCount":305,"statusesCount":1753,"lastStatusAt":"2022-11-28","noindex":false,"emojis":[],"fields":[]},"rules":[]}}}'
+MOCK_USER='{"user":{"server":"universeodon.com","token":"BLMfvYGgiEPgLpiunVS0JYxxqzga3S58C60DDwu1jvw","account":{"id":"109424142224653388","username":"elkdev","acct":"elkdev@universeodon.com","displayName":"Elk Dev Team","locked":false,"bot":false,"discoverable":null,"group":false,"createdAt":"2022-11-28T00:00:00.000Z","note":"","url":"https://universeodon.com/@elkdev","avatar":"https://universeodon.com/avatars/original/missing.png","avatarStatic":"https://universeodon.com/avatars/original/missing.png","header":"https://universeodon.com/headers/original/missing.png","headerStatic":"https://universeodon.com/headers/original/missing.png","followersCount":0,"followingCount":0,"statusesCount":0,"lastStatusAt":null,"noindex":false,"source":{"privacy":"public","sensitive":false,"language":null,"note":"","fields":[],"followRequestsCount":0},"emojis":[],"fields":[],"role":{"id":"-99","name":"","permissions":"65536","color":"","highlighted":false}}},"server":{"109424142224653388":{"uri":"universeodon.com","title":"Universeodon","shortDescription":"Be one with the fediverse.","description":"","email":"novae@universeodon.com","version":"4.0.2","urls":{"streamingApi":"wss://universeodon.com"},"stats":{"userCount":57026,"statusCount":283364,"domainCount":11515},"thumbnail":"https://media.universeodon.com/site_uploads/files/000/000/003/@1x/9de6fc1bbd150b05.png","languages":["en"],"registrations":true,"approvalRequired":false,"invitesEnabled":true,"configuration":{"accounts":{"maxFeaturedTags":10},"statuses":{"maxCharacters":500,"maxMediaAttachments":4,"charactersReservedPerUrl":23},"mediaAttachments":{"supportedMimeTypes":["image/jpeg","image/png","image/gif","image/heic","image/heif","image/webp","image/avif","video/webm","video/mp4","video/quicktime","video/ogg","audio/wave","audio/wav","audio/x-wav","audio/x-pn-wave","audio/vnd.wave","audio/ogg","audio/vorbis","audio/mpeg","audio/mp3","audio/webm","audio/flac","audio/aac","audio/m4a","audio/x-m4a","audio/mp4","audio/3gpp","video/x-ms-asf"],"imageSizeLimit":10485760,"imageMatrixLimit":16777216,"videoSizeLimit":41943040,"videoFrameRateLimit":60,"videoMatrixLimit":2304000},"polls":{"maxOptions":4,"maxCharactersPerOption":50,"minExpiration":300,"maxExpiration":2629746}},"contactAccount":{"id":"109287809647205395","username":"supernovae","acct":"supernovae","displayName":"Supernovae","locked":false,"bot":false,"discoverable":true,"group":false,"createdAt":"2022-11-04T00:00:00.000Z","note":"","url":"https://universeodon.com/@supernovae","avatar":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","avatarStatic":"https://media.universeodon.com/accounts/avatars/109/287/809/647/205/395/original/551eafba585d19e5.jpg","header":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","headerStatic":"https://media.universeodon.com/accounts/headers/109/287/809/647/205/395/original/5de388c5945925c5.jpg","followersCount":6387,"followingCount":305,"statusesCount":1753,"lastStatusAt":"2022-11-28","noindex":false,"emojis":[],"fields":[]},"rules":[]}}}'