Add keyboard shortcuts help modal with centralized config

- Add `?` hotkey to open a modal showing all available shortcuts
- Create centralized shortcuts config in src/browser/lib/shortcuts.ts
- Modal auto-generates from config (no manual sync needed)
- Update all keyboard handlers to use matchesKey() utility
- Shortcuts organized by category: Navigation, Actions, Go to Line, File Search, Tabs, Help

Change-Id: I4c7d8b209ed70901f7b6e3c61c275a34207f7369
Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

src/browser/components/app-shell.tsx

@@ -23,6 +23,8 @@ import {
   HoverCardContent,
 } from "../ui/hover-card";
 import { version } from "../../../package.json";
+import { KeyboardShortcutsModal } from "./keyboard-shortcuts-modal";
+import { matchesKey } from "@/browser/lib/shortcuts";
 
 // ============================================================================
 // App Shell - Tab-based Layout
@@ -40,6 +42,7 @@ export function AppShell() {
   } = useTabContext();
   const params = useParams<{ owner: string; repo: string; number: string }>();
   const navigate = useNavigate();
+  const [shortcutsModalOpen, setShortcutsModalOpen] = useState(false);
 
   // URL is the source of truth - sync URL → Tab
   useEffect(() => {
@@ -116,6 +119,26 @@ export function AppShell() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [tabs, activeTabId, handleTabSelect, closeTab]);
 
+  // Handle ? key for keyboard shortcuts modal
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+      if (matchesKey(e, "SHOW_SHORTCUTS")) {
+        e.preventDefault();
+        setShortcutsModalOpen(true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   return (
     <div className="h-screen flex flex-col overflow-hidden bg-background">
       {/* Native-style Tab Bar */}
@@ -210,6 +233,11 @@ export function AppShell() {
             </div>
           )}
       </div>
+
+      <KeyboardShortcutsModal
+        open={shortcutsModalOpen}
+        onOpenChange={setShortcutsModalOpen}
+      />
     </div>
   );
 }

src/browser/components/command-palette.tsx

@@ -18,6 +18,7 @@ import { cn } from "../cn";
 import { usePRReviewSelector, usePRReviewStore } from "../contexts/pr-review";
 import { Keycap, KeycapGroup } from "../ui/keycap";
 import type { PullRequestFile } from "@/api/types";
+import { matchesKey } from "@/browser/lib/shortcuts";
 
 // ============================================================================
 // Global Command Palette Context
@@ -44,7 +45,10 @@ export function CommandPaletteProvider({ children }: { children: ReactNode }) {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Ctrl+K or Ctrl+P to open command palette
-      if ((e.ctrlKey || e.metaKey) && (e.key === "k" || e.key === "p")) {
+      if (
+        matchesKey(e, "OPEN_FILE_SEARCH_K") ||
+        matchesKey(e, "OPEN_FILE_SEARCH_P")
+      ) {
         e.preventDefault();
         e.stopPropagation();
         setOpen((prev) => !prev);

src/browser/components/keyboard-shortcuts-modal.tsx

@@ -0,0 +1,54 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/browser/ui/dialog";
+import { KeycapGroup } from "@/browser/ui/keycap";
+import { getShortcutsByCategory } from "@/browser/lib/shortcuts";
+
+interface KeyboardShortcutsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function KeyboardShortcutsModal({
+  open,
+  onOpenChange,
+}: KeyboardShortcutsModalProps) {
+  const categories = getShortcutsByCategory();
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-xl max-h-[85vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Keyboard Shortcuts</DialogTitle>
+          <DialogDescription className="sr-only">
+            A list of all available keyboard shortcuts
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-6 pt-2">
+          {categories.map(({ category, shortcuts }) => (
+            <div key={category}>
+              <h3 className="text-sm font-medium text-muted-foreground mb-2">
+                {category}
+              </h3>
+              <div className="space-y-1.5">
+                {shortcuts.map((shortcut, idx) => (
+                  <div
+                    key={idx}
+                    className="flex items-center justify-between py-1"
+                  >
+                    <span className="text-sm">{shortcut.description}</span>
+                    <KeycapGroup keys={shortcut.keys} size="sm" />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}