#481
Color, count, actions and reorder
App shell panel rows with a color dot, a neutral count, a per-row actions menu and drag-to-reorder.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Color, count, actions and reorder" pattern (@codeatlasdev/ui demo #481, layout/app-shell) in my app.
Call get_demo({ ids: ["#481"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Lists of user-owned things (workspaces, folders, saved views) that need a marker, a total, quick actions and a custom order.
Keep these library parts, with the props and tokens the demo uses:
- AppShellLayout, DropdownMenuItem, NavItemMenu, NavReorder, PageShell, Card, NavModule, NavReorderEvent from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppShellLayout {modules} {pathname} reorder={NavReorder} itemMenu={NavItemMenu} persistPanel={false} mainId={null} skipLink={false}>`: reorder and the item menu are opt-in imports
- One module `id: 'projects'` with a non-collapsible section `label: 'Workspaces'` and `onReorder: reorder`
- 3 items: Design system (#e11d48, count 42), Marketing site (#2563eb, count 1280, shown as 1.2k), Mobile app (#16a34a, count 0)
- Every item has `color`, `count` and `actions`; `actions` is a snippet with 2 `DropdownMenuItem`s: Favorite and Archive (destructive)
- `reorder(e: NavReorderEvent)` uses `next.splice(e.from, 1)` and `next.splice(e.to, 0, moved)`, then writes the visible `log` line; the drag itself is announced by the shell
- A second module `id: 'other'` with `items: []`
- Stage height is `height: 360px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- AppShellLayout
@codeatlasdev/ui - DropdownMenuItem
@codeatlasdev/ui - NavItemMenu
@codeatlasdev/ui - NavReorder
@codeatlasdev/ui - PageShell
@codeatlasdev/ui - Card
@codeatlasdev/ui
How it is built
- `<AppShellLayout {modules} {pathname} reorder={NavReorder} itemMenu={NavItemMenu} persistPanel={false} mainId={null} skipLink={false}>`: reorder and the item menu are opt-in imports
- One module `id: 'projects'` with a non-collapsible section `label: 'Workspaces'` and `onReorder: reorder`
- 3 items: Design system (#e11d48, count 42), Marketing site (#2563eb, count 1280, shown as 1.2k), Mobile app (#16a34a, count 0)
- Every item has `color`, `count` and `actions`; `actions` is a snippet with 2 `DropdownMenuItem`s: Favorite and Archive (destructive)
- `reorder(e: NavReorderEvent)` uses `next.splice(e.from, 1)` and `next.splice(e.to, 0, moved)`, then writes the visible `log` line; the drag itself is announced by the shell
- A second module `id: 'other'` with `items: []`
- Stage height is `height: 360px`
Related
Loading source.