@stacksjs/defaults 0.75.480 → 0.75.483

package/functions/commerce/products/variants.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { ProductVariants } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createVariant(variant: ProductVariants) {
   try {
     const response = await fetch(`${baseURL}/commerce/products/variants`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(variant),
     })
 
@@ -63,9 +62,7 @@ async function updateVariant(variant: ProductVariants) {
   try {
     const response = await fetch(`${baseURL}/commerce/products/variants/${variant.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(variant),
     })
 
@@ -93,6 +90,7 @@ async function deleteVariant(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/products/variants/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/taxes.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../api-url'
 import type { TaxRates } from '../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../toasts'
 
@@ -35,7 +36,7 @@ async function createTaxRate(taxRate: TaxRates) {
   try {
     const response = await fetch(`${baseURL}/commerce/tax-rates`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(taxRate),
     })
 
@@ -61,7 +62,7 @@ async function updateTaxRate(taxRate: TaxRates) {
   try {
     const response = await fetch(`${baseURL}/commerce/tax-rates/${taxRate.id}`, {
       method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(taxRate),
     })
 
@@ -90,6 +91,7 @@ async function deleteTaxRate(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/tax-rates/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/waitlist/products.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { WaitlistProduct } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createWaitlistProduct(waitlistProduct: WaitlistProduct) {
   try {
     const response = await fetch(`${baseURL}/commerce/waitlist/products`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(waitlistProduct),
     })
 
@@ -63,9 +62,7 @@ async function updateWaitlistProduct(waitlistProduct: WaitlistProduct) {
   try {
     const response = await fetch(`${baseURL}/commerce/waitlist/products/${waitlistProduct.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(waitlistProduct),
     })
 
@@ -93,6 +90,7 @@ async function deleteWaitlistProduct(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/waitlist/products/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/waitlist/restaurants.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { WaitlistRestaurant } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createWaitlistRestaurant(waitlistRestaurant: WaitlistRestaurant)
   try {
     const response = await fetch(`${baseURL}/commerce/waitlist/restaurants`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(waitlistRestaurant),
     })
 
@@ -63,9 +62,7 @@ async function updateWaitlistRestaurant(waitlistRestaurant: WaitlistRestaurant)
   try {
     const response = await fetch(`${baseURL}/commerce/waitlist/restaurants/${waitlistRestaurant.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(waitlistRestaurant),
     })
 
@@ -93,6 +90,7 @@ async function deleteWaitlistRestaurant(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/waitlist/restaurants/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/monitoring/errors.ts

@@ -1,4 +1,5 @@
 import { resolveApiBaseUrl } from '../api-url'
+import { dashboardApi } from '../dashboard-api'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 
 export interface GroupedError {
@@ -10,7 +11,24 @@ export interface GroupedError {
   count: number
   first_seen: string
   last_seen: string
-  error_ids: number[]
+}
+
+/** What a page of groups asks for; every field may be left out. */
+export interface ErrorGroupQuery {
+  page?: number
+  perPage?: number
+  search?: string
+  status?: string
+  type?: string
+  sort?: string
+  direction?: 'asc' | 'desc'
+}
+
+/** The page the groups are, and what the pager and the type filter need. */
+export interface ErrorGroupPageInfo {
+  total: number
+  page: number
+  types: string[]
 }
 
 export interface ErrorRecord {
@@ -40,6 +58,10 @@ export interface ErrorTimelinePoint {
 
 // Create persistent storage for errors data
 const groupedErrors = useStorage<GroupedError[]>('grouped-errors', [])
+// Only the newest page request may land: typing, paging and filtering can
+// each start one while another is still out.
+let groupRequestId = 0
+const groupedErrorsPage = useStorage<ErrorGroupPageInfo>('grouped-errors-page', { total: 0, page: 1, types: [] })
 const errorStats = useStorage<ErrorStats | null>('error-stats', null)
 const errorTimeline = useStorage<ErrorTimelinePoint[]>('error-timeline', [])
 
@@ -49,23 +71,54 @@ export function errorGroupParams(type: string, message: string): URLSearchParams
   return new URLSearchParams({ type, message })
 }
 
+/** The page query as URL parameters, leaving out what is empty. */
+export function errorGroupPageParams(query: ErrorGroupQuery): URLSearchParams {
+  const params = new URLSearchParams()
+  if (query.page)
+    params.set('page', String(query.page))
+  if (query.perPage)
+    params.set('per_page', String(query.perPage))
+  if (query.search)
+    params.set('search', query.search)
+  if (query.status)
+    params.set('status', query.status)
+  if (query.type)
+    params.set('type', query.type)
+  if (query.sort) {
+    params.set('sort', query.sort)
+    params.set('direction', query.direction ?? 'asc')
+  }
+  return params
+}
+
 /**
- * Fetch all grouped errors
+ * Fetch one page of grouped errors. The server searches, filters, sorts and
+ * pages them (stacksjs/stacks#3195); this keeps the page and what the pager
+ * and the type filter need.
  */
-async function fetchGroupedErrors(): Promise<GroupedError[]> {
+async function fetchGroupedErrors(query: ErrorGroupQuery = {}): Promise<GroupedError[]> {
+  const requestId = ++groupRequestId
   try {
-    const response = await fetch(`${baseURL}/errors`)
+    const params = errorGroupPageParams(query).toString()
+    const response = await fetch(`${baseURL}/errors${params ? `?${params}` : ''}`)
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`)
     }
-    const { data } = await response.json() as { data: GroupedError[] }
+    const { data } = await response.json() as { data: { groups?: GroupedError[], total?: number, page?: number, types?: string[] } }
+    if (requestId !== groupRequestId)
+      return groupedErrors.value
 
-    if (Array.isArray(data)) {
-      groupedErrors.value = data
-      return data
+    if (data && Array.isArray(data.groups)) {
+      groupedErrors.value = data.groups
+      groupedErrorsPage.value = {
+        total: Number(data.total || 0),
+        page: Number(data.page || 1),
+        types: Array.isArray(data.types) ? data.types.map(String) : [],
+      }
+      return data.groups
     }
     else {
-      console.error('Expected array of errors but received:', typeof data)
+      console.error('Expected a page of error groups but received:', typeof data)
       return []
     }
   }
@@ -154,17 +207,10 @@ async function fetchErrorTimeline(): Promise<ErrorTimelinePoint[]> {
  */
 async function resolveErrorGroup(type: string, message: string): Promise<boolean> {
   try {
-    const response = await fetch(`${baseURL}/errors/resolve`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ type, message }),
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
+    // Through dashboardApi, which sends the CSRF token: a bare fetch was
+    // refused with 403, so every resolve from this page did nothing
+    // (stacksjs/stacks#3194).
+    await dashboardApi(`${baseURL}/errors/resolve`, { method: 'PATCH', body: { type, message } })
 
     // Update local state
     const group = groupedErrors.value.find(
@@ -186,17 +232,10 @@ async function resolveErrorGroup(type: string, message: string): Promise<boolean
  */
 async function ignoreErrorGroup(type: string, message: string): Promise<boolean> {
   try {
-    const response = await fetch(`${baseURL}/errors/ignore`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ type, message }),
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
+    // Through dashboardApi, which sends the CSRF token: a bare fetch was
+    // refused with 403, so every ignore from this page did nothing
+    // (stacksjs/stacks#3194).
+    await dashboardApi(`${baseURL}/errors/ignore`, { method: 'PATCH', body: { type, message } })
 
     // Update local state
     const group = groupedErrors.value.find(
@@ -218,17 +257,10 @@ async function ignoreErrorGroup(type: string, message: string): Promise<boolean>
  */
 async function unresolveErrorGroup(type: string, message: string): Promise<boolean> {
   try {
-    const response = await fetch(`${baseURL}/errors/unresolve`, {
-      method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ type, message }),
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
+    // Through dashboardApi, which sends the CSRF token: a bare fetch was
+    // refused with 403, so every unresolve from this page did nothing
+    // (stacksjs/stacks#3194).
+    await dashboardApi(`${baseURL}/errors/unresolve`, { method: 'PATCH', body: { type, message } })
 
     // Update local state
     const group = groupedErrors.value.find(
@@ -250,13 +282,8 @@ async function unresolveErrorGroup(type: string, message: string): Promise<boole
  */
 async function deleteErrorGroup(type: string, message: string): Promise<boolean> {
   try {
-    const response = await fetch(`${baseURL}/errors?${errorGroupParams(type, message)}`, {
-      method: 'DELETE',
-    })
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`)
-    }
+    // Through dashboardApi for the CSRF token, as the triage writes above.
+    await dashboardApi(`${baseURL}/errors?${errorGroupParams(type, message)}`, { method: 'DELETE' })
 
     // Update local state
     groupedErrors.value = groupedErrors.value.filter(
@@ -274,6 +301,7 @@ async function deleteErrorGroup(type: string, message: string): Promise<boolean>
 export function useErrors() {
   return {
     groupedErrors,
+    groupedErrorsPage,
     errorStats,
     errorTimeline,
     fetchGroupedErrors,

package/functions/queries.ts

@@ -21,19 +21,51 @@ export interface DashboardQueryLog {
   suggestions: string[]
 }
 
+export interface DashboardQueryCounts {
+  total: number
+  reads: number
+  writes: number
+  slow: number
+  failed: number
+  averageDuration: number
+}
+
+/** One page of the query log, chosen by the server (stacksjs/stacks#3204). */
 export interface DashboardQueryResponse {
   enabled: boolean
   slowThreshold: number
   queries: DashboardQueryLog[]
+  total: number
+  page: number
+  perPage: number
+  counts: DashboardQueryCounts
+  connections: string[]
   error?: string
 }
 
+export interface DashboardQueryFilters {
+  range: 'hour' | 'day' | 'week'
+  status: DashboardQueryLog['status'] | 'all'
+  type: DashboardQueryLog['type'] | 'all'
+  connection: string
+  page: number
+  perPage: number
+}
+
 export interface DashboardQueryShowResponse {
   query: DashboardQueryLog | null
 }
 
-export async function fetchDashboardQueries(): Promise<DashboardQueryResponse> {
-  return dashboardApi<DashboardQueryResponse>('/api/dashboard/queries')
+export async function fetchDashboardQueries(filters: DashboardQueryFilters): Promise<DashboardQueryResponse> {
+  const params = new URLSearchParams({
+    range: filters.range,
+    status: filters.status,
+    type: filters.type,
+    connection: filters.connection,
+    page: String(filters.page),
+    per_page: String(filters.perPage),
+  })
+  return dashboardApi<DashboardQueryResponse>(`/api/dashboard/queries?${params}`)
 }
 
 export async function fetchDashboardQuery(id: string): Promise<DashboardQueryLog | null> {

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.480",
+  "version": "0.75.483",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.480",
+  "version": "0.75.483",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.480",
-    "@stacksjs/sanitizer": "0.2.800",
-    "@stacksjs/stx": "0.2.800",
+    "@stacksjs/mobile": "0.75.483",
+    "@stacksjs/sanitizer": "0.2.807",
+    "@stacksjs/stx": "0.2.807",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

package/resources/components/Dashboard/Analytics/AnalyticsHub.stx

@@ -5,6 +5,10 @@ import { loadDiscoveredManifest } from '@stacksjs/defaults/resources/functions/d
 // off its models are never loaded, so the page it opens could only answer
 // 503 (stacksjs/stacks#3183).
 export const commerceAnalytics = loadDiscoveredManifest().sections.commerce
+
+// Declared, so the client block gets it typed rather than off the implicit
+// bridge, as the dashboard layout does with its role map.
+defineClientPayload({ commerceAnalytics })
 </script>
 
 <script client>

package/resources/components/Dashboard/Auth/MagicLink.stx

@@ -1,4 +1,6 @@
 <script client>
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
+
 /**
  * The magic-link interstitial.
  *
@@ -23,9 +25,12 @@ async function consume() {
 
   status.set('working')
   try {
+    // With the CSRF token, as every other sign-in form sends it: consume is
+    // a POST the server checks, and without the header every link came back
+    // "CSRF token mismatch" (stacksjs/stacks#3196).
     const reply = await fetch('/auth/magic-link/consume', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       credentials: 'same-origin',
       body: JSON.stringify({ token: String(route.params.token || '') }),
     })

package/resources/components/Dashboard/Content/CommentsDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Pagination')
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
@@ -31,6 +33,16 @@ const deletingComment = state<CommentRecord | null>(null)
 const deleting = state(false)
 const deleteError = state('')
 
+// The list is one page, searched and filtered by the server, newest first
+// across both tables (stacksjs/stacks#3193). The cards count every comment.
+const listPage = state(1)
+const perPage = 25
+const appliedSearch = state('')
+const total = state(0)
+const counts = state<Record<string, number>>({ all: 0, pending: 0, approved: 0, spam: 0, trash: 0 })
+let listRequestId = 0
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
 function normalizeStatus(value: unknown): CommentStatus | null {
   const status = String(value || '').toLowerCase()
   return ['pending', 'approved', 'spam', 'trash'].includes(status) ? status as CommentStatus : null
@@ -52,17 +64,17 @@ function normalize(record: any): CommentRecord {
   }
 }
 
+/** The page the server chose: its search and status are already applied. */
 function visibleComments(): CommentRecord[] {
-  const query = search().trim().toLowerCase()
-  return comments().filter(comment =>
-    (statusFilter() === 'all' || comment.status === statusFilter())
-    && (!query || [comment.content, comment.authorName, comment.authorEmail, comment.postTitle]
-      .some(value => value.toLowerCase().includes(query))),
-  )
+  return comments()
 }
 
 function statusCount(status: CommentStatus): number {
-  return comments().filter(comment => comment.status === status).length
+  return Number(counts()[status] || 0)
+}
+
+function allCount(): number {
+  return Number(counts().all || 0)
 }
 
 function statusClass(status: CommentStatus): string {
@@ -83,24 +95,85 @@ function formatDate(value: string): string {
     : new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date)
 }
 
+interface CommentPageResponse {
+  comments?: unknown[]
+  total?: number
+  page?: number
+  counts?: Record<string, number>
+}
+
+function listQuery(): string {
+  const params = new URLSearchParams({ page: String(listPage()), per_page: String(perPage) })
+  if (appliedSearch())
+    params.set('search', appliedSearch())
+  if (statusFilter() !== 'all')
+    params.set('status', statusFilter())
+  return params.toString()
+}
+
 async function loadComments(): Promise<void> {
+  // Only the newest request may land: typing, paging and filtering can each
+  // start one while another is still out.
+  const requestId = ++listRequestId
   loading.set(true)
   loadError.set('')
   try {
-    const data = await dashboardApi<{ comments?: unknown[] }>('/api/dashboard/comments')
+    const data = await dashboardApi<CommentPageResponse>(`/api/dashboard/comments?${listQuery()}`)
+    if (requestId !== listRequestId)
+      return
     if (!Array.isArray(data.comments))
       throw new TypeError('Comments were not returned in the expected shape.')
     comments.set(data.comments.map(normalize))
+    total.set(Number(data.total || 0))
+    // The server moves back to the last page when moderation or a narrower
+    // search leaves this one past the end.
+    listPage.set(Number(data.page || 1))
+    counts.set(data.counts && typeof data.counts === 'object' ? data.counts : {})
   }
   catch (error) {
+    if (requestId !== listRequestId)
+      return
     loadError.set(error instanceof Error ? error.message : String(error))
     pushToast('error', 'Could not load comments', { detail: loadError() })
   }
   finally {
-    loading.set(false)
+    if (requestId === listRequestId)
+      loading.set(false)
   }
 }
 
+function changePage(next: number): void {
+  listPage.set(next)
+  void loadComments()
+}
+
+// The search box and the status select stay plain x-model bindings; a change
+// to either asks the server for page 1, the search once typing pauses.
+let shownSearch = search()
+effect(() => {
+  const term = search().trim()
+  if (term === shownSearch)
+    return
+  shownSearch = term
+  if (searchTimer)
+    clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    appliedSearch.set(term)
+    listPage.set(1)
+    void loadComments()
+  }, 250)
+})
+
+let shownStatus = statusFilter()
+effect(() => {
+  const status = statusFilter()
+  if (status === shownStatus)
+    return
+  shownStatus = status
+  listPage.set(1)
+  void loadComments()
+})
+
 async function setStatus(comment: CommentRecord, status: CommentStatus): Promise<void> {
   updatingId.set(comment.key)
   try {
@@ -111,8 +184,10 @@ async function setStatus(comment: CommentRecord, status: CommentStatus): Promise
     // The server says what the comment now is: a trait comment has one hidden
     // state, so asking for trash comes back as spam.
     const next = normalizeStatus(updated?.status) ?? status
-    comments.set(comments().map(record => record.key === comment.key ? { ...record, status: next } : record))
     pushToast('success', `Comment marked ${next}`)
+    // Reread the page: under a status filter the comment leaves it, and the
+    // cards move.
+    await loadComments()
   }
   catch (error) {
     pushToast('error', 'Could not update comment', {
@@ -146,9 +221,9 @@ async function deleteComment(): Promise<void> {
   deleteError.set('')
   try {
     await dashboardApi(`/api/dashboard/comments/${comment.id}?source=${comment.source}`, { method: 'DELETE' })
-    comments.set(comments().filter(record => record.key !== comment.key))
     deletingComment.set(null)
     pushToast('success', 'Comment permanently deleted')
+    await loadComments()
   }
   catch (error) {
     deleteError.set(error instanceof Error ? error.message : String(error))
@@ -172,7 +247,7 @@ onMount(() => {
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadComments()">Retry</Button></div>
 
   <section aria-label="Comment metrics" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ comments().length }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ allCount() }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Pending</p><p class="mt-2 font-semibold text-2xl text-yellow-700 dark:text-yellow-300">{{ statusCount('pending') }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Approved</p><p class="mt-2 font-semibold text-2xl text-green-700 dark:text-green-300">{{ statusCount('approved') }}</p></article>
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Spam or trash</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ statusCount('spam') + statusCount('trash') }}</p></article>
@@ -185,6 +260,9 @@ onMount(() => {
       <div :else-if="visibleComments().length === 0" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-comment-01"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No comments found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the search or status filter.</p></div>
       <template :else><template :for="comment in visibleComments()"><article class="p-4"><div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between"><div class="min-w-0"><div class="flex flex-wrap gap-2 items-center"><p class="font-semibold text-gray-900 text-sm dark:text-white">{{ comment.authorName || 'Anonymous' }}</p><span :class="statusClass(comment.status)">{{ comment.status }}</span><span class="text-gray-500 text-xs dark:text-gray-400">{{ formatDate(comment.createdAt) }}</span></div><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ comment.authorEmail }}<span :if="comment.postTitle"> on {{ comment.postTitle }}</span></p><p class="mt-3 max-w-4xl text-gray-700 text-sm whitespace-pre-wrap dark:text-neutral-200">{{ comment.content }}</p></div><div class="flex flex-shrink-0 flex-wrap gap-2"><Button :if="comment.status !== 'approved'" variant="success" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'approved')">Approve</Button><Button :if="comment.status !== 'pending'" variant="secondary" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'pending')">Restore</Button><Button :if="comment.status !== 'spam'" variant="warning" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'spam')">Spam</Button><Button :if="comment.status !== 'trash' && comment.source === 'comments'" variant="outline" size="sm" :disabled="Boolean(updatingId())" @click="setStatus(comment, 'trash')">Trash</Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Permanently delete comment by ' + comment.authorName" :disabled="Boolean(updatingId())" @click="openDelete(comment)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></div></article></template></template>
     </div>
+    <div :if="total() > perPage" class="px-4 py-3 border-gray-200 border-t dark:border-neutral-700">
+      <Pagination :currentPage="listPage()" :totalItems="total()" :itemsPerPage="perPage" showTotalItems @page="changePage" />
+    </div>
   </section>
 </div>