refactor(onboarding): streamline CmdPaletteGuide and onboarding step 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.

Author: tyler-dane

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

@@ -286,12 +286,11 @@ describe("CmdPaletteGuide", () => {
     // Should show step 1 instructions instead since step 1 wasn't completed
     expect(screen.getByText("Welcome to the Day View")).toBeInTheDocument();
     expect(
-      screen.getByText(
+      screen.getAllByText(
         (_, element) =>
-          element?.textContent === "Press 2 to go to the Day view" ?? false,
-      ),
+          element?.textContent === "You're already on the Day view." ?? false,
+      )[0],
     ).toBeInTheDocument();
-    expect(screen.getByText("2")).toBeInTheDocument();
     expect(screen.getByText("Step 1 of 6")).toBeInTheDocument();
   });
 
@@ -348,30 +347,6 @@ describe("CmdPaletteGuide", () => {
     expect(screen.getByText("Step 5 of 6")).toBeInTheDocument();
   });
 
-  it("should not render step 3 on Day view", () => {
-    mockUseLocation.mockReturnValue({ pathname: "/day" } as any);
-    markStepCompleted(ONBOARDING_STEPS.NAVIGATE_TO_DAY);
-    markStepCompleted(ONBOARDING_STEPS.CREATE_TASK);
-    markStepCompleted(ONBOARDING_STEPS.NAVIGATE_TO_NOW);
-    mockUseCmdPaletteGuide.mockReturnValue({
-      currentStep: ONBOARDING_STEPS.EDIT_DESCRIPTION,
-      isGuideActive: true,
-      completeStep: jest.fn(),
-      skipGuide: jest.fn(),
-      completeGuide: jest.fn(),
-    });
-
-    render(<CmdPaletteGuide />);
-
-    expect(screen.queryByText("Welcome to Compass")).not.toBeInTheDocument();
-    expect(
-      screen.queryByText("Welcome to the Day View"),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText("Welcome to the Now View"),
-    ).not.toBeInTheDocument();
-  });
-
   it("should render on Day view when authenticated", () => {
     mockUseLocation.mockReturnValue({ pathname: "/day" } as any);
     mockUseSession.mockReturnValue({ authenticated: true });
@@ -497,31 +472,6 @@ describe("CmdPaletteGuide", () => {
     expect(progressDots).toHaveLength(6);
   });
 
-  it("should not render step 4 on Day view", () => {
-    mockUseLocation.mockReturnValue({ pathname: "/day" } as any);
-    markStepCompleted(ONBOARDING_STEPS.NAVIGATE_TO_DAY);
-    markStepCompleted(ONBOARDING_STEPS.CREATE_TASK);
-    markStepCompleted(ONBOARDING_STEPS.NAVIGATE_TO_NOW);
-    markStepCompleted(ONBOARDING_STEPS.EDIT_DESCRIPTION);
-    mockUseCmdPaletteGuide.mockReturnValue({
-      currentStep: ONBOARDING_STEPS.EDIT_REMINDER,
-      isGuideActive: true,
-      completeStep: jest.fn(),
-      skipGuide: jest.fn(),
-      completeGuide: jest.fn(),
-    });
-
-    render(<CmdPaletteGuide />);
-
-    expect(screen.queryByText("Welcome to Compass")).not.toBeInTheDocument();
-    expect(
-      screen.queryByText("Welcome to the Day View"),
-    ).not.toBeInTheDocument();
-    expect(
-      screen.queryByText("Welcome to the Now View"),
-    ).not.toBeInTheDocument();
-  });
-
   it("should call unified step detection hook", () => {
     mockUseLocation.mockReturnValue({ pathname: "/day" } as any);
     mockUseCmdPaletteGuide.mockReturnValue({

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

@@ -1,6 +1,5 @@
 import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { useSession } from "@web/common/hooks/useSession";
 import { getModifierKey } from "@web/common/utils/shortcut/shortcut.util";
 import {
   ONBOARDING_GUIDE_VIEWS,
@@ -18,8 +17,7 @@ import {
 
 export const CmdPaletteGuide: FC = () => {
   const location = useLocation();
-  const { authenticated } = useSession();
-  const { currentStep, isGuideActive, completeStep, skipGuide } =
+  const { currentStep, completeStep, skipGuide, isGuideActive } =
     useCmdPaletteGuide();
   const step2CompletionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [isSuccessMessageDismissed, setIsSuccessMessageDismissed] =
@@ -79,23 +77,13 @@ export const CmdPaletteGuide: FC = () => {
     isStepCompleted(ONBOARDING_STEPS.NAVIGATE_TO_WEEK) &&
     !isSuccessMessageDismissed;
 
-  // Determine if we should show the overlay
-  // Show success message if final step is completed, OR show guide if active with a step
-  // But respect view restrictions: step 1 on any view, step 2 on day/now, steps 3/4 only on now, step 5 on any
+  if (!isGuideActive && !showSuccessMessage) {
+    return null;
+  }
+
   const actualStepConfig = actualStep
     ? ONBOARDING_STEP_CONFIGS.find((config) => config.id === actualStep)
     : null;
-  const visibilityByAuth = authenticated
-    ? actualStepConfig?.guide.visibilityByAuth.authenticated
-    : actualStepConfig?.guide.visibilityByAuth.unauthenticated;
-  const canRenderStep = visibilityByAuth?.includes(currentView) ?? false;
-  const shouldShowOverlay =
-    showSuccessMessage ||
-    (isGuideActive && actualStep !== null && canRenderStep);
-
-  if (!shouldShowOverlay) {
-    return null;
-  }
 
   const modifierKey = getModifierKey();
   const modifierKeyDisplay = modifierKey === "Meta" ? "⌘" : "Ctrl";

packages/web/src/views/Onboarding/constants/onboarding.constants.ts

@@ -27,13 +27,10 @@ export const ONBOARDING_STEP_CONFIGS: readonly OnboardingStepConfig[] = [
     id: ONBOARDING_STEPS.NAVIGATE_TO_DAY,
     order: 0,
     detectionType: "route",
-    detectionConfig: { route: "/day" },
+    detectionConfig: { route: "/day", routePrefixes: ["/day/"] },
     guide: {
-      visibilityByAuth: {
-        authenticated: ["day", "now", "week"],
-        unauthenticated: ["day", "now", "week"],
-      },
       instructionsByView: {
+        day: [{ type: "text", value: "You're already on the Day view." }],
         default: [
           { type: "text", value: "Press " },
           { type: "kbd", value: "2" },
@@ -47,10 +44,6 @@ export const ONBOARDING_STEP_CONFIGS: readonly OnboardingStepConfig[] = [
     order: 1,
     detectionType: "task-count",
     guide: {
-      visibilityByAuth: {
-        authenticated: ["day"],
-        unauthenticated: ["day"],
-      },
       instructionsByView: {
         day: [
           { type: "text", value: "Type " },
@@ -64,12 +57,8 @@ export const ONBOARDING_STEP_CONFIGS: readonly OnboardingStepConfig[] = [
     id: ONBOARDING_STEPS.NAVIGATE_TO_NOW,
     order: 2,
     detectionType: "route",
-    detectionConfig: { route: "/now" },
+    detectionConfig: { route: "/now", routePrefixes: ["/now/"] },
     guide: {
-      visibilityByAuth: {
-        authenticated: ["now", "week"],
-        unauthenticated: ["day", "now", "week"],
-      },
       instructionsByView: {
         default: [
           { type: "text", value: "Press " },
@@ -84,10 +73,6 @@ export const ONBOARDING_STEP_CONFIGS: readonly OnboardingStepConfig[] = [
     order: 3,
     detectionType: "task-description",
     guide: {
-      visibilityByAuth: {
-        authenticated: ["now"],
-        unauthenticated: ["now"],
-      },
       instructionsByView: {
         default: [
           { type: "text", value: "Press " },
@@ -102,10 +87,6 @@ export const ONBOARDING_STEP_CONFIGS: readonly OnboardingStepConfig[] = [
     order: 4,
     detectionType: "reminder-poll",
     guide: {
-      visibilityByAuth: {
-        authenticated: ["now"],
-        unauthenticated: ["now"],
-      },
       instructionsByView: {
         default: [
           { type: "text", value: "Press " },
@@ -121,10 +102,6 @@ export const ONBOARDING_STEP_CONFIGS: readonly OnboardingStepConfig[] = [
     detectionType: "route",
     detectionConfig: { route: "/" },
     guide: {
-      visibilityByAuth: {
-        authenticated: ["day", "now", "week"],
-        unauthenticated: ["day", "now", "week"],
-      },
       instructionsByView: {
         default: [
           { type: "text", value: "Type " },

packages/web/src/views/Onboarding/hooks/useStepDetection.ts

@@ -204,21 +204,23 @@ export function useStepDetection({
 
       case "route": {
         const routeConfig = stepConfig.detectionConfig as
-          | { route: string }
+          | { route: string; routePrefixes?: string[] }
           | undefined;
         if (!routeConfig) return;
 
         // Normalize route paths for comparison
         const targetRoute =
           routeConfig.route === "/" ? ROOT_ROUTES.ROOT : routeConfig.route;
         const currentPath = location.pathname;
+        const matchesPrefix =
+          routeConfig.routePrefixes?.some((prefix) =>
+            currentPath.startsWith(prefix),
+          ) ?? false;
 
         // Check if we're on the target route
         if (
           !hasCompletedRef.current &&
-          (currentPath === targetRoute ||
-            (targetRoute === ROOT_ROUTES.NOW &&
-              currentPath.startsWith(`${ROOT_ROUTES.NOW}/`)))
+          (currentPath === targetRoute || matchesPrefix)
         ) {
           hasCompletedRef.current = true;
           onStepComplete(currentStep);

packages/web/src/views/Onboarding/types/onboarding.guide.types.ts

@@ -48,12 +48,8 @@ export interface OnboardingStepConfig {
   id: OnboardingStepName;
   order: number;
   detectionType: StepDetectionType;
-  detectionConfig?: { route: string };
+  detectionConfig?: { route: string; routePrefixes?: string[] };
   guide: {
-    visibilityByAuth: {
-      authenticated: OnboardingGuideView[];
-      unauthenticated: OnboardingGuideView[];
-    };
     instructionsByView: Partial<
       Record<OnboardingInstructionVariant, OnboardingInstructionPart[]>
     >;