feat(web): enhance onboarding experience with new steps and improved 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.

Author: tyler-dane

packages/web/src/views/Calendar/components/Header/Reminder/Reminder.tsx

@@ -253,6 +253,9 @@ export const Reminder = forwardRef(
     const handleReminderKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (e.key === "Enter") {
         e.preventDefault();
+        e.stopPropagation(); // Prevent the Enter key from bubbling up to global shortcuts
+        // Blur the input immediately to prevent global Enter handlers from firing
+        e.currentTarget.blur();
         setIsEditing(false);
         // Save to localStorage on ENTER
         const latestValue = e.currentTarget.textContent || "";

packages/web/src/views/Day/hooks/onboarding/useAuthPrompt.ts

@@ -11,7 +11,6 @@ interface UseAuthPromptProps {
   tasks: Array<{ id: string }>;
   hasNavigatedDates: boolean;
   showOnboardingOverlay: boolean;
-  showCmdPaletteTutorial: boolean;
 }
 
 interface UseAuthPromptReturn {
@@ -28,7 +27,6 @@ export function useAuthPrompt({
   tasks,
   hasNavigatedDates,
   showOnboardingOverlay,
-  showCmdPaletteTutorial,
 }: UseAuthPromptProps): UseAuthPromptReturn {
   const { authenticated } = useSession();
   const isCmdPaletteOpen = useAppSelector(selectIsCmdPaletteOpen);
@@ -48,7 +46,7 @@ export function useAuthPrompt({
     const shouldShow =
       tasks.length >= 2 || hasNavigatedDates || isCmdPaletteOpen;
 
-    if (shouldShow && !showOnboardingOverlay && !showCmdPaletteTutorial) {
+    if (shouldShow && !showOnboardingOverlay) {
       // Delay showing auth prompt to avoid overwhelming user
       const timer = setTimeout(() => {
         setShowAuthPrompt(true);
@@ -62,7 +60,6 @@ export function useAuthPrompt({
     hasNavigatedDates,
     isCmdPaletteOpen,
     showOnboardingOverlay,
-    showCmdPaletteTutorial,
   ]);
 
   const dismissAuthPrompt = () => {

packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.test.tsx

@@ -72,51 +72,6 @@ describe("useOnboardingOverlays", () => {
     expect(result.current.showOnboardingOverlay).toBe(false);
   });
 
-  it("should show cmd palette tutorial after onboarding overlay is dismissed", async () => {
-    updateOnboardingProgress({ isCompleted: true });
-    const store = createTestStore();
-
-    const { result } = renderHook(
-      () =>
-        useOnboardingOverlays({
-          tasks: [],
-          hasNavigatedDates: false,
-        }),
-      {
-        wrapper: ({ children }) => (
-          <Provider store={store}>{children}</Provider>
-        ),
-      },
-    );
-
-    await waitFor(
-      () => {
-        expect(result.current.showCmdPaletteTutorial).toBe(true);
-      },
-      { timeout: 2000 },
-    );
-  });
-
-  it("should not show cmd palette tutorial if already seen", () => {
-    updateOnboardingProgress({ isSeen: true, isCompleted: true });
-    const store = createTestStore();
-
-    const { result } = renderHook(
-      () =>
-        useOnboardingOverlays({
-          tasks: [],
-          hasNavigatedDates: false,
-        }),
-      {
-        wrapper: ({ children }) => (
-          <Provider store={store}>{children}</Provider>
-        ),
-      },
-    );
-
-    expect(result.current.showCmdPaletteTutorial).toBe(false);
-  });
-
   it("should show auth prompt after user creates 2+ tasks", async () => {
     updateOnboardingProgress({ isCompleted: true, isSeen: true });
     const store = createTestStore();
@@ -191,34 +146,6 @@ describe("useOnboardingOverlays", () => {
     expect(result.current.showAuthPrompt).toBe(false);
   });
 
-  it("should mark cmd palette as used when opened", async () => {
-    updateOnboardingProgress({ isCompleted: true });
-    const store = createTestStore(true); // cmd palette is open
-
-    const { result } = renderHook(
-      () =>
-        useOnboardingOverlays({
-          tasks: [],
-          hasNavigatedDates: false,
-        }),
-      {
-        wrapper: ({ children }) => (
-          <Provider store={store}>{children}</Provider>
-        ),
-      },
-    );
-
-    // Wait for the effect to run and mark tutorial as seen
-    await waitFor(
-      () => {
-        const progress = getOnboardingProgress();
-        expect(progress.isSeen).toBe(true);
-        expect(result.current.showCmdPaletteTutorial).toBe(false);
-      },
-      { timeout: 3000 },
-    );
-  });
-
   it("should dismiss onboarding overlay and skip guide", async () => {
     const store = createTestStore();
 

packages/web/src/views/Day/hooks/onboarding/useOnboardingOverlays.ts

@@ -1,6 +1,5 @@
 import type { OnboardingStepName } from "@web/views/Onboarding/constants/onboarding.constants";
 import { useAuthPrompt } from "./useAuthPrompt";
-import { useCmdPaletteTutorial } from "./useCmdPaletteTutorial";
 import { useOnboardingOverlay } from "./useOnboardingOverlay";
 
 interface UseOnboardingOverlaysProps {
@@ -11,17 +10,14 @@ interface UseOnboardingOverlaysProps {
 interface UseOnboardingOverlaysReturn {
   showOnboardingOverlay: boolean;
   currentStep: OnboardingStepName | null;
-  showCmdPaletteTutorial: boolean;
   showAuthPrompt: boolean;
   dismissOnboardingOverlay: () => void;
-  dismissCmdPaletteTutorial: () => void;
   dismissAuthPrompt: () => void;
-  markCmdPaletteUsed: () => void;
 }
 
 /**
  * Composes multiple onboarding overlay hooks into a single hook
- * Manages the display logic for onboarding overlay, cmd palette tutorial, and auth prompt
+ * Manages the display logic for onboarding overlay and auth prompt
  */
 export function useOnboardingOverlays({
   tasks,
@@ -30,29 +26,17 @@ export function useOnboardingOverlays({
   const { showOnboardingOverlay, currentStep, dismissOnboardingOverlay } =
     useOnboardingOverlay();
 
-  const {
-    showCmdPaletteTutorial,
-    dismissCmdPaletteTutorial,
-    markCmdPaletteUsed,
-  } = useCmdPaletteTutorial({
-    showOnboardingOverlay,
-  });
-
   const { showAuthPrompt, dismissAuthPrompt } = useAuthPrompt({
     tasks,
     hasNavigatedDates,
     showOnboardingOverlay,
-    showCmdPaletteTutorial,
   });
 
   return {
     showOnboardingOverlay,
     currentStep,
-    showCmdPaletteTutorial,
     showAuthPrompt,
     dismissOnboardingOverlay,
-    dismissCmdPaletteTutorial,
     dismissAuthPrompt,
-    markCmdPaletteUsed,
   };
 }

packages/web/src/views/Day/view/DayViewContent.tsx

@@ -20,7 +20,6 @@ import { useRefetch } from "@web/views/Calendar/hooks/useRefetch";
 import { StyledCalendar } from "@web/views/Calendar/styled";
 import { Agenda } from "@web/views/Day/components/Agenda/Agenda";
 import { AuthPrompt } from "@web/views/Day/components/AuthPrompt/AuthPrompt";
-import { CmdPaletteTutorial } from "@web/views/Day/components/CmdPaletteTutorial/CmdPaletteTutorial";
 import { DayCmdPalette } from "@web/views/Day/components/DayCmdPalette";
 import { Header } from "@web/views/Day/components/Header/Header";
 import { StorageInfoModal } from "@web/views/Day/components/StorageInfoModal/StorageInfoModal";
@@ -77,13 +76,7 @@ export const DayViewContent = memo(() => {
   }, [dateInView]);
 
   // Onboarding overlays
-  const {
-    showCmdPaletteTutorial,
-    showAuthPrompt,
-    dismissCmdPaletteTutorial,
-    dismissAuthPrompt,
-    markCmdPaletteUsed,
-  } = useOnboardingOverlays({
+  const { showAuthPrompt, dismissAuthPrompt } = useOnboardingOverlays({
     tasks,
     hasNavigatedDates,
   });
@@ -184,14 +177,6 @@ export const DayViewContent = memo(() => {
 
       {/* Onboarding overlays */}
       <CmdPaletteGuide />
-      {showCmdPaletteTutorial && (
-        <CmdPaletteTutorial
-          onDismiss={() => {
-            dismissCmdPaletteTutorial();
-            markCmdPaletteUsed();
-          }}
-        />
-      )}
       {showAuthPrompt && <AuthPrompt onDismiss={dismissAuthPrompt} />}
 
       <ShortcutsOverlay

packages/web/src/views/Now/shortcuts/useNowShortcuts.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
+import { ID_REMINDER_INPUT } from "@web/common/constants/web.constants";
 import {
   useKeyDownEvent,
   useKeyUpEvent,
@@ -69,10 +70,19 @@ export function useNowShortcuts(props?: Props) {
     deps: [handleTaskNavigation, onNextTask],
   });
 
+  const handleEnterKey = useCallback(() => {
+    // Don't trigger if the reminder input is focused
+    const activeElement = document.activeElement as HTMLElement | null;
+    if (activeElement?.id === ID_REMINDER_INPUT) {
+      return;
+    }
+    handleTaskNavigation(onCompleteTask)?.();
+  }, [handleTaskNavigation, onCompleteTask]);
+
   useKeyUpEvent({
     combination: ["Enter"],
-    handler: handleTaskNavigation(onCompleteTask),
-    deps: [handleTaskNavigation, onCompleteTask],
+    handler: handleEnterKey,
+    deps: [handleEnterKey],
   });
 
   useKeyDownEvent({

packages/web/src/views/Onboarding/components/CmdPaletteGuide.test.tsx

@@ -152,7 +152,7 @@ describe("CmdPaletteGuide", () => {
       screen.getByText(/Press.*to go to the \/now view/i),
     ).toBeInTheDocument();
     expect(screen.getByText("1")).toBeInTheDocument(); // The kbd element
-    expect(screen.getByText("Step 2 of 4")).toBeInTheDocument();
+    expect(screen.getByText("Step 2 of 6")).toBeInTheDocument();
   });
 
   it("should show step 1 instructions on Now view when step 1 is not completed", () => {
@@ -173,7 +173,7 @@ describe("CmdPaletteGuide", () => {
     expect(screen.getByText("Welcome to the Now View")).toBeInTheDocument();
     expect(screen.getByText(/Type.*to create a task/i)).toBeInTheDocument();
     expect(screen.getByText("c")).toBeInTheDocument();
-    expect(screen.getByText("Step 1 of 4")).toBeInTheDocument();
+    expect(screen.getByText("Step 1 of 6")).toBeInTheDocument();
   });
 
   it("should render step 2 instructions on Day view when step 1 is completed", () => {
@@ -222,7 +222,7 @@ describe("CmdPaletteGuide", () => {
     expect(screen.getByText("Welcome to the Day View")).toBeInTheDocument();
     expect(screen.getByText(/Type.*to create a task/i)).toBeInTheDocument();
     expect(screen.getByText("c")).toBeInTheDocument();
-    expect(screen.getByText("Step 1 of 4")).toBeInTheDocument();
+    expect(screen.getByText("Step 1 of 6")).toBeInTheDocument();
   });
 
   it("should render step 3 instructions on Now view", () => {
@@ -242,7 +242,7 @@ describe("CmdPaletteGuide", () => {
       screen.getByText(/Press.*to edit the description/i),
     ).toBeInTheDocument();
     expect(screen.getByText("d")).toBeInTheDocument(); // The kbd element
-    expect(screen.getByText("Step 3 of 4")).toBeInTheDocument();
+    expect(screen.getByText("Step 3 of 6")).toBeInTheDocument();
   });
 
   it("should render step 4 instructions on Now view", () => {
@@ -265,7 +265,30 @@ describe("CmdPaletteGuide", () => {
       screen.getByText(/Press.*to edit the reminder/i),
     ).toBeInTheDocument();
     expect(screen.getByText("r")).toBeInTheDocument(); // The kbd element
-    expect(screen.getByText("Step 4 of 4")).toBeInTheDocument();
+    expect(screen.getByText("Step 4 of 6")).toBeInTheDocument();
+  });
+
+  it("should render step 5 instructions on Now view", () => {
+    mockUseLocation.mockReturnValue({ pathname: "/now" } as any);
+    markStepCompleted(ONBOARDING_STEPS.CREATE_TASK);
+    markStepCompleted(ONBOARDING_STEPS.NAVIGATE_TO_NOW);
+    markStepCompleted(ONBOARDING_STEPS.EDIT_DESCRIPTION);
+    markStepCompleted(ONBOARDING_STEPS.EDIT_REMINDER);
+    mockUseCmdPaletteGuide.mockReturnValue({
+      currentStep: ONBOARDING_STEPS.CMD_PALETTE_INFO,
+      isGuideActive: true,
+      completeStep: jest.fn(),
+      skipGuide: jest.fn(),
+      completeGuide: jest.fn(),
+    });
+
+    render(<CmdPaletteGuide />);
+
+    expect(screen.getByText("Welcome to the Now View")).toBeInTheDocument();
+    expect(
+      screen.getByText(/If you ever forget a shortcut/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Step 5 of 6")).toBeInTheDocument();
   });
 
   it("should not render step 3 on Day view", () => {
@@ -385,9 +408,9 @@ describe("CmdPaletteGuide", () => {
 
     // Check that progress dots are rendered
     const progressDots = screen
-      .getByText("Step 2 of 4")
+      .getByText("Step 2 of 6")
       .parentElement?.querySelectorAll("div[class*='rounded-full']");
-    expect(progressDots).toHaveLength(4);
+    expect(progressDots).toHaveLength(6);
   });
 
   it("should show progress indicators on Day view", () => {
@@ -402,12 +425,12 @@ describe("CmdPaletteGuide", () => {
 
     render(<CmdPaletteGuide />);
 
-    expect(screen.getByText("Step 1 of 4")).toBeInTheDocument();
+    expect(screen.getByText("Step 1 of 6")).toBeInTheDocument();
     // Check that progress dots are rendered
     const progressDots = screen
-      .getByText("Step 1 of 4")
+      .getByText("Step 1 of 6")
       .parentElement?.querySelectorAll("div[class*='rounded-full']");
-    expect(progressDots).toHaveLength(4);
+    expect(progressDots).toHaveLength(6);
   });
 
   it("should not render step 4 on Day view", () => {