feat(web): onboarding polish - welcome shortcuts, Hardcore Mode, all-day nudge convert (#2752)

* feat(web): onboarding polish - welcome shortcuts, Hardcore Mode, all-day nudge convert

- Welcome dialog: u/i/s shortcuts for Sign up/Log in/Start Now, with keycap hints
- Rename keyboard-only mode copy to Hardcore Mode; sidebar advertises only Esc
- Render key names in shortcut tip text as keycaps instead of plain words
- Shift+ArrowDown on a focused all-day event converts it to a 60-minute timed event
- Refresh welcome heading/body copy and demo-events banner copy

* fix(e2e): update keyboard-only-mode spec for Hardcore Mode copy rename

Author: tyler-dane

e2e/timed/keyboard-only-mode.spec.ts

@@ -41,8 +41,8 @@ test("SHIFT-SHIFT enters keyboard-only mode; clicks are inert until Escape", asy
   await tapShift(page);
   await tapShift(page);
 
-  await expect(keyboardOnlyIndicator(page)).toContainText("Keyboard only");
-  await expect(keyboardOnlyIndicator(page)).toContainText("Esc or Shift Shift");
+  await expect(keyboardOnlyIndicator(page)).toContainText("Hardcore Mode");
+  await expect(keyboardOnlyIndicator(page)).toContainText("Esc");
 
   // Shortcuts overlay stays mounted with role=dialog even when closed, so
   // assert the event form did not open rather than dialog count.

packages/web/src/common/utils/event/event-nudge.util.test.ts

@@ -1,5 +1,6 @@
 import dayjs from "@core/util/date/dayjs";
 import {
+  convertAllDayToTimedDates,
   getArrowKeyMovement,
   isTimedEventFullCalendarDay,
   isTimedEventInsideOneDay,
@@ -42,6 +43,28 @@ describe("getArrowKeyMovement", () => {
   });
 });
 
+describe("convertAllDayToTimedDates", () => {
+  it("places the event at the given start minute on its start day with a 60-minute duration", () => {
+    const result = convertAllDayToTimedDates(
+      { startDate: "2026-05-20" },
+      9 * 60,
+    );
+
+    expect(result.startDate).toStartWith("2026-05-20T09:00:00");
+    expect(result.endDate).toStartWith("2026-05-20T10:00:00");
+  });
+
+  it("only reads the event's start day, so a multi-day span collapses onto it", () => {
+    const result = convertAllDayToTimedDates(
+      { startDate: "2026-05-20" },
+      13 * 60 + 30,
+    );
+
+    expect(result.startDate).toStartWith("2026-05-20T13:30:00");
+    expect(result.endDate).toStartWith("2026-05-20T14:30:00");
+  });
+});
+
 describe("nudgeEventDates", () => {
   const timedEvent = {
     startDate: "2026-05-20T10:00:00",

packages/web/src/common/utils/event/event-nudge.util.ts

@@ -29,6 +29,31 @@ export const getArrowKeyMovement = (
   }
 };
 
+// Mirrors CROSS_ROW_TIMED_DURATION_MIN (grid/interaction/math/cross-row.drag.ts),
+// the duration invented when a mouse drag converts an all-day event into the
+// timed grid. Kept as a local constant to avoid a common-utils -> grid/interaction
+// dependency for one shared number.
+const CONVERTED_TIMED_DURATION_MIN = 60;
+
+/**
+ * All-day -> timed via Shift+ArrowDown. Mirrors the drag conversion: start of
+ * day plus a caller-supplied visible start minute, fixed duration. A
+ * multi-day span collapses onto its start day - the keyboard has no drop
+ * column to say otherwise.
+ */
+export const convertAllDayToTimedDates = (
+  event: Pick<CompassEvent, "startDate">,
+  startMinute: number,
+): { startDate: string; endDate: string } => {
+  const start = dayjs(event.startDate)
+    .startOf("day")
+    .add(startMinute, "minute");
+  return {
+    startDate: start.format(),
+    endDate: start.add(CONVERTED_TIMED_DURATION_MIN, "minute").format(),
+  };
+};
+
 export const isTimedEventInsideOneDay = (start: Dayjs, end: Dayjs) => {
   const midnightAfterStart = start.add(1, "day").startOf("day");
 

packages/web/src/components/CommandPalette/navigation.cmd.constants.test.ts

@@ -25,7 +25,7 @@ describe("getNavigationCommandItems", () => {
       "Go to Week",
       "Go to Life",
       "Show shortcuts",
-      "Toggle keyboard-only mode",
+      "Toggle Hardcore Mode",
     ]);
   });
 
@@ -52,7 +52,7 @@ describe("getNavigationCommandItems", () => {
       "Go to Day",
       "Go to Week",
       "Go to Life",
-      "Toggle keyboard-only mode",
+      "Toggle Hardcore Mode",
     ]);
   });
 
@@ -77,11 +77,7 @@ describe("getNavigationCommandItems", () => {
       onNavigateToView: () => {},
     }).map((item) => item.label);
 
-    expect(labels).toEqual([
-      "Go to Day",
-      "Go to Week",
-      "Toggle keyboard-only mode",
-    ]);
+    expect(labels).toEqual(["Go to Day", "Go to Week", "Toggle Hardcore Mode"]);
   });
 
   it("runs the matching navigation callbacks", () => {
@@ -137,7 +133,7 @@ describe("getNavigationCommandItems", () => {
         onNavigateToView: () => {},
       }).find((entry) => entry.id === "enter-keyboard-only");
 
-      expect(item?.label).toBe("Toggle keyboard-only mode");
+      expect(item?.label).toBe("Toggle Hardcore Mode");
       expect(item?.shortcut).toEqual(["Shift", "Shift"]);
     });
   });

packages/web/src/components/CommandPalette/navigation.cmd.constants.ts

@@ -124,10 +124,17 @@ export const getNavigationCommandItems = ({
 
   calendarItems.push({
     id: "enter-keyboard-only",
-    label: "Toggle keyboard-only mode",
+    label: "Toggle Hardcore Mode",
     icon: KeyboardIcon,
     shortcut: ["Shift", "Shift"],
-    keywords: ["keyboard", "clicks", "pointer", "mouseless", "hotkeys"],
+    keywords: [
+      "keyboard",
+      "hardcore",
+      "clicks",
+      "pointer",
+      "mouseless",
+      "hotkeys",
+    ],
     // Defer so the palette closes before click-blocking installs.
     onClick: () =>
       queueMicrotask(() => {

packages/web/src/components/DemoEventsBanner/DemoEventsBanner.tsx

@@ -28,8 +28,7 @@ export const DemoEventsBanner: FC<DemoEventsBannerProps> = ({ onDismiss }) => (
     role="status"
   >
     <span>
-      Sample events to help you explore. Edit yourself or clear all from the cmd
-      palette.
+      Sample events to help you explore. Edit or clear from the cmd palette.
     </span>
     <button
       className="c-focus-ring shrink-0 rounded-xs px-2 py-1 text-text hover:bg-surface-overlay"

packages/web/src/components/OnboardingTour/onboarding.tour.steps.test.ts

@@ -86,11 +86,12 @@ describe("onboarding tour steps", () => {
     expect(shortcuts?.shortcutHint).toBe("?");
   });
 
-  it("points the finale at keyboard-only practice", () => {
+  it("points the finale at Hardcore Mode practice", () => {
     const done = getOnboardingTourSteps().find((step) => step.id === "done");
 
     expect(done?.body).toMatch(/anything with the keyboard/i);
     expect(done?.body).toMatch(/Shift Shift/i);
+    expect(done?.body).toMatch(/Hardcore Mode/i);
     expect(done?.body).toMatch(/clicks/i);
     expect(done?.body).toMatch(/command palette/i);
     expect(done?.shortcutHint).toEqual(["Shift", "Shift"]);

packages/web/src/components/OnboardingTour/onboarding.tour.steps.ts

@@ -89,7 +89,7 @@ export function getOnboardingTourSteps(): OnboardingTourStep[] {
     },
     done: {
       title: "You are ready",
-      body: "You can do anything with the keyboard. Try Shift Shift to practice; clicks stay off until you exit. Sample events are already on your calendar. Reopen this tour from the command palette anytime.",
+      body: "You can do anything with the keyboard. Try Shift Shift to enter Hardcore Mode; clicks stay off until you exit. Sample events are already on your calendar. Reopen this tour from the command palette anytime.",
       shortcutHint: ["Shift", "Shift"],
     },
   };

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

@@ -25,12 +25,10 @@ export function WelcomeGuideBody() {
     <>
       <div className="flex flex-col gap-2">
         <h2 className="font-bold text-2xl text-text leading-snug">
-          The best place to manage your schedule at the keyboard.
+          The keyboard-first calendar
         </h2>
         <p className="text-text-muted">
-          Move fast, stay focused, and never reach for the mouse. Even
-          scheduling itself is quicker from the keyboard than any other
-          calendar.
+          Rediscover the joy of shortcuts as you build your perfect schedule.
         </p>
       </div>
 

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

@@ -66,12 +66,10 @@ describe("WelcomeModal", () => {
 
     expect(
       screen.getByRole("heading", {
-        name: "The best place to manage your schedule at the keyboard.",
+        name: "The keyboard-first calendar",
       }),
     ).toBeTruthy();
-    expect(
-      screen.getByText(/Move fast, stay focused, and never reach for/),
-    ).toBeTruthy();
+    expect(screen.getByText(/Rediscover the joy of shortcuts/)).toBeTruthy();
     expect(screen.getByRole("img", { name: /pixel pirate/i })).toBeTruthy();
     expect(screen.getByText("No signup required")).toBeTruthy();
   });
@@ -178,6 +176,45 @@ describe("WelcomeModal", () => {
     expect(answer).toHaveAttribute("data-state", "closed");
   });
 
+  it("opens sign up with the U shortcut", async () => {
+    const user = userEvent.setup();
+    render(<WelcomeModal />);
+
+    await user.keyboard("u");
+
+    expect(mockOpenModal).toHaveBeenCalledWith("signUp");
+    expect(localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME)).toBe("true");
+  });
+
+  it("opens log in with the I shortcut", async () => {
+    const user = userEvent.setup();
+    render(<WelcomeModal />);
+
+    await user.keyboard("i");
+
+    expect(mockOpenModal).toHaveBeenCalledWith("login");
+    expect(localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME)).toBe("true");
+  });
+
+  it("dismisses with the S shortcut", async () => {
+    const user = userEvent.setup();
+    render(<WelcomeModal />);
+
+    await user.keyboard("s");
+
+    expect(localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME)).toBe("true");
+  });
+
+  it("ignores the shortcut keys when a modifier is held", async () => {
+    const user = userEvent.setup();
+    render(<WelcomeModal />);
+
+    await user.keyboard("{Meta>}u{/Meta}");
+
+    expect(mockOpenModal).not.toHaveBeenCalled();
+    expect(localStorage.getItem(STORAGE_KEYS.HAS_SEEN_WELCOME)).toBeNull();
+  });
+
   it("focuses the first control and keeps Tab inside the dialog", async () => {
     const user = userEvent.setup();