feat: finish list CRUD (#1532)

Co-authored-by: userquin <userquin@gmail.com>
closes https://github.com/elk-zone/elk/issues/372

pages/[[server]]/list/[list].vue

@@ -1,35 +0,0 @@
-<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>

pages/[[server]]/list/[list]/index.vue

@@ -1,17 +1,56 @@
 <script setup lang="ts">
-definePageMeta({
-  name: 'list',
-})
+import type { CommonRouteTabOption } from '~/components/common/CommonRouteTabs.vue'
 
-const params = useRoute().params
-const listId = $(computedEager(() => params.list as string))
+const list = $computed(() => useRoute().params.list as string)
+const server = $computed(() => useRoute().params.server as string)
+
+const { t } = useI18n()
+const route = useRoute()
+
+const tabs = $computed<CommonRouteTabOption[]>(() => [
+  {
+    to: {
+      name: 'list',
+      params: { server, list },
+    },
+    display: t('tab.posts'),
+    icon: 'i-ri:list-unordered',
+  },
+  {
+    to: {
+      name: 'list-accounts',
+      params: { server, list },
+    },
+    display: t('tab.accounts'),
+    icon: 'i-ri:user-line',
+  },
+],
+)
 
 const { client } = $(useMasto())
+const { data: listInfo, refresh } = $(await useAsyncData(() => client.v1.lists.fetch(list), { default: () => shallowRef() }))
 
-const paginator = client.v1.timelines.listList(listId)
-const stream = useStreaming(client => client.v1.stream.streamListTimeline(listId))
+if (listInfo) {
+  useHeadFixed({
+    title: () => `${listInfo.title} | ${route.fullPath.endsWith('/accounts') ? t('tab.accounts') : t('tab.posts')} | ${t('nav.lists')}`,
+  })
+}
+
+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>
-  <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderedTimeline" context="home" />
+  <MainContent back>
+    <template #title>
+      <span text-lg font-bold>{{ listInfo ? listInfo.title : t('nav.list') }}</span>
+    </template>
+    <template #header>
+      <CommonRouteTabs replace :options="tabs" />
+    </template>
+    <NuxtPage v-if="isHydrated" />
+  </MainContent>
 </template>

pages/[[server]]/list/[list]/index/index.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  name: 'list',
+})
+
+const params = useRoute().params
+const listId = $(computedEager(() => params.list as string))
+
+const client = useMastoClient()
+
+const paginator = client.v1.timelines.listList(listId)
+const stream = useStreaming(client => client.v1.stream.streamListTimeline(listId))
+</script>
+
+<template>
+  <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderedTimeline" context="home" />
+</template>