First-login quickstart spotlight tour#6
Merged
Conversation
Point first-login users at the real Providers/Templates sidebar items and prompt box with small anchored popovers instead of a full-screen modal. Tour runs once (gated by has_seen_quickstart) and is dark-themed on-brand.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a one-time, first-login onboarding experience on the Dashboard using a driver.js “spotlight tour”, gated by a new profiles.has_seen_quickstart flag persisted in Supabase.
Changes:
- Adds
has_seen_quickstarttopublic.profilesand backfills existing users to “seen”. - Wires a 3-step driver.js tour into
DashboardPageand addsdata-touranchors to the sidebar + prompt area. - Adds driver.js theming styles, a small unit test suite for the step config/predicate, and documentation describing the feature.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| supabase/migrations/20260614010000_add_quickstart_flag.sql | Adds has_seen_quickstart column + backfills existing rows to true. |
| src/pages/DashboardPage.tsx | Fetches flag, launches tour once, and persists dismissal. Adds data-tour="prompt". |
| src/lib/quickstart.ts | Defines tour step config and shouldShowQuickstart predicate. |
| src/lib/dashboard-tour.ts | Implements driver.js tour runner and “skip missing targets” behavior. |
| src/lib/tests/quickstart.test.ts | Unit tests for quickstart predicate and step selectors. |
| src/index.css | Adds dark theme styles for driver.js popovers. |
| src/components/DashboardSidebar/DashboardSidebar.tsx | Adds data-tour anchors to Providers/Templates nav items. |
| package.json | Adds driver.js dependency. |
| package-lock.json | Locks driver.js@1.4.0. |
| docs/superpowers/specs/2026-06-14-quickstart-guide-design.md | New design doc (currently describes a modal flow rather than the implemented spotlight tour). |
| docs/superpowers/plans/2026-06-14-quickstart-guide.md | New implementation plan doc (currently describes a modal + Templates deep-linking rather than the implemented spotlight tour). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+149
to
+168
| .driver-popover.openthorn-tour .driver-popover-navigation-btns button { | ||
| background: var(--color-accent); | ||
| color: #fff; | ||
| text-shadow: none; | ||
| border: none; | ||
| border-radius: 8px; | ||
| padding: 0.45rem 0.9rem; | ||
| font-weight: 600; | ||
| } | ||
| .driver-popover.openthorn-tour .driver-popover-navigation-btns button:hover { | ||
| background: var(--color-accent-glow); | ||
| } | ||
| .driver-popover.openthorn-tour .driver-popover-prev-btn { | ||
| background: transparent; | ||
| color: var(--color-text-secondary); | ||
| border: 1px solid var(--color-border-visible); | ||
| } | ||
| .driver-popover.openthorn-tour .driver-popover-prev-btn:hover { | ||
| background: rgba(255, 255, 255, 0.06); | ||
| } |
Comment on lines
+8
to
+14
| A one-time welcome modal that appears the first time a user lands on the | ||
| Dashboard after signing up. It walks through a short sequence of slides covering | ||
| what OpenThorn is, where to connect a provider, where Templates live, how to open | ||
| the Restaurant Landing template, and the core build/deploy flow. Each feature | ||
| slide carries an **action button** that closes the modal and navigates the user | ||
| to the relevant place. The guide is shown once per account, tracked via a flag on | ||
| the `profiles` table. |
Comment on lines
+5
to
+9
| **Goal:** Show a one-time, 5-slide welcome modal to brand-new users on their first Dashboard visit, pointing them to Providers, Templates, the Restaurant Landing template, and the build/deploy flow. | ||
|
|
||
| **Architecture:** A DB flag `profiles.has_seen_quickstart` gates the modal (existing users backfilled to `true`). DashboardPage fetches the flag, renders a new `QuickstartGuide` component when it is `false`, and flips it to `true` on dismiss. Pure slide config + show-once predicate live in a testable `src/lib/quickstart.ts` module. A small deep-link addition to TemplatesPage lets the Restaurant slide open that template's preview directly. | ||
|
|
||
| **Tech Stack:** React 19 + TypeScript, React Router v7, Supabase (Postgres + RLS), CSS Modules, Vitest (node env). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
data-tourattributes), with a dimmed page + cutout around each element.profiles.has_seen_quickstartflag (existing users backfilled totrue); finishing or skipping the tour persiststrue..openthorn-tourinindex.css). Steps whose target isn't in the DOM (e.g. collapsed sidebar on mobile) are skipped.Deploy step
The migration
supabase/migrations/20260614010000_add_quickstart_flag.sqlmust be applied (supabase db push). It has already been applied to the livebloomproject.Test Plan
npm run test— 224 passing (incl. newquickstart.test.ts)npm run build— succeeds; driver.js confirmed in the lazy DashboardPage chunk, not the main bundlenpm run lint— 0 errorshas_seen_quickstart = false, load/dashboard→ tour spotlights Providers → Templates → prompt box; reload → does not reappear