66 lines
2.7 KiB
Markdown
66 lines
2.7 KiB
Markdown
# Workspace Toolbar Pattern
|
|
|
|
- Status: `completed`
|
|
- Owner: `codex`
|
|
- Date: `2026-03-25`
|
|
|
|
## Goal
|
|
|
|
Add a reusable `WorkspaceToolbar` pattern above the base component layer so workspace and desk-style
|
|
screens can share one stable contract for search, filters, status chips, and action groups instead
|
|
of hand-rolling a new top control row in each story or scene.
|
|
|
|
## Scope
|
|
|
|
- In scope:
|
|
- add a new `WorkspaceToolbar` pattern under `packages/ui/src/patterns/`
|
|
- export the new pattern from `@ai-ui/ui`
|
|
- add Storybook docs under `Patterns/WorkspaceToolbar`
|
|
- refactor the revenue dashboard scene to consume the new pattern
|
|
- add focused tests for the slot and variant contract
|
|
- Out of scope:
|
|
- moving `DataTable` internal toolbar logic into the patterns layer
|
|
- adding router-aware behavior, sticky behavior, or data-source behavior
|
|
- introducing a second page-header-like title system inside the toolbar
|
|
|
|
## Constraints
|
|
|
|
- Keep the API slot-oriented and composable instead of baking in search or filter behavior.
|
|
- Reuse the existing token and motion system from `DESIGN.md`.
|
|
- Keep the public variant surface restrained.
|
|
- Do not disturb unrelated in-flight work in the dirty worktree.
|
|
|
|
## Affected Surfaces
|
|
|
|
- `packages/ui/src/patterns`
|
|
- `packages/ui/src/index.ts`
|
|
- `apps/docs/src/patterns`
|
|
- `apps/docs/src/revenue-dashboard.stories.tsx`
|
|
- `docs/exec-plans`
|
|
|
|
## Plan
|
|
|
|
1. Add the new pattern implementation, variants, and focused tests in `packages/ui/src/patterns/`.
|
|
2. Export the pattern from `@ai-ui/ui` and add Storybook docs under `Patterns/*`.
|
|
3. Refactor the revenue dashboard toolbar composition to consume the shared pattern.
|
|
4. Run focused validation and record any skipped or blocked checks.
|
|
|
|
## Validation
|
|
|
|
- `pnpm --filter @ai-ui/ui test -- workspace-toolbar`
|
|
- `pnpm --filter @ai-ui/ui typecheck`
|
|
- `pnpm build:docs`
|
|
|
|
## Orchestration Task Sketch
|
|
|
|
- `T1`: implement the new pattern and public exports
|
|
- `T2 -> T1`: add docs stories and refactor the dashboard consumer
|
|
- `T3 -> T2`: run focused validation and record outcomes
|
|
|
|
## Status Log
|
|
|
|
- `2026-03-25 19:13` started the workspace-toolbar slice after confirming the current patterns layer stops at shell and page framing, while the revenue dashboard still hand-rolls a workspace control row
|
|
- `2026-03-25 19:20` implemented `WorkspaceToolbar` with slot-based search, filters, status, and actions regions, then exported the new public pattern from `@ai-ui/ui`
|
|
- `2026-03-25 19:24` added `Patterns/WorkspaceToolbar` Storybook docs and refactored the revenue dashboard scene to consume the shared toolbar pattern
|
|
- `2026-03-25 19:26` validated the change with `pnpm --filter @ai-ui/ui test -- workspace-toolbar`, `pnpm --filter @ai-ui/ui typecheck`, and `pnpm build:docs`
|