@stacksjs/defaults 0.75.482 → 0.75.483

package/resources/components/Dashboard/Monitoring/ErrorDashboard.stx

@@ -47,7 +47,9 @@
 
     <ErrorTable
       :errors="filteredErrors"
-      :pageResetKey="viewKey"
+      :total="groupTotal"
+      :currentPage="groupPage"
+      :perPage="groupPerPage"
       :emptyTitle="emptyTitle"
       :emptyDescription="emptyDescription"
       @row-click="viewError"
@@ -55,6 +57,9 @@
       @ignore="handleIgnoreError"
       @unresolve="handleUnresolveError"
       @delete="openDeleteModal"
+      @page-change="changeGroupPage"
+      @page-size-change="changeGroupPageSize"
+      @sort="changeGroupSort"
     />
   </Card>
 
@@ -148,6 +153,7 @@
 
 <script client>
 import { useErrors } from '../../../../functions/monitoring/errors'
+import { pushToast } from '../../../../functions/toasts'
 
 interface ErrorGroup {
   id?: string | number
@@ -160,12 +166,21 @@ interface ErrorGroup {
   stack?: string | null
 }
 
-const { groupedErrors, errorStats, fetchGroupedErrors, fetchErrorStats, resolveErrorGroup, ignoreErrorGroup, unresolveErrorGroup, deleteErrorGroup } = useErrors()
+const { groupedErrors, groupedErrorsPage, errorStats, fetchGroupedErrors, fetchErrorStats, resolveErrorGroup, ignoreErrorGroup, unresolveErrorGroup, deleteErrorGroup } = useErrors()
 
 const searchQuery = state('')
 const statusFilter = state('')
 const typeFilter = state('')
 
+// The groups are one page, searched, filtered and sorted by the server
+// (stacksjs/stacks#3195); these are what it was last asked for.
+const listPage = state(1)
+const perPage = state(10)
+const appliedSearch = state('')
+const sortKey = state('')
+const sortDirection = state<'asc' | 'desc'>('desc')
+let searchTimer: ReturnType<typeof setTimeout> | undefined
+
 const selectedError = state<ErrorGroup | null>(null)
 const isDetailModalOpen = state(false)
 const showDeleteModal = state(false)
@@ -193,34 +208,82 @@ const last24hLabel = derived(() => String(statsValue()?.last_24h ?? 0))
 const resolvedStatsLabel = derived(() => String(statsValue()?.resolved ?? 0))
 const trendValue = derived(() => statsValue()?.trend ?? 0)
 
-const typeOptions = derived(() => {
-  const types = new Set(errorList().map(e => e.type))
-  return [
-    { value: '', label: 'All Types' },
-    ...Array.from(types).map(type => ({ value: type, label: type })),
-  ]
-})
+function pageInfo(): { total: number, page: number, types: string[] } {
+  return (groupedErrorsPage.value as { total: number, page: number, types: string[] } | null) ?? { total: 0, page: 1, types: [] }
+}
+
+/** Every recorded type, from the server: a page alone would list only its own. */
+const typeOptions = derived(() => [
+  { value: '', label: 'All Types' },
+  ...pageInfo().types.map(type => ({ value: type, label: type })),
+])
+
+/** The page the server chose; its search, filters and order are already applied. */
+const filteredErrors = derived(() => errorList())
+const groupTotal = derived(() => pageInfo().total)
+const groupPage = derived(() => pageInfo().page)
+const groupPerPage = derived(() => perPage())
+
+async function loadGroups(): Promise<void> {
+  await fetchGroupedErrors({
+    page: listPage(),
+    perPage: perPage(),
+    search: appliedSearch(),
+    status: statusFilter(),
+    type: typeFilter(),
+    sort: sortKey() || undefined,
+    direction: sortDirection(),
+  })
+  // The server moves back to the last page when a delete or a narrower
+  // filter leaves this one past the end.
+  listPage.set(pageInfo().page)
+}
+
+function changeGroupPage(value: number | CustomEvent<number>): void {
+  listPage.set(Number(eventValue(value)) || 1)
+  void loadGroups()
+}
+
+function changeGroupPageSize(value: number | CustomEvent<number>): void {
+  perPage.set(Number(eventValue(value)) || 10)
+  listPage.set(1)
+  void loadGroups()
+}
+
+function changeGroupSort(value: { key: string, direction: string } | CustomEvent<{ key: string, direction: string }>): void {
+  const sort = eventValue(value)
+  sortKey.set(sort.key || '')
+  sortDirection.set(sort.direction === 'asc' ? 'asc' : 'desc')
+  listPage.set(1)
+  void loadGroups()
+}
 
-const filteredErrors = derived(() => {
-  const list = errorList()
-  const q = searchQuery().toLowerCase()
-  const status = statusFilter()
-  const type = typeFilter()
-  return list
-    .filter((error) => {
-      const matchesSearch = !q
-        || error.type.toLowerCase().includes(q)
-        || error.message.toLowerCase().includes(q)
-      const matchesStatus = !status || error.status === status
-      const matchesType = !type || error.type === type
-      return matchesSearch && matchesStatus && matchesType
-    })
-    // Most recently seen first: the order a header sort in the table falls back to.
-    .sort((a, b) => new Date(b.last_seen).getTime() - new Date(a.last_seen).getTime())
+// The search and the two filters are model bindings; a change to any asks
+// the server for page 1, the search once typing pauses.
+let shownSearch = searchQuery()
+effect(() => {
+  const term = searchQuery().trim()
+  if (term === shownSearch)
+    return
+  shownSearch = term
+  if (searchTimer)
+    clearTimeout(searchTimer)
+  searchTimer = setTimeout(() => {
+    appliedSearch.set(term)
+    listPage.set(1)
+    void loadGroups()
+  }, 250)
 })
 
-/** What the table is showing: a change to the search or a filter returns it to the first page. */
-const viewKey = derived(() => JSON.stringify([searchQuery(), statusFilter(), typeFilter()]))
+let shownFilters = JSON.stringify([statusFilter(), typeFilter()])
+effect(() => {
+  const filters = JSON.stringify([statusFilter(), typeFilter()])
+  if (filters === shownFilters)
+    return
+  shownFilters = filters
+  listPage.set(1)
+  void loadGroups()
+})
 
 
 const hasFilters = derived(() => searchQuery() !== '' || (statusFilter() ?? '') !== '' || (typeFilter() ?? '') !== '')
@@ -263,24 +326,42 @@ function closeDetailModal(): void {
 
 async function handleResolveError(value: ErrorGroup | CustomEvent<ErrorGroup>): Promise<void> {
   const error = eventValue(value)
-  await resolveErrorGroup(error.type, error.message)
-  await fetchErrorStats()
+  // Only a write that landed moves the group: this used to mark it resolved
+  // whatever the server answered (stacksjs/stacks#3194).
+  if (!await resolveErrorGroup(error.type, error.message)) {
+    pushToast('error', 'Could not resolve this error')
+    return
+  }
+  // Reread the groups too: the table does not see a status changed in place.
+  await Promise.all([loadGroups(), fetchErrorStats()])
   if (isDetailModalOpen() && selectedError())
     selectedError.update(e => e ? { ...e, status: 'resolved' } : e)
 }
 
 async function handleIgnoreError(value: ErrorGroup | CustomEvent<ErrorGroup>): Promise<void> {
   const error = eventValue(value)
-  await ignoreErrorGroup(error.type, error.message)
-  await fetchErrorStats()
+  // Only a write that landed moves the group: this used to mark it ignored
+  // whatever the server answered (stacksjs/stacks#3194).
+  if (!await ignoreErrorGroup(error.type, error.message)) {
+    pushToast('error', 'Could not ignore this error')
+    return
+  }
+  // Reread the groups too: the table does not see a status changed in place.
+  await Promise.all([loadGroups(), fetchErrorStats()])
   if (isDetailModalOpen() && selectedError())
     selectedError.update(e => e ? { ...e, status: 'ignored' } : e)
 }
 
 async function handleUnresolveError(value: ErrorGroup | CustomEvent<ErrorGroup>): Promise<void> {
   const error = eventValue(value)
-  await unresolveErrorGroup(error.type, error.message)
-  await fetchErrorStats()
+  // Only a write that landed moves the group: this used to mark it unresolved
+  // whatever the server answered (stacksjs/stacks#3194).
+  if (!await unresolveErrorGroup(error.type, error.message)) {
+    pushToast('error', 'Could not reopen this error')
+    return
+  }
+  // Reread the groups too: the table does not see a status changed in place.
+  await Promise.all([loadGroups(), fetchErrorStats()])
   if (isDetailModalOpen() && selectedError())
     selectedError.update(e => e ? { ...e, status: 'unresolved' } : e)
 }
@@ -326,8 +407,12 @@ async function confirmDelete(): Promise<void> {
   const target = errorToDelete()
   if (!target)
     return
-  await deleteErrorGroup(target.type, target.message)
-  await fetchErrorStats()
+  if (!await deleteErrorGroup(target.type, target.message)) {
+    pushToast('error', 'Could not delete this error')
+    return
+  }
+  // Reread the groups too: the table does not see a status changed in place.
+  await Promise.all([loadGroups(), fetchErrorStats()])
   closeDeleteModal()
 }
 
@@ -347,6 +432,6 @@ function formatDate(date: string): string {
 }
 
 onMount(async () => {
-  await Promise.all([fetchGroupedErrors(), fetchErrorStats()])
+  await Promise.all([loadGroups(), fetchErrorStats()])
 })
 </script>

package/resources/components/Dashboard/Monitoring/ErrorTable.stx

@@ -15,9 +15,13 @@ interface ErrorGroup {
 const errors = useReactiveProp('errors', [])
 const emptyTitle = useReactiveProp('emptyTitle', 'No errors found')
 const emptyDescription = useReactiveProp('emptyDescription', 'Your application is running smoothly!')
-/** The parent's search and filters: a change returns to the first page. */
-const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
-const emit = defineEmits(['view', 'resolve', 'ignore', 'unresolve', 'delete'])
+// The rows are one page the server chose (stacksjs/stacks#3195): it searches,
+// filters, sorts and pages the groups, so this shows them as given and hands
+// paging and sorting back to the parent.
+const total = useReactiveProp('total', 0)
+const currentPage = useReactiveProp('currentPage', 1)
+const perPage = useReactiveProp('perPage', 10)
+const emit = defineEmits(['view', 'resolve', 'ignore', 'unresolve', 'delete', 'row-click', 'page-change', 'page-size-change', 'sort'])
 
 function formatRelativeTime(value: string): string {
   if (!value)
@@ -39,9 +43,8 @@ function formatRelativeTime(value: string): string {
 }
 
 /**
- * Last seen reads relative to now and sorts by the timestamp behind it, so
- * it is slotted rather than a datetime column. The parent's order, most
- * recently seen first, is what a header sort falls back to.
+ * Last seen reads relative to now, so it is slotted rather than a datetime
+ * column. Every sortable key here is one the server sorts by.
  */
 const COLUMNS = [
   { key: 'type', label: 'Type', type: 'badge' as const, sortable: true },
@@ -84,20 +87,38 @@ const rows = derived(() => (errors() as ErrorGroup[]).map((error, index) => ({
 function handleRowAction(payload: { action: string, row: ErrorGroup }): void {
   emit(payload.action === 'view' ? 'row-click' : payload.action, payload.row)
 }
+
+function changePage(page: number): void {
+  emit('page-change', page)
+}
+
+function changePageSize(size: number): void {
+  emit('page-size-change', size)
+}
+
+function changeSort(sort: { key: string, direction: string }): void {
+  emit('sort', sort)
+}
 </script>
 
 <Table
-  :page-reset-key="pageResetKey()"
   :columns="COLUMNS"
   :data="rows()"
   :row-actions="ROW_ACTIONS"
   action-label-key="actionName"
   row-key="rowId"
   paginated
-  :page-size="10"
+  manual-pagination
+  manual-sort
+  :total="total()"
+  :current-page="currentPage()"
+  :page-size="perPage()"
   :empty-title="emptyTitle()"
   :empty-description="emptyDescription()"
   @row-action="handleRowAction"
+  @page-change="changePage"
+  @page-size-change="changePageSize"
+  @sort="changeSort"
 >
   <template #cell="{ row }">
     <span class="text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400" x-text="row.lastSeenLabel"></span>

package/resources/components/Dashboard/Queries/QueryDashboard.stx

@@ -1,17 +1,26 @@
 <script client>
-import type { DashboardQueryLog, DashboardQueryResponse } from '../../../../functions/queries'
+import type { DashboardQueryCounts, DashboardQueryFilters, DashboardQueryLog, DashboardQueryResponse } from '../../../../functions/queries'
 import { fetchDashboardQueries } from '../../../../functions/queries'
 
-type QueryRange = 'hour' | 'day' | 'week'
+type QueryRange = DashboardQueryFilters['range']
 type QueryMode = 'all' | 'slow' | 'history'
-type QueryType = DashboardQueryLog['type'] | 'all'
-type QueryStatus = DashboardQueryLog['status'] | 'all'
+type QueryType = DashboardQueryFilters['type']
+type QueryStatus = DashboardQueryFilters['status']
+
+const EMPTY_COUNTS: DashboardQueryCounts = { total: 0, reads: 0, writes: 0, slow: 0, failed: 0, averageDuration: 0 }
 
 const mode = useReactiveProp<QueryMode>('mode', 'all')
+// One page of the log, chosen by the server with the counts the cards show
+// (stacksjs/stacks#3204): the range, filters and paging are all its work.
 const data = state<DashboardQueryResponse>({
   enabled: false,
   slowThreshold: 100,
   queries: [],
+  total: 0,
+  page: 1,
+  perPage: 50,
+  counts: EMPTY_COUNTS,
+  connections: [],
 })
 const range = state<QueryRange>(mode() === 'history' ? 'week' : 'day')
 const connection = state('all')
@@ -21,35 +30,12 @@ const currentPage = state(1)
 const itemsPerPage = state(50)
 const loading = state(true)
 const loadError = state('')
+let listRequestId = 0
 
-const rangeHours: Record<QueryRange, number> = {
-  hour: 1,
-  day: 24,
-  week: 168,
-}
-
-const rangedQueries = derived(() => {
-  const cutoff = Date.now() - rangeHours[range()] * 60 * 60 * 1000
-  return data().queries.filter((query) => {
-    const executed = new Date(query.executedAt).getTime()
-    return Number.isFinite(executed) && executed >= cutoff
-  })
-})
-
-const filteredQueries = derived(() => rangedQueries().filter((query) => {
-  if (mode() === 'slow' && query.status !== 'slow')
-    return false
-  if (connection() !== 'all' && query.connection !== connection())
-    return false
-  if (status() !== 'all' && query.status !== status())
-    return false
-  return type() === 'all' || query.type === type()
-}))
-const totalPages = derived(() => Math.max(1, Math.ceil(filteredQueries().length / itemsPerPage())))
-const visibleQueries = derived(() => {
-  const start = (currentPage() - 1) * itemsPerPage()
-  return filteredQueries().slice(start, start + itemsPerPage())
-})
+const queries = derived(() => data().queries)
+const counts = derived(() => data().counts)
+const total = derived(() => counts().total)
+const totalPages = derived(() => Math.max(1, Math.ceil(total() / itemsPerPage())))
 
 const pageTitle = derived(() => mode() === 'slow' ? 'Slow Queries' : mode() === 'history' ? 'Query History' : 'Queries')
 const pageDescription = derived(() => mode() === 'slow'
@@ -58,30 +44,28 @@ const pageDescription = derived(() => mode() === 'slow'
     ? 'Review database work recorded by the native query logger.'
     : 'Inspect query volume and latency recorded by the native database logger.')
 const emptyTitle = derived(() => mode() === 'slow' ? 'No slow queries in this range' : 'No query logs in this range')
-const connections = derived(() => Array.from(new Set(data().queries.map(query => query.connection))).sort())
-const total = derived(() => filteredQueries().length)
-const selectCount = derived(() => filteredQueries().filter(query => query.type === 'SELECT').length)
-const writeCount = derived(() => filteredQueries().filter(query => ['INSERT', 'UPDATE', 'DELETE'].includes(query.type)).length)
-const slowCount = derived(() => filteredQueries().filter(query => query.status === 'slow').length)
-const failedCount = derived(() => filteredQueries().filter(query => query.status === 'failed').length)
-const averageDuration = derived(() => {
-  const rows = filteredQueries()
-  if (rows.length === 0)
-    return '0.00 ms'
-  return `${(rows.reduce((sum, query) => sum + query.duration, 0) / rows.length).toFixed(2)} ms`
-})
+const connections = derived(() => data().connections)
+const averageDuration = derived(() => `${counts().averageDuration.toFixed(2)} ms`)
 
-function setRange(value: QueryRange): void {
-  range.set(value)
-  currentPage.set(1)
+function filters(): DashboardQueryFilters {
+  return {
+    range: range(),
+    // The slow page lists slow queries whatever the status select last held.
+    status: mode() === 'slow' ? 'slow' : status(),
+    type: type(),
+    connection: connection() === 'all' ? '' : connection(),
+    page: currentPage(),
+    perPage: itemsPerPage(),
+  }
 }
 
-function resetPage(): void {
-  currentPage.set(1)
+function setRange(value: QueryRange): void {
+  range.set(value)
 }
 
 function setCurrentPage(page: number): void {
   currentPage.set(Math.min(Math.max(1, page), totalPages()))
+  void loadQueries()
 }
 
 function formatQuery(query: string): string {
@@ -121,21 +105,46 @@ function statusClass(value: DashboardQueryLog['status']): string {
 }
 
 async function loadQueries(): Promise<void> {
+  // Only the newest request may land: the range, filters and pager can each
+  // start one while another is still out.
+  const requestId = ++listRequestId
   loading.set(true)
   loadError.set('')
   try {
-    const result = await fetchDashboardQueries()
-    data.set(result)
+    const result = await fetchDashboardQueries(filters())
+    if (requestId !== listRequestId)
+      return
+    data.set({ ...result, counts: result.counts ?? EMPTY_COUNTS, connections: result.connections ?? [] })
+    // The server moves back to the last page when this one ran past the end.
+    currentPage.set(Number(result.page || 1))
     loadError.set(result.error || '')
   }
   catch (error) {
+    if (requestId !== listRequestId)
+      return
     loadError.set(error instanceof Error ? error.message : 'Query logs could not be loaded.')
   }
   finally {
-    loading.set(false)
+    if (requestId === listRequestId)
+      loading.set(false)
   }
 }
 
+// The range buttons and the three selects change the query; any change asks
+// the server for page 1. The selects stay plain x-model bindings.
+let shownFilters = ''
+effect(() => {
+  const key = [range(), connection(), type(), status()].join('|')
+  if (key === shownFilters)
+    return
+  const first = shownFilters === ''
+  shownFilters = key
+  if (first)
+    return
+  currentPage.set(1)
+  void loadQueries()
+})
+
 onMount(() => {
   void loadQueries()
 })
@@ -165,16 +174,16 @@ onMount(() => {
       <template #value>{{ total() }}</template>
     </StatsCard>
     <StatsCard title="Reads" icon="i-hugeicons-search-01" iconBg="info">
-      <template #value>{{ selectCount() }}</template>
+      <template #value>{{ counts().reads }}</template>
     </StatsCard>
     <StatsCard title="Writes" icon="i-hugeicons-pencil-edit-02" iconBg="success">
-      <template #value>{{ writeCount() }}</template>
+      <template #value>{{ counts().writes }}</template>
     </StatsCard>
     <StatsCard title="Slow" icon="i-hugeicons-time-02" iconBg="warning">
-      <template #value>{{ slowCount() }}</template>
+      <template #value>{{ counts().slow }}</template>
     </StatsCard>
     <StatsCard title="Failed" icon="i-hugeicons-alert-02" iconBg="danger">
-      <template #value>{{ failedCount() }}</template>
+      <template #value>{{ counts().failed }}</template>
     </StatsCard>
     <StatsCard title="Average" icon="i-hugeicons-dashboard-speed-01" iconBg="neutral">
       <template #value>{{ averageDuration() }}</template>
@@ -190,14 +199,14 @@ onMount(() => {
         </div>
         <div class="flex gap-2 items-center">
           <label for="query-connection" class="sr-only">Connection</label>
-          <select id="query-connection" x-model="connection" class="px-3 py-2 text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="resetPage">
+          <select id="query-connection" x-model="connection" class="px-3 py-2 text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700">
             <option value="all">All connections</option>
             <template :for="item in connections()">
               <option :value="item">{{ item }}</option>
             </template>
           </select>
           <label for="query-type" class="sr-only">Query type</label>
-          <select id="query-type" x-model="type" class="px-3 py-2 text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="resetPage">
+          <select id="query-type" x-model="type" class="px-3 py-2 text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700">
             <option value="all">All types</option>
             <option value="SELECT">SELECT</option>
             <option value="INSERT">INSERT</option>
@@ -206,7 +215,7 @@ onMount(() => {
             <option value="OTHER">OTHER</option>
           </select>
           <label :if="mode() !== 'slow'" for="query-status" class="sr-only">Query status</label>
-          <select :if="mode() !== 'slow'" id="query-status" x-model="status" class="px-3 py-2 text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700" @change="resetPage">
+          <select :if="mode() !== 'slow'" id="query-status" x-model="status" class="px-3 py-2 text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border border-neutral-300 rounded-lg dark:border-neutral-700">
             <option value="all">All statuses</option>
             <option value="completed">Completed</option>
             <option value="slow">Slow</option>
@@ -218,13 +227,13 @@ onMount(() => {
 
     <div :if="loading()" aria-live="polite" class="p-10 text-center text-neutral-500 text-sm dark:text-neutral-400">Loading query logs</div>
     <div :if="loadError() && !loading()" role="alert" class="p-10 text-center text-red-600 text-sm dark:text-red-300">{{ loadError() }}</div>
-    <div :if="!loading() && !loadError() && filteredQueries().length === 0" class="p-10 text-center">
+    <div :if="!loading() && !loadError() && queries().length === 0" class="p-10 text-center">
       <span class="block mb-3 mx-auto h-8 w-8 text-neutral-400 i-hugeicons-database-02"></span>
       <p class="font-medium text-neutral-900 dark:text-white">{{ emptyTitle() }}</p>
       <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ data().enabled ? (mode() === 'slow' ? 'Queries appear here after they exceed the configured threshold.' : 'Queries will appear as the application executes them.') : 'Enable database.queryLogging in config/database.ts to record queries.' }}</p>
     </div>
 
-    <div :if="!loading() && !loadError() && filteredQueries().length > 0" class="overflow-x-auto">
+    <div :if="!loading() && !loadError() && queries().length > 0" class="overflow-x-auto">
       <table class="w-full">
         <thead class="bg-neutral-50 dark:bg-neutral-800/50">
           <tr>
@@ -237,7 +246,7 @@ onMount(() => {
           </tr>
         </thead>
         <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <template :for="query in visibleQueries()">
+          <template :for="query in queries">
             <tr>
               <td class="pl-5 pr-4 py-3.5 max-w-2xl">
                 <div class="flex gap-2 items-start">
@@ -262,11 +271,11 @@ onMount(() => {
       </table>
     </div>
 
-    <div :if="!loading() && !loadError() && filteredQueries().length > 0" class="px-5 py-4 border-neutral-200 border-t dark:border-neutral-700">
+    <div :if="!loading() && !loadError() && queries().length > 0" class="px-5 py-4 border-neutral-200 border-t dark:border-neutral-700">
       <Pagination
         :currentPage="currentPage"
         :totalPages="totalPages"
-        :totalItems="filteredQueries().length"
+        :totalItems="total()"
         :itemsPerPage="itemsPerPage"
         showTotalItems
         @page="setCurrentPage"

package/resources/components/Dashboard/UI/Table.stx

@@ -195,6 +195,21 @@ const paginated = useReactiveProp('paginated', false)
 const pageSize = useReactiveProp('pageSize', 25)
 const pageSizeOptions = useReactiveProp<number[]>('pageSizeOptions', [10, 25, 50, 100])
 const manualSort = useReactiveProp('manualSort', false)
+/**
+ * Server-side paging, for a list too large to send whole.
+ *
+ * With `manual-pagination` the rows are already one page: they are shown as
+ * given, `total` is the size of the whole result and `current-page` is the
+ * page they are, and the pager only emits `page-change` / `page-size-change`
+ * for the parent to fetch. `manual-search` does the same for the search box:
+ * it emits `search` and filters nothing, because filtering one page would
+ * only find what happens to be on it (stacksjs/stacks#3191). A parent that
+ * pages on the server also sorts there, with `manual-sort`.
+ */
+const manualPagination = useReactiveProp('manualPagination', false)
+const manualSearch = useReactiveProp('manualSearch', false)
+const total = useReactiveProp('total', 0)
+const currentPage = useReactiveProp('currentPage', 1)
 const columnToggle = useReactiveProp('columnToggle', false)
 const exportable = useReactiveProp('exportable', false)
 const exportFilename = useReactiveProp('exportFilename', 'table')
@@ -247,6 +262,11 @@ effect(() => {
   pageResetKey()
   page.set(1)
 })
+
+effect(() => {
+  if (manualPagination())
+    page.set(Math.max(1, Number(currentPage()) || 1))
+})
 const columnMenuOpen = state(false)
 const emit = defineEmits(['column-visibility-change', 'page-change', 'page-size-change', 'update:selectedKeys', 'selection-change', 'sort', 'filter-change', 'search', 'export', 'row-action'])
 
@@ -332,7 +352,7 @@ const searchableKeys = derived(() =>
 
 const searched = derived(() => {
   const term = query().trim().toLowerCase()
-  if (!term)
+  if (!term || manualSearch())
     return rows()
 
   const keys = searchableKeys()
@@ -434,7 +454,10 @@ const sorted = derived(() => {
 
 /* ------------------------------------------------------------- pagination */
 
-const pageCount = derived(() => (paginated() ? Math.max(1, Math.ceil(sorted().length / pageSize())) : 1))
+/** Rows in the whole result: the server's count when it pages, else what is held. */
+const totalRows = derived(() => (manualPagination() ? Math.max(0, Number(total()) || 0) : sorted().length))
+
+const pageCount = derived(() => (paginated() ? Math.max(1, Math.ceil(totalRows() / pageSize())) : 1))
 
 // A filter that shortens the list must not strand the viewer on a page that
 // no longer exists.
@@ -444,14 +467,14 @@ effect(() => {
 })
 
 const visibleRows = derived(() => {
-  if (!paginated())
+  if (!paginated() || manualPagination())
     return sorted()
   const start = (page() - 1) * pageSize()
   return sorted().slice(start, start + pageSize())
 })
 
-const rangeStart = derived(() => (sorted().length === 0 ? 0 : (page() - 1) * pageSize() + 1))
-const rangeEnd = derived(() => Math.min(page() * pageSize(), sorted().length))
+const rangeStart = derived(() => (totalRows() === 0 ? 0 : (page() - 1) * pageSize() + 1))
+const rangeEnd = derived(() => Math.min(page() * pageSize(), totalRows()))
 
 function goToPage(next: number): void {
   const target = Math.min(Math.max(1, next), pageCount())
@@ -963,11 +986,11 @@ function cellClass(column: DashboardTableColumn, index: number): string {
   </div>
 
   <div
-    :if="paginated() && sorted().length > 0"
+    :if="paginated() && totalRows() > 0"
     class="flex flex-wrap gap-3 items-center justify-between px-4 py-3 bg-neutral-50/50 dark:bg-neutral-800/25 border-neutral-200 border-t dark:border-neutral-700"
   >
     <div class="flex gap-3 items-center text-neutral-500 text-sm dark:text-neutral-400">
-      <span>Showing {{ rangeStart() }}-{{ rangeEnd() }} of {{ sorted().length }}</span>
+      <span>Showing {{ rangeStart() }}-{{ rangeEnd() }} of {{ totalRows() }}</span>
       <label class="flex gap-1.5 items-center">
         <span class="sr-only">Rows per page</span>
         <select

package/routes/dashboard-api.ts

@@ -224,6 +224,7 @@ route.group({ prefix: '/api/dashboard', apiResponse: true }, () => {
   guard(route.get('/content/overview', 'Actions/Dashboard/Content/ContentDashboardAction'))
   guard(route.get('/posts', 'Actions/Dashboard/Content/PostIndexAction'))
   guard(route.post('/posts', 'Actions/Dashboard/Content/PostStoreAction'))
+  guard(route.get('/posts/{id}', 'Actions/Dashboard/Content/PostShowAction'))
   guard(route.patch('/posts/{id}', 'Actions/Dashboard/Content/PostUpdateAction'))
   guard(route.delete('/posts/{id}', 'Actions/Dashboard/Content/PostDestroyAction'))