From 854e67962548f5648fd0b7282279cee8988142db Mon Sep 17 00:00:00 2001
From: Jade <dillenkofer.jonas@outlook.de>
Date: Wed, 10 Jun 2026 21:32:48 +0200
Subject: [PATCH] Add keyboard navigation

---
 src/components/gallery/variant-header.tsx | 48 +++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/components/gallery/variant-header.tsx b/src/components/gallery/variant-header.tsx
index d5cb8f4..f00da79 100644
--- a/src/components/gallery/variant-header.tsx
+++ b/src/components/gallery/variant-header.tsx
@@ -1,6 +1,10 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { Home, Palette } from "lucide-react";
+import { useEffect } from "react";
 import { buildCompareHrefForSelection } from "@/lib/compare";
 import type { GalleryEntry, IterationId } from "@/lib/gallery-types";
 import { buildVariantHref } from "@/lib/gallery-paths";
@@ -31,6 +35,50 @@ export function VariantSwitcher({
       ? "text-[var(--gallery-accent)]"
       : "text-[var(--gallery-text-quaternary)] opacity-55";
 
+  const router = useRouter();
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (
+        e.ctrlKey ||
+        e.metaKey ||
+        e.altKey ||
+        target?.tagName === "INPUT" ||
+        target?.tagName === "TEXTAREA" ||
+        target?.isContentEditable
+      ) {
+        return;
+      }
+
+      if (e.key === "h") {
+        e.preventDefault();
+        router.push("/");
+        return;
+      }
+
+      if (e.key === "c") {
+        e.preventDefault();
+        router.push(
+          buildCompareHrefForSelection({
+            group: entry.group,
+            model: entry.model,
+            iteration,
+          }),
+        );
+        return;
+      }
+
+      if (/^[1-5]$/.test(e.key)) {
+        e.preventDefault();
+        router.push(buildVariantHref(entry.group, entry.model, e.key as IterationId));
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [entry.group, entry.model, iteration, router]);
+
   return (
     <nav
       aria-label={`${entry.modelLabel} gallery navigation`}