Use react-bootstrap throughout, improve entry detail
Switch sidebar components (FilterSection, FilterSidebar, Pagination) and both explorer pages to use react-bootstrap: Card, Table, Badge, Button, Alert, Form.Control, Form.Select, InputGroup, Collapse, Spinner. Use react-bootstrap-icons for Search, ChevronDown, Download, BoxArrowUpRight, etc. Entry detail page: remove MD5 columns from Downloads and Files tables. Hide empty sections entirely instead of showing placeholder cards. Human-readable file sizes (KB/MB). Web links shown as compact list with external-link icons. Notes rendered as badge+text instead of table rows. Scores and web links moved to sidebar. No-results alert now shows active machine filter names and offers to search all machines via Alert.Link. Update CLAUDE.md with react-bootstrap design conventions and remove stale ZxdbExplorer.tsx references. claude-opus-4-6@McFiver
This commit is contained in:
23
AGENTS.md
23
AGENTS.md
@@ -67,7 +67,7 @@ next-explorer/
|
||||
- `RegisterDetail.tsx`: Client Component that renders a single register’s details, including modes, notes, and source modal.
|
||||
- `[hex]/page.tsx`: Dynamic route that renders details for a specific register by hex address.
|
||||
- `src/app/zxdb/`: ZXDB Explorer routes and client components.
|
||||
- `page.tsx` + `ZxdbExplorer.tsx`: Search + filters with server-rendered initial content and ISR.
|
||||
- `page.tsx`: ZXDB hub page linking to entries, releases, labels, etc.
|
||||
- `entries/[id]/page.tsx` + `EntryDetail.tsx`: Entry details (SSR initial data).
|
||||
- `releases/page.tsx` + `ReleasesExplorer.tsx`: Releases search + filters.
|
||||
- `labels/page.tsx`, `labels/[id]/page.tsx` + client: Labels search and detail.
|
||||
@@ -108,6 +108,25 @@ Comment what the code does, not what the agent has done. The documentation's pur
|
||||
- Use `type` for interfaces.
|
||||
- No `enum`.
|
||||
|
||||
### UI / Bootstrap Patterns
|
||||
|
||||
The project uses the **Bootswatch Pulse** theme (purple primary) with `react-bootstrap` and `react-bootstrap-icons`.
|
||||
|
||||
- **Always use react-bootstrap components** over raw HTML+className for Bootstrap elements:
|
||||
- `Card`, `Table`, `Badge`, `Button`, `Alert`, `Form.Control`, `Form.Select`, `Form.Check`, `InputGroup`, `Spinner`, `Collapse` etc.
|
||||
- Icons from `react-bootstrap-icons` (e.g. `Search`, `ChevronDown`, `Download`, `BoxArrowUpRight`).
|
||||
- **Match existing patterns** — see `RegisterBrowser.tsx` and `Navbar.tsx` for canonical react-bootstrap usage.
|
||||
- **Shared explorer components** in `src/components/explorer/`:
|
||||
- `ExplorerLayout` — two-column layout (sidebar + content).
|
||||
- `FilterSidebar` — `Card` wrapper with optional "Reset all filters" button.
|
||||
- `FilterSection` — collapsible filter group with label, badge, and `Collapse` animation.
|
||||
- `MultiSelectChips` — chip-toggle selector with optional collapsed summary mode.
|
||||
- `Pagination` — prev/next with page counter and loading spinner.
|
||||
- **Stale-while-revalidate pattern** — show previous results at reduced opacity during loading (`className={loading ? "opacity-50" : ""}`), never blank the screen.
|
||||
- **Empty states** — only show a section/card if it has data. Do not render empty cards with "No X recorded" placeholders; omit them entirely.
|
||||
- **Tables** — use react-bootstrap `<Table size="sm" striped>` for data tables. Human-readable sizes (KB/MB) over raw bytes. Omit columns that add noise without value (e.g. MD5 hashes).
|
||||
- **Alerts** — use `<Alert variant="warning">` for "no results" states with actionable suggestions (e.g. offering to broaden filters).
|
||||
|
||||
### React / Next.js Patterns
|
||||
|
||||
- **Server Components**:
|
||||
@@ -122,7 +141,7 @@ Comment what the code does, not what the agent has done. The documentation's pur
|
||||
- `RegisterDetail.tsx`:
|
||||
- Marked with `'use client'`.
|
||||
- Renders a single register with tabs for different access modes.
|
||||
- ZXDB client components (e.g., `ZxdbExplorer.tsx`, `EntryDetail.tsx`, `labels/*`) receive initial data from the server and keep interactions on the client without blocking the first paint.
|
||||
- ZXDB client components (e.g., `EntriesExplorer.tsx`, `EntryDetail.tsx`, `labels/*`) receive initial data from the server and keep interactions on the client without blocking the first paint.
|
||||
|
||||
- **Dynamic Routing**:
|
||||
- Pages and API routes must await dynamic params in Next.js 15:
|
||||
|
||||
Reference in New Issue
Block a user