feat: add shortcuts display

2026-07-03 23:44:24 +02:00
parent cbd4eb5e9b
commit e5c7f09cea
4 changed files with 108 additions and 3 deletions
--- a/view/ShortcutsDisplay.tsx
+++ b/view/ShortcutsDisplay.tsx
@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ArrowFatLineUp, Backspace, CaretDown, Command } from "@phosphor-icons/react";
+
+type Shortcut = {
+  keys: string[];
+  label: string;
+};
+
+const shortcuts: Shortcut[] = [
+  { keys: ["S"], label: "Select" },
+  { keys: ["B"], label: "Brush" },
+  { keys: ["E"], label: "Eraser" },
+  { keys: ["P"], label: "Pan" },
+  { keys: ["Space"], label: "Hold to pan" },
+  { keys: ["L"], label: "Layers" },
+  { keys: ["⌘", "O"], label: "Open image" },
+  { keys: ["⌘", "Z"], label: "Undo" },
+  { keys: ["⇧", "⌘", "Z"], label: "Redo" },
+  { keys: ["Del", "⌫"], label: "Delete" },
+];
+
+export function ShortcutsDisplay() {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <aside
+      aria-label="Keyboard shortcuts"
+      className="pointer-events-auto hidden w-[30rem] rounded-[2rem] p-3 text-white backdrop-blur-xl sm:block"
+    >
+      <button
+        type="button"
+        className="flex h-12 w-full items-center justify-between rounded-full px-5 text-left transition hover:bg-white/5 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/30"
+        aria-expanded={open}
+        onClick={() => setOpen((current) => !current)}
+      >
+        <span className="text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-white/45">Shortcuts</span>
+        <CaretDown size={14} className={`text-white/40 transition-transform ${open ? "rotate-0" : "-rotate-90"}`} weight="bold" />
+      </button>
+      <dl className={`mt-2 grid grid-cols-2 gap-x-4 gap-y-1 overflow-hidden rounded-[1.5rem] transition-all duration-200 ${open ? "max-h-96 p-1 opacity-100" : "mt-0 max-h-0 p-0 opacity-0"}`}>
+        {shortcuts.map((shortcut) => (
+          <div key={`${shortcut.keys.join("+")}-${shortcut.label}`} className="flex h-8 items-center justify-between gap-3 rounded-full px-2">
+            <dt className="truncate text-xs font-medium text-white/60">{shortcut.label}</dt>
+            <dd className="flex shrink-0 items-center gap-2">
+              {shortcut.keys.map((key, index) => (
+                <span key={key} className="inline-flex items-center gap-2">
+                  {shortcut.label === "Delete" && index > 0 ? <span className="h-3 w-px bg-white/20" aria-hidden="true" /> : null}
+                  <kbd className="inline-flex h-8 min-w-8 items-center justify-center rounded-full bg-white/5 px-3 text-sm font-semibold leading-none text-white/75">
+                    {keyIcon(key) ?? key}
+                  </kbd>
+                </span>
+              ))}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </aside>
+  );
+}
+
+function keyIcon(key: string) {
+  switch (key) {
+    case "⌘":
+      return <Command size={18} weight="bold" />;
+    case "⇧":
+      return <ArrowFatLineUp size={18} weight="bold" />;
+    case "⌫":
+      return <Backspace size={18} weight="bold" />;
+    default:
+      return undefined;
+  }
+}