Skip to content

feat: simplify onboarding#1404

Merged
tyler-dane merged 145 commits intomainfrom
feat/onboarding
Feb 1, 2026
Merged

feat: simplify onboarding#1404
tyler-dane merged 145 commits intomainfrom
feat/onboarding

Conversation

@tyler-dane
Copy link
Contributor

@tyler-dane tyler-dane commented Jan 2, 2026

Note

Medium Risk
Touches authentication/session handling, API interceptor sign-out behavior, and Google Calendar sync signaling; mistakes could cause broken login flows or missing events, but changes are largely additive with extensive new tests.

Overview
Adds a persistent “has ever authenticated” flag and refactors auth/onboarding storage. Introduces zod-backed localStorage schemas for auth/onboarding, updates hooks to read/write unified onboarding progress, and gates UserProvider profile fetching for users who have never authenticated.

Improves Google OAuth/import UX and sync signaling. Adds an OAuth sync overlay test suite and supporting e2e hooks, buffers overlay visibility to avoid flashing, locks the app via data-app-locked (and blocks keyboard shortcuts while locked), and updates backend Google Calendar import to return a JSON import summary over websocket (with updated backend tests).

Introduces repository abstractions and offline storage plumbing. Adds EventRepository interface with LocalEventRepository (Dexie/IndexedDB) and RemoteEventRepository, plus selection logic that prefers remote once a user has authenticated; adds Dexie DB setup, DB init error handling/toasts, and test infrastructure (fake-indexeddb).

Test/tooling updates. Adds Playwright e2e coverage for timed/someday/allday CRUD flows (some currently skipped), new unit tests around auth hooks/utilities, repository behavior, and date range overlap; refactors Jest config to allow running a single project via CLI args.

Written by Cursor Bugbot for commit 080fcdc. This will update automatically on new commits. Configure here.

- 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
Copilot AI review requested due to automatic review settings January 2, 2026 19:01
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

- 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
- 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.
Copilot AI review requested due to automatic review settings January 2, 2026 19:48
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 38 out of 38 changed files in this pull request and generated 13 comments.

…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.
Copilot AI review requested due to automatic review settings January 2, 2026 23:49
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 47 out of 47 changed files in this pull request and generated 5 comments.

…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.
- Updated useGoogleLoginWithSyncOverlay to retain the isSyncing state when isSyncingRetainedOnSuccess is true, preventing unintended clearing of the syncing state during component remounts.
- Added a new test to verify that isSyncing is not cleared on remount under the specified condition, enhancing the reliability of the authentication flow.
- Replaced the loadLoggedInData function with loadOnboardingStatus to streamline onboarding state management.
- Removed unused onboarding data loading functions to enhance code clarity and maintainability.
- Updated the router configuration to utilize the new onboarding status loader, ensuring proper handling of user onboarding states.
- Deleted the OnboardingFlow component and its associated test file to streamline the codebase.
- Removed references to the onboarding route from the routing configuration and constants, enhancing clarity and maintainability.
- Updated the useGoogleAuth hook to eliminate navigation to the onboarding route, reflecting the removal of onboarding functionality.
…cOverlay for improved state management

- Refactored the useGoogleAuth and useGoogleLoginWithSyncOverlay hooks to simplify the handling of the isSyncing state during login processes, ensuring it is set correctly on login start and cleared appropriately on errors.
- Updated tests to reflect these changes, enhancing the reliability of the authentication flow and ensuring proper state management during various scenarios.
- Removed unnecessary callbacks and improved the overall structure for better maintainability.
…r integration

- Introduced the useConnectGoogle hook to manage Google Calendar connection state and login functionality.
- Created unit tests for useConnectGoogle to verify its behavior when connected and disconnected from Google Calendar.
- Updated CmdPalette and DayCmdPalette components to utilize the new hook, enhancing the user experience for connecting Google Calendar.
- Refactored existing components to remove direct dependencies on useSession and useGoogleAuth, promoting better separation of concerns.
Copilot AI review requested due to automatic review settings February 1, 2026 03:57
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 204 out of 206 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/web/src/auth/session/SessionProvider.tsx:99

  • The reconnect function signature has changed from accepting a message parameter to having no parameters. This is a breaking API change. Verify that all call sites have been updated (the change at line 99 shows one update, but ensure there are no other callers that still pass the message parameter).

WEB_IS_DEV: "false",
GOOGLE_CLIENT_ID: "test-client-id",
API_BASEURL: "http://localhost:3000/api",
BASEURL: "http://localhost:3000/api",
Copy link

Copilot AI Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The environment variable name has changed from API_BASEURL to BASEURL in the webpack configuration. This is a breaking change that will affect any deployment scripts or CI/CD pipelines that set this variable. Ensure that all deployment configurations are updated accordingly, and consider adding a migration guide.

Copilot uses AI. Check for mistakes.
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 6 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

});

this.save(dateKey, newTasks);
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing bounds check in task reorder causes crash

Low Severity

The reorder method lacks bounds validation for sourceIndex. If sourceIndex exceeds the array length, splice(sourceIndex, 1) returns an empty array, making moved undefined. This undefined value gets inserted into the array. Subsequently, filtering with newTasks.filter((t) => t.status === "todo") crashes when accessing t.status on the undefined element.

Fix in Cursor Fix in Web

- Added useConnectGoogle and useGoogleAuth hooks to manage Google Calendar connection and authentication flow.
- Implemented unit tests for both hooks to ensure correct behavior during various authentication states.
- Refactored components to utilize the new hooks, improving code organization and separation of concerns.
- Updated existing tests to reflect changes in hook usage, enhancing overall test coverage and reliability.
- Renamed useGoogleLoginWithSyncOverlay to useGoogleAuthWithOverlay for clarity and consistency.
- Introduced useGoogleAuthWithOverlay hook to manage Google authentication with improved state handling.
- Added comprehensive unit tests for useGoogleAuthWithOverlay to ensure correct behavior during various authentication scenarios.
- Updated useGoogleAuth to utilize the new hook, enhancing code organization and maintainability.
- Introduced auth slice to manage user authentication state, including status and error handling.
- Updated useGoogleAuth hook to dispatch authentication actions (startAuthenticating, authSuccess, authError) during the authentication flow.
- Enhanced initial state setup in tests to include authentication state, ensuring comprehensive testing coverage.
- Refactored related components to utilize the new authentication state management, improving code organization and maintainability.
- Updated SyncEventsOverlay to show overlay during authentication, syncing, and importing states.
- Introduced selectIsAuthenticating selector to manage authentication status.
- Refactored logic to determine active overlay state, improving user experience during authentication flows.
…flashing

- Introduced useBufferedVisibility hook to buffer visibility state changes, enhancing user experience during rapid state transitions.
- Updated SyncEventsOverlay to utilize the new hook, ensuring consistent visibility during authentication and importing phases.
- Added comprehensive tests for useBufferedVisibility to validate its behavior under various scenarios, preventing UI flashes during state changes.
…ment

- Introduced `awaitingImportResults` and `importError` states in the importGCal slice to better manage the Google Calendar import process.
- Updated the `useGoogleAuth` and `useGcalSync` hooks to dispatch actions related to the new states, improving error handling and user feedback during the import process.
- Refactored `SyncEventsOverlay` to display appropriate messages based on the new states, enhancing user experience during authentication and importing phases.
- Added tests to ensure correct behavior of the new state management and its integration with existing hooks and components.
…er step text

- Made `stepText` prop optional in `GuideProgressIndicator` to allow for cases where step text should not be displayed.
- Added a test to verify that step text is not rendered when omitted.
- Updated related hooks and components to handle the absence of step text appropriately, enhancing the onboarding experience.
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 5 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

…ory test factory

- Deleted the createTestEvents factory function, which was previously used to generate multiple test events.
- This change simplifies the test factory file by removing unnecessary code, improving maintainability.
- Deleted the useTaskRepository hook and its corresponding test file, as they were no longer needed.
- This cleanup improves code maintainability by removing unused code and tests related to the task repository functionality.
- Deleted the LocalTaskRepository test file as part of a cleanup effort, improving code maintainability by removing unnecessary tests related to task management functionality.
- Renamed and updated the test for the OAuth overlay to reflect the correct phase during authentication.
- Refactored utility functions to manage authentication state via Redux, replacing the previous test hooks approach.
- Introduced a new function to set the awaiting import results state, enhancing the management of overlay phases during testing.
- Deleted the LocalEventRepository test file as part of a cleanup effort, improving code maintainability by removing unnecessary tests related to event management functionality.
Copilot AI review requested due to automatic review settings February 1, 2026 19:05
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 208 out of 210 changed files in this pull request and generated 5 comments.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 4 potential issues.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

@tyler-dane tyler-dane merged commit 0396782 into main Feb 1, 2026
12 checks passed
@tyler-dane tyler-dane deleted the feat/onboarding branch February 1, 2026 19:34
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