refactor: ShortcutKeys accepts a key or key array directly

Callers no longer need a helper or a single-element array: ShortcutKeys
takes `keys: string | string[]` and normalizes internally, so a one-key
hint is just `keys="?"` and a combo is `keys={["Mod", "K"]}`.

- toKeyArray is now private to ShortcutKeys (un-exported).
- TooltipWrapper / MenuItem / ShortcutTip pass their `string | string[]`
  shortcut straight through — no toKeyArray call at the call site.
- SelectView passes `keys={option.key}` instead of `keys={[option.key]}`.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: tyler-dane

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

@@ -179,7 +179,7 @@ export const SelectView = ({
                 )}
               >
                 <span>{option.label}</span>
-                <ShortcutKeys keys={[option.key]} />
+                <ShortcutKeys keys={option.key} />
               </div>
             );
           })}

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

@@ -15,6 +15,14 @@ describe("ShortcutKeys", () => {
     expect(chips[1]?.textContent).toBe("W");
   });
 
+  it("accepts a single key as a bare string (one chip)", () => {
+    const { container } = render(<ShortcutKeys keys="?" />);
+
+    const chips = keycaps(container);
+    expect(chips).toHaveLength(1);
+    expect(chips[0]?.textContent).toBe("?");
+  });
+
   it("resolves the `cmd` alias to the Meta (Command) icon", () => {
     render(<ShortcutKeys keys={["cmd", "K"]} />);
 
@@ -27,7 +35,10 @@ describe("ShortcutKeys", () => {
     const { container } = render(<ShortcutKeys keys={[]} />);
     expect(keycaps(container)).toHaveLength(0);
 
-    // Blank/whitespace entries are dropped, leaving nothing to render.
+    // Blank/whitespace entries (string or array) are dropped.
+    const { container: emptyString } = render(<ShortcutKeys keys="" />);
+    expect(keycaps(emptyString)).toHaveLength(0);
+
     const { container: whitespace } = render(
       <ShortcutKeys keys={["", "  "]} />,
     );

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

@@ -23,16 +23,16 @@ function normalizeKeyToken(key: string): string {
 
 /**
  * Normalizes a `string | string[]` shortcut to a key array. A lone string is
- * treated as a single key (never split), so callers can pass `"?"` for a
- * one-key hint and `["Mod", "K"]` for a combo — no `"+"` parsing involved.
+ * treated as a single key (never split), so callers pass `"?"` for a one-key
+ * hint and `["Mod", "K"]` for a combo — no `"+"` parsing involved.
  */
-export function toKeyArray(keys: string | string[]): string[] {
+function toKeyArray(keys: string | string[]): string[] {
   return Array.isArray(keys) ? keys : [keys];
 }
 
 interface Props {
-  /** One key per entry, e.g. `["Mod", "K"]`, `["Shift", "W"]`, `["?"]`. */
-  keys: string[];
+  /** A single key (`"?"`) or one key per entry (`["Mod", "K"]`). */
+  keys: string | string[];
   title?: string;
   className?: string;
 }
@@ -42,7 +42,9 @@ interface Props {
  * read as distinct keys (`[⌘] [K]`) rather than a single `"+"`-joined string.
  */
 export function ShortcutKeys({ keys, title, className }: Props) {
-  const cleaned = keys.map((key) => key.trim()).filter(Boolean);
+  const cleaned = toKeyArray(keys)
+    .map((key) => key.trim())
+    .filter(Boolean);
 
   // Nothing to render -> emit nothing, rather than an empty chip row.
   if (cleaned.length === 0) return null;

packages/web/src/components/Shortcuts/ShortcutOverlay/ShortcutsOverlay.tsx

@@ -36,7 +36,7 @@ export const ShortcutsOverlay = ({
       className={classNames(
         "fixed top-24 left-3 border-border-primary bg-bg-secondary",
         "border p-3 shadow-lg backdrop-blur-sm md:block",
-        `hidden w-[240px] rounded-lg ${className}`,
+        `hidden w-60 rounded-lg ${className}`,
       )}
       style={{ zIndex: maxZIndex }}
     >

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

@@ -1,10 +1,7 @@
 import type React from "react";
 import { type ReactNode } from "react";
 import { AlignItems, Flex } from "@web/components/Flex/Flex";
-import {
-  ShortcutKeys,
-  toKeyArray,
-} from "@web/components/Shortcuts/ShortcutKeys";
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 import {
   Tooltip,
   TooltipContent,
@@ -46,7 +43,7 @@ export const TooltipWrapper: React.FC<Props> = ({
           {description && <TooltipDescription description={description} />}
           {shortcut &&
             (typeof shortcut === "string" || Array.isArray(shortcut) ? (
-              <ShortcutKeys keys={toKeyArray(shortcut)} />
+              <ShortcutKeys keys={shortcut} />
             ) : (
               <ShortcutHint variant="keycap">{shortcut}</ShortcutHint>
             ))}

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

@@ -1,8 +1,5 @@
 import { type ReactNode, useState } from "react";
-import {
-  ShortcutKeys,
-  toKeyArray,
-} from "@web/components/Shortcuts/ShortcutKeys";
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 
 interface ShortcutProps {
   shortcut: string | string[];
@@ -11,19 +8,18 @@ interface ShortcutProps {
 }
 
 const ShortcutBadge = ({
-  keys,
+  shortcut,
   ariaLabel,
 }: {
-  keys: string[];
+  shortcut: string | string[];
   ariaLabel?: string;
-}) => <ShortcutKeys keys={keys} title={ariaLabel} />;
+}) => <ShortcutKeys keys={shortcut} title={ariaLabel} />;
 
 export const ShortcutTip = ({
   shortcut,
   "aria-label": ariaLabel,
   children,
 }: ShortcutProps) => {
-  const keys = toKeyArray(shortcut);
   const [isHovered, setIsHovered] = useState(false);
 
   if (children != null) {
@@ -35,10 +31,12 @@ export const ShortcutTip = ({
         onMouseLeave={() => setIsHovered(false)}
       >
         {children}
-        {isHovered && <ShortcutBadge keys={keys} ariaLabel={ariaLabel} />}
+        {isHovered && (
+          <ShortcutBadge shortcut={shortcut} ariaLabel={ariaLabel} />
+        )}
       </span>
     );
   }
 
-  return <ShortcutBadge keys={keys} ariaLabel={ariaLabel} />;
+  return <ShortcutBadge shortcut={shortcut} ariaLabel={ariaLabel} />;
 };

packages/web/src/views/Forms/ActionsMenu/MenuItem.tsx

@@ -1,9 +1,6 @@
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
-import {
-  ShortcutKeys,
-  toKeyArray,
-} from "@web/components/Shortcuts/ShortcutKeys";
+import { ShortcutKeys } from "@web/components/Shortcuts/ShortcutKeys";
 import {
   Tooltip,
   TooltipContent,
@@ -93,10 +90,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
     </button>
   );
 
-  const tooltipKeys = tooltipContent ? toKeyArray(tooltipContent) : [];
-
   // No keys to show -> render the bare button (no empty tooltip surface).
-  if (tooltipKeys.length === 0) {
+  if (!tooltipContent || tooltipContent.length === 0) {
     return button;
   }
 
@@ -108,7 +103,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     >
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent>
-        <ShortcutKeys keys={tooltipKeys} />
+        <ShortcutKeys keys={tooltipContent} />
       </TooltipContent>
     </Tooltip>
   );