@stacksjs/defaults 0.75.263 → 0.75.267

package/resources/components/Dashboard/Data/DataRecords.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type {
   DashboardActivity,
@@ -53,10 +55,6 @@ const filteredRecords = derived(() => {
   return records().filter(record => searchableText(record).includes(query))
 })
 
-const activityRecords = derived(() => filteredRecords() as DashboardActivity[])
-const userRecords = derived(() => filteredRecords() as DashboardUser[])
-const teamRecords = derived(() => filteredRecords() as DashboardTeam[])
-const subscriberRecords = derived(() => filteredRecords() as DashboardSubscriber[])
 
 function searchableText(record: DataRecord): string {
   return Object.values(record)
@@ -69,27 +67,78 @@ function statValue(key: string): number {
   return Number(stats()[key] || 0)
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Never'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
-}
-
 function formatSubject(record: DashboardActivity): string {
   if (!record.subjectType)
     return 'Application'
   return record.subjectId > 0 ? `${record.subjectType} #${record.subjectId}` : record.subjectType
 }
 
-function statusClass(status: string): string {
+/** A status pill's colour: settled, ended, or still in progress. */
+function statusTone(status: string): string {
   if (['active', 'subscribed', 'completed'].includes(status))
-    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+    return 'positive'
   if (['bounced', 'inactive', 'unsubscribed'].includes(status))
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
-  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'negative'
+  return 'pending'
+}
+
+const TONES = {
+  positive: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+  negative: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+  pending: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+}
+
+function capitalize(value: string): string {
+  return value ? value.charAt(0).toUpperCase() + value.slice(1) : value
+}
+
+const recorded = (key: string, label: string) => ({ key, label, type: 'datetime' as const, align: 'right' as const, sortable: true, emptyText: 'Never', class: 'text-neutral-500 text-xs whitespace-nowrap dark:text-neutral-400' })
+const statusColumn = { key: 'statusTone', label: 'Status', type: 'badge' as const, sortable: true, badgeLabelKey: 'statusLabel', badgeClasses: TONES }
+
+const COLUMNS_BY_MODE = {
+  activity: [
+    { key: 'description', label: 'Activity', sortable: true, subtitleKey: 'type', class: 'font-medium text-neutral-900 dark:text-white' },
+    { key: 'subject', label: 'Subject', sortable: true, class: 'text-neutral-600 dark:text-neutral-300' },
+    { key: 'causer', label: 'Causer', sortable: true, class: 'text-neutral-600 dark:text-neutral-300' },
+    recorded('createdAt', 'Recorded'),
+  ],
+  users: [
+    { key: 'name', label: 'User', sortable: true, subtitleKey: 'email', class: 'font-medium text-neutral-900 dark:text-white' },
+    { key: 'verificationTone', label: 'Verification', type: 'badge' as const, sortable: true, badgeLabelKey: 'verificationLabel', badgeClasses: TONES },
+    recorded('updatedAt', 'Updated'),
+    recorded('createdAt', 'Registered'),
+  ],
+  teams: [
+    { key: 'name', label: 'Team', sortable: true, slotted: true },
+    { key: 'memberCount', label: 'Members', type: 'number' as const, align: 'right' as const, sortable: true, class: 'font-mono text-neutral-700 dark:text-neutral-300' },
+    statusColumn,
+    recorded('createdAt', 'Created'),
+  ],
+  subscribers: [
+    { key: 'email', label: 'Subscriber', sortable: true, class: 'font-medium text-neutral-900 dark:text-white' },
+    { key: 'sourceLabel', label: 'Source', sortable: true, class: 'text-neutral-600 dark:text-neutral-300' },
+    statusColumn,
+    recorded('createdAt', 'Subscribed'),
+  ],
 }
 
+const recordColumns = derived(() => COLUMNS_BY_MODE[mode()] ?? COLUMNS_BY_MODE.activity)
+
+const recordRows = derived(() => filteredRecords().map((record) => {
+  const row = record as Record<string, any>
+  return {
+    ...row,
+    subject: mode() === 'activity' ? formatSubject(record as DashboardActivity) : undefined,
+    verificationTone: row.emailVerifiedAt ? 'positive' : 'pending',
+    verificationLabel: row.emailVerifiedAt ? 'Verified' : 'Unverified',
+    statusTone: statusTone(String(row.status ?? '')),
+    statusLabel: capitalize(String(row.status ?? '')),
+    sourceLabel: capitalize(String(row.source ?? '')),
+    descriptionLabel: row.description || 'No description',
+    modelLink: `/models/team?q=${encodeURIComponent(String(row.name ?? ''))}`,
+  }
+}))
+
 async function loadRecords(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -202,80 +251,28 @@ onMount(() => {
 
     <EmptyState :if="!loading() && !loadError() && filteredRecords().length === 0" :icon="page().icon" :title="search() ? 'No matching records' : page().empty" :description="search() ? 'Try a different search term.' : 'New records will appear here automatically.'" />
 
-    <div :if="!loading() && filteredRecords().length > 0" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
-          <tr :if="mode() === 'activity'">
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Activity</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Subject</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Causer</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Recorded</th>
-          </tr>
-          <tr :if="mode() === 'users'">
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">User</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Verification</th>
-            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Updated</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Registered</th>
-          </tr>
-          <tr :if="mode() === 'teams'">
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Team</th>
-            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Members</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Created</th>
-          </tr>
-          <tr :if="mode() === 'subscribers'">
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Subscriber</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Source</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Subscribed</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <template :if="mode() === 'activity'" :for="record in activityRecords()">
-            <tr>
-              <td class="pl-5 pr-4 py-3.5">
-                <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ record.description }}</p>
-                <p class="mt-0.5 font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ record.type }}</p>
-              </td>
-              <td class="px-4 py-3.5 text-neutral-600 text-sm dark:text-neutral-300">{{ formatSubject(record) }}</td>
-              <td class="px-4 py-3.5 text-neutral-600 text-sm dark:text-neutral-300">{{ record.causer }}</td>
-              <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            </tr>
-          </template>
-          <template :if="mode() === 'users'" :for="record in userRecords()">
-            <tr>
-              <td class="pl-5 pr-4 py-3.5">
-                <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ record.name }}</p>
-                <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">{{ record.email }}</p>
-              </td>
-              <td class="px-4 py-3.5">
-                <span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + (record.emailVerifiedAt ? statusClass('active') : statusClass('pending'))">{{ record.emailVerifiedAt ? 'Verified' : 'Unverified' }}</span>
-              </td>
-              <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.updatedAt) }}</td>
-              <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            </tr>
-          </template>
-          <template :if="mode() === 'teams'" :for="record in teamRecords()">
-            <tr>
-              <td class="pl-5 pr-4 py-3.5">
-                <StxLink :to="'/models/team?q=' + encodeURIComponent(record.name)" class="font-medium text-neutral-900 text-sm dark:text-white hover:text-blue-600 dark:hover:text-blue-400">{{ record.name }}</StxLink>
-                <p class="mt-0.5 max-w-xl text-neutral-500 text-xs dark:text-neutral-400">{{ record.description || 'No description' }}</p>
-              </td>
-              <td class="px-4 py-3.5 font-mono text-neutral-700 text-right text-sm dark:text-neutral-300">{{ record.memberCount }}</td>
-              <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs capitalize rounded ' + statusClass(record.status)">{{ record.status }}</span></td>
-              <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            </tr>
-          </template>
-          <template :if="mode() === 'subscribers'" :for="record in subscriberRecords()">
-            <tr>
-              <td class="pl-5 pr-4 py-3.5 font-medium text-neutral-900 text-sm dark:text-white">{{ record.email }}</td>
-              <td class="px-4 py-3.5 capitalize text-neutral-600 text-sm dark:text-neutral-300">{{ record.source }}</td>
-              <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs capitalize rounded ' + statusClass(record.status)">{{ record.status }}</span></td>
-              <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            </tr>
+    {{--
+      Four column sets: the mode decides which. The page keeps its search,
+      loading and empty states; the table brings sorting and paging. Only a
+      team's name is slotted, for the link to its model page.
+    --}}
+    <div :if="!loading() && filteredRecords().length > 0">
+      {{--
+        Two tables rather than one with a slot: Table hands every cell to a
+        given cell slot when no column is slotted, so the slot can only be
+        passed in the mode that has a slotted column.
+      --}}
+      <template :if="mode() === 'teams'">
+        <Table :columns="recordColumns()" :data="recordRows()" paginated :page-size="25">
+          <template #cell="{ row }">
+            <StxLink :to="row.modelLink" class="font-medium text-neutral-900 text-sm dark:text-white hover:text-blue-600 dark:hover:text-blue-400">{{ row.name }}</StxLink>
+            <p class="mt-0.5 max-w-xl text-neutral-500 text-xs dark:text-neutral-400" x-text="row.descriptionLabel"></p>
           </template>
-        </tbody>
-      </table>
+        </Table>
+      </template>
+      <template :else>
+        <Table :columns="recordColumns()" :data="recordRows()" paginated :page-size="25" />
+      </template>
     </div>
   </Card>
 </div>

package/resources/components/Dashboard/Deployments/DeploymentTable.stx

@@ -1,22 +1,11 @@
+@import('../UI/Table')
+
 <script client>
 import type { DeploymentRecord } from '../../../../functions/deployments'
 
 const deployments = useReactiveProp('deployments', [])
 const loading = useReactiveProp('loading', false)
 
-function rows(): DeploymentRecord[] {
-  return deployments() as DeploymentRecord[]
-}
-
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
 function formatDuration(value: number | null): string {
   if (value === null)
     return '-'
@@ -27,61 +16,57 @@ function formatDuration(value: number | null): string {
   return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`
 }
 
-function statusClass(status: string): string {
+function statusTone(status: string): string {
   if (['success', 'successful', 'completed', 'ready'].includes(status))
-    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
+    return 'succeeded'
   if (['failed', 'error', 'cancelled'].includes(status))
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+    return 'failed'
   if (['pending', 'queued', 'running', 'deploying'].includes(status))
-    return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
-  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
+    return 'running'
+  return 'other'
 }
 
-function statusLabel(status: string): string {
-  if (!status)
-    return 'Unknown'
-  return status.charAt(0).toUpperCase() + status.slice(1)
-}
+const COLUMNS = [
+  { key: 'commitLabel', label: 'Commit', sortable: true, subtitleKey: 'commitDetail', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'environment', label: 'Environment', sortable: true, emptyText: 'Not recorded' },
+  {
+    key: 'statusTone',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'statusLabel',
+    badgeClasses: {
+      succeeded: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+      failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      running: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'durationLabel', label: 'Duration', align: 'right' as const, searchable: false, class: 'font-mono' },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, align: 'right' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
+
+const rows = derived(() => (deployments() as DeploymentRecord[]).map(deployment => ({
+  ...deployment,
+  commitLabel: deployment.commitMessage || 'No commit message',
+  commitDetail: `${deployment.commitHash || 'No commit hash'} · ${deployment.branch || 'No branch'}`,
+  statusTone: statusTone(deployment.status),
+  statusLabel: deployment.status ? deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1) : 'Unknown',
+  durationLabel: formatDuration(deployment.duration),
+})))
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <div :if="loading()" class="px-5 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">Loading deployments</div>
-  <div :if="!loading() && rows().length === 0" class="px-5 py-12 text-center">
-    <div class="mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-rocket-01"></div>
-    <p class="font-semibold text-gray-900 dark:text-white">No deployment records found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Records appear when a deployment integration writes to the Deployment model.</p>
-  </div>
-  <div :if="rows().length > 0" class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-700/50">
-        <tr>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Commit</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Environment</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Duration</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Created</th>
-          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="deployment in rows()">
-          <tr>
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ deployment.commitMessage || 'No commit message' }}</p>
-              <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ deployment.commitHash || 'No commit hash' }} · {{ deployment.branch || 'No branch' }}</p>
-            </td>
-            <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ deployment.environment || 'Not recorded' }}</td>
-            <td class="px-4 py-3">
-              <span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-md ' + statusClass(deployment.status)">{{ statusLabel(deployment.status) }}</span>
-            </td>
-            <td class="px-4 py-3 font-mono text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatDuration(deployment.duration) }}</td>
-            <td class="px-4 py-3 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(deployment.createdAt) }}</td>
-            <td class="px-4 py-3 text-right">
-              <StxLink :to="'/deployments/' + deployment.id" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">View</StxLink>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  paginated
+  :page-size="25"
+  empty-title="No deployment records found"
+  empty-description="Records appear when a deployment integration writes to the Deployment model."
+>
+  <template #actions="{ row }">
+    <div class="text-right">
+      <StxLink :to="'/deployments/' + row.id" class="font-medium text-blue-600 text-sm dark:text-blue-400 hover:text-blue-500">View</StxLink>
+    </div>
+  </template>
+</Table>

package/resources/components/Dashboard/Infrastructure/DnsDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type {
   DashboardDnsDomain,
@@ -61,10 +63,40 @@ function typeColor(type: string): string {
   return 'bg-rose-500'
 }
 
+const TYPE_BADGE = 'font-mono font-semibold text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+
+const COLUMNS = [
+  {
+    key: 'type',
+    label: 'Type',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { A: TYPE_BADGE, AAAA: TYPE_BADGE, CNAME: TYPE_BADGE, MX: TYPE_BADGE, TXT: TYPE_BADGE },
+  },
+  { key: 'name', label: 'Name', sortable: true, class: 'font-mono text-neutral-900 whitespace-nowrap dark:text-white' },
+  { key: 'value', label: 'Value', sortable: true, emptyText: 'Not set', class: 'max-w-md font-mono truncate' },
+  { key: 'ttlLabel', label: 'TTL', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'inspect', label: 'Inspect', icon: 'i-hugeicons-view' },
+]
+
+const recordRows = derived(() => filteredRecords().map((record, index) => ({
+  ...record,
+  rowId: `${record.type}:${record.name}:${index}`,
+  ttlLabel: ttlLabel(record),
+})))
+
 function inspectRecord(record: DashboardDnsRecord): void {
   selectedRecord.set(record)
 }
 
+function handleRowAction(payload: { action: string, row: DashboardDnsRecord }): void {
+  if (payload.action === 'inspect')
+    inspectRecord(payload.row)
+}
+
 function closeRecord(): void {
   selectedRecord.set(null)
 }
@@ -202,34 +234,20 @@ onMount(() => {
       </div>
     </div>
 
-    <div :if="loading()" class="flex items-center justify-center mt-4 py-16 text-neutral-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-      Loading DNS configuration...
-    </div>
-
-    <EmptyState :if="!loading() && !loadError() && filteredRecords().length === 0" icon="i-hugeicons-internet" :title="records().length ? 'No matching DNS records' : 'No DNS records configured'" :description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'" />
-
-    <div :if="!loading() && filteredRecords().length > 0" class="overflow-x-auto mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-700">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/70">
-          <tr>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Type</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Name</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Value</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">TTL</th>
-            <th scope="col" class="px-5 py-3"><span class="sr-only">Actions</span></th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-800">
-          <tr :for="record in filteredRecords()" class="hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
-            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 font-mono font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ record.type }}</span></td>
-            <td class="px-5 py-4 font-mono text-neutral-900 text-sm whitespace-nowrap dark:text-white">{{ record.name }}</td>
-            <td class="px-5 py-4 max-w-md font-mono text-neutral-500 text-sm truncate dark:text-neutral-400">{{ record.value || 'Not set' }}</td>
-            <td class="px-5 py-4 text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ ttlLabel(record) }}</td>
-            <td class="px-5 py-4 text-right"><Button variant="ghost" size="sm" @click="inspectRecord(record)">Inspect</Button></td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <Table
+        :columns="COLUMNS"
+        :data="recordRows()"
+        :loading="loading()"
+        :row-actions="ROW_ACTIONS"
+        action-label-key="name"
+        row-key="rowId"
+        paginated
+        :page-size="25"
+        :empty-title="records().length ? 'No matching DNS records' : 'No DNS records configured'"
+        :empty-description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'"
+        @row-action="handleRowAction"
+      />
     </div>
   </section>
 

package/resources/components/Dashboard/Operations/RecoveryPointTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { RecoveryPoint, RecoveryPolicy } from '../../../../functions/operations'
 
@@ -6,17 +8,8 @@ const policyItems = useReactiveProp('policies', [])
 const busyId = useReactiveProp('busyId', '')
 const emit = defineEmits()
 
-function points(): RecoveryPoint[] { return pointItems() as RecoveryPoint[] }
-function policies(): RecoveryPolicy[] { return policyItems() as RecoveryPolicy[] }
-
 function policyName(id?: string): string {
-  return policies().find(policy => policy.id === id)?.name || 'Manual recovery point'
-}
-
-function formatDate(value?: string): string {
-  if (!value) return 'Not recorded'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+  return (policyItems() as RecoveryPolicy[]).find(policy => policy.id === id)?.name || 'Manual recovery point'
 }
 
 function formatBytes(value: number): string {
@@ -26,57 +19,75 @@ function formatBytes(value: number): string {
   return `${(value / 1024 ** index).toFixed(index === 0 ? 0 : 1)} ${units[index]}`
 }
 
-function verificationVariant(state: RecoveryPoint['verificationState']): 'default' | 'primary' | 'success' | 'warning' | 'danger' {
-  if (state === 'verified') return 'success'
-  if (state === 'corrupt' || state === 'failed') return 'danger'
-  if (state === 'verifying') return 'primary'
-  return 'warning'
+/** The pill's colour: verified, failed in either way, in progress, or not yet. */
+function verificationTone(state: RecoveryPoint['verificationState']): string {
+  if (state === 'verified') return 'verified'
+  if (state === 'corrupt' || state === 'failed') return 'failed'
+  if (state === 'verifying') return 'verifying'
+  return 'unverified'
 }
+
+/** Protection is slotted, for its two independent badges. */
+const COLUMNS = [
+  { key: 'policyName', label: 'Recovery point', sortable: true, subtitleKey: 'detail', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'pointInTime', label: 'Created', type: 'datetime' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+  {
+    key: 'verificationTone',
+    label: 'Verification',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'verificationState',
+    badgeClasses: {
+      verified: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40',
+      failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      verifying: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+      unverified: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'protection', label: 'Protection', slotted: true, searchable: false },
+]
+
+const rows = derived(() => (pointItems() as RecoveryPoint[]).map(point => ({
+  ...point,
+  policyName: policyName(point.policyId),
+  detail: `${point.id} · ${point.kind} · ${formatBytes(point.sizeBytes)}`,
+  verificationTone: verificationTone(point.verificationState),
+  protection: [point.pinned ? 'Pinned' : '', point.held ? 'Held' : ''].filter(Boolean).join(', ') || 'Retention policy',
+})))
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
-  <div :if="points().length === 0" class="px-5 py-14 text-center">
-    <span aria-hidden="true" class="block mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-database-restore"></span>
-    <p class="font-semibold text-gray-900 dark:text-white">No recovery points yet</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create and run a recovery policy to produce the first independently verifiable point.</p>
-  </div>
-  <div :if="points().length > 0" class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-700/50">
-        <tr>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Recovery point</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Created</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Verification</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Protection</th>
-          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="point in points()">
-          <tr>
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ policyName(point.policyId) }}</p>
-              <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ point.id }} · {{ point.kind }} · {{ formatBytes(point.sizeBytes) }}</p>
-            </td>
-            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(point.pointInTime) }}</td>
-            <td class="px-4 py-3"><Badge :variant="verificationVariant(point.verificationState)" dot>{{ point.verificationState }}</Badge></td>
-            <td class="px-4 py-3">
-              <div class="flex flex-wrap gap-1.5">
-                <Badge :if="point.pinned" variant="primary">Pinned</Badge>
-                <Badge :if="point.held" variant="warning">Held</Badge>
-                <span :if="!point.pinned && !point.held" class="text-gray-500 text-xs dark:text-neutral-400">Retention policy</span>
-              </div>
-            </td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <div class="inline-flex gap-2 items-center">
-                <Button size="sm" :disabled="busyId() !== '' || point.status !== 'available'" :loading="busyId() === point.id + ':verify'" @click="emit('verify', point.id)">Verify</Button>
-                <Button size="sm" variant="outline" :disabled="busyId() !== '' || point.status !== 'available' || point.verificationState !== 'verified'" @click="emit('restore', point)">Restore</Button>
-                <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === point.id + ':protect'" @click="emit('protect', { id: point.id, pinned: !point.pinned })">{{ point.pinned ? 'Unpin' : 'Pin' }}</Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  The actions are a slot: text buttons whose disabled and loading state
+  depends on the row and on which request is in flight.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  paginated
+  :page-size="25"
+  empty-title="No recovery points yet"
+  empty-description="Create and run a recovery policy to produce the first independently verifiable point."
+>
+  <template #cell="{ row }">
+    <div class="flex flex-wrap gap-1.5">
+      {{-- A directive on a component inside a slot is not evaluated, so each
+           conditional component sits in a template that carries it. --}}
+      <template :if="row.pinned"><Badge variant="primary">Pinned</Badge></template>
+      <template :if="row.held"><Badge variant="warning">Held</Badge></template>
+      <span :if="!row.pinned && !row.held" class="text-gray-500 text-xs dark:text-neutral-400">Retention policy</span>
+    </div>
+  </template>
+
+  <template #actions="{ row }">
+    <div class="inline-flex gap-2 items-center justify-end w-full whitespace-nowrap">
+      <Button size="sm" :disabled="busyId() !== '' || row.status !== 'available'" :loading="busyId() === row.id + ':verify'" @click="emit('verify', row.id)">Verify</Button>
+      <Button size="sm" variant="outline" :disabled="busyId() !== '' || row.status !== 'available' || row.verificationState !== 'verified'" @click="emit('restore', row)">Restore</Button>
+      <template :if="row.pinned">
+        <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === row.id + ':protect'" @click="emit('protect', { id: row.id, pinned: false })">Unpin</Button>
+      </template>
+      <template :else>
+        <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === row.id + ':protect'" @click="emit('protect', { id: row.id, pinned: true })">Pin</Button>
+      </template>
+    </div>
+  </template>
+</Table>