feat: re-apply timelines loading optimization (#524)

Co-authored-by: Daniel Roe <daniel@roe.dev>

components/common/CommonRouteTabs.vue

@@ -5,6 +5,7 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: {
     to: RouteLocationRaw
     display: string
+    disabled?: boolean
     name?: string
     icon?: string
   }[]
@@ -28,18 +29,25 @@ useCommands(() => command
 
 <template>
   <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
-    <NuxtLink
+    <template
       v-for="(option, index) in options"
       :key="option?.name || index"
-      :to="option.to"
-      :replace="replace"
-      relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
-      tabindex="1"
-      hover:bg-active transition-100
-      exact-active-class="children:(font-bold !border-primary !op100)"
-      @click="!preventScrollTop && $scrollToTop()"
     >
-      <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 op50 hover:op70 border-transparent>{{ option.display }}</span>
-    </NuxtLink>
+      <NuxtLink
+        v-if="!option.disabled"
+        :to="option.to"
+        :replace="replace"
+        relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
+        tabindex="1"
+        hover:bg-active transition-100
+        exact-active-class="children:(text-secondary !border-primary !op100)"
+        @click="!preventScrollTop && $scrollToTop()"
+      >
+        <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
+      </NuxtLink>
+      <div v-else flex flex-auto sm:px6 px2>
+        <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
+      </div>
+    </template>
   </div>
 </template>

components/timeline/TimelineBlocks.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMasto().blocks.iterate()
+</script>
+
+<template>
+  <AccountPaginator :paginator="paginator" />
+</template>

components/timeline/TimelineBookmarks.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMasto().bookmarks.iterate()
+</script>
+
+<template>
+  <TimelinePaginator :paginator="paginator" />
+</template>

components/timeline/TimelineConversations.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMasto().conversations.iterate()
+</script>
+
+<template>
+  <ConversationPaginator :paginator="paginator" />
+</template>

components/timeline/TimelineDomainBlocks.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const masto = useMasto()
+const paginator = masto.domainBlocks.iterate()
+
+const unblock = async (domain: string) => {
+  await masto.domainBlocks.unblock(domain)
+}
+</script>
+
+<template>
+  <CommonPaginator :paginator="paginator">
+    <template #default="{ item }">
+      <CommonDropdownItem class="!cursor-auto">
+        {{ item }}
+        <template #actions>
+          <div i-ri:lock-unlock-line text-primary cursor-pointer @click="unblock(item)" />
+        </template>
+      </CommonDropdownItem>
+    </template>
+  </CommonPaginator>
+</template>

components/timeline/TimelineFavourites.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMasto().favourites.iterate()
+</script>
+
+<template>
+  <TimelinePaginator :paginator="paginator" />
+</template>

components/timeline/TimelineHome.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const paginator = useMasto().timelines.iterateHome()
+const stream = await useMasto().stream.streamUser()
+onBeforeUnmount(() => stream.disconnect())
+</script>
+
+<template>
+  <div>
+    <PublishWidget draft-key="home" border="b base" />
+    <TimelinePaginator v-bind="{ paginator, stream }" context="home" />
+  </div>
+</template>

components/timeline/TimelineMentions.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// Default limit is 20 notifications, and servers are normally caped to 30
+const paginator = useMasto().notifications.iterate({ limit: 30, types: ['mention'] })
+
+const { clearNotifications } = useNotifications()
+onActivated(clearNotifications)
+
+const stream = await useMasto().stream.streamUser()
+</script>
+
+<template>
+  <NotificationPaginator v-bind="{ paginator, stream }" />
+</template>

components/timeline/TimelineMutes.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMasto().mutes.iterate()
+</script>
+
+<template>
+  <AccountPaginator :paginator="paginator" />
+</template>

components/timeline/TimelineNotifications.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// Default limit is 20 notifications, and servers are normally caped to 30
+const paginator = useMasto().notifications.iterate({ limit: 30 })
+
+const { clearNotifications } = useNotifications()
+onActivated(clearNotifications)
+
+const stream = await useMasto().stream.streamUser()
+</script>
+
+<template>
+  <NotificationPaginator v-bind="{ paginator, stream }" />
+</template>

components/timeline/TimelinePinned.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const paginator = useMasto().accounts.iterateStatuses(currentUser.value!.account.id, { pinned: true })
+</script>
+
+<template>
+  <TimelinePaginator :paginator="paginator" />
+</template>