Skip to content

feat: Add first-time user onboarding spotlight tour#313

Draft
krishna9358 wants to merge 1 commit intomainfrom
krishna9358/onboarding-tutorial
Draft

feat: Add first-time user onboarding spotlight tour#313
krishna9358 wants to merge 1 commit intomainfrom
krishna9358/onboarding-tutorial

Conversation

@krishna9358
Copy link
Contributor

Summary

  • Implements a comprehensive first-time user onboarding experience with spotlight-based guided walkthrough
  • Users see 6-step tour highlighting key UI elements (Workflow Builder, Templates, Schedules, Action Center, Manage section)
  • Tour only shows for first-time authenticated users, persisted via localStorage

Testing

  • TypeScript: 0 errors in new components
  • Vite build: passes cleanly (38s)
  • Integrated with existing Dialog, Button, and Lucide components
  • Keyboard navigation tested (arrow keys, escape)

Details

New files:

  • frontend/src/store/onboardingStore.ts - Zustand store with localStorage persistence
  • frontend/src/components/onboarding/OnboardingDialog.tsx - Spotlight tour component with portal rendering

Modified files:

  • frontend/src/components/layout/AppLayout.tsx - Integration, data attributes on sidebar items, sidebar forcing during tour

Features:

  • Spotlight cutout with pulsing ring effect
  • Tooltip cards positioned near highlighted elements
  • Sidebar forced open for visibility
  • Manage section auto-expanded on final step
  • Zero new dependencies
  • Auth-gated (unauthenticated users don't see tour)

…ided walkthrough

Implement a comprehensive onboarding experience for first-time users featuring:
- Spotlight-based guided tour that highlights actual UI elements in the sidebar
- 6-step walkthrough covering Workflow Builder, Templates, Schedules, Action Center, and Manage section
- Smooth spotlight transitions and pulsing rings for visual emphasis
- Tooltip cards positioned next to highlighted elements
- Sidebar forced open during onboarding for visibility
- Automatic Manage section expansion on the final step
- Keyboard navigation (arrow keys and Escape support)
- First-time detection via localStorage persistence
- Auth-gated (only shows for authenticated users)
- Zero new dependencies (uses existing Dialog, Button, Lucide icons, Tailwind)

Architecture:
- useOnboardingStore (Zustand): Manages onboarding state with localStorage persistence
- OnboardingDialog component: Spotlight tour with createPortal rendering for proper z-index
- AppLayout integration: Data attributes on sidebar items, sidebar forcing, settings auto-expand

Signed-off-by: Krishna Mohan <krishanmohank974@gmail.com>
@chatgpt-codex-connector
Copy link

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

@krishna9358 krishna9358 marked this pull request as draft February 27, 2026 10:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant