feat: split keys in shortcut combos

Author: tyler-dane

packages/web/src/common/utils/shortcut/shortcut.util.tsx

@@ -1,4 +1,8 @@
 import {
+  ArrowDownIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
   CommandIcon,
   ControlIcon,
   type Icon,
@@ -10,9 +14,17 @@ import {
   resolveModifier,
 } from "@tanstack/react-hotkeys";
 
+// `Meta` is the platform "command" key: ⌘ on macOS, the Windows logo elsewhere.
+const metaIcon: Icon =
+  detectPlatform() === "mac" ? CommandIcon : WindowsLogoIcon;
+
 const keyIconMap: Record<string, Icon> = {
-  Meta: CommandIcon,
+  Meta: metaIcon,
   Control: ControlIcon,
+  ArrowUp: ArrowUpIcon,
+  ArrowDown: ArrowDownIcon,
+  ArrowLeft: ArrowLeftIcon,
+  ArrowRight: ArrowRightIcon,
 };
 
 /** Resolves TanStack `Mod` tokens to `Meta` / `Control` for icons and labels. */
@@ -39,8 +51,10 @@ export function ShortCutLabel({ k, size = 14 }: { k: string; size?: number }) {
       return <IconComponent key={key} size={size} data-testid={testId} />;
     }
 
+    // Text keys inherit the surrounding font size (e.g. the keycap chip's 11px)
+    // so letters and modifier icons read consistently together.
     return (
-      <span key={key} data-testid={testId} style={{ fontSize: `${size}px` }}>
+      <span key={key} data-testid={testId}>
         {key}
       </span>
     );
@@ -58,20 +72,3 @@ export const getModifierKeyLabel = (): string => {
 
 export const getModifierKeyTestId = () =>
   `${resolveModifier("Mod").toLowerCase()}-icon`;
-
-export const getModifierKeyIcon = ({ size = 14 }: { size?: number } = {}) => {
-  const k = resolveModifier("Mod");
-
-  return <ShortCutLabel k={k} size={size} />;
-};
-
-export const getMetaKeyIcon = ({ size = 14 }: { size?: number } = {}) => {
-  const platform = detectPlatform();
-  const testId = `${platform}-icon`;
-
-  if (platform === "mac") {
-    return <CommandIcon size={size} data-testid={testId} />;
-  }
-
-  return <WindowsLogoIcon size={size} data-testid={testId} />;
-};

packages/web/src/components/PlannerSidebar/PlannerSidebarActions/PlannerSidebarActions.tsx

@@ -5,7 +5,6 @@ import {
 } from "@phosphor-icons/react";
 import { useVersionCheck } from "@web/common/hooks/useVersionCheck";
 import { reloadLocation } from "@web/common/utils/browser/browser-navigation.util";
-import { getModifierKeyLabel } from "@web/common/utils/shortcut/shortcut.util";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 import { selectIsCmdPaletteOpen } from "@web/ducks/settings/selectors/settings.selectors";
 import { settingsSlice } from "@web/ducks/settings/slices/settings.slice";
@@ -65,7 +64,7 @@ export const PlannerSidebarActions = ({
       <div className="flex items-center gap-2">
         <TooltipWrapper
           description="Open command palette"
-          shortcut={`${getModifierKeyLabel()}+K`}
+          shortcut="Mod+K"
           onClick={toggleCmdPalette}
         >
           <button

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

@@ -96,12 +96,12 @@ describe("SelectView", () => {
         withinDropdown
           .getAllByRole("option")
           .map((option) => option.textContent),
-      ).toEqual(["Dayd", "Weekw"]);
+      ).toEqual(["DayD", "WeekW"]);
 
       const shortcutHints = withinDropdown.getAllByTestId("shortcut-hint");
       expect(shortcutHints).toHaveLength(2);
-      expect(shortcutHints[0]).toHaveTextContent("d");
-      expect(shortcutHints[1]).toHaveTextContent("w");
+      expect(shortcutHints[0]).toHaveTextContent("D");
+      expect(shortcutHints[1]).toHaveTextContent("W");
     });
   });
 
@@ -258,7 +258,7 @@ describe("SelectView", () => {
       const shortcutHint = dayOption.querySelector(
         '[data-testid="shortcut-hint"]',
       );
-      expect(shortcutHint).toHaveTextContent("d");
+      expect(shortcutHint).toHaveTextContent("D");
     });
 
     it("displays w shortcut hint for Week option", async () => {
@@ -270,7 +270,7 @@ describe("SelectView", () => {
       const shortcutHint = weekOption.querySelector(
         '[data-testid="shortcut-hint"]',
       );
-      expect(shortcutHint).toHaveTextContent("w");
+      expect(shortcutHint).toHaveTextContent("W");
     });
   });
 

packages/web/src/components/SelectView/SelectView.tsx

@@ -11,7 +11,7 @@ import { useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { VIEW_SHORTCUTS } from "@web/common/constants/shortcuts.constants";
-import { ShortcutHint } from "@web/components/Shortcuts/ShortcutHint";
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 
 interface SelectViewProps {
   displayLabel?: string;
@@ -179,7 +179,7 @@ export const SelectView = ({
                 )}
               >
                 <span>{option.label}</span>
-                <ShortcutHint>{option.key}</ShortcutHint>
+                <ShortcutKeys combo={option.key} />
               </div>
             );
           })}

packages/web/src/components/Shortcuts/ShortcutKeys.tsx

@@ -0,0 +1,53 @@
+import classNames from "classnames";
+import { ShortCutLabel } from "@web/common/utils/shortcut/shortcut.util";
+import { ShortcutHint } from "@web/components/Shortcuts/ShortcutHint";
+
+/** Aliases for keys users might write differently than the canonical token. */
+const keyAliases: Record<string, string> = {
+  cmd: "Meta",
+  command: "Meta",
+  ctrl: "Control",
+};
+
+/**
+ * Normalizes a single key token for display: uppercases lone letters
+ * (keyboard convention, `w` -> `W`) and resolves common aliases. Named tokens
+ * (`Shift`, `Enter`, `Mod`, `Arrow*`) pass through to `ShortCutLabel`.
+ */
+function normalizeKeyToken(key: string): string {
+  const alias = keyAliases[key.toLowerCase()];
+  if (alias) return alias;
+  if (key.length === 1 && /[a-z]/i.test(key)) return key.toUpperCase();
+  return key;
+}
+
+interface Props {
+  /** A `+`-joined combo, e.g. "Mod+K", "Shift+W", "Control+Meta+ArrowRight". */
+  combo: string;
+  title?: string;
+  className?: string;
+}
+
+/**
+ * Renders a keyboard shortcut as one keycap chip per key, so multi-step combos
+ * read as distinct keys (`[⌘] [K]`) rather than a single `"+"`-joined string.
+ */
+export function ShortcutKeys({ combo, title, className }: Props) {
+  const keys = combo
+    .split("+")
+    .map((key) => key.trim())
+    .filter(Boolean);
+
+  return (
+    <span
+      title={title}
+      className={classNames("inline-flex items-center gap-1", className)}
+    >
+      {keys.map((key) => (
+        <ShortcutHint key={key} variant="keycap">
+          <ShortCutLabel k={normalizeKeyToken(key)} size={13} />
+        </ShortcutHint>
+      ))}
+    </span>
+  );
+}

packages/web/src/components/Shortcuts/ShortcutList.test.tsx

@@ -3,7 +3,7 @@ import { ShortcutList } from "./ShortcutList";
 import { describe, expect, it } from "bun:test";
 
 describe("ShortcutList", () => {
-  it("renders modified shortcuts in one compact keycap", () => {
+  it("renders each key of a combo as its own keycap chip", () => {
     render(
       <ShortcutList
         shortcuts={[{ k: "Shift+w", label: "Create Someday week event" }]}
@@ -16,8 +16,10 @@ describe("ShortcutList", () => {
     const keycaps = row.querySelectorAll("[aria-hidden='true']");
     const label = screen.getByText("Create Someday week event");
 
-    expect(keycaps).toHaveLength(1);
-    expect(keycaps[0]?.textContent).toBe("Shift + w");
+    // One chip per key — "Shift" and "W" — rather than a single "Shift + w".
+    expect(keycaps).toHaveLength(2);
+    expect(keycaps[0]?.textContent).toBe("Shift");
+    expect(keycaps[1]?.textContent).toBe("W");
     expect(label).toHaveClass("flex-1");
     expect(label).not.toHaveClass("truncate");
     expect(row).toHaveClass("justify-between");

packages/web/src/components/Shortcuts/ShortcutList.tsx

@@ -1,27 +1,5 @@
 import { type Shortcut } from "@web/common/types/global.shortcut.types";
-import {
-  expandModInShortcutDisplay,
-  ShortCutLabel,
-} from "@web/common/utils/shortcut/shortcut.util";
-import { ShortcutHint } from "@web/components/Shortcuts/ShortcutHint";
-
-function ShortcutKeySequence({ shortcutKey }: { shortcutKey: string }) {
-  const keys = expandModInShortcutDisplay(shortcutKey).split("+");
-
-  return keys.map((key, idx) => {
-    const trimmedKey = key.trim();
-    const isLastKey = idx === keys.length - 1;
-
-    return (
-      <span key={trimmedKey} className="inline-flex items-center gap-1">
-        <ShortCutLabel k={trimmedKey} />
-        {isLastKey ? null : (
-          <span className="text-text-light-inactive"> + </span>
-        )}
-      </span>
-    );
-  });
-}
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 
 export const ShortcutList = ({ shortcuts }: { shortcuts: Shortcut[] }) => {
   if (!shortcuts.length) return null;
@@ -34,9 +12,7 @@ export const ShortcutList = ({ shortcuts }: { shortcuts: Shortcut[] }) => {
           className="flex min-h-9 items-center justify-between gap-4 rounded-default py-1.5 text-[13px] text-text-lighter leading-tight"
         >
           <span className="min-w-0 flex-1 break-words">{it.label}</span>
-          <ShortcutHint className="shrink-0 whitespace-nowrap" variant="keycap">
-            <ShortcutKeySequence shortcutKey={it.k} />
-          </ShortcutHint>
+          <ShortcutKeys className="shrink-0" combo={it.k} />
         </li>
       ))}
     </ul>

packages/web/src/components/Tooltip/TooltipWrapper.test.tsx

@@ -50,14 +50,16 @@ describe("TooltipWrapper", () => {
   it("shows shortcut when string shortcut provided", async () => {
     const user = userEvent.setup();
     render(
-      <TooltipWrapper shortcut="Ctrl+S">
+      <TooltipWrapper shortcut="Shift+S">
         <button type="button">Save</button>
       </TooltipWrapper>,
     );
     const button = screen.getByRole("button", { name: /save/i });
     await user.hover(button);
+    // The combo renders one chip per key — "Shift" and "S" — not "Shift+S".
     await waitFor(() => {
-      expect(screen.getByText("Ctrl+S")).toBeInTheDocument();
+      expect(screen.getByText("Shift")).toBeInTheDocument();
+      expect(screen.getByText("S")).toBeInTheDocument();
     });
   });
 

packages/web/src/components/Tooltip/TooltipWrapper.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { type ReactNode } from "react";
 import { AlignItems, Flex } from "@web/components/Flex/Flex";
-import { Text } from "@web/components/Text/Text";
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 import {
   Tooltip,
   TooltipContent,
@@ -40,15 +40,12 @@ export const TooltipWrapper: React.FC<Props> = ({
       <TooltipContent>
         <Flex alignItems={AlignItems.CENTER}>
           {description && <TooltipDescription description={description} />}
-          {shortcut && (
-            <ShortcutHint variant="keycap">
-              {typeof shortcut === "string" ? (
-                <Text size="s">{shortcut}</Text>
-              ) : (
-                shortcut
-              )}
-            </ShortcutHint>
-          )}
+          {shortcut &&
+            (typeof shortcut === "string" ? (
+              <ShortcutKeys combo={shortcut} />
+            ) : (
+              <ShortcutHint variant="keycap">{shortcut}</ShortcutHint>
+            ))}
         </Flex>
       </TooltipContent>
     </Tooltip>

packages/web/src/views/Day/components/Shortcuts/ShortcutTip.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useState } from "react";
-import { ShortcutHint } from "@web/components/Shortcuts/ShortcutHint";
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 
 interface ShortcutProps {
   shortcut: string | string[];
@@ -13,19 +13,15 @@ const ShortcutBadge = ({
 }: {
   displayShortcut: string;
   ariaLabel?: string;
-}) => (
-  <ShortcutHint variant="keycap" title={ariaLabel}>
-    {displayShortcut}
-  </ShortcutHint>
-);
+}) => <ShortcutKeys combo={displayShortcut} title={ariaLabel} />;
 
 export const ShortcutTip = ({
   shortcut,
   "aria-label": ariaLabel,
   children,
 }: ShortcutProps) => {
   const displayShortcut = Array.isArray(shortcut)
-    ? shortcut.join(" + ")
+    ? shortcut.join("+")
     : shortcut;
   const [isHovered, setIsHovered] = useState(false);