From fef082af1375d016a44faff3cf967fac7ffc67d2 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 22 Dec 2022 18:48:41 +0100
Subject: [PATCH] feat: move timelines to components (#514)

---
 app.vue                                       |  5 ++++-
 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                  |  2 +-
 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 +-
 23 files changed, 123 insertions(+), 68 deletions(-)
 create mode 100644 components/timeline/TimelineBlocks.vue
 create mode 100644 components/timeline/TimelineBookmarks.vue
 create mode 100644 components/timeline/TimelineConversations.vue
 create mode 100644 components/timeline/TimelineDomainBlocks.vue
 create mode 100644 components/timeline/TimelineFavourites.vue
 create mode 100644 components/timeline/TimelineHome.vue
 create mode 100644 components/timeline/TimelineMentions.vue
 create mode 100644 components/timeline/TimelineMutes.vue
 create mode 100644 components/timeline/TimelineNotifications.vue
 create mode 100644 components/timeline/TimelinePinned.vue

diff --git a/app.vue b/app.vue
index a14e8a1a..ad38e055 100644
--- a/app.vue
+++ b/app.vue
@@ -5,12 +5,15 @@ 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">
-    <NuxtPage v-if="isMastoInitialised" />
+    <!-- TODO: rework the /[account] routes to remove conditional loading -->
+    <NuxtPage v-if="!params.server || isMastoInitialised" />
   </NuxtLayout>
   <PWAPrompt />
 </template>
diff --git a/components/timeline/TimelineBlocks.vue b/components/timeline/TimelineBlocks.vue
new file mode 100644
index 00000000..5b20b337
--- /dev/null
+++ b/components/timeline/TimelineBlocks.vue
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 00000000..f99ba34c
--- /dev/null
+++ b/components/timeline/TimelineBookmarks.vue
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 00000000..a9af6ba3
--- /dev/null
+++ b/components/timeline/TimelineConversations.vue
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 00000000..a0f564f8
--- /dev/null
+++ b/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>
diff --git a/components/timeline/TimelineFavourites.vue b/components/timeline/TimelineFavourites.vue
new file mode 100644
index 00000000..b5e286a5
--- /dev/null
+++ b/components/timeline/TimelineFavourites.vue
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 00000000..c9792b9b
--- /dev/null
+++ b/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>
diff --git a/components/timeline/TimelineMentions.vue b/components/timeline/TimelineMentions.vue
new file mode 100644
index 00000000..8e0a925b
--- /dev/null
+++ b/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>
diff --git a/components/timeline/TimelineMutes.vue b/components/timeline/TimelineMutes.vue
new file mode 100644
index 00000000..303c10ff
--- /dev/null
+++ b/components/timeline/TimelineMutes.vue
@@ -0,0 +1,7 @@
+<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
new file mode 100644
index 00000000..53c067ec
--- /dev/null
+++ b/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>
diff --git a/components/timeline/TimelinePinned.vue b/components/timeline/TimelinePinned.vue
new file mode 100644
index 00000000..e0862f01
--- /dev/null
+++ b/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>
diff --git a/pages/[[server]]/explore.vue b/pages/[[server]]/explore.vue
index eed38e1b..1c139d2a 100644
--- a/pages/[[server]]/explore.vue
+++ b/pages/[[server]]/explore.vue
@@ -41,6 +41,6 @@ const tabs = $computed(() => [
     <template #header>
       <CommonRouteTabs replace :options="tabs" />
     </template>
-    <NuxtPage />
+    <NuxtPage v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/blocks.vue b/pages/blocks.vue
index 010e2012..5e460657 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -3,8 +3,6 @@ definePageMeta({
   middleware: 'auth',
 })
 
-const paginator = useMasto().blocks.iterate()
-
 useHeadFixed({
   title: 'Blocked users',
 })
@@ -15,6 +13,7 @@ useHeadFixed({
     <template #title>
       <span text-lg font-bold>{{ $t('account.blocked_users') }}</span>
     </template>
-    <AccountPaginator :paginator="paginator" />
+
+    <TimelineBlocks v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index fd578689..c1921a5c 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -3,8 +3,6 @@ definePageMeta({
   middleware: 'auth',
 })
 
-const paginator = useMasto().bookmarks.iterate()
-
 const { t } = useI18n()
 
 useHeadFixed({
@@ -21,8 +19,6 @@ useHeadFixed({
       </NuxtLink>
     </template>
 
-    <slot>
-      <TimelinePaginator :paginator="paginator" />
-    </slot>
+    <TimelineBookmarks v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/conversations.vue b/pages/conversations.vue
index 31d54ec3..13654581 100644
--- a/pages/conversations.vue
+++ b/pages/conversations.vue
@@ -3,8 +3,6 @@ definePageMeta({
   middleware: 'auth',
 })
 
-const paginator = useMasto().conversations.iterate()
-
 const { t } = useI18n()
 
 useHeadFixed({
@@ -21,8 +19,6 @@ useHeadFixed({
       </NuxtLink>
     </template>
 
-    <slot>
-      <ConversationPaginator :paginator="paginator" />
-    </slot>
+    <TimelineConversations v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/domain_blocks.vue b/pages/domain_blocks.vue
index fe601afb..e91b7e16 100644
--- a/pages/domain_blocks.vue
+++ b/pages/domain_blocks.vue
@@ -1,17 +1,13 @@
 <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>
@@ -20,15 +16,6 @@ const unblock = async (domain: string) => {
       <span text-lg font-bold>{{ $t('account.blocked_domains') }}</span>
     </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>
+    <TimelineDomainBlocks v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/favourites.vue b/pages/favourites.vue
index b0f97722..23685701 100644
--- a/pages/favourites.vue
+++ b/pages/favourites.vue
@@ -3,7 +3,6 @@ definePageMeta({
   middleware: 'auth',
 })
 
-const paginator = useMasto().favourites.iterate()
 const { t } = useI18n()
 
 useHeadFixed({
@@ -19,8 +18,7 @@ useHeadFixed({
         <span>{{ t('nav_side.favourites') }}</span>
       </NuxtLink>
     </template>
-    <slot>
-      <TimelinePaginator :paginator="paginator" />
-    </slot>
+
+    <TimelineFavourites v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/home.vue b/pages/home.vue
index 995f5cb6..55827f2c 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -11,10 +11,6 @@ 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'),
@@ -29,9 +25,7 @@ useHeadFixed({
         <span>{{ $t('nav_side.home') }}</span>
       </NuxtLink>
     </template>
-    <slot>
-      <PublishWidget draft-key="home" border="b base" />
-      <TimelinePaginator v-bind="{ paginator, stream }" context="home" />
-    </slot>
+
+    <TimelineHome v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/mutes.vue b/pages/mutes.vue
index c26a24a9..4e773bb7 100644
--- a/pages/mutes.vue
+++ b/pages/mutes.vue
@@ -2,9 +2,6 @@
 definePageMeta({
   middleware: 'auth',
 })
-
-const paginator = useMasto().mutes.iterate()
-
 useHeadFixed({
   title: 'Muted users',
 })
@@ -15,6 +12,7 @@ useHeadFixed({
     <template #title>
       <span text-lg font-bold>{{ $t('account.muted_users') }}</span>
     </template>
-    <AccountPaginator :paginator="paginator" />
+
+    <TimelineMutes v-if="isMastoInitialised" />
   </MainContent>
 </template>
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 4e6e63ea..795b4577 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -53,6 +53,7 @@ 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 cf6d66b2..ce586d62 100644
--- a/pages/notifications/index.vue
+++ b/pages/notifications/index.vue
@@ -1,19 +1,10 @@
 <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>
-  <NotificationPaginator v-bind="{ paginator, stream }" />
+  <TimelineNotifications v-if="isMastoInitialised" />
 </template>
diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue
index 87ee8f78..a85c87c8 100644
--- a/pages/notifications/mention.vue
+++ b/pages/notifications/mention.vue
@@ -1,19 +1,10 @@
 <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>
-  <NotificationPaginator v-bind="{ paginator, stream }" />
+  <TimelineNotifications v-if="isMastoInitialised" />
 </template>
diff --git a/pages/pinned.vue b/pages/pinned.vue
index 7094b55f..a88a16e6 100644
--- a/pages/pinned.vue
+++ b/pages/pinned.vue
@@ -18,6 +18,6 @@ useHeadFixed({
       <span>{{ t('account.pinned') }}</span>
     </template>
 
-    <TimelinePaginator :paginator="paginator" />
+    <TimelinePinned v-if="isMastoInitialised" />
   </MainContent>
 </template>