feat: add keyboard shortcut help modal triggered by ? key

src/components/shortcuts/ShortcutHelpModal.tsx

@@ -0,0 +1,67 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+interface ShortcutHelpModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const SHORTCUT_GROUPS = [
+  {
+    category: "Navigation",
+    shortcuts: [
+      { key: "Ctrl+K", description: "Open command palette" },
+      { key: "?", description: "Show keyboard shortcuts" },
+      { key: "Escape", description: "Close modal / cancel" },
+    ],
+  },
+  {
+    category: "Board",
+    shortcuts: [
+      { key: "Ctrl+Z", description: "Undo" },
+      { key: "Ctrl+Shift+Z", description: "Redo" },
+    ],
+  },
+];
+
+export function ShortcutHelpModal({ open, onOpenChange }: ShortcutHelpModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-pylon-surface sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="font-heading text-pylon-text">
+            Keyboard Shortcuts
+          </DialogTitle>
+          <DialogDescription className="text-pylon-text-secondary">
+            Quick reference for all keyboard shortcuts.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4">
+          {SHORTCUT_GROUPS.map((group) => (
+            <div key={group.category}>
+              <h4 className="mb-2 font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
+                {group.category}
+              </h4>
+              <div className="flex flex-col gap-1">
+                {group.shortcuts.map(({ key, description }) => (
+                  <div key={key} className="flex items-center justify-between py-1">
+                    <span className="text-sm text-pylon-text">{description}</span>
+                    <kbd className="rounded bg-pylon-column px-2 py-0.5 font-mono text-xs text-pylon-text-secondary">
+                      {key}
+                    </kbd>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}