fix: can't refresh statuses after delete a status in account/index pa…

…ge, #2546

components/timeline/TimelineHome.vue

@@ -6,11 +6,16 @@ const stream = $(useStreaming(client => client.v1.stream.streamUser()))
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'home')
 }
+// when we delete a status in @[account]/index/，we need to fetch the updated timeline when we go back to home, so we refresh the component.
+const refreshTriggerKey = ref(0)
+onActivated(async () => {
+  refreshTriggerKey.value = refreshTriggerKey.value + 1
+})
 </script>
 
 <template>
   <div>
     <PublishWidget draft-key="home" border="b base" />
-    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
+    <TimelinePaginator v-bind="{ paginator, stream }" :key="refreshTriggerKey" :preprocess="reorderAndFilter" context="home" />
   </div>
 </template>

composables/paginator.ts

@@ -12,6 +12,7 @@ export function usePaginator<T, P, U = T>(
   // called `next` method will mutate the internal state of the variable,
   // and we need its initial state after HMR
   // so clone it
+
   const paginator = _paginator.clone()
 
   const state = ref<PaginatorState>(isHydrated.value ? 'idle' : 'loading')

pages/[[server]]/@[account]/index/index.vue

@@ -21,11 +21,12 @@ if (account) {
     title: () => `${t('account.posts')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
+const stream = $(useStreaming(client => client.v1.stream.streamUser()))
 </script>
 
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" :stream="stream" />
   </div>
 </template>