fix: sync e2e shortcut hints and guard empty keycaps

- e2e/week-view-switch: assert uppercased view shortcut hints (d/w -> D/W,
  "Dayd"/"Weekw" -> "DayD"/"WeekW") to match the per-key chip rendering.
- MenuItem: render the bare button (no empty tooltip surface) when
  tooltipContent is omitted, honoring the documented "tooltip disabled"
  contract.
- ShortcutKeys: return null for combos with no keys instead of an empty
  chip row; add focused tests for per-key split, uppercasing, the cmd
  alias, and the empty-combo guard.

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

Author: tyler-dane

e2e/navigation/week-view-switch.spec.ts

@@ -3,8 +3,8 @@ import { expect, type Page, test } from "@playwright/test";
 type ViewName = "day" | "week";
 
 const shortcutByView = {
-  day: "d",
-  week: "w",
+  day: "D",
+  week: "W",
 } as const satisfies Record<ViewName, string>;
 
 const collectUnexpectedConsoleErrors = (page: Page) => {
@@ -60,7 +60,7 @@ test.describe("View dropdown", () => {
 
     await expect(
       page.getByTestId("view-select-dropdown").getByRole("option"),
-    ).toHaveText(["Dayd", "Weekw"]);
+    ).toHaveText(["DayD", "WeekW"]);
     await expect(viewOption(page, "day")).toHaveAttribute(
       "aria-selected",
       "false",

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

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { ShortcutKeys } from "./ShortcutKeys";
+import { describe, expect, it } from "bun:test";
+
+const keycaps = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[aria-hidden='true']"));
+
+describe("ShortcutKeys", () => {
+  it("renders one keycap chip per key and uppercases lone letters", () => {
+    const { container } = render(<ShortcutKeys combo="Shift+w" />);
+
+    const chips = keycaps(container);
+    expect(chips).toHaveLength(2);
+    expect(chips[0]?.textContent).toBe("Shift");
+    expect(chips[1]?.textContent).toBe("W");
+  });
+
+  it("resolves the `cmd` alias to the Meta (Command) icon", () => {
+    render(<ShortcutKeys combo="cmd+K" />);
+
+    // `cmd` -> Meta, which renders an icon rather than literal text.
+    expect(screen.getByTestId("meta-icon")).toBeInTheDocument();
+    expect(screen.getByText("K")).toBeInTheDocument();
+  });
+
+  it("renders nothing when the combo has no keys", () => {
+    const { container } = render(<ShortcutKeys combo="" />);
+    expect(keycaps(container)).toHaveLength(0);
+
+    const { container: whitespace } = render(<ShortcutKeys combo="  +  " />);
+    expect(keycaps(whitespace)).toHaveLength(0);
+  });
+});

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

@@ -38,6 +38,9 @@ export function ShortcutKeys({ combo, title, className }: Props) {
     .map((key) => key.trim())
     .filter(Boolean);
 
+  // Nothing to render -> emit nothing, rather than an empty chip row.
+  if (keys.length === 0) return null;
+
   return (
     <span
       title={title}

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

@@ -74,29 +74,35 @@ const MenuItem: React.FC<MenuItemProps> = ({
       onKeyDown: handleKeyDown,
     }) || {};
 
-  // With tooltip
+  const button = (
+    <button
+      {...rest}
+      {...itemProps}
+      ref={itemRef}
+      role="menuitem"
+      tabIndex={tabIndex}
+      type={type}
+      className="flex w-full cursor-pointer items-center gap-2 border-0 bg-[var(--actions-menu-item-bg)] px-2 py-1 text-left text-m text-text-dark outline-none hover:[text-shadow:0_0_0.5px_var(--compass-color-text-dark),0_0_0.5px_var(--compass-color-text-dark)] focus-visible:[text-shadow:0_0_0.5px_var(--compass-color-text-dark),0_0_0.5px_var(--compass-color-text-dark)]"
+      style={{ backgroundColor: bgColor }}
+    >
+      {children}
+    </button>
+  );
+
+  // No combo to show -> render the bare button (no empty tooltip surface).
+  if (!tooltipContent) {
+    return button;
+  }
+
   return (
     <Tooltip
       open={isTooltipOpen}
       onOpenChange={setIsTooltipOpen}
       placement="right-end"
     >
-      <TooltipTrigger asChild>
-        <button
-          {...rest}
-          {...itemProps}
-          ref={itemRef}
-          role="menuitem"
-          tabIndex={tabIndex}
-          type={type}
-          className="flex w-full cursor-pointer items-center gap-2 border-0 bg-[var(--actions-menu-item-bg)] px-2 py-1 text-left text-m text-text-dark outline-none hover:[text-shadow:0_0_0.5px_var(--compass-color-text-dark),0_0_0.5px_var(--compass-color-text-dark)] focus-visible:[text-shadow:0_0_0.5px_var(--compass-color-text-dark),0_0_0.5px_var(--compass-color-text-dark)]"
-          style={{ backgroundColor: bgColor }}
-        >
-          {children}
-        </button>
-      </TooltipTrigger>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent>
-        <ShortcutKeys combo={tooltipContent ?? ""} />
+        <ShortcutKeys combo={tooltipContent} />
       </TooltipContent>
     </Tooltip>
   );