feat(web): remove auth requirement to simplify onboarding #1404
Conversation
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
- Add tests for task-seeding.util - Add tests for CmdPaletteTutorial component - Add tests for OnboardingOverlay component - Add tests for AuthPrompt component - Add tests for useOnboardingOverlays hook
- Only seed tasks when not in test environment - Prevents seeded tasks from interfering with existing tests
- Fix keyboard event simulation in CmdPaletteTutorial test - Dispatch event to window instead of document - Properly set modifier key properties for cross-platform support
…rule - Check if COUNT is specified before adding extra dtstart instance - Improve timezone comparison to handle precision issues - Fixes test failure where 707 instances were generated instead of 706
Contributor
There was a problem hiding this comment.
Pull request overview
This PR simplifies the onboarding experience by allowing unauthenticated users to access the day view and interact with the application before signing up. The implementation introduces a progressive disclosure pattern with contextual onboarding overlays that guide users through key features.
- Adds three progressive onboarding components (OnboardingOverlay, CmdPaletteTutorial, AuthPrompt) that appear based on user interactions
- Enables guest access to the day view with task seeding for new users
- Updates routing logic to allow unauthenticated access to specific routes for users who haven't completed signup
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web/src/views/Day/view/DayViewContent.tsx | Integrates onboarding overlay system with date navigation tracking |
| packages/web/src/views/Day/hooks/tasks/useTaskEffects.ts | Adds comment noting task seeding happens in loader |
| packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.ts | New hook managing the display logic and timing for three onboarding overlays |
| packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.test.tsx | Comprehensive test suite for onboarding overlay hook |
| packages/web/src/views/Day/components/OnboardingOverlay/OnboardingOverlay.tsx | Welcome overlay component introducing users to the app |
| packages/web/src/views/Day/components/OnboardingOverlay/OnboardingOverlay.test.tsx | Tests for welcome overlay component |
| packages/web/src/views/Day/components/CmdPaletteTutorial/CmdPaletteTutorial.tsx | Tutorial overlay teaching users about the command palette |
| packages/web/src/views/Day/components/CmdPaletteTutorial/CmdPaletteTutorial.test.tsx | Tests for command palette tutorial |
| packages/web/src/views/Day/components/AuthPrompt/AuthPrompt.tsx | Prompt encouraging users to sign in after demonstrating engagement |
| packages/web/src/views/Day/components/AuthPrompt/AuthPrompt.test.tsx | Tests for authentication prompt |
| packages/web/src/socket/SocketProvider.tsx | Adds authentication check to conditionally connect socket |
| packages/web/src/routers/loaders.ts | Updates loaders to allow unauthenticated access to day view and seed initial tasks |
| packages/web/src/components/GuestLayout/GuestLayout.tsx | New layout component for unauthenticated users with global shortcuts |
| packages/web/src/common/utils/storage/task-seeding.util.ts | Utility to seed initial sample tasks for new users |
| packages/web/src/common/utils/storage/task-seeding.util.test.ts | Tests for task seeding utility |
| packages/web/src/common/constants/storage.constants.ts | Adds storage keys for onboarding state persistence |
| packages/web/src/auth/UserProvider.tsx | Updates to handle unauthenticated users and suppress expected errors |
| packages/backend/src/event/classes/gcal.event.rrule.ts | Improves recurring event date handling with more lenient timezone comparison |
packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.ts
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.ts
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.ts
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.ts
Outdated
Show resolved
Hide resolved
- Extract useOnboardingOverlay hook with tests - Extract useCmdPaletteTutorial hook with tests - Extract useAuthPrompt hook with tests - Refactor useOnboardingOverlays to compose the three hooks - Add comprehensive tests for each hook - Fix timing issues in tests with fake timers and act
- Fix useOnboardingOverlay test by resetting mock before test - Fix useCmdPaletteTutorial test by using proper waitFor with real timers - Fix OnboardingOverlay component tests to match actual component text - All tests now passing
tyler-dane
commented
Jan 2, 2026
- Add CmdPaletteGuide component to provide step-by-step instructions for using the command palette. - Integrate guide into DayViewContent and NowView components, displaying it conditionally based on the current view. - Create custom hooks for managing guide state and detecting completion of each step. - Update storage constants to track completion status of the command palette guide. - Refactor OnboardingFlow to redirect to the day view upon completion, enhancing user experience.
- Add tests for CmdPaletteGuide component to validate rendering and functionality across different steps. - Implement tests for useCmdPaletteGuide, useStep1Detection, useStep2Detection, and useStep3Detection hooks to ensure correct behavior during onboarding. - Include checks for task creation, navigation detection, and description editing to enhance user experience during onboarding. - Ensure all new tests are passing and cover various scenarios for the command palette guide.
packages/web/src/views/Day/components/OnboardingOverlay/OnboardingOverlay.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/components/OnboardingOverlay/OnboardingOverlay.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/components/OnboardingOverlay/OnboardingOverlay.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/hooks/onboarding/useCmdPaletteTutorial.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Onboarding/components/CmdPaletteGuide.test.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/hooks/useCmdPaletteGuide.test.ts
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/hooks/useStep1Detection.test.ts
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/hooks/useStep3Detection.test.ts
Outdated
Show resolved
Hide resolved
…letteGuide - Deleted the OnboardingOverlay component and its associated tests to streamline onboarding functionality. - Updated the useOnboardingOverlay hook to manage visibility based on the CmdPaletteGuide's state. - Refactored DayViewContent and NowView components to utilize CmdPaletteGuide for onboarding instructions. - Adjusted local storage handling to track completion status of the command palette guide instead of the onboarding overlay. - Enhanced tests for onboarding overlays to reflect the new structure and ensure correct behavior across different user scenarios.
- Introduced new utility functions for managing completed steps in localStorage, including marking steps as completed, loading completed steps, and clearing them. - Updated the CmdPaletteGuide component and associated hooks to utilize the new step completion tracking, improving the onboarding experience. - Refactored step detection hooks to skip detection if a step is already completed, optimizing performance and user experience. - Added comprehensive tests for the new onboarding storage utilities to ensure correct functionality and data integrity. - Migrated existing completion flags to the new storage structure, ensuring backward compatibility.
…s tracking - Introduced a new schema for onboarding progress using Zod, consolidating storage management into a single structure. - Updated utility functions to handle onboarding progress, including getting and updating progress, ensuring data integrity. - Refactored components and hooks to utilize the new onboarding progress structure, replacing localStorage interactions with centralized updates. - Enhanced tests to validate the new onboarding progress functionality and ensure correct behavior across various scenarios. - Removed deprecated localStorage keys and migration logic, streamlining the onboarding experience.
- Refactored CmdPaletteGuide component to show dynamic welcome messages based on the current view (Day View or Now View).
- Updated tests to validate the correct rendering of welcome messages and ensure that the previous default message ("Welcome to Compass") is no longer displayed.
- Enhanced test coverage for different views to confirm the onboarding experience aligns with user expectations.
…experience - Added support for a new step (Step 4) in the CmdPaletteGuide component, providing users with additional instructions for editing reminders. - Updated the onboarding logic to accommodate the new step, including modifications to hooks and utility functions for step completion tracking. - Enhanced tests to validate the correct functionality of the new step and ensure comprehensive coverage of the onboarding process. - Adjusted progress indicators and messages to reflect the addition of the fourth step, improving user guidance throughout the onboarding experience.
…arity - Updated onboarding logic to utilize ONBOARDING_STEPS constants for step tracking, enhancing code readability and maintainability. - Refactored related hooks and components to replace numeric step identifiers with descriptive constants, ensuring consistency across the onboarding experience. - Enhanced tests to validate the new constant-based approach, confirming correct functionality and step completion tracking. - Adjusted utility functions for onboarding progress to align with the new structure, improving data integrity and clarity in step management.
…detection - Introduced new onboarding steps for CmdPaletteGuide, including steps 5 and 6, to guide users through using the command palette and navigating to the week view. - Updated related hooks and components to manage the new steps, ensuring a cohesive onboarding experience. - Enhanced utility functions for onboarding progress tracking, incorporating new steps into the existing structure. - Added comprehensive tests for the new steps and detection logic, validating correct functionality and user guidance throughout the onboarding process. - Refactored existing tests to accommodate the changes and ensure robust coverage of the onboarding experience.
packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlay.test.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Day/hooks/onboarding/useCmdPaletteTutorial.test.tsx
Show resolved
Hide resolved
packages/web/src/views/Onboarding/components/CmdPaletteGuide.test.tsx
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/hooks/useStep1Detection.test.ts
Outdated
Show resolved
Hide resolved
packages/web/src/views/Onboarding/hooks/useStep3Detection.test.ts
Outdated
Show resolved
Hide resolved
…tep detection - Renamed onboarding storage utility functions for clarity and consistency, transitioning from `onboardingStorage.util` to `onboarding.storage.util`. - Consolidated step detection logic into a unified hook, enhancing maintainability and reducing redundancy across onboarding steps. - Updated related components and tests to reflect the new utility structure, ensuring comprehensive coverage and functionality. - Removed deprecated step detection hooks, streamlining the onboarding process and improving performance. - Enhanced tests for onboarding storage utilities to validate the new structure and ensure correct behavior across various scenarios.
- Adjusted step counts in CmdPaletteGuide tests and component to reflect the correct total of 5 steps instead of 6. - Removed the deprecated CMD_PALETTE_INFO step from onboarding constants and related logic, streamlining the onboarding process. - Updated tests to ensure accurate step completion tracking and validate the new structure.
…ccess message handling - Added CmdPaletteGuide component to CalendarView for improved onboarding experience. - Updated CmdPaletteGuide to manage success message visibility based on user interaction, allowing users to dismiss the message. - Enhanced step detection logic to prevent duplicate completions, ensuring accurate onboarding progress tracking.
…ance onboarding interactions - Added CmdPaletteGuide component to AuthenticatedLayout to improve user onboarding experience across authenticated routes. - Updated CmdPalette interactions in Calendar, Day, and Now views to reset onboarding progress and dispatch a restart event when "Re-do onboarding" is clicked. - Refactored related components and tests to ensure consistent onboarding behavior and validate the new functionality. - Enhanced onboarding storage utilities to support resetting progress, ensuring a seamless user experience during onboarding.
…ed tests - Introduced the DayOnboardingOverlays component to manage onboarding prompts based on user tasks and onboarding progress. - Added unit tests for DayOnboardingOverlays to verify rendering behavior based on onboarding state. - Refactored useOnboardingOverlays hook to utilize useOnboardingProgress for tracking navigation state. - Updated DayView and DayViewContent components to integrate the new onboarding overlays functionality. - Created useOnboardingProgress hook to track date navigation for onboarding purposes.
- Added OnboardingOverlayHost and OnboardingNoticeCard components to manage and display onboarding notices. - Removed the DayOnboardingOverlays component and its associated tests to streamline onboarding logic. - Updated AuthenticatedLayout to include the new OnboardingOverlayHost for improved user onboarding experience. - Implemented useAuthPrompt and useOnboardingNotices hooks to manage the visibility of onboarding prompts based on user interactions. - Added unit tests for the new onboarding components and hooks to ensure functionality and correctness.
…nd view handling - Refactored CmdPaletteGuide to utilize a new structure for onboarding instructions based on the current view. - Introduced utility functions to determine the guide view from the pathname and generate contextual welcome messages. - Updated onboarding step configurations to include visibility rules and instructions tailored for different views (day, now, week). - Added new tests to ensure the CmdPaletteGuide renders the correct instructions based on the onboarding state and view. - Removed deprecated code related to step instructions to streamline the component.
…g flow - Added NAVIGATE_TO_DAY step to the onboarding process, enhancing user guidance for navigating to the Day view. - Updated CmdPaletteGuide to reflect changes in step progression and instructions based on the new onboarding structure. - Refactored onboarding step configurations to accommodate the new step and ensure correct visibility and instructions. - Adjusted tests to validate the new onboarding flow, ensuring that the guide correctly reflects the current step and user progress. - Streamlined onboarding logic by removing deprecated instructions and enhancing the overall user experience.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
…configurations - Removed deprecated visibility rules and unnecessary tests from CmdPaletteGuide to simplify the onboarding logic. - Updated onboarding step configurations to include route prefixes for better route detection. - Enhanced the CmdPaletteGuide component to conditionally render based on the onboarding state and user progress. - Adjusted tests to reflect changes in the onboarding flow and ensure accurate rendering of instructions based on the current view.
- Eliminated the isOptimistic property from the addId function and related tests to simplify event structure. - Updated sagas to reflect the removal of the isOptimistic flag, ensuring consistent event handling across the application. - Adjusted tests to align with the new event structure, maintaining clarity and focus on essential properties.
… handling - Removed the check for session existence in the getEvents saga, which returned empty data for unauthenticated users. - This change streamlines the event retrieval process and focuses on authenticated user scenarios.
- Introduced AUTH_PROMPT_DISMISSED constant to storage.constants.ts for better management of the auth prompt dismissal state. - Updated AuthPrompt component to set the dismissal state in local storage instead of using the previous onboarding progress utility. - Refactored related tests to validate the new local storage approach for managing the auth prompt dismissal. - Enhanced useAuthPrompt hook to check local storage for the dismissal state, streamlining the onboarding experience.
- Introduced utility functions for managing authentication-related states in local storage, consolidating the logic for hasCompletedSignup, skipOnboarding, and authPromptDismissed. - Updated hooks and components to utilize the new storage utility functions, enhancing code clarity and maintainability. - Refactored tests to validate the new approach to local storage management, ensuring accurate state handling across the application.
…g storage - Introduced the useIsSignupComplete hook to manage and check the signup completion state using local storage. - Refactored local storage management for onboarding progress, consolidating related states into a single structure. - Removed the deprecated useHasCompletedSignup hook and its associated tests to streamline the codebase. - Updated components and tests to utilize the new onboarding storage utilities, ensuring accurate state handling across the application. - Enhanced the onboarding experience by integrating the new hook into relevant components and updating local storage interactions.
- Refactored authentication handling to redirect users to the Day view instead of the Login page upon sign-out and when encountering authentication errors. - Removed references to the Login route in various components and tests, streamlining the onboarding and authentication process. - Updated tests to reflect changes in the authentication flow, ensuring accurate behavior when users are not authenticated. - Enhanced the AuthPrompt component to initiate Google login directly, improving user experience during sign-in.
packages/web/src/common/repositories/event/event.repository.util.ts
Outdated
Show resolved
Hide resolved
- Updated the _editEvent saga to check for session existence before editing events, enhancing security and data integrity. - Integrated the event repository for handling event edits, streamlining the process and improving code maintainability. - Removed direct API calls in favor of repository methods, aligning with best practices for data management.
…act hook - Refactored the LocalEventRepository to accept Schema_Event and optional parameters for editing and deleting events, improving flexibility. - Removed the useEventRepository React hook, simplifying the repository interface and reducing unnecessary complexity in the codebase. - Updated tests to reflect changes in the event editing process, ensuring consistency with the new method signatures.
| dispatch(settingsSlice.actions.toggleCmdPalette()); | ||
| onDismiss(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Cmd+k handler double-toggles palette without stopping propagation
The CmdPaletteTutorial component's keyboard handler dispatches toggleCmdPalette() when cmd+k is pressed, but doesn't call e.stopPropagation() or e.preventDefault(). Since GuestLayout also uses useGlobalShortcuts which has its own cmd+k handler that also dispatches toggleCmdPalette(), pressing cmd+k while the tutorial is visible will toggle the palette twice (opening then immediately closing it). This makes the tutorial's instruction to "press cmd+k" not work as expected for unauthenticated users.
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.
Note
Introduces unauthenticated usage with local persistence and streamlines onboarding.
/login, loaders redirect to/day;CompassApisign-out now routes to/day; newGuestLayout;UserProviderno longer blocks unauth users; WebSocket connects only when authenticatedcompass-local.db) and local event repository with factory to choose local vs remote by session; new local task repository/hook; storage keys consolidated; onboarding progress utilities; initial tasks seeded in day loaderEventApi; adjustEventApi.gettypes; optimisticisOptimisticflag removed from eventsAuthPrompt,CmdPaletteTutorial, and onboarding restart from command palette; command palettes updated;OnboardingFlownow redirects to/dayfake-indexeddb; Jest config refactor with per-project selection; adddexie,dexie-react-hooks,baseline-browser-mappingdependenciesWritten by Cursor Bugbot for commit 9a612d4. This will update automatically on new commits. Configure here.