Element: #481 Color, count, actions and reorder (layout/app-shell) What it shows: App shell panel rows with a color dot, a neutral count, a per-row actions menu and drag-to-reorder. When to use: Lists of user-owned things (workspaces, folders, saved views) that need a marker, a total, quick actions and a custom order. Spec: - ``: 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` Tags: app-shell, nav-item, color, count, actions-menu, reorder, drag-and-drop, sidebar Needs: @codeatlasdev/ui@4.4.0 Components: AppShellLayout, DropdownMenuItem, NavItemMenu, NavReorder, PageShell, Card Live demo: https://ui.codeatlas.com.br/docs/layout/app-shell#color-count-actions-and-reorder {#snippet menu()} (log = 'Favorite')}>{#snippet children()}Favorite{/snippet} (log = 'Archive')} variant="destructive">{#snippet children()}Archive{/snippet} {/snippet}

{log}