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:
Michael Chihlas
2026-02-03 21:48:00 -05:00
parent 27624fbe55
commit f49e0b9327
3 changed files with 96 additions and 44 deletions

View 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