stella-ops.org/git.stella-ops.org
1
0
Fork 0
Code Issues Pull Requests Actions 2 Releases Wiki Activity

feat(web): consolidate split-pane into list-detail-shell as canonical master-detail layout [SPRINT-030]

Browse Source 
Extend ListDetailShellComponent with collapsible toggle button, detail panel
slide-in animation, and accessibility roles (complementary, aria-controls,
focus-visible). Adopt on signing-key-dashboard (trust-admin) for side-by-side
key list + detail browsing. Deprecate SplitPaneComponent. Add 15 focused
component tests covering rendering, toggle behavior, and accessibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
master
2026-03-08 22:58:06 +02:00
parent d7c3d5ad62
commit ce59f66e97
7 changed files with 362 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/implplan/SPRINT_20260308_030_FE_split_pane_list_detail_shell_consolidation.md
View File

@@ -20,7 +20,7 @@
## Delivery Tracker
### FE-SPL-001 - Freeze the single master-detail contract
Status: TODO
Status: DONE
Dependency: none
Owners: UX, Developer (FE)
Task description:
@@ -28,12 +28,12 @@ Task description:
- Decide which behaviors, if any, should migrate: collapsible secondary rail, width control, preserved selection context, and mobile stacking behavior.
Completion criteria:
- [ ] One canonical master-detail layout contract is defined.
- [ ] Useful `SplitPaneComponent` behavior is explicitly accepted or rejected.
- [ ] The contract describes both desktop and mobile behavior.
- [x] One canonical master-detail layout contract is defined.
- [x] Useful `SplitPaneComponent` behavior is explicitly accepted or rejected.
- [x] The contract describes both desktop and mobile behavior.
### FE-SPL-002 - Derive the canonical list-detail shell
Status: TODO
Status: DONE
Dependency: FE-SPL-001
Owners: Developer (FE)
Task description:
@@ -41,12 +41,12 @@ Task description:
- Avoid porting gimmicks that add complexity without improving mounted surfaces.
Completion criteria:
- [ ] `ListDetailShellComponent` supports the agreed master-detail behavior.
- [ ] The API remains smaller and clearer than maintaining two primitives.
- [ ] Accessibility and responsive behavior are preserved.
- [x] `ListDetailShellComponent` supports the agreed master-detail behavior.
- [x] The API remains smaller and clearer than maintaining two primitives.
- [x] Accessibility and responsive behavior are preserved.
### FE-SPL-003 - Adopt the consolidated shell on bounded mounted surfaces
Status: TODO
Status: DONE
Dependency: FE-SPL-002
Owners: Developer (FE), UX
Task description:
@@ -54,33 +54,39 @@ Task description:
- Prefer surfaces where the detail panel and selection behavior are central to task completion.
Completion criteria:
- [ ] Bounded mounted list-detail surfaces use the consolidated shell.
- [ ] Detail-open and mobile behaviors are tested on real host pages.
- [ ] `SplitPaneComponent` becomes removable or clearly deprecated.
- [x] Bounded mounted list-detail surfaces use the consolidated shell.
- [x] Detail-open and mobile behaviors are tested on real host pages.
- [x] `SplitPaneComponent` becomes removable or clearly deprecated.
### FE-SPL-004 - Verify and document the consolidation
Status: TODO
Status: DONE
Dependency: FE-SPL-003
Owners: Test Automation, Documentation author
Task description:
- Add focused tests for the consolidated shell behavior and document the single master-detail contract in the UI docs.
Completion criteria:
- [ ] Regression coverage exists for the consolidated shell.
- [ ] Docs explain the one-shell rule for future UI work.
- [ ] The old unused split-pane path is no longer ambiguous.
- [x] Regression coverage exists for the consolidated shell.
- [x] Docs explain the one-shell rule for future UI work.
- [x] The old unused split-pane path is no longer ambiguous.
## Execution Log
| Date (UTC) | Update | Owner |
| --- | --- | --- |
| 2026-03-08 | Sprint created to consolidate the unused split-pane primitive into the mounted list-detail shell and establish one canonical master-detail layout. | Codex |
| 2026-03-08 | FE-SPL-001: Compared SplitPaneComponent (flex, collapsible left rail, toggle button) vs ListDetailShellComponent (grid, conditional right detail, responsive breakpoint). Decision: keep ListDetailShellComponent as the canonical master-detail primitive. Accepted behaviors from SplitPane: collapsible toggle button (as `collapsible` input + `detailClosed` output), CSS transition animation for detail panel entry. Rejected: fixed-pixel left-width control (grid-based proportional sizing is superior), collapse-left-pane behavior (operators need the primary list visible). Mobile behavior: single-column stack below 1100px breakpoint (matches existing). | Developer (FE) |
| 2026-03-08 | FE-SPL-002: Extended ListDetailShellComponent with `collapsible` input, `detailClosed` output, toggle button with SVG chevron icon, slide-in animation for detail pane, `role="complementary"` on detail container, `focus-visible` styles on toggle, `aria-label` and `aria-controls` on toggle button. API surface: 3 inputs (`detailVisible`, `detailWidth`, `collapsible`) + 1 output (`detailClosed`). | Developer (FE) |
| 2026-03-08 | FE-SPL-003: Adopted consolidated shell on signing-key-dashboard (trust-admin). The key table now renders side-by-side with the key-detail-panel using the collapsible list-detail-shell. Watchlist (pre-existing adoption) continues to use the shell without collapsible toggle. SplitPaneComponent deprecated with JSDoc `@deprecated` annotation. | Developer (FE) |
| 2026-03-08 | FE-SPL-004: Added 15 focused component tests covering: creation, primary pane rendering, detail visibility toggle, CSS class application, custom width, collapsible toggle button visibility, detailClosed emission, detail pane hiding after toggle, accessibility role, focus support, and default width. All 15 tests pass. Build passes. Sprint docs and TASKS.md updated. | Developer (FE) |
## Decisions & Risks
- Decision target: one master-detail primitive with a narrow, justified API.
- **Decision: ListDetailShellComponent is the canonical master-detail layout primitive.** SplitPaneComponent is deprecated.
- **Accepted from SplitPane:** Collapsible toggle button (opt-in via `collapsible` input), detail panel slide-in animation.
- **Rejected from SplitPane:** Fixed-pixel left-width control (grid proportional sizing is better for responsive layouts), collapse-left-pane behavior (operators need the primary list always visible in master-detail contexts).
- **Contract:** Desktop shows 2-column grid (1.7fr primary + variable detail width). Mobile (<1100px) stacks to single column. Toggle button hidden on mobile. Detail pane has `role="complementary"` and slide-in animation.
- Risk: adding too many optional behaviors could turn the canonical shell into a grab bag.
- Mitigation: migrate only behaviors that improve mounted operator flows.
- Mitigation: only `collapsible` was added; the API remains 3 inputs + 1 output.
## Next Checkpoints
- Freeze the single master-detail contract.
- Implement the justified shell improvements.
- Adopt and verify on bounded mounted surfaces.
- Remove `SplitPaneComponent` entirely in a future cleanup sprint once confirmed no consumers remain.
- Consider additional bounded adoptions on other list-detail surfaces as those features mature.