diff --git a/docs/superpowers/specs/2026-04-02-admin-context-separation-design.md b/docs/superpowers/specs/2026-04-02-admin-context-separation-design.md index 4e903970..30acd08d 100644 --- a/docs/superpowers/specs/2026-04-02-admin-context-separation-design.md +++ b/docs/superpowers/specs/2026-04-02-admin-context-separation-design.md @@ -89,6 +89,8 @@ The outer shell. Provides the sidebar frame, search input, scrollable content ar | `children` | `ReactNode` | - | `Sidebar.Header`, `Sidebar.Section`, `Sidebar.Footer` | | `className` | `string` | - | Additional CSS class | +**Search state ownership:** The DS renders the search input and calls `onSearchChange` on every keystroke. The consuming app owns the state (`filterQuery`) and passes it to each `SidebarTree`. This lets the app control filtering behavior (e.g., clear search on section switch, filter only certain sections). + **Expanded layout (default):** ``` +---------------------------+ @@ -123,7 +125,7 @@ The outer shell. Provides the sidebar frame, search input, scrollable content ar - `[<<]` / `[>>]` toggle button in top-right corner (chevron icon) - Width transition: CSS `width` + `transition: width 200ms ease` - When collapsed, search input is hidden -- When collapsed, clicking a section icon calls `onCollapseToggle` (to expand) and that section's `onToggle` (to open it) +- When collapsed, clicking a section icon fires both `onCollapseToggle` and that section's `onToggle` simultaneously. The sidebar expands and the section opens in one motion. No navigation occurs — the user clicks a tree item after the section is visible to navigate. #### ``