@stacksjs/defaults 0.70.229 → 0.70.231

package/views/dashboard/models/[model].stx

@@ -1,575 +1,7 @@
 @extends('layouts/default')
 
 @section('content')
-<script client>
-// The page every model gets for free (stacksjs/stacks#1838): a browsable,
-// sortable, filterable table over any model the app defines, with no
-// per-model code.
-//
-// All querying is server-side (`GET /api/dashboard/models/{slug}`), so this
-// works the same on a table with 10 rows and one with a million. Rows and
-// writes go through the model, so scopes, casts and observers apply.
-import { useNavigation } from '../composables/useNavigation'
-import { dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
-import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+@title('Dashboard - Model Records')
 
-interface ColumnMeta {
-  name: string
-  label: string
-  type: 'number' | 'boolean' | 'date' | 'json' | 'text'
-}
-
-interface ResponseShape {
-  modelName: string
-  tableName: string
-  rows: Array<Record<string, unknown>>
-  displayColumns: string[]
-  columnMeta: ColumnMeta[]
-  totalCount: number
-  page: number
-  perPage: number
-  lastPage: number
-  sort: string
-  dir: 'asc' | 'desc'
-  writable: boolean
-  source: 'orm' | 'sqlite-fallback'
-  error: string | null
-}
-
-const PER_PAGE_OPTIONS = [25, 50, 100, 200]
-
-const modelName = state('')
-const tableName = state('')
-const rows = state<Array<Record<string, unknown>>>([])
-const columnMeta = state<ColumnMeta[]>([])
-const totalCount = state(0)
-const page = state(1)
-const perPage = state(25)
-const lastPage = state(1)
-const sort = state('')
-const dir = state<'asc' | 'desc'>('desc')
-const search = state('')
-const filters = state<Record<string, string>>({})
-const writable = state(false)
-const source = state<'orm' | 'sqlite-fallback'>('orm')
-const error = state<string | null>(null)
-const loading = state(true)
-const showFilters = state(false)
-
-// Row being edited, plus the working copy of its values. `null` closes the
-// editor; the copy is kept separate so cancelling leaves the table row as
-// it was and a failed save does not desync the two.
-const editing = state<Record<string, unknown> | null>(null)
-const editValues = state<Record<string, string>>({})
-const saving = state(false)
-const confirmingDelete = state<Record<string, unknown> | null>(null)
-
-const slug = derived(() => useNavigation().urlSegment(-1) || '')
-
-const sourceLabel = derived(() => source() === 'orm' ? 'via Stacks ORM' : 'raw SQLite, read-only')
-
-const recordLabel = derived(() => {
-  const n = totalCount()
-  return `${n.toLocaleString()} ${n === 1 ? 'record' : 'records'}`
-})
-
-const rangeLabel = derived(() => {
-  if (totalCount() === 0) return 'No records'
-  const from = (page() - 1) * perPage() + 1
-  const to = Math.min(page() * perPage(), totalCount())
-  return `${from.toLocaleString()} to ${to.toLocaleString()} of ${totalCount().toLocaleString()}`
-})
-
-const activeFilterCount = derived(() => Object.values(filters()).filter(v => v !== '').length)
-
-const filterLabel = derived(() => {
-  const n = activeFilterCount()
-  return n === 0 ? 'Filter' : `Filter (${n})`
-})
-
-const isEmpty = derived(() => !loading() && !error() && rows().length === 0)
-
-// Fields for the edit sheet, carrying their starting value. Derived from the
-// row being edited rather than from `editValues`, so the list changes exactly
-// once per open: deriving it from the working copy instead would rebuild
-// every input on each keystroke and steal focus mid-word.
-const editFields = derived(() => {
-  const row = editing()
-  if (!row) return []
-  return columnMeta().map(column => ({
-    name: column.name,
-    label: column.label,
-    value: row[column.name] === null || row[column.name] === undefined ? '' : String(row[column.name]),
-    // The primary key, the uuid and the timestamps are shown for context but
-    // the API refuses to write them, so the input says so rather than
-    // accepting an edit that will be silently dropped.
-    readonly: column.name === 'id' || column.name === 'uuid' || column.name.endsWith('_at'),
-  }))
-})
-
-// Skeleton rows while a query is in flight. Matching the real row count
-// keeps the table from collapsing and jumping back on every keystroke.
-const skeletonRows = derived(() => Array.from({ length: Math.min(8, Math.max(3, rows().length || 6)) }, (_, i) => i))
-
-function formatDate(value: unknown): string {
-  const date = new Date(value as string | number)
-  if (Number.isNaN(date.getTime())) return String(value)
-  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
-}
-
-function formatCell(value: unknown, type: ColumnMeta['type']): string {
-  if (value === null || value === undefined || value === '') return '-'
-  if (type === 'date') return formatDate(value)
-  if (type === 'boolean') return (value === true || value === 1 || value === '1') ? 'Yes' : 'No'
-  if (type === 'number' && typeof value === 'number') return value.toLocaleString()
-  if (typeof value === 'object') {
-    try { return JSON.stringify(value).slice(0, 90) }
-    catch { return '[object]' }
-  }
-  const text = String(value)
-  return text.length > 120 ? `${text.slice(0, 120)}…` : text
-}
-
-function cellValue(row: Record<string, unknown>, column: ColumnMeta): string {
-  return formatCell(row[column.name], column.type)
-}
-
-// Returned as COMPLETE class strings and applied with `:class`, because a
-// `{{ }}` placeholder inside a class attribute is not reactively bound.
-function cellClass(column: ColumnMeta): string {
-  const align = column.type === 'number' ? 'text-right tabular-nums' : 'text-left'
-  const mono = column.type === 'json' ? ' font-mono text-[12px]' : ''
-  return `px-3 py-2 max-w-xs truncate whitespace-nowrap text-[13px] text-neutral-800 dark:text-neutral-200 ${align}${mono}`
-}
-
-function headerClass(column: ColumnMeta): string {
-  const align = column.type === 'number' ? 'justify-end' : 'justify-start'
-  return `flex items-center gap-1 w-full ${align} font-medium text-[11px] uppercase tracking-wide text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors`
-}
-
-function sortIconClass(column: ColumnMeta): string {
-  if (sort() !== column.name) return 'h-3 w-3 opacity-0 group-hover:opacity-40 i-hugeicons-arrow-up-down'
-  return dir() === 'asc' ? 'h-3 w-3 i-hugeicons-arrow-up-01' : 'h-3 w-3 i-hugeicons-arrow-down-01'
-}
-
-async function load() {
-  if (!slug()) {
-    error.set('Missing model slug in the URL.')
-    loading.set(false)
-    return
-  }
-  loading.set(true)
-  error.set(null)
-  try {
-    const params = new URLSearchParams({
-      page: String(page()),
-      per_page: String(perPage()),
-      dir: dir(),
-    })
-    if (sort()) params.set('sort', sort())
-    if (search()) params.set('q', search())
-    const active = Object.fromEntries(Object.entries(filters()).filter(([, v]) => v !== ''))
-    if (Object.keys(active).length > 0) params.set('filters', JSON.stringify(active))
-
-    const data = await dashboardApi<ResponseShape>(`/api/dashboard/models/${encodeURIComponent(slug())}?${params}`)
-
-    modelName.set(data.modelName ?? '')
-    tableName.set(data.tableName ?? '')
-    rows.set(data.rows ?? [])
-    // Only reassign when the column set actually changes. It is the same for
-    // every page and every sort of a given model, and re-rendering the
-    // header `:for` on each query both wastes work and trips a reconciler
-    // bug that leaves the columns rotated out of order.
-    const nextColumns = data.columnMeta ?? []
-    const sameColumns = nextColumns.length === columnMeta().length
-      && nextColumns.every((c, i) => c.name === columnMeta()[i]?.name)
-    if (!sameColumns) columnMeta.set(nextColumns)
-    totalCount.set(data.totalCount ?? 0)
-    lastPage.set(data.lastPage ?? 1)
-    sort.set(data.sort ?? '')
-    writable.set(data.writable === true)
-    source.set(data.source ?? 'orm')
-    error.set(data.error ?? null)
-  }
-  catch (e) {
-    error.set(e instanceof Error ? e.message : String(e))
-  }
-  finally {
-    loading.set(false)
-  }
-}
-
-function toggleSort(column: ColumnMeta) {
-  if (sort() === column.name) dir.set(dir() === 'asc' ? 'desc' : 'asc')
-  else { sort.set(column.name); dir.set('asc') }
-  page.set(1)
-  void load()
-}
-
-// Debounced so a query is not fired per keystroke. The timer id is module
-// scope rather than signal state: it is bookkeeping, not something the
-// template renders.
-let searchTimer: ReturnType<typeof setTimeout> | undefined
-
-function onSearchInput(event: Event) {
-  search.set((event.target as HTMLInputElement).value)
-  clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    page.set(1)
-    void load()
-  }, 250)
-}
-
-function onFilterInput(column: string, event: Event) {
-  filters.set({ ...filters(), [column]: (event.target as HTMLInputElement).value })
-  clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => {
-    page.set(1)
-    void load()
-  }, 250)
-}
-
-function clearFilters() {
-  filters.set({})
-  search.set('')
-  page.set(1)
-  void load()
-}
-
-function goToPage(next: number) {
-  const target = Math.min(Math.max(1, next), lastPage())
-  if (target === page()) return
-  page.set(target)
-  void load()
-}
-
-function onPerPageChange(event: Event) {
-  perPage.set(Number((event.target as HTMLSelectElement).value) || 25)
-  page.set(1)
-  void load()
-}
-
-function startEdit(row: Record<string, unknown>) {
-  const values: Record<string, string> = {}
-  for (const column of columnMeta()) {
-    const raw = row[column.name]
-    values[column.name] = raw === null || raw === undefined ? '' : String(raw)
-  }
-  editValues.set(values)
-  editing.set(row)
-}
-
-function onEditInput(column: string, event: Event) {
-  editValues.set({ ...editValues(), [column]: (event.target as HTMLInputElement).value })
-}
-
-async function saveEdit() {
-  const row = editing()
-  if (!row) return
-  // Send only what actually changed, so a save never rewrites columns the
-  // editor merely displayed.
-  const fields: Record<string, unknown> = {}
-  for (const [column, value] of Object.entries(editValues())) {
-    const original = row[column]
-    const originalText = original === null || original === undefined ? '' : String(original)
-    if (value !== originalText) fields[column] = value === '' ? null : value
-  }
-  if (Object.keys(fields).length === 0) {
-    editing.set(null)
-    return
-  }
-
-  saving.set(true)
-  try {
-    const result = await dashboardApi<{ ok: boolean, error?: string }>(
-      `/api/dashboard/models/${encodeURIComponent(slug())}/${row.id}`,
-      { method: 'PATCH', body: { fields } },
-    )
-    if (!result?.ok) throw new Error(result?.error || 'The update was rejected.')
-    pushToast('success', `${modelName()} ${row.id} updated`)
-    editing.set(null)
-    await load()
-  }
-  catch (e) {
-    pushToast('error', 'Could not save', { detail: e instanceof Error ? e.message : String(e) })
-  }
-  finally {
-    saving.set(false)
-  }
-}
-
-async function confirmDelete() {
-  const row = confirmingDelete()
-  if (!row) return
-  saving.set(true)
-  try {
-    const result = await dashboardApi<{ ok: boolean, error?: string }>(
-      `/api/dashboard/models/${encodeURIComponent(slug())}/${row.id}`,
-      { method: 'DELETE' },
-    )
-    if (!result?.ok) throw new Error(result?.error || 'The delete was rejected.')
-    pushToast('success', `${modelName()} ${row.id} deleted`)
-    confirmingDelete.set(null)
-    // Deleting the last row of the final page would strand the viewer on an
-    // empty page, so step back one.
-    if (rows().length === 1 && page() > 1) page.set(page() - 1)
-    await load()
-  }
-  catch (e) {
-    pushToast('error', 'Could not delete', { detail: e instanceof Error ? e.message : String(e) })
-  }
-  finally {
-    saving.set(false)
-  }
-}
-
-void load()
-</script>
-
-<div class="p-6 space-y-4">
-
-  <!-- Written out rather than using <PageHeader>: that component renders on
-      the server, so a `{{ }}` placeholder in it is baked at render time and
-      would stay empty for a title that only exists once the fetch resolves.
-      `:text` bindings here stay reactive. -->
-  <div class="flex flex-wrap gap-4 items-start justify-between">
-    <div class="min-w-0">
-      <h1 class="font-semibold text-2xl text-neutral-900 truncate dark:text-white" :text="modelName()"></h1>
-      <p class="mt-1 text-[13px] text-neutral-500 dark:text-neutral-400" :text="recordLabel() + ' · ' + tableName() + ' · ' + sourceLabel()"></p>
-    </div>
-    <button
-      type="button"
-      @click="showFilters.set(!showFilters())"
-      class="inline-flex gap-1.5 items-center px-3 h-8 font-medium text-[13px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 hover:bg-neutral-50 dark:hover:bg-white/15 transition-colors"
-    >
-      <span class="h-4 w-4 i-hugeicons-filter"></span>
-      <span :text="filterLabel()"></span>
-    </button>
-  </div>
-
-  <!-- Search + page size -->
-  <div class="flex flex-wrap gap-3 items-center">
-    <div class="relative flex-1 max-w-sm">
-      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-        <div class="h-4 w-4 text-neutral-400 dark:text-neutral-500 i-hugeicons-search-01"></div>
-      </div>
-      <input
-        type="search"
-        :value="search()"
-        @input="onSearchInput($event)"
-        :placeholder="'Search ' + (modelName() || 'records')"
-        class="block pl-9 pr-3 py-1.5 w-full text-[13px] text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 transition-all"
-      >
-    </div>
-
-    <div :if="activeFilterCount() > 0 || search()" class="flex items-center">
-      <button
-        type="button"
-        @click="clearFilters()"
-        class="px-2.5 h-8 text-[13px] text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors"
-      >
-        Clear
-      </button>
-    </div>
-
-    <div class="flex gap-2 items-center ml-auto text-[12px] text-neutral-500 dark:text-neutral-400">
-      <span>Show</span>
-      <select
-        @change="onPerPageChange($event)"
-        class="px-2 h-8 text-[12px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-500/50"
-      >
-        <template :for="option in PER_PAGE_OPTIONS">
-          <option :value="option" :selected="option === perPage()">{{ option }}</option>
-        </template>
-      </select>
-    </div>
-  </div>
-
-  <div :if="error()" class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 rounded-xl dark:border-red-800">
-    <div class="flex gap-3 items-start">
-      <span class="flex-shrink-0 mt-0.5 h-5 w-5 text-red-500 i-hugeicons-alert-02"></span>
-      <div>
-        <h3 class="font-medium text-[13px] text-red-800 dark:text-red-200">Couldn't load <span :text="modelName()"></span></h3>
-        <p class="mt-1 text-[13px] text-red-600 dark:text-red-300" :text="error()"></p>
-        <p class="mt-2 text-[12px] text-red-500 dark:text-red-400">
-          Looked for an ORM model named <code :text="modelName()"></code> and a table named <code :text="tableName()"></code>.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div :if="isEmpty()" class="p-12 text-center bg-white dark:bg-neutral-900 border border-black/8 rounded-xl dark:border-white/10">
-    <span class="mx-auto h-10 w-10 text-neutral-300 dark:text-neutral-600 i-hugeicons-database-01"></span>
-    <h3 class="mt-3 font-medium text-[15px] text-neutral-900 dark:text-white">
-      <span :if="activeFilterCount() > 0 || search()">Nothing matches those filters</span>
-      <span :if="activeFilterCount() === 0 && !search()">No <span :text="modelName()"></span> records yet</span>
-    </h3>
-    <p class="mt-1.5 text-[13px] text-neutral-500 dark:text-neutral-400">
-      <span :if="activeFilterCount() > 0 || search()">Try a broader search, or clear the filters.</span>
-      <span :if="activeFilterCount() === 0 && !search()">Seed some with <code>./buddy seed</code>.</span>
-    </p>
-  </div>
-
-  <div :if="!error() && (rows().length > 0 || loading())" class="overflow-hidden bg-white dark:bg-neutral-900 border border-black/8 rounded-xl dark:border-white/10">
-    <div class="overflow-x-auto">
-      <table class="min-w-full">
-        <thead class="bg-neutral-50 dark:bg-white/5">
-          <tr>
-            <template :for="column in columnMeta()">
-              <th scope="col" class="group px-3 py-2 whitespace-nowrap">
-                <button type="button" @click="toggleSort(column)" :class="headerClass(column)">
-                  <span>{{ column.label }}</span>
-                  <span :class="sortIconClass(column)"></span>
-                </button>
-              </th>
-            </template>
-            <th :if="writable()" scope="col" class="px-3 py-2 w-24 font-medium text-[11px] text-neutral-500 text-right uppercase tracking-wide dark:text-neutral-400">Actions</th>
-          </tr>
-
-          <!-- Per-column filter row -->
-          <tr :if="showFilters()" class="bg-white dark:bg-neutral-900">
-            <template :for="column in columnMeta()">
-              <th scope="col" class="px-2 pb-2">
-                <input
-                  type="text"
-                  :value="filters()[column.name] || ''"
-                  @input="onFilterInput(column.name, $event)"
-                  :placeholder="column.label"
-                  class="block px-2 py-1 w-full font-normal text-[12px] text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-400 focus:outline-none"
-                >
-              </th>
-            </template>
-            <th :if="writable()"></th>
-          </tr>
-        </thead>
-
-        <!-- Loading skeleton, shaped like the real rows so the table does not
-            collapse and jump back on every keystroke. Two <tbody> elements
-            rather than one: `:if` and `:for` on the same <template> do not
-            compose, and a table may legally carry several bodies. -->
-        <tbody :if="loading()" class="divide-black/5 divide-y dark:divide-white/8">
-          <template :for="i in skeletonRows()">
-            <tr>
-              <template :for="column in columnMeta()">
-                <td class="px-3 py-2">
-                  <div class="h-3 rounded bg-neutral-200 dark:bg-white/10 animate-pulse"></div>
-                </td>
-              </template>
-              <td :if="writable()" class="px-3 py-2">
-                <div class="ml-auto h-3 w-16 rounded bg-neutral-200 dark:bg-white/10 animate-pulse"></div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-
-        <tbody :if="!loading()" class="divide-black/5 divide-y dark:divide-white/8">
-          <template :for="row in rows()">
-            <tr class="hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors">
-              <template :for="column in columnMeta()">
-                <td :class="cellClass(column)" :title="cellValue(row, column)">{{ cellValue(row, column) }}</td>
-              </template>
-              <td :if="writable()" class="px-3 py-2 text-right">
-                <div class="flex gap-1 items-center justify-end">
-                  <button type="button" @click="startEdit(row)" class="p-1.5 text-neutral-400 hover:text-blue-600 rounded-md hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors" title="Edit">
-                    <span class="h-4 w-4 i-hugeicons-edit-02"></span>
-                  </button>
-                  <button type="button" @click="confirmingDelete.set(row)" class="p-1.5 text-neutral-400 hover:text-red-600 rounded-md hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors" title="Delete">
-                    <span class="h-4 w-4 i-hugeicons-delete-02"></span>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="flex flex-wrap gap-3 items-center justify-between px-3 py-2 bg-neutral-50 dark:bg-white/5 border-black/5 border-t dark:border-white/10">
-      <p class="text-[12px] text-neutral-500 dark:text-neutral-400" :text="rangeLabel()"></p>
-      <div class="flex gap-1 items-center">
-        <button
-          type="button"
-          @click="goToPage(1)"
-          :disabled="page() === 1"
-          class="px-2 h-7 text-[12px] text-neutral-600 dark:text-neutral-300 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 hover:bg-neutral-100 dark:hover:bg-white/15 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-        >First</button>
-        <button
-          type="button"
-          @click="goToPage(page() - 1)"
-          :disabled="page() === 1"
-          class="px-2 h-7 text-[12px] text-neutral-600 dark:text-neutral-300 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 hover:bg-neutral-100 dark:hover:bg-white/15 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-        >Previous</button>
-        <span class="px-2 text-[12px] text-neutral-500 tabular-nums dark:text-neutral-400">{{ page() }} / {{ lastPage() }}</span>
-        <button
-          type="button"
-          @click="goToPage(page() + 1)"
-          :disabled="page() >= lastPage()"
-          class="px-2 h-7 text-[12px] text-neutral-600 dark:text-neutral-300 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 hover:bg-neutral-100 dark:hover:bg-white/15 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-        >Next</button>
-        <button
-          type="button"
-          @click="goToPage(lastPage())"
-          :disabled="page() >= lastPage()"
-          class="px-2 h-7 text-[12px] text-neutral-600 dark:text-neutral-300 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 hover:bg-neutral-100 dark:hover:bg-white/15 disabled:opacity-40 disabled:pointer-events-none transition-colors"
-        >Last</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Edit sheet -->
-  <div :if="editing()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/30" @click="editing.set(null)">
-    <div class="overflow-hidden bg-white dark:bg-neutral-900 rounded-xl shadow-2xl max-h-[85vh] w-full max-w-lg flex flex-col" @click.stop>
-      <div class="flex items-center justify-between px-4 py-3 border-black/5 border-b dark:border-white/10">
-        <h2 class="font-semibold text-[14px] text-neutral-900 dark:text-white">Edit <span :text="modelName()"></span></h2>
-        <button type="button" @click="editing.set(null)" class="p-1 text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200" aria-label="Close">
-          <span class="h-4 w-4 i-hugeicons-cancel-01"></span>
-        </button>
-      </div>
-
-      <div class="overflow-y-auto flex-1 p-4 space-y-3">
-        <template :for="field in editFields()">
-          <div class="flex flex-col gap-1.5">
-            <label class="font-medium text-[12px] text-neutral-600 dark:text-neutral-300">{{ field.label }}</label>
-            <input
-              type="text"
-              :value="field.value"
-              @input="onEditInput(field.name, $event)"
-              :readonly="field.readonly"
-              class="px-2.5 py-1.5 text-[13px] text-neutral-900 dark:text-neutral-100 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 read-only:bg-neutral-50 read-only:text-neutral-500 dark:read-only:bg-white/5 dark:read-only:text-neutral-400"
-            >
-          </div>
-        </template>
-      </div>
-
-      <div class="flex gap-2 items-center justify-end px-4 py-3 bg-neutral-50 dark:bg-white/5 border-black/5 border-t dark:border-white/10">
-        <button type="button" @click="editing.set(null)" class="px-3 h-8 font-medium text-[13px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 hover:bg-neutral-100 dark:hover:bg-white/15 transition-colors">Cancel</button>
-        <button type="button" @click="saveEdit()" :disabled="saving()" class="px-3 h-8 font-medium text-[13px] text-white bg-blue-600 rounded-lg hover:bg-blue-700 active:scale-[0.98] disabled:opacity-60 disabled:pointer-events-none transition-all">
-          <span :if="!saving()">Save changes</span>
-          <span :if="saving()">Saving</span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete confirmation -->
-  <div :if="confirmingDelete()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black/30" @click="confirmingDelete.set(null)">
-    <div class="p-5 bg-white dark:bg-neutral-900 rounded-xl shadow-2xl w-full max-w-sm" @click.stop>
-      <h2 class="font-semibold text-[14px] text-neutral-900 dark:text-white">Delete this <span :text="modelName()"></span>?</h2>
-      <p class="mt-1.5 text-[13px] text-neutral-500 dark:text-neutral-400">
-        Row <span class="font-mono">{{ confirmingDelete().id }}</span> will be removed. This runs through the model, so soft deletes and observers apply.
-      </p>
-      <div class="flex gap-2 items-center justify-end mt-4">
-        <button type="button" @click="confirmingDelete.set(null)" class="px-3 h-8 font-medium text-[13px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 hover:bg-neutral-100 dark:hover:bg-white/15 transition-colors">Cancel</button>
-        <button type="button" @click="confirmDelete()" :disabled="saving()" class="px-3 h-8 font-medium text-[13px] text-white bg-red-600 rounded-lg hover:bg-red-700 active:scale-[0.98] disabled:opacity-60 disabled:pointer-events-none transition-all">
-          <span :if="!saving()">Delete</span>
-          <span :if="saving()">Deleting</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-.overflow-x-auto { -webkit-overflow-scrolling: touch; }
-</style>
+<ModelRecordsDashboard />
 @endsection