fix(SPA): save article list pagination in query url

web/src/views/ArticleView.vue

@@ -20,6 +20,7 @@ import {
 } from '@/composables/useArticles'
 import { bodyImageCount } from '@/lib/bodyImageIds'
 import {
+	ARTICLE_PAGE_SIZES,
 	effectiveSort,
 	nextSort,
 	parseArticleQuery,
@@ -30,6 +31,7 @@ import {
 	type ArticleListQuery,
 } from '@/lib/articleListQuery'
 import { pageCountFor } from '@/lib/pagination'
+import { ARTICLES_PAGE_SIZE_KEY, readStoredPageSize, storePageSize } from '@/lib/pageSizeMemory'
 
 const SKELETON_DELAY_MS = 150
 const SEARCH_DEBOUNCE_MS = 120
@@ -49,7 +51,16 @@ const toast = useLocalizedToast()
 const items = ref<Article[]>([])
 const total = ref(0)
 const counts = ref<ArticleCounts>({ all: 0, online: 0, draft: 0 })
-const shown = ref<ArticleListQuery>(parseArticleQuery(route.query))
+function parseWithStoredSize(query: typeof route.query): ArticleListQuery {
+	const parsed = parseArticleQuery(query)
+	if (query.size !== undefined) {
+		return parsed
+	}
+	const stored = readStoredPageSize(ARTICLES_PAGE_SIZE_KEY, ARTICLE_PAGE_SIZES)
+	return stored === null ? parsed : { ...parsed, size: stored }
+}
+
+const shown = ref<ArticleListQuery>(parseWithStoredSize(route.query))
 const desired = ref<ArticleListQuery>(shown.value)
 const hasLoaded = ref(false)
 const loading = ref(true)
@@ -62,6 +73,7 @@ const newArticleModalOpen = ref(false)
 let skeletonTimer: ReturnType<typeof setTimeout> | null = null
 let searchDebounceTimer: ReturnType<typeof setTimeout> | null = null
 let requestToken = 0
+let syncedTarget: Record<string, string> | null = null
 
 const searchInput = ref(shown.value.q)
 
@@ -152,6 +164,7 @@ async function syncUrl(query: ArticleListQuery, mode: UrlMode) {
 	if (sameRouteQuery(route.query, target)) {
 		return
 	}
+	syncedTarget = target
 	await router[mode]({ query: target })
 }
 
@@ -216,6 +229,7 @@ function changePage(page: number) {
 }
 
 function changeSize(size: number) {
+	storePageSize(ARTICLES_PAGE_SIZE_KEY, size)
 	load({ ...desired.value, size, page: 1 }, 'push')
 }
 
@@ -250,7 +264,9 @@ watch(
 		if (route.path !== ARTICLES_PATH) {
 			return
 		}
-		const next = parseArticleQuery(route.query)
+		const ownReplace = syncedTarget !== null && sameRouteQuery(route.query, syncedTarget)
+		syncedTarget = null
+		const next = ownReplace ? parseArticleQuery(route.query) : parseWithStoredSize(route.query)
 		if (hasLoaded.value && sameArticleQuery(next, shown.value)) {
 			syncUrl(shown.value, 'replace')
 			return