feat(tour): highlight each step, and make the comparing steps try both looks

Owner feedback on the forced tour. Each step rings what it is about and,
while forced, dims the rest of the page around it. "Pick a layout" and the
Timeline step hold Continue until both options have been on screen, scroll
their subject to the top of the window and, on wide screens, move the card
to the right edge so the page has room to show the difference.

Guards for the reported snap-back and endless tour, which did not
reproduce: the effect that moves an unseen reader to Relaxed fires at most
once per page load and never after the tab saw the tour done, and setup
saves only the prefs it changed.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas WintherandClaude Opus 5.5 committed 2026-10-18 05:10:42 +02:00
1 parent 94fba4d7b5
commit 5be04a7439
8 files changed
+307 -72

No files matched your search

+15 -3
View File
@@ -270,8 +270,14 @@ function ReaderContent({
const tour = prefs.onboarded
? tourMode(state.prefs.redesignTourSeen)
: "done";
// At most once per page load, and never after this tab saw the tour
// finished: if another tab or a stale write ever put an old marker back,
// the reader is not moved to Relaxed and sent round the tour again.
const tourSettled = useRef(false);
if (tour === "done" && prefs.onboarded) tourSettled.current = true;
useEffect(() => {
if (tour !== "unseen") return;
if (tour !== "unseen" || tourSettled.current) return;
tourSettled.current = true;
void dispatch({
type: "prefs",
patch: { interface: "relaxed", redesignTourSeen: "returning" },
@@ -752,9 +758,16 @@ function ReaderContent({
}
// No navigation here: the tour opens next and leads the way,
// ending on the chosen view.
// Only what setup changed, so a setup finished in a second,
// stale tab leaves alone every setting setup does not set.
await dispatch({
type: "prefs",
patch: next.prefs,
patch: Object.fromEntries(
Object.entries(next.prefs).filter(
([k, v]) =>
JSON.stringify(v) !== JSON.stringify(state.prefs[k]),
),
),
...actionMeta(),
});
}}
@@ -1123,7 +1136,6 @@ function ReaderContent({
</div>
{touring && (
<>
{tourForced && <div className="tour-scrim" aria-hidden="true" />}
<ReturningTour
intro={tour === "replay" ? undefined : tour}
closable={!tourForced}