fix: revert timelines loading optimization

pages/[[server]]/explore.vue

@@ -17,11 +17,15 @@ const tabs = $computed(() => [
     display: t('tab.news'),
   },
   // This section can only be accessed after logging in
-  {
-    to: `/${currentServer.value}/explore/users`,
-    display: t('tab.for_you'),
-    disabled: !isMastoInitialised.value || !currentUser.value,
-  },
+  ...invoke(() => currentUser.value
+    ? [
+        {
+          to: `/${currentServer.value}/explore/users`,
+          display: t('tab.for_you'),
+        },
+      ]
+    : [],
+  ),
 ] as const)
 </script>
 
@@ -37,6 +41,6 @@ const tabs = $computed(() => [
     <template #header>
       <CommonRouteTabs replace :options="tabs" />
     </template>
-    <NuxtPage v-if="isMastoInitialised" />
+    <NuxtPage />
   </MainContent>
 </template>

pages/blocks.vue

@@ -3,6 +3,8 @@ definePageMeta({
   middleware: 'auth',
 })
 
+const paginator = useMasto().blocks.iterate()
+
 useHeadFixed({
   title: 'Blocked users',
 })
@@ -13,7 +15,6 @@ useHeadFixed({
     <template #title>
       <span text-lg font-bold>{{ $t('account.blocked_users') }}</span>
     </template>
-
-    <TimelineBlocks v-if="isMastoInitialised" />
+    <AccountPaginator :paginator="paginator" />
   </MainContent>
 </template>

pages/bookmarks.vue

@@ -3,6 +3,8 @@ definePageMeta({
   middleware: 'auth',
 })
 
+const paginator = useMasto().bookmarks.iterate()
+
 const { t } = useI18n()
 
 useHeadFixed({
@@ -19,6 +21,8 @@ useHeadFixed({
       </NuxtLink>
     </template>
 
-    <TimelineBookmarks v-if="isMastoInitialised" />
+    <slot>
+      <TimelinePaginator :paginator="paginator" />
+    </slot>
   </MainContent>
 </template>

pages/conversations.vue

@@ -3,6 +3,8 @@ definePageMeta({
   middleware: 'auth',
 })
 
+const paginator = useMasto().conversations.iterate()
+
 const { t } = useI18n()
 
 useHeadFixed({
@@ -19,6 +21,8 @@ useHeadFixed({
       </NuxtLink>
     </template>
 
-    <TimelineConversations v-if="isMastoInitialised" />
+    <slot>
+      <ConversationPaginator :paginator="paginator" />
+    </slot>
   </MainContent>
 </template>

pages/domain_blocks.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import TimelineDomainBlocks from '~~/components/timeline/TimelineDomainBlocks.vue'
-
 definePageMeta({
   middleware: 'auth',
 })
 
+const paginator = useMasto().domainBlocks.iterate()
+
 useHeadFixed({
   title: 'Blocked domains',
 })
+
+const unblock = async (domain: string) => {
+  await useMasto().domainBlocks.unblock(domain)
+}
 </script>
 
 <template>
@@ -16,6 +20,15 @@ useHeadFixed({
       <span text-lg font-bold>{{ $t('account.blocked_domains') }}</span>
     </template>
 
-    <TimelineDomainBlocks v-if="isMastoInitialised" />
+    <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>
   </MainContent>
 </template>

pages/favourites.vue

@@ -3,6 +3,7 @@ definePageMeta({
   middleware: 'auth',
 })
 
+const paginator = useMasto().favourites.iterate()
 const { t } = useI18n()
 
 useHeadFixed({
@@ -18,7 +19,8 @@ useHeadFixed({
         <span>{{ t('nav_side.favourites') }}</span>
       </NuxtLink>
     </template>
-
-    <TimelineFavourites v-if="isMastoInitialised" />
+    <slot>
+      <TimelinePaginator :paginator="paginator" />
+    </slot>
   </MainContent>
 </template>

pages/home.vue

@@ -11,6 +11,10 @@ if (useRoute().path === '/signin/callback') {
   useRouter().push('/home')
 }
 
+const paginator = useMasto().timelines.iterateHome()
+const stream = await useMasto().stream.streamUser()
+onBeforeUnmount(() => stream.disconnect())
+
 const { t } = useI18n()
 useHeadFixed({
   title: () => t('nav_side.home'),
@@ -25,7 +29,9 @@ useHeadFixed({
         <span>{{ $t('nav_side.home') }}</span>
       </NuxtLink>
     </template>
-
-    <TimelineHome v-if="isMastoInitialised" />
+    <slot>
+      <PublishWidget draft-key="home" border="b base" />
+      <TimelinePaginator v-bind="{ paginator, stream }" context="home" />
+    </slot>
   </MainContent>
 </template>

pages/mutes.vue

@@ -2,6 +2,9 @@
 definePageMeta({
   middleware: 'auth',
 })
+
+const paginator = useMasto().mutes.iterate()
+
 useHeadFixed({
   title: 'Muted users',
 })
@@ -12,7 +15,6 @@ useHeadFixed({
     <template #title>
       <span text-lg font-bold>{{ $t('account.muted_users') }}</span>
     </template>
-
-    <TimelineMutes v-if="isMastoInitialised" />
+    <AccountPaginator :paginator="paginator" />
   </MainContent>
 </template>

pages/notifications.vue

@@ -53,7 +53,6 @@ onActivated(() => {
       <template v-if="pwaEnabled">
         <NotificationPreferences :show="showSettings" />
       </template>
-
       <NuxtPage />
     </slot>
   </MainContent>

pages/notifications/index.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
 const { t } = useI18n()
+
+// 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()
+
 useHeadFixed({
   title: () => `${t('tab.notifications_all')} | ${t('nav_side.notifications')}`,
 })
 </script>
 
 <template>
-  <TimelineNotifications v-if="isMastoInitialised" />
+  <NotificationPaginator v-bind="{ paginator, stream }" />
 </template>

pages/notifications/mention.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
 const { t } = useI18n()
+
+// 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()
+
 useHeadFixed({
   title: () => `${t('tab.notifications_mention')} | ${t('nav_side.notifications')}`,
 })
 </script>
 
 <template>
-  <TimelineNotifications v-if="isMastoInitialised" />
+  <NotificationPaginator v-bind="{ paginator, stream }" />
 </template>

pages/pinned.vue

@@ -18,6 +18,6 @@ useHeadFixed({
       <span>{{ t('account.pinned') }}</span>
     </template>
 
-    <TimelinePinned v-if="isMastoInitialised" />
+    <TimelinePaginator :paginator="paginator" />
   </MainContent>
 </template>