fix: ContinuationModal UX - hover tooltips and stay-on-step flow
- Replace grouped section headers with hover tooltips (title attr) for a cleaner flat list of descendant options - After selecting a descendant, stay on the custom step so the user can write notes before proceeding via a "Continue to" button - Add pendingContinuationNodeId state to track selected descendant - "Continue to" and custom branch controls are mutually exclusive Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
39
docs/plans/2026-02-03-continuation-modal-ux.md
Normal file
39
docs/plans/2026-02-03-continuation-modal-ux.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# Continuation Modal UX Improvements
|
||||
|
||||
**Date:** 2026-02-03
|
||||
**Status:** Approved
|
||||
|
||||
## Changes
|
||||
|
||||
### 1. Parent option labels: hover tooltips instead of static headers
|
||||
|
||||
The ContinuationModal currently groups descendant nodes under uppercase headers like "FROM: PRINTER WON'T PRINT AT ALL -> NOTHING HAPPENS / NO RESPONSE". These clutter the screen.
|
||||
|
||||
**Change:** Move `parentOptionLabel` from static section headers to a `title` attribute on each descendant button. The descendants become a flat list. Hovering shows the path context as a native browser tooltip.
|
||||
|
||||
The "Or" divider and "Build Custom Branch" button at the bottom remain unchanged.
|
||||
|
||||
**Files:** `frontend/src/components/session/ContinuationModal.tsx`
|
||||
|
||||
### 2. Land on custom step before navigating to selected descendant
|
||||
|
||||
Currently, selecting a descendant in the ContinuationModal navigates directly to that node. The user should land on their custom step first to write notes, then proceed.
|
||||
|
||||
**Change:** Add `pendingContinuationNodeId` state to `TreeNavigationPage`. When the user selects a descendant:
|
||||
|
||||
1. Store the selected node ID in `pendingContinuationNodeId`
|
||||
2. Close the ContinuationModal (user is now viewing their custom step)
|
||||
3. Render a "Continue to: [node name]" button on the custom step view
|
||||
4. Clicking it navigates to the descendant and clears `pendingContinuationNodeId`
|
||||
|
||||
The "Continue to" button and custom branch controls are mutually exclusive. If the user chose "Build Custom Branch", they get the existing Add Another Step / This Solves My Issue controls instead.
|
||||
|
||||
**Files:** `frontend/src/pages/TreeNavigationPage.tsx`
|
||||
|
||||
## Summary of state changes
|
||||
|
||||
| State | Purpose |
|
||||
|-------|---------|
|
||||
| `pendingContinuationNodeId` | Stores which descendant the user selected, so the custom step can show a "Continue to" button |
|
||||
|
||||
## No backend changes required
|
||||
Reference in New Issue
Block a user