Components
Admin lists and rows
Let operators scan identity, context, date and state before opening the correct record.
On this page
Purpose and placement
Let operators scan identity, context, date and state before opening the correct record.
Anatomy
| Part | Behavior |
|---|---|
| Header | Visual column labels on wide screens. |
| Row | Primary record link, detail, date and status. |
| Layout | Default, actions or compact grid composition. |
| Additional data | Load-more pattern where the route supports it. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| AdminDataList | columns, children, className and layout. |
| AdminDataRow | href, title, detail, date and status. |
| Structure | CSS-grid divs, not a semantic HTML table; desktop visual header is aria-hidden. |
States and feedback
- Wide multi-column list and narrow stacked rows.
- Draft/published status specimens.
- Empty filtered list and data loading need route-specific feedback.
Usage rules
- Put the title first and retain essential status on phone.
- Keep per-row destructive controls distinct from the primary link.
- Do not apply table keyboard expectations to a div list without adding the required semantics.
Accessibility and verification
Verify that each row reads coherently without the visual column header. Date/type/status labels may need explicit accessible context on mobile and for screen readers.
Source references
| File | Responsibility |
|---|---|
| components/admin-ui.tsx | Audited Townwell implementation; use this file when extending this interface. |
| app/admin/(shell)/stories/page.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1