fix(web): clean up now view shortcuts — labels, key sequences, and platform tooltip (#1807)

* fix(web): update shortcut labels, keys, and tooltip for now view

- Remove Logout shortcut from day/week sidebar (accessible via cmd palette)
- Rename 'Toggle sidebar' to 'Close sidebar'
- Rename 'Toggle shortcuts' to 'Show shortcuts'
- Change edit description shortcut from e to e d sequence
- Change edit reminder shortcut from r to e r sequence
- Move reminder shortcut from global to now view
- Show platform-aware key (⌘ or Ctrl) on save tooltip
- Remove unused isAuthenticated from getShortcuts and callers

* fix(web): add appLocked guard to hotkey sequences and fix stale tests

- Add `useAppHotkeySequence` wrapper that checks `document.body.dataset.appLocked`
  before firing, matching the guard already on `useAppHotkey`
- Use `useAppHotkeySequence` for E D and E R in `useNowShortcuts` instead of raw
  `useHotkeySequence`, which bypassed the app-lock check
- Add missing negative test: E alone must not trigger the E R reminder sequence
- Fix `shortcuts.data.test.ts` assertions to match removed isAuthenticated param,
  removed z/r global shortcuts, renamed labels, and new e d / e r now shortcut keys

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(web): fix TaskDescription tooltip test for platform-aware shortcut rendering

The tooltip shortcut was changed from the string "Mod+Enter" to ShortCutLabel
components that render a platform-specific modifier icon (SVG) plus an Enter
span. The old getByText("Mod+Enter") query found nothing on CI (Linux renders
control-icon, not the text "Mod"). Update to query by the data-testid attributes
that ShortCutLabel already provides, using getModifierKeyTestId() so the
assertion works on both Mac and Linux without hard-coding a platform.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(web): let Escape blur description field instead of navigating away

TanStack hotkeys defaults ignoreInputs:false for Escape, so the global
Escape handler in useNowShortcuts was firing even when the description
textarea had focus, causing navigation to the Day view instead of the
expected a11y behavior (blur/revert the field).

Pass ignoreInputs:true so the global handler is suppressed whenever any
input-like element is focused. TaskDescription already owns its own
onKeyDown Escape handler that reverts the value and exits editing mode;
the global handler now only fires when no input has focus (idle Now view).

Also:
- Rename the existing Escape test to clarify it covers the no-input case
- Add a test that dispatches Escape from a focused textarea (using the
  pressKey target argument) to verify the handler is suppressed

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(web): switch Escape to keydown so ignoreInputs fires before textarea unmounts

The previous keyup-based Escape handler had a race condition:
1. Escape keydown → TaskDescription.handleKeyDown → setIsEditing(false) queued
2. React flushes state between keydown and keyup → textarea unmounts → focus moves to body
3. Escape keyup fires with event.target = document.body (browser reassigns
   target when the focused element is removed)
4. isInputElement(body) = false → ignoreInputs:true check passes → handler runs → navigate

Switching to keydown ensures TanStack fires during the same event cycle as
the React onKeyDown handler, before any state flush. The textarea is still
mounted and focused at that point, so event.target = textarea,
isInputElement = true, and the handler is correctly suppressed.

This is consistent with every other Escape handler in the codebase
(useGlobalShortcuts, Reminder) which also use keydown.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: sync focus so Escape after E→D blurs description instead of navigating

When the user pressed E→D then Escape quickly, the global Escape handler
would navigate to /day instead of letting the textarea handle the key.

Root cause: React schedules state updates via MessageChannel (a separate
macrotask). The browser delivers D keyup and Escape keydown before that
macrotask fires, so the textarea was never rendered or focused when Escape
arrived — meaning ignoreInputs:true couldn't suppress the global handler.

Fix: call flushSync when handling FOCUS_TASK_DESCRIPTION so React renders
synchronously within the D keydown macrotask, and switch the focus call to
useLayoutEffect so it runs inside the same synchronous flush. By the time
D keydown returns, the textarea is in the DOM and focused, so any following
Escape keydown has event.target = textarea and is correctly suppressed.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* fix(web): keep Escape inside now description editor

* chore: remove unnecessary comment in TaskDescription test

---------

Co-authored-by: Tyler Dane <tyler@switchback.tech>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 3 people

packages/web/src/common/hooks/useAppHotkey.ts

@@ -1,7 +1,10 @@
 import {
   type ConflictBehavior,
+  type HotkeySequence,
   type RegisterableHotkey,
+  type UseHotkeySequenceOptions,
   useHotkey,
+  useHotkeySequence,
 } from "@tanstack/react-hotkeys";
 
 export interface UseAppHotkeyOptions {
@@ -53,3 +56,20 @@ export const useAppHotkeyUp = (
   handler: (event: KeyboardEvent) => void,
   options?: Omit<UseAppHotkeyOptions, "eventType">,
 ) => useAppHotkey(hotkey, handler, { ...options, eventType: "keyup" });
+
+export function useAppHotkeySequence(
+  sequence: HotkeySequence,
+  handler: () => void,
+  options: UseHotkeySequenceOptions = {},
+) {
+  useHotkeySequence(
+    sequence,
+    () => {
+      if (document.body.dataset.appLocked === "true") {
+        return;
+      }
+      handler();
+    },
+    options,
+  );
+}

packages/web/src/common/utils/shortcut/data/shortcuts.data.test.ts

@@ -10,10 +10,8 @@ describe("shortcuts.data", () => {
         { k: "n", label: "Now" },
         { k: "d", label: "Day" },
         { k: "w", label: "Week" },
-        { k: "r", label: "Edit reminder" },
-        { k: "[", label: "Toggle sidebar" },
-        { k: "?", label: "Toggle shortcuts" },
-        { k: "z", label: "Log in" },
+        { k: "[", label: "Close sidebar" },
+        { k: "?", label: "Show shortcuts" },
         { k: "Mod+k", label: "Command Palette" },
       ]);
 
@@ -34,12 +32,6 @@ describe("shortcuts.data", () => {
       });
     });
 
-    it("shows logout when authenticated", () => {
-      const shortcuts = getShortcuts({ isAuthenticated: true });
-
-      expect(shortcuts.globalShortcuts[6]).toEqual({ k: "z", label: "Logout" });
-    });
-
     it("should show 'Scroll to now' when currentDate is today", () => {
       const shortcuts = getShortcuts({
         isToday: true,
@@ -121,21 +113,25 @@ describe("shortcuts.data", () => {
         k: "d",
         label: "Day",
       });
-      expect(shortcuts.nowShortcuts).toHaveLength(5);
+      expect(shortcuts.nowShortcuts).toHaveLength(6);
       expect(shortcuts.nowShortcuts[0]).toEqual({
-        k: "e",
+        k: "e d",
         label: "Edit description",
       });
       expect(shortcuts.nowShortcuts[1]).toEqual({
+        k: "e r",
+        label: "Edit reminder",
+      });
+      expect(shortcuts.nowShortcuts[2]).toEqual({
         k: "Mod+Enter",
         label: "Save description",
       });
-      expect(shortcuts.nowShortcuts[2]).toEqual({
+      expect(shortcuts.nowShortcuts[3]).toEqual({
         k: "j",
         label: "Previous task",
       });
-      expect(shortcuts.nowShortcuts[3]).toEqual({ k: "k", label: "Next task" });
-      expect(shortcuts.nowShortcuts[4]).toEqual({
+      expect(shortcuts.nowShortcuts[4]).toEqual({ k: "k", label: "Next task" });
+      expect(shortcuts.nowShortcuts[5]).toEqual({
         k: "Enter",
         label: "Mark complete",
       });

packages/web/src/common/utils/shortcut/data/shortcuts.data.ts

@@ -4,29 +4,20 @@ import { type Shortcut } from "@web/common/types/global.shortcut.types";
 
 interface ShortcutsConfig {
   isHome?: boolean;
-  isAuthenticated?: boolean;
   isToday?: boolean;
   isNow?: boolean;
   currentDate?: dayjs.Dayjs;
 }
 
 export const getShortcuts = (config: ShortcutsConfig = {}) => {
-  const {
-    isAuthenticated = false,
-    isHome = false,
-    isToday = true,
-    isNow = false,
-    currentDate,
-  } = config;
+  const { isHome = false, isToday = true, isNow = false, currentDate } = config;
 
   const globalShortcuts: Shortcut[] = [
     { k: VIEW_SHORTCUTS.now.key, label: VIEW_SHORTCUTS.now.label },
     { k: VIEW_SHORTCUTS.day.key, label: VIEW_SHORTCUTS.day.label },
     { k: VIEW_SHORTCUTS.week.key, label: VIEW_SHORTCUTS.week.label },
-    { k: "r", label: "Edit reminder" },
-    { k: "[", label: "Toggle sidebar" },
-    { k: "?", label: "Toggle shortcuts" },
-    { k: "z", label: isAuthenticated ? "Logout" : "Log in" },
+    { k: "[", label: "Close sidebar" },
+    { k: "?", label: "Show shortcuts" },
     { k: "Mod+k", label: "Command Palette" },
   ];
 
@@ -73,7 +64,8 @@ export const getShortcuts = (config: ShortcutsConfig = {}) => {
   }
   if (isNow) {
     nowShortcuts = [
-      { k: "e", label: "Edit description" },
+      { k: "e d", label: "Edit description" },
+      { k: "e r", label: "Edit reminder" },
       { k: "Mod+Enter", label: "Save description" },
       { k: "j", label: "Previous task" },
       { k: "k", label: "Next task" },

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

@@ -1,6 +1,5 @@
 import { memo, useCallback, useMemo } from "react";
 import dayjs from "@core/util/date/dayjs";
-import { useSession } from "@web/auth/compass/session/useSession";
 import { useCompassRefs } from "@web/common/hooks/useCompassRefs";
 import { useEventDNDActions } from "@web/common/hooks/useEventDNDActions";
 import { useGridOrganization } from "@web/common/hooks/useGridOrganization";
@@ -38,7 +37,6 @@ import { Styled, StyledCalendar } from "@web/views/Week/styled";
 export const DayViewContent = memo(() => {
   const dispatch = useAppDispatch();
   const isSidebarOpen = useAppSelector(selectIsSidebarOpen);
-  const { authenticated } = useSession();
 
   const selectionActions = useMainGridSelectionActions();
   const { timedEventsGridRef } = useCompassRefs();
@@ -64,7 +62,6 @@ export const DayViewContent = memo(() => {
   const dateInView = useDateInView();
   const shortcuts = getShortcuts({
     currentDate: dateInView,
-    isAuthenticated: authenticated,
   });
 
   const {

packages/web/src/views/Now/components/TaskDescription/TaskDescription.test.tsx

@@ -8,6 +8,7 @@ import {
   CompassDOMEvents,
   compassEventEmitter,
 } from "@web/common/utils/dom/event-emitter.util";
+import { getModifierKeyTestId } from "@web/common/utils/shortcut/shortcut.util";
 import { TaskDescription } from "./TaskDescription";
 
 function renderTaskDescription({
@@ -59,7 +60,8 @@ describe("TaskDescription", () => {
     await user.hover(saveButton);
 
     await waitFor(() => {
-      expect(screen.getByText("Mod+Enter")).toBeInTheDocument();
+      expect(screen.getByTestId(getModifierKeyTestId())).toBeInTheDocument();
+      expect(screen.getByTestId("enter-icon")).toBeInTheDocument();
     });
   });
 

packages/web/src/views/Now/components/TaskDescription/TaskDescription.tsx

@@ -6,6 +6,7 @@ import {
   CompassDOMEvents,
   compassEventEmitter,
 } from "@web/common/utils/dom/event-emitter.util";
+import { ShortCutLabel } from "@web/common/utils/shortcut/shortcut.util";
 import { Textarea } from "@web/components/Textarea";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 
@@ -140,6 +141,14 @@ const SaveButton = styled.button`
   }
 `;
 
+const saveDescriptionShortcut = (
+  <span className="inline-flex items-center gap-1">
+    <ShortCutLabel k="Mod" size={12} />
+    <span>+</span>
+    <ShortCutLabel k="Enter" size={12} />
+  </span>
+);
+
 export const TaskDescription: React.FC<TaskDescriptionProps> = ({
   description = "",
   onSave,
@@ -199,22 +208,26 @@ export const TaskDescription: React.FC<TaskDescriptionProps> = ({
     };
   }, [isEditing, saveDescription]);
 
-  const handleClick = () => {
+  const startEditing = () => {
     setIsEditing(true);
   };
 
-  const handleBlur = () => {
+  const saveDescriptionOnBlur = () => {
     saveDescription();
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const updateDraftDescription = (
+    e: React.ChangeEvent<HTMLTextAreaElement>,
+  ) => {
     const newValue = e.target.value;
     if (newValue.length <= MAX_DESCRIPTION_LENGTH) {
       setValue(newValue);
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const cancelEditingOnEscape = (
+    e: React.KeyboardEvent<HTMLTextAreaElement>,
+  ) => {
     if (e.key === "Escape") {
       setValue(originalValueRef.current);
       setIsEditing(false);
@@ -230,9 +243,9 @@ export const TaskDescription: React.FC<TaskDescriptionProps> = ({
           <StyledDescription
             ref={textareaRef}
             value={value}
-            onChange={handleChange}
-            onBlur={handleBlur}
-            onKeyDown={handleKeyDown}
+            onChange={updateDraftDescription}
+            onBlur={saveDescriptionOnBlur}
+            onKeyDown={cancelEditingOnEscape}
             placeholder="Add a description..."
             maxLength={MAX_DESCRIPTION_LENGTH}
             id={TASK_DESCRIPTION_ID}
@@ -242,7 +255,10 @@ export const TaskDescription: React.FC<TaskDescriptionProps> = ({
             <CharacterCount isNearLimit={isNearLimit}>
               {value.length}/{MAX_DESCRIPTION_LENGTH}
             </CharacterCount>
-            <TooltipWrapper description="Save description" shortcut="Mod+Enter">
+            <TooltipWrapper
+              description="Save description"
+              shortcut={saveDescriptionShortcut}
+            >
               <SaveButton
                 aria-label="Save description"
                 onClick={saveDescription}
@@ -256,7 +272,7 @@ export const TaskDescription: React.FC<TaskDescriptionProps> = ({
         </>
       ) : (
         <DescriptionText
-          onClick={handleClick}
+          onClick={startEditing}
           className={value.length < 1 ? "empty" : ""}
         >
           {value.length < 1 ? "Add a description..." : value}

packages/web/src/views/Now/context/NowViewProvider.tsx

@@ -7,6 +7,8 @@ import { ensureStorageReady } from "@web/common/storage/adapter/adapter";
 import { type Task } from "@web/common/types/task.types";
 import { getDateKey } from "@web/common/utils/storage/storage.util";
 import { getIncompleteTasksSorted } from "@web/common/utils/task/sort.task";
+import { viewSlice } from "@web/ducks/events/slices/view.slice";
+import { useAppDispatch } from "@web/store/store.hooks";
 import { useAvailableTasks } from "../hooks/useAvailableTasks";
 import { useFocusedTask } from "../hooks/useFocusedTask";
 import { useNowShortcuts } from "../shortcuts/useNowShortcuts";
@@ -35,6 +37,7 @@ export function NowViewProvider({
   children,
   onToggleSidebar,
 }: NowViewProviderProps) {
+  const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { availableTasks, allTasks, hasCompletedTasks } = useAvailableTasks();
   const { focusedTask, setFocusedTask } = useFocusedTask({ availableTasks });
@@ -135,13 +138,23 @@ export function NowViewProvider({
     setFocusedTask,
   ]);
 
+  const handleEscape = useCallback(() => {
+    navigate(ROOT_ROUTES.DAY);
+  }, [navigate]);
+
+  const handleEditReminder = useCallback(() => {
+    dispatch(viewSlice.actions.updateReminder(true));
+  }, [dispatch]);
+
   useNowShortcuts({
     focusedTask,
     availableTasks,
     onPreviousTask: handlePreviousTask,
     onNextTask: handleNextTask,
     onCompleteTask: handleCompleteTask,
     onToggleSidebar,
+    onEscape: handleEscape,
+    onEditReminder: handleEditReminder,
   });
 
   const value: NowViewContextValue = {

packages/web/src/views/Now/shortcuts/useNowShortcuts.test.tsx

@@ -30,7 +30,7 @@ describe("useNowShortcuts", () => {
     );
   });
 
-  it("uses E to focus the task description", async () => {
+  it("uses E D sequence to focus the task description", async () => {
     const onFocusDescription = mock();
     compassEventEmitter.on(
       CompassDOMEvents.FOCUS_TASK_DESCRIPTION,
@@ -39,13 +39,14 @@ describe("useNowShortcuts", () => {
     renderHook(() => useNowShortcuts(), { wrapper });
 
     pressKey("e");
+    pressKey("d");
 
     await waitFor(() => {
       expect(onFocusDescription).toHaveBeenCalledTimes(1);
     });
   });
 
-  it("does not use D for the task description shortcut", async () => {
+  it("does not focus description when pressing D alone", async () => {
     const onFocusDescription = mock();
     compassEventEmitter.on(
       CompassDOMEvents.FOCUS_TASK_DESCRIPTION,
@@ -70,4 +71,58 @@ describe("useNowShortcuts", () => {
       expect(onToggleSidebar).toHaveBeenCalledTimes(1);
     });
   });
+
+  it("navigates to day view when Escape is pressed outside an input", async () => {
+    const onEscape = mock();
+    renderHook(() => useNowShortcuts({ onEscape }), { wrapper });
+
+    pressKey("Escape");
+
+    await waitFor(() => {
+      expect(onEscape).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("does not navigate when Escape is pressed inside a textarea", async () => {
+    const onEscape = mock();
+    renderHook(() => useNowShortcuts({ onEscape }), { wrapper });
+
+    const textarea = document.createElement("textarea");
+    document.body.appendChild(textarea);
+
+    try {
+      textarea.focus();
+
+      pressKey("Escape", {}, textarea);
+
+      await waitFor(() => {
+        expect(onEscape).not.toHaveBeenCalled();
+      });
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  });
+
+  it("uses E R sequence to edit reminder", async () => {
+    const onEditReminder = mock();
+    renderHook(() => useNowShortcuts({ onEditReminder }), { wrapper });
+
+    pressKey("e");
+    pressKey("r");
+
+    await waitFor(() => {
+      expect(onEditReminder).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it("does not edit reminder when pressing E alone", async () => {
+    const onEditReminder = mock();
+    renderHook(() => useNowShortcuts({ onEditReminder }), { wrapper });
+
+    pressKey("e");
+
+    await waitFor(() => {
+      expect(onEditReminder).not.toHaveBeenCalled();
+    });
+  });
 });