From ef4a240800635d75bb555901484386870dc91e35 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Fri, 23 Dec 2022 06:02:13 +0100
Subject: [PATCH] fix: revert timelines loading optimization

---
 app.vue                                       |  5 +---
 components/common/CommonRouteTabs.vue         | 28 +++++++------------
 components/timeline/TimelineBlocks.vue        |  7 -----
 components/timeline/TimelineBookmarks.vue     |  7 -----
 components/timeline/TimelineConversations.vue |  7 -----
 components/timeline/TimelineDomainBlocks.vue  | 21 --------------
 components/timeline/TimelineFavourites.vue    |  7 -----
 components/timeline/TimelineHome.vue          | 12 --------
 components/timeline/TimelineMentions.vue      | 13 ---------
 components/timeline/TimelineMutes.vue         |  7 -----
 components/timeline/TimelineNotifications.vue | 13 ---------
 components/timeline/TimelinePinned.vue        |  7 -----
 pages/[[server]]/explore.vue                  | 16 +++++++----
 pages/blocks.vue                              |  5 ++--
 pages/bookmarks.vue                           |  6 +++-
 pages/conversations.vue                       |  6 +++-
 pages/domain_blocks.vue                       | 19 +++++++++++--
 pages/favourites.vue                          |  6 ++--
 pages/home.vue                                | 10 +++++--
 pages/mutes.vue                               |  6 ++--
 pages/notifications.vue                       |  1 -
 pages/notifications/index.vue                 | 11 +++++++-
 pages/notifications/mention.vue               | 11 +++++++-
 pages/pinned.vue                              |  2 +-
 24 files changed, 87 insertions(+), 146 deletions(-)
 delete mode 100644 components/timeline/TimelineBlocks.vue
 delete mode 100644 components/timeline/TimelineBookmarks.vue
 delete mode 100644 components/timeline/TimelineConversations.vue
 delete mode 100644 components/timeline/TimelineDomainBlocks.vue
 delete mode 100644 components/timeline/TimelineFavourites.vue
 delete mode 100644 components/timeline/TimelineHome.vue
 delete mode 100644 components/timeline/TimelineMentions.vue
 delete mode 100644 components/timeline/TimelineMutes.vue
 delete mode 100644 components/timeline/TimelineNotifications.vue
 delete mode 100644 components/timeline/TimelinePinned.vue

diff --git a/app.vue b/app.vue
index 6bb6396c..a14e8a1a 100644
--- a/app.vue
+++ b/app.vue
@@ -5,15 +5,12 @@ provideGlobalCommands()
 
 // We want to trigger rerendering the page when account changes
 const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
-
-const { params } = useRoute()
 </script>
 
 <template>
   <NuxtLoadingIndicator color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
   <NuxtLayout :key="key">
-    <!-- TODO: rework the /[account] routes to remove conditional loading -->
-    <NuxtPage v-if="!params.account || isMastoInitialised" />
+    <NuxtPage v-if="isMastoInitialised" />
   </NuxtLayout>
   <PWAPrompt />
 </template>
diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue
index d596b889..65d8864b 100644
--- a/components/common/CommonRouteTabs.vue
+++ b/components/common/CommonRouteTabs.vue
@@ -5,7 +5,6 @@ const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: {
     to: RouteLocationRaw
     display: string
-    disabled?: boolean
     name?: string
     icon?: string
   }[]
@@ -29,25 +28,18 @@ useCommands(() => command
 
 <template>
   <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
-    <template
+    <NuxtLink
       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()"
     >
-      <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>
+      <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center border-b-3 op50 hover:op70 border-transparent>{{ option.display }}</span>
+    </NuxtLink>
   </div>
 </template>
diff --git a/components/timeline/TimelineBlocks.vue b/components/timeline/TimelineBlocks.vue
deleted file mode 100644
index 5b20b337..00000000
--- a/components/timeline/TimelineBlocks.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const paginator = useMasto().blocks.iterate()
-</script>
-
-<template>
-  <AccountPaginator :paginator="paginator" />
-</template>
diff --git a/components/timeline/TimelineBookmarks.vue b/components/timeline/TimelineBookmarks.vue
deleted file mode 100644
index f99ba34c..00000000
--- a/components/timeline/TimelineBookmarks.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const paginator = useMasto().bookmarks.iterate()
-</script>
-
-<template>
-  <TimelinePaginator :paginator="paginator" />
-</template>
diff --git a/components/timeline/TimelineConversations.vue b/components/timeline/TimelineConversations.vue
deleted file mode 100644
index a9af6ba3..00000000
--- a/components/timeline/TimelineConversations.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const paginator = useMasto().conversations.iterate()
-</script>
-
-<template>
-  <ConversationPaginator :paginator="paginator" />
-</template>
diff --git a/components/timeline/TimelineDomainBlocks.vue b/components/timeline/TimelineDomainBlocks.vue
deleted file mode 100644
index a0f564f8..00000000
--- a/components/timeline/TimelineDomainBlocks.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<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>
diff --git a/components/timeline/TimelineFavourites.vue b/components/timeline/TimelineFavourites.vue
deleted file mode 100644
index b5e286a5..00000000
--- a/components/timeline/TimelineFavourites.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const paginator = useMasto().favourites.iterate()
-</script>
-
-<template>
-  <TimelinePaginator :paginator="paginator" />
-</template>
diff --git a/components/timeline/TimelineHome.vue b/components/timeline/TimelineHome.vue
deleted file mode 100644
index c9792b9b..00000000
--- a/components/timeline/TimelineHome.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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>
diff --git a/components/timeline/TimelineMentions.vue b/components/timeline/TimelineMentions.vue
deleted file mode 100644
index 8e0a925b..00000000
--- a/components/timeline/TimelineMentions.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<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>
diff --git a/components/timeline/TimelineMutes.vue b/components/timeline/TimelineMutes.vue
deleted file mode 100644
index 303c10ff..00000000
--- a/components/timeline/TimelineMutes.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const paginator = useMasto().mutes.iterate()
-</script>
-
-<template>
-  <AccountPaginator :paginator="paginator" />
-</template>
diff --git a/components/timeline/TimelineNotifications.vue b/components/timeline/TimelineNotifications.vue
deleted file mode 100644
index 53c067ec..00000000
--- a/components/timeline/TimelineNotifications.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<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>
diff --git a/components/timeline/TimelinePinned.vue b/components/timeline/TimelinePinned.vue
deleted file mode 100644
index e0862f01..00000000
--- a/components/timeline/TimelinePinned.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-const paginator = useMasto().accounts.iterateStatuses(currentUser.value!.account.id, { pinned: true })
-</script>
-
-<template>
-  <TimelinePaginator :paginator="paginator" />
-</template>
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index ca3446a7..eed38e1b 100644
--- a/pages/[[server]]/explore.vue
+++ b/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>
diff --git a/pages/blocks.vue b/pages/blocks.vue
index 5e460657..010e2012 100644
--- a/pages/blocks.vue
+++ b/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>
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index c1921a5c..fd578689 100644
--- a/pages/bookmarks.vue
+++ b/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>
diff --git a/pages/conversations.vue b/pages/conversations.vue
index 13654581..31d54ec3 100644
--- a/pages/conversations.vue
+++ b/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>
diff --git a/pages/domain_blocks.vue b/pages/domain_blocks.vue
index e91b7e16..fe601afb 100644
--- a/pages/domain_blocks.vue
+++ b/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>
diff --git a/pages/favourites.vue b/pages/favourites.vue
index 23685701..b0f97722 100644
--- a/pages/favourites.vue
+++ b/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>
diff --git a/pages/home.vue b/pages/home.vue
index 55827f2c..995f5cb6 100644
--- a/pages/home.vue
+++ b/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>
diff --git a/pages/mutes.vue b/pages/mutes.vue
index 4e773bb7..c26a24a9 100644
--- a/pages/mutes.vue
+++ b/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>
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 795b4577..4e6e63ea 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -53,7 +53,6 @@ onActivated(() => {
       <template v-if="pwaEnabled">
         <NotificationPreferences :show="showSettings" />
       </template>
-
       <NuxtPage />
     </slot>
   </MainContent>
diff --git a/pages/notifications/index.vue b/pages/notifications/index.vue
index ce586d62..cf6d66b2 100644
--- a/pages/notifications/index.vue
+++ b/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>
diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue
index a85c87c8..87ee8f78 100644
--- a/pages/notifications/mention.vue
+++ b/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>
diff --git a/pages/pinned.vue b/pages/pinned.vue
index a88a16e6..7094b55f 100644
--- a/pages/pinned.vue
+++ b/pages/pinned.vue
@@ -18,6 +18,6 @@ useHeadFixed({
       <span>{{ t('account.pinned') }}</span>
     </template>
 
-    <TimelinePinned v-if="isMastoInitialised" />
+    <TimelinePaginator :paginator="paginator" />
   </MainContent>
 </template>