Prototype local listening guide UI

[flamboh]

What changed

• adds the animated how do i listen on spotify / apple music? entry beneath settings
• switches the existing center panel into a same-route three-step wizard
• uses locally hosted Simple Icons marks for spotify, apple music, soundcloud, and youtube
• advances immediately when an option is selected, with plain arrow controls for revisiting answered steps
• supports computer, mobile, and combined computer + mobile guide paths
• generates a minimal right-rail handbook whose title reflects the selected app, device path, and source
• keeps instructional copy and media as deliberately minimal placeholders

Interaction and accessibility

• resets scroll when the same-route guide opens on mobile
• moves keyboard focus to each newly displayed question and to the completed guide heading
• exposes step changes to assistive technology
• keeps the rotating sidebar prompt static when reduced motion is requested
• uses functional section anchors in the bare right-side rail

Why

This gives us a focused artifact for validating the shortest understandable route from a listener's app, device setup, and music source to the correct local-listening instructions before final copy, screenshots, and videos are produced.

Explores #79 without closing it.

Validation

• bun run typecheck
• targeted Vite+ lint for the touched components
• git diff --check
• bun run build
• local Playwright checks for auto-advance, loaded brand assets, keyboard focus, reduced motion, personalized guide output, and functional guide anchors
• public mobile Playwright smoke of the full wizard on the Cloudflare preview
• two-pass antagonistic UI review, with all material findings resolved

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 81510bb3-b4ed-43b2-89d7-d4cf9a672d3b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

✨ Simplify code

• Create PR with simplified code
• Commit simplified code in branch codex/listening-guide-prototype

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tagium	e4efe86	Commit Preview URL Branch Preview URL	Jul 11 2026, 07:52 AM

[flamboh]

Cloudflare preview: https://430f7737-tagium.oliver-boorstein.workers.dev/?prototype=listening-guide&variant=A

Use the floating switcher or change variant=A to B or C. The deployed runtime reports TAGIUM_DEPLOY_ENV=preview, and the prototype route was smoke-tested after deployment.

[flamboh]

Updated from design feedback with a three-question entry wizard:

1. listening app
2. one or more destination devices
3. current music source

The completed answers now generate the guide state and remain visible with a change answers action. Updated Cloudflare preview:

https://2cb5c3c1-tagium.oliver-boorstein.workers.dev/?prototype=listening-guide&variant=A

The deployed flow was smoke-tested through Spotify → Computer + iPhone/iPad → YouTube → generated guide.

[flamboh]

Updated from the latest design feedback:

• animated listening-guide entry below Settings
• wizard remains the entry flow
• option B is now the only result layout
• section navigation moved to an unstyled right rail

Latest Cloudflare preview: https://7d336c77-tagium.oliver-boorstein.workers.dev/

The public preview was smoke-tested through the complete sidebar entry → wizard → handbook flow.

[flamboh]

Updated again from review feedback:

• guide now uses the existing center-panel activeView state; opening/back does not mutate the URL or reload the document
• replaced the two-slot fade with a continuous vertical track, fixing the visible flicker/double transition

Latest Cloudflare preview: https://b87e3f8b-tagium.oliver-boorstein.workers.dev/

The public build was verified across two animation cycles and with an explicit same-URL/same-document guide entry assertion.

[flamboh]

Updated Cloudflare preview: https://765650f5-tagium.oliver-boorstein.workers.dev

This revision includes the simplified auto-advancing wizard, Simple Icons brand marks, lowercase/minimal copy, accessibility and reduced-motion fixes from the antagonistic review, and the personalized guide handoff.

[flamboh]

White Simple Icons revision deployed: https://1d1e9543-tagium.oliver-boorstein.workers.dev

[flamboh]

Header/navigation alignment revision: https://818b62c8-tagium.oliver-boorstein.workers.dev

The guide header now matches settings, uses the back arrow, keeps the forward arrow visible, and reserves a stable question area so wizard navigation does not shift.

[flamboh]

Saved-selection and app-picker sizing revision: https://8acb5fae-tagium.oliver-boorstein.workers.dev

App cards are now approximately twice as tall. The generated guide includes a make new selection action beside its personalized heading, and returning to the wizard restores the previous answers.

[flamboh]

Theme-matched scrollbar revision: https://63d7d2d2-tagium.oliver-boorstein.workers.dev

Supported browsers now use a thin muted-green scrollbar with a transparent track, rounded WebKit thumb, and lighter hover state.

[flamboh]

Stacked service-card revision: https://652eeb7d-tagium.oliver-boorstein.workers.dev

Spotify and Apple Music now use the same icon-above-label structure as the settings button. Their option area exactly matches the device step height on desktop and mobile.

[flamboh]

Persistent wizard-state revision: https://c59d199a-tagium.oliver-boorstein.workers.dev

Partial progress and completed guide selections now survive closing, reopening, and page refreshes. make new selection is now a subheading beneath the personalized title and is the sole action that clears answers and restarts the wizard.

[flamboh]

Smooth section-navigation revision: https://7a4a119c-tagium.oliver-boorstein.workers.dev

Right-rail section links now animate the guide pane between anchors. Reduced-motion preferences continue to use immediate scrolling.