feat: articles pagination

web/src/views/HomeView.vue

@@ -9,7 +9,7 @@ import ArticleStatusBadge from '@/components/ArticleStatusBadge.vue'
 import NewArticleModal from '@/components/NewArticleModal.vue'
 import RecentActivityCard from '@/components/RecentActivityCard.vue'
 import UpdateBanner from '@/components/UpdateBanner.vue'
-import { useArticles, type Article } from '@/composables/useArticles'
+import { useArticles, type Article, type ArticleCounts } from '@/composables/useArticles'
 import { useSessionStore } from '@/stores/session'
 import { useUpdateStore } from '@/stores/update'
 import { accountName } from '@/lib/accountName'
@@ -55,14 +55,13 @@ const subtitle = computed(() =>
 		: t("Here's where things stand on your site."),
 )
 
-const stats = computed(() => {
-	const online = articles.value.filter((article) => article.is_online).length
-	return {
-		total: articles.value.length,
-		online,
-		drafts: articles.value.length - online,
-	}
-})
+const counts = ref<ArticleCounts>({ all: 0, online: 0, draft: 0 })
+
+const stats = computed(() => ({
+	total: counts.value.all,
+	online: counts.value.online,
+	drafts: counts.value.draft,
+}))
 
 const statTiles = computed(() => [
 	{
@@ -85,12 +84,6 @@ const statTiles = computed(() => [
 	},
 ])
 
-const recentArticles = computed(() =>
-	[...articles.value]
-		.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-		.slice(0, RECENT_LIST_SIZE),
-)
-
 function clearSkeletonTimer() {
 	if (skeletonTimer !== null) {
 		clearTimeout(skeletonTimer)
@@ -107,9 +100,14 @@ async function loadArticles() {
 	}, SKELETON_DELAY_MS)
 
 	try {
-		const result = await listArticles()
-		articles.value = result
-		loadState.value = result.length === 0 ? 'empty' : 'default'
+		const result = await listArticles({
+			page: 1,
+			size: RECENT_LIST_SIZE,
+			sort: 'updated_at:desc',
+		})
+		articles.value = result.items
+		counts.value = result.counts
+		loadState.value = result.counts.all === 0 ? 'empty' : 'default'
 	} catch {
 		loadState.value = 'error'
 	} finally {
@@ -263,7 +261,7 @@ onMounted(loadArticles)
 							data-testid="recent-list"
 							class="border border-default bg-default"
 						>
-							<li v-for="article in recentArticles" :key="article.id">
+							<li v-for="article in articles" :key="article.id">
 								<RouterLink
 									:to="`/article/${article.id}/edit`"
 									class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"