Dashboard list "table" pattern

The list on /workspace (and the signed-in master column elsewhere) is not an HTML <table>. It's a CSS-grid responsive list wrapped in the nested-panel card treatment. This is the canonical "table" to reuse for any sectioned, scannable list of items (repos / PRs / issues / etc.).

Where it lives

Anatomy

• Outer frame (host layout): m-2 … rounded-2xl p-0.5, then the list is centered with mx-auto … max-w-7xl.

• NestedPanel (outer): darker bordered shell (bg-background, #0B0A0A dark) holding the toolbar + inner card, gap-1 between them.

• DashboardToolbar: tab row (all / repos / pulls / issues) + search; tabs filter via filterDashboardSections.

• NestedPanelCard (inner): lighter card (bg-card, #120F0E dark), @container, animate-list-in, scrolls. Keyed by active tab.

• Sections: flat siblings; each is a header (title + count) followed by its rows. Empty sections show emptyText.

• Row: a Link rendered as a CSS grid with progressive lane reveal via container queries (title always wins as the column narrows, e.g. when the preview panel opens):

  1. status / type icon lane (1.25rem)
  2. title (always)
  3. meta lane (@lg)
  4. signal lanes — checks / author avatar / visibility (@2xl)
  5. right-aligned relative "updated" date

  Row extras: hover bg + active (aria-current) state, and hover-intent prefetch/warm (useWarmOnHover) when in preview mode.

How to reuse

import { DashboardList } from "@/app/workspace/dashboard-list"
import type { DashboardSection } from "@/app/workspace/helpers"

const sections: DashboardSection[] = [
  { kind: "repos", title: "Repositories", emptyText: "No repos yet.", rows: [/* DashboardRowData[] */] },
  // kind ∈ "repos" | "pulls" | "issues" | "public" — drives which signal lanes show
]

<DashboardList sections={sections} newRepoHref="/repositories/new" preview />

• DashboardRowData (see helpers.ts) carries id, href, title, meta, date plus optional status, checksStatus, authorUsername/DisplayName, visibility — each optional field lights up its corresponding lane.
• preview makes rows open in the /workspace?preview=… detail panel instead of navigating.
• To hand-roll the surfaces without the route-specific DashboardList, use NestedPanel + NestedPanelCard directly (the exact class recipe is documented in nested-panel.tsx).