Skip to content

Route "preset setup ready" state to preset style picker and add test [#583] #1311

Description

@enjoyandlove

User-facing improvement

When a creator settles the guest color match and the screen declares "Preset setup ready",
the issue card currently shows the text "Open preset styling to continue with this speaker look"
but renders no link. The creator has to find the Continue button separately. After this PR the
issue card itself becomes a link directly to preset-style-picker.html, matching the pattern
every other fixScreen route in the product uses.

Workflow / taste rule it advances

Choose a preset visual style … preview how the episode will look, and apply it without needing
to manually position every element.
The speaker visual match step is the gate before preset
styling. When the match is settled, the natural next action is to open the preset picker — the
issue card should make that action immediate.

Advances #583 P1 (connected preview screens).

Problem

speaker-visual-match.html is in SPEAKER_SETUP_FLOW (loads speaker-setup-nav.js, linked
from preview/index.html). renderIssueFixLink() (lines 543–551) is already wired to render
a link whenever issue.fixScreen and issue.fixLabel are present:

openLink.href = issue.fixScreen;
openLink.textContent = `Open ${issue.fixLabel}`;

The "Preset setup ready" issue at line 509 does not set these fields:

issues.push(issueRecord("ready", "Preset setup ready",
  "Open preset styling to continue with this speaker look."));

nextVisualSurface = "preset-style-picker.html" (line 253) already names the destination —
it is used by the Continue button but not wired to the issue card.

Required file changes

prototype/speaker-visual-match.html

Change line 509 from:

issues.push(issueRecord("ready", "Preset setup ready",
  "Open preset styling to continue with this speaker look."));

To:

issues.push({
  ...issueRecord("ready", "Preset setup ready",
    "Open preset styling to continue with this speaker look."),
  fixScreen: "preset-style-picker.html",
  fixLabel: "preset styling",
});

No other changes. renderIssueFixLink() already handles issue.fixScreen / issue.fixLabel.

New file: prototype/speaker-visual-match-fix-routing.test.js

Four guards:

  1. speaker-setup-nav.js loaded; id: "speaker-visual-match" in SPEAKER_SETUP_FLOW
  2. fixScreen: "preset-comparison-preview.html" (existing guest-review route) AND fixScreen: "preset-style-picker.html" (new ready route) in source
  3. Both target files exist via fs.existsSync and are linked from the shell
  4. openLink.href = issue.fixScreen and openLink.textContent = \Open ${issue.fixLabel}`` in source

Verification

node prototype/speaker-visual-match-fix-routing.test.js
node preview/shell-coverage.test.js
npm test

Preview note: Open speaker-visual-match.html in the preview shell. Set the guest to any
non-review state (e.g. "Keep automatic match"). The "Preset setup ready" issue card should now
render an "Open preset styling" link. Click confirms it navigates to preset-style-picker.html.
The "Review this match beside the preset" card (guest still in needs-review) links to
preset-comparison-preview.html as before.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions