Fix pagination in profile timeline

src/views/NotificationList.vue

@@ -65,6 +65,7 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue"
+import { $ } from "vue/macros"
 
 import { PAGE_SIZE } from "@/api/common"
 import { updateNotificationMarker } from "@/api/markers"
@@ -79,11 +80,11 @@ import { humanizeDate } from "@/utils/dates"
 
 const { ensureAuthToken } = useCurrentUser()
 const { getActorAddress } = useInstanceInfo()
-const { notifications } = useNotifications()
+let { notifications } = $(useNotifications())
 
 onMounted(async () => {
   // Update notification timeline marker
-  const firstNotification = notifications.value[0]
+  const firstNotification = notifications[0]
   if (firstNotification) {
     await updateNotificationMarker(
       ensureAuthToken(),
@@ -102,17 +103,17 @@ function getSenderInfo(notification: Notification): string {
 }
 
 function onPostDeleted(notificationIndex: number) {
-  notifications.value.splice(notificationIndex, 1)
+  notifications.splice(notificationIndex, 1)
 }
 
 function isPageFull(): boolean {
-  return notifications.value.length >= PAGE_SIZE
+  return notifications.length >= PAGE_SIZE
 }
 
 async function loadNextPage() {
-  const maxId = notifications.value[notifications.value.length - 1].id
+  const maxId = notifications[notifications.length - 1].id
   const newItems = await getNotifications(ensureAuthToken(), maxId)
-  notifications.value.push(...newItems)
+  notifications = [...notifications, ...newItems]
 }
 </script>
 

src/views/Profile.vue

@@ -553,7 +553,7 @@ async function loadNextPage(maxId: string) {
     tabName !== "posts-with-replies",
     maxId,
   )
-  posts.push(...nextPage)
+  posts = [...posts, ...nextPage]
 }
 
 async function loadFollowListNextPage() {

src/views/ProfileDirectory.vue

@@ -54,7 +54,7 @@ async function loadNextPage() {
   const authToken = ensureAuthToken()
   const offset = profiles.length
   const nextPage = await getProfiles(authToken, offset)
-  profiles.push(...nextPage)
+  profiles = [...profiles, ...nextPage]
 }
 </script>
 

src/views/PublicTimeline.vue

@@ -31,7 +31,7 @@ onMounted(async () => {
 async function loadNextPage(maxId: string) {
   const authToken = ensureAuthToken()
   const nextPage = await getPublicTimeline(authToken, maxId)
-  posts.push(...nextPage)
+  posts = [...posts, ...nextPage]
 }
 </script>
 

src/views/TagTimeline.vue

@@ -13,7 +13,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { onMounted } from "vue"
+import { $, $ref } from "vue/macros"
 import { useRoute } from "vue-router"
 
 import { Post, getTagTimeline } from "@/api/posts"
@@ -22,24 +23,23 @@ import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const route = useRoute()
-const posts = ref<Post[]>([])
+const { authToken } = $(useCurrentUser())
+let posts = $ref<Post[]>([])
 
 onMounted(async () => {
-  const { authToken } = useCurrentUser()
-  posts.value = await getTagTimeline(
-    authToken.value,
+  posts = await getTagTimeline(
+    authToken,
     route.params.tagName as string,
   )
 })
 
 async function loadNextPage(maxId: string) {
-  const { authToken } = useCurrentUser()
   const nextPage = await getTagTimeline(
-    authToken.value,
+    authToken,
     route.params.tagName as string,
     maxId,
   )
-  posts.value.push(...nextPage)
+  posts = [...posts, ...nextPage]
 }
 </script>