feat: move timelines to components (#514)

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>