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

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();
+    });
+  });
 });