From 3904bc4d2d5836a6489b32187050977adb215340 Mon Sep 17 00:00:00 2001
From: Evan Boehs <evan@boehs.org>
Date: Thu, 26 Jan 2023 16:41:28 -0500
Subject: [PATCH] feat: initial support for lists (#1474)

---
 components/nav/NavSide.vue       |  1 +
 locales/en.json                  |  2 ++
 pages/[[server]]/list/[list].vue | 35 ++++++++++++++++++++++++++++++++
 pages/[[server]]/lists.vue       | 30 +++++++++++++++++++++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 pages/[[server]]/list/[list].vue
 create mode 100644 pages/[[server]]/lists.vue

diff --git a/components/nav/NavSide.vue b/components/nav/NavSide.vue
index d77b95eb..f5a2da12 100644
--- a/components/nav/NavSide.vue
+++ b/components/nav/NavSide.vue
@@ -32,6 +32,7 @@ const { notifications } = useNotifications()
     <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
     <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
     <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
+    <NavSideItem :text="$t('nav.lists')" :to="`/${currentServer}/lists`" icon="i-ri:list-check" :command="command" />
 
     <div shrink hidden sm:block mt-4 />
     <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
diff --git a/locales/en.json b/locales/en.json
index 1697d014..6157cad7 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -216,6 +216,8 @@
     "favourites": "Favorites",
     "federated": "Federated",
     "home": "Home",
+    "list": "List",
+    "lists": "Lists",
     "local": "Local",
     "muted_users": "Muted users",
     "notifications": "Notifications",
diff --git a/pages/[[server]]/list/[list].vue b/pages/[[server]]/list/[list].vue
new file mode 100644
index 00000000..462adfce
--- /dev/null
+++ b/pages/[[server]]/list/[list].vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'list',
+})
+
+const params = useRoute().params
+const listId = $(computedEager(() => params.list as string))
+
+const { client } = $(useMasto())
+const { data: listInfo, refresh } = $(await useAsyncData(() => client.v1.lists.fetch(listId), { default: () => shallowRef() }))
+
+const paginator = client.v1.timelines.listList(listId)
+const stream = useStreaming(client => client.v1.stream.streamListTimeline(listId))
+
+if (listInfo) {
+  useHeadFixed({
+    title: () => `${listInfo.title}`,
+  })
+}
+
+onReactivated(() => {
+  // Silently update data when reentering the page
+  // The user will see the previous content first, and any changes will be updated to the UI when the request is completed
+  refresh()
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <span text-lg font-bold>{{ listInfo ? listInfo.title : $t('nav.list') }}</span>
+    </template>
+    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderedTimeline" context="home" />
+  </MainContent>
+</template>
diff --git a/pages/[[server]]/lists.vue b/pages/[[server]]/lists.vue
new file mode 100644
index 00000000..2024527a
--- /dev/null
+++ b/pages/[[server]]/lists.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+const { t } = useI18n()
+
+const { client } = $(useMasto())
+const paginator = client.v1.lists.list()
+
+useHeadFixed({
+  title: () => t('nav.lists'),
+})
+</script>
+
+<template>
+  <MainContent>
+    <template #title>
+      <NuxtLink to="/lists" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
+        <div i-ri:list-check />
+        <span text-lg font-bold>{{ t('nav.lists') }}</span>
+      </NuxtLink>
+    </template>
+    <slot>
+      <CommonPaginator :paginator="paginator">
+        <template #default="{ item }">
+          <NuxtLink :to="`list/${item.id}`" block p4 hover:bg-active flex justify-between>
+            {{ item.title }}
+          </NuxtLink>
+        </template>
+      </CommonPaginator>
+    </slot>
+  </MainContent>
+</template>