// Plaaayground v2 — ShortcutOverlay
// Blueprint: 06 — Press ? to show all keyboard shortcuts in a sheet

import { useState, useEffect } from "react";
import { cn } from "@/lib/utils";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";

export interface ShortcutEntry {
  keys: string[];
  description: string;
  category?: string;
}

export interface ShortcutOverlayProps {
  shortcuts: ShortcutEntry[];
  className?: string;
}

export function ShortcutOverlay({ shortcuts, className }: ShortcutOverlayProps) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey) {
        const target = e.target as HTMLElement;
        if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return;
        e.preventDefault();
        setOpen((v) => !v);
      }
    }
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  const grouped = shortcuts.reduce<Record<string, ShortcutEntry[]>>((acc, entry) => {
    const cat = entry.category || "General";
    if (!acc[cat]) acc[cat] = [];
    acc[cat].push(entry);
    return acc;
  }, {});

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent side="bottom" className={cn("max-h-[70vh]", className)}>
        <SheetHeader>
          <SheetTitle>Keyboard Shortcuts</SheetTitle>
        </SheetHeader>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 py-4 overflow-y-auto">
          {Object.entries(grouped).map(([category, entries]) => (
            <div key={category}>
              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
                {category}
              </h3>
              <div className="space-y-2">
                {entries.map((entry, i) => (
                  <div
                    key={i}
                    className="flex items-center justify-between text-sm"
                  >
                    <span className="text-foreground">{entry.description}</span>
                    <span className="flex items-center gap-1 ml-4">
                      {entry.keys.map((key, j) => (
                        <kbd
                          key={j}
                          className="inline-flex items-center justify-center border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground min-w-[22px] h-6"
                        >
                          {key}
                        </kbd>
                      ))}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </SheetContent>
    </Sheet>
  );
}
ShortcutOverlay

Source Code
