chore: extract welcome code

Author: tyler-dane

packages/web/src/auth/compass/session/SessionProvider.tsx

@@ -23,8 +23,8 @@ import EmailVerification from "supertokens-web-js/recipe/emailverification";
 import Session from "supertokens-web-js/recipe/session";
 import ThirdParty from "supertokens-web-js/recipe/thirdparty";
 import { clearGoogleSyncIndicatorOverride } from "../../google/state/google.sync.state";
-import { SessionContext } from "./session.context";
 import { refreshUserMetadata } from "../user/util/user-metadata.util";
+import { SessionContext } from "./session.context";
 
 SuperTokens.init({
 	appInfo: {

packages/web/src/common/constants/storage.constants.ts

@@ -1,10 +1,18 @@
 import { z } from "zod";
 
-export const StorageKeySchema = z.enum(["compass.reminder", "compass.auth"]);
+export const StorageKeySchema = z.enum([
+  "compass.reminder",
+  "compass.auth",
+  "compass.onboarding.has-seen-welcome",
+]);
 
 export type StorageKey = z.infer<typeof StorageKeySchema>;
 
-export const STORAGE_KEYS: Record<"REMINDER" | "AUTH", StorageKey> = {
+export const STORAGE_KEYS: Record<
+  "REMINDER" | "AUTH" | "HAS_SEEN_WELCOME",
+  StorageKey
+> = {
   REMINDER: "compass.reminder",
   AUTH: "compass.auth",
+  HAS_SEEN_WELCOME: "compass.onboarding.has-seen-welcome",
 } as const;

packages/web/src/components/WelcomeModal/WelcomeModal.test.tsx

@@ -20,8 +20,10 @@ mock.module("@web/components/AuthModal/hooks/useAuthModal", () => ({
 	}),
 }));
 
-const { WelcomeModal, STORAGE_KEY } =
+const { WelcomeModal } =
 	require("./WelcomeModal") as typeof import("./WelcomeModal");
+const { STORAGE_KEYS } =
+	require("@web/common/constants/storage.constants") as typeof import("@web/common/constants/storage.constants");
 
 describe("WelcomeModal", () => {
 	beforeEach(() => {
@@ -45,7 +47,7 @@ describe("WelcomeModal", () => {
 				screen.queryByRole("dialog", { name: "Welcome to Compass Calendar" }),
 			).toBeNull();
 		});
-		expect(localStorage.getItem(STORAGE_KEY)).toBe("true");
+		expect(localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME)).toBe("true");
 	});
 
 	it("closes when Escape is pressed", async () => {
@@ -65,7 +67,7 @@ describe("WelcomeModal", () => {
 				screen.queryByRole("dialog", { name: "Welcome to Compass Calendar" }),
 			).toBeNull();
 		});
-		expect(localStorage.getItem(STORAGE_KEY)).toBe("true");
+		expect(localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME)).toBe("true");
 	});
 
 	it("expands and collapses FAQ answers", async () => {
@@ -101,36 +103,4 @@ describe("WelcomeModal", () => {
 		expect(answer).toHaveAttribute("aria-hidden", "true");
 		expect(answer).toHaveAttribute("data-state", "closed");
 	});
-
-	it("uses the shared focus ring on modal links and FAQ triggers", async () => {
-		const user = userEvent.setup();
-
-		render(<WelcomeModal />);
-
-		const openSourceQuestion = screen.getByRole("button", {
-			name: "How much of the code is open-source?",
-		});
-		expect(openSourceQuestion).toHaveClass("c-focus-ring");
-
-		await user.click(openSourceQuestion);
-
-		expect(
-			screen.getByRole("link", { name: "self-hosting guide" }),
-		).toHaveClass("c-focus-ring");
-		expect(screen.getByRole("link", { name: "X (Twitter)" })).toHaveClass(
-			"c-focus-ring",
-		);
-		expect(screen.getByRole("link", { name: "LinkedIn" })).toHaveClass(
-			"c-focus-ring",
-		);
-		expect(screen.getByRole("link", { name: "GitHub" })).toHaveClass(
-			"c-focus-ring",
-		);
-		expect(screen.getByRole("link", { name: "Privacy" })).toHaveClass(
-			"c-focus-ring",
-		);
-		expect(screen.getByRole("link", { name: "Terms" })).toHaveClass(
-			"c-focus-ring",
-		);
-	});
 });

packages/web/src/components/WelcomeModal/WelcomeModal.tsx

@@ -15,46 +15,8 @@ import {
 	useRef,
 	useState,
 } from "react";
-
-export const STORAGE_KEY = "compass.onboarding.has-seen-welcome";
-
-function hasSeenWelcome(): boolean {
-	try {
-		return localStorage.getItem(STORAGE_KEY) === "true";
-	} catch {
-		return true;
-	}
-}
-
-function markWelcomeSeen(): void {
-	try {
-		localStorage.setItem(STORAGE_KEY, "true");
-	} catch {
-		// Silently fail if localStorage is unavailable
-	}
-}
-
-const FAQ_ITEMS = [
-	{
-		question: "Who is Compass for?",
-		answer:
-			"Compass is designed for minimalists who value efficiency, keyboard shortcuts, and open-source software. We are focused on helping people do more with less.",
-	},
-	{
-		question: "Does Compass use AI?",
-		answer:
-			"Not currently. Compass gives you the tools to make your own decisions about how to spend your time, without algorithmic suggestions you'll ignore anyway.",
-	},
-	{
-		question: "How much of the code is open-source?",
-		answer: null, // rendered separately
-	},
-	{
-		question: "What makes Compass different from other calendars?",
-		answer:
-			"It's simpler and faster. Instead of doing everything, we do a few things well.",
-	},
-];
+import { FAQ_ITEMS } from "./faq";
+import { hasSeenWelcome, markWelcomeSeen } from "./welcome.modal.util";
 
 export function WelcomeModal() {
 	const { authenticated } = useContext(SessionContext);
@@ -183,18 +145,15 @@ export function WelcomeModal() {
 												item.answer
 											) : (
 												<>
-													All of it! Compass is a monorepo that includes the
-													API, frontend, CLI, and more. You can run it yourself
-													too; read the{" "}
+													Yes! The repo includes the API, frontend, CLI, and
+													more. You can run it yourself too; read the{" "}
 													<a
 														href="/blog/self-host"
 														className="c-focus-ring font-medium text-accent-primary underline-offset-4 hover:underline"
 													>
 														self-hosting guide
 													</a>{" "}
-													to set up your own instance. It&apos;s all available
-													on GitHub (link in footer), and we&apos;re always
-													looking for contributors :]
+													to set up your own instance.
 												</>
 											)}
 										</div>

packages/web/src/components/WelcomeModal/faq.ts

@@ -0,0 +1,21 @@
+export const FAQ_ITEMS = [
+	{
+		question: "Who is Compass for?",
+		answer:
+			"Compass is designed for minimalists who value efficiency, keyboard shortcuts, and open-source software. We are focused on helping people do more with less.",
+	},
+	{
+		question: "Does Compass use AI?",
+		answer:
+			"Not currently. Compass gives you the tools to make your own decisions about how to spend your time, without algorithmic suggestions you'll ignore anyway.",
+	},
+	{
+		question: "Is it open-source?",
+		answer: null, // rendered separately
+	},
+	{
+		question: "What makes Compass different from other calendars?",
+		answer:
+			"It's simpler and faster. Instead of doing everything, we do a few things well.",
+	},
+];

packages/web/src/components/WelcomeModal/welcome.modal.util.ts

@@ -0,0 +1,17 @@
+import { STORAGE_KEYS } from "@web/common/constants/storage.constants";
+
+export function hasSeenWelcome(): boolean {
+	try {
+		return localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME) === "true";
+	} catch {
+		return true;
+	}
+}
+
+export function markWelcomeSeen(): void {
+	try {
+		localStorage.setItem(STORAGE_KEYS.HAS_SEEN_WELCOME, "true");
+	} catch {
+		// Silently fail if localStorage is unavailable
+	}
+}