feat: welcome modal#751
Conversation
|
@Sriharshitha156 is attempting to deploy a commit to the adityapaul2603-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
✅ Deploy Preview for astounding-nougat-da0f6a ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThis PR adds a first-visit WelcomeModal component, converts GuidedTour from a self-managed tour into a controlled component (isOpen/onClose props), wires both into Home with new data-tour instrumentation and state handling, and expands tourSteps with three additional steps. ChangesOnboarding Flow (Welcome Modal + Guided Tour)
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Home
participant WelcomeModal
participant localStorage
participant GuidedTour
Home->>localStorage: check WELCOME_STORAGE_KEY
Home->>WelcomeModal: isOpen=true (first visit)
User->>WelcomeModal: click Take Quick Tour
WelcomeModal->>Home: onTakeTour()
Home->>localStorage: set WELCOME_STORAGE_KEY
Home->>GuidedTour: isOpen=true
User->>GuidedTour: complete/skip tour
GuidedTour->>localStorage: set algoscope-tour-completed
GuidedTour->>Home: onClose()
Home->>Home: setShowTour(false)
Possibly related issues
Possibly related PRs
Suggested labels: Suggested reviewers: Hey, nice work turning GuidedTour into a controlled component — that's the right call since it decouples "when to show" from "how to show," letting Home orchestrate onboarding state cleanly. One thing worth double-checking: the rect-sync effect now gates on the 🚥 Pre-merge checks | ✅ 6 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (6 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/WelcomeModal.jsx (1)
7-27: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove focus into the modal on open (and consider a focus trap).
No focus is set when the modal opens, so keyboard/screen-reader users don't land on "Take Quick Tour"/"Explore Platform" — they can Tab through whatever was focused on the page behind it. Since this dialog has
role="dialog"/aria-modal="true", it should manage focus per WAI-ARIA authoring practices.♿ Proposed fix: move focus to the primary CTA on open
-import React, { useEffect } from 'react' +import React, { useEffect, useRef } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Compass, MapPin, Sparkles } from 'lucide-react' export const WELCOME_STORAGE_KEY = 'algoscope-welcome-seen' export const WelcomeModal = ({ isOpen, onExplore, onTakeTour }) => { + const primaryButtonRef = useRef(null) + + useEffect(() => { + if (isOpen) primaryButtonRef.current?.focus() + }, [isOpen]) + // Prevent background scroll while the modal is open<button type="button" + ref={primaryButtonRef} onClick={onTakeTour} className="w-full flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-sm font-bold theme-button-primary shadow-sm hover:scale-[1.02] active:scale-95 transition-all cursor-pointer" >For a complete solution (Tab-cycling focus trap, focus restoration on close), consider
focus-trap-reactrather than hand-rolling the key handling.Also applies to: 44-54
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/WelcomeModal.jsx` around lines 7 - 27, WelcomeModal currently opens without moving keyboard focus, so users can tab into the page behind the dialog; update the WelcomeModal component to set initial focus when isOpen becomes true, ideally on the primary CTA ("Take Quick Tour" / "Explore Platform") using a ref and effect in the existing useEffect flow. Since the modal already behaves like a dialog, also add or plan for a proper focus trap and focus restoration on close, using the WelcomeModal/handleKeyDown logic as the place to integrate it or replace it with a library like focus-trap-react.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/WelcomeModal.jsx`:
- Around line 7-27: WelcomeModal currently opens without moving keyboard focus,
so users can tab into the page behind the dialog; update the WelcomeModal
component to set initial focus when isOpen becomes true, ideally on the primary
CTA ("Take Quick Tour" / "Explore Platform") using a ref and effect in the
existing useEffect flow. Since the modal already behaves like a dialog, also add
or plan for a proper focus trap and focus restoration on close, using the
WelcomeModal/handleKeyDown logic as the place to integrate it or replace it with
a library like focus-trap-react.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: caabc05e-12c1-4ae8-b4d1-f70b7ef305e3
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
src/components/AlgoCard.jsxsrc/components/GuidedTour.jsxsrc/components/Home.jsxsrc/components/WelcomeModal.jsxsrc/data/tourSteps.jswelcome-modal.patch
|
Hi @Bimbok @adityapaul26 , I've completed the implementation and verified the changes locally. All required CI checks are passing (except the expected Vercel authorization checks for forked PRs). I'd appreciate a review whenever you have time. Thank you! |
1 participant
Pull Request Summary
What changed?
This PR introduces a welcome modal that is displayed to first-time users when they visit AlgoScope. The modal provides a brief introduction to the platform and enhances the onboarding experience. It also integrates with the existing guided tour by adding the required tour attributes and stores the user's preference in local storage so the modal is shown only once.
Why is this needed?
This improves the first-time user experience by providing a clear introduction to the platform before users start exploring its features. It creates a smoother onboarding flow and integrates seamlessly with the guided tour.
Closes #
Type of Change
feat- New user-facing feature or algorithm capabilityfix- Bug fix or regression fixdocs- Documentation-only changestyle- Formatting or styling change with no behavior changerefactor- Code restructuring with no feature or bug-fix behavior changeperf- Performance improvementtest- Test coverage or test infrastructure changebuild- Build system, dependency, or packaging changeci- GitHub Actions, Docker, or release automation changechore- Maintenance change that does not affect usersrevert- Reverts a previous changeRelease Notes
Release note category:
Release note entry:
Testing and Verification
npm ciornpm installnpm run format:checknpm run lintnpm run buildhttp://localhost:5173Skipped or additional testing notes:
npm installcompleted successfully.npm run format:check,npm run lint, andnpm run buildwere not executed during this contribution.UI Evidence
Before:
After:
CI/CD and Deployment Impact
Deployment notes:
Reviewer Checklist