From 88b3af4ba816e1a10285521ba1d7199f6ee827dc Mon Sep 17 00:00:00 2001
From: Jan Wagner <eldovsen@gmail.com>
Date: Mon, 31 Aug 2026 21:00:20 +0200
Subject: [PATCH] =?UTF-8?q?fix(react):=20extract=20=E2=8C=98K-button=20to?=
 =?UTF-8?q?=20client=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Server-Components dürfen in Next.js 16 keine Event-Handler an DOM-Elemente
oder Client-Komponenten weitergeben. Site-Header war Server-Component mit
onClick={dispatchEvent(...)} — das hat alle /ueber-mich, /projekte,
/projekte/[slug], /en mit 500er geworfen (nur / und /admin/login blieben
200, weil sie kein Site-Header-Render nutzen bzw. ein anderes Layout).

Fix: �K-Button in eigene 'use client'-Datei ausgelagert (command-bar-button.tsx)
und im Header eingebunden. Nach dem Fix: alle Routen wieder 200.
---
 src/components/command-bar-button.tsx | 20 ++++++++++++++++++++
 src/components/site-header.tsx        | 14 ++------------
 2 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 src/components/command-bar-button.tsx

diff --git a/src/components/command-bar-button.tsx b/src/components/command-bar-button.tsx
new file mode 100644
index 0000000..e58801a
--- /dev/null
+++ b/src/components/command-bar-button.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+// Kleine Client-Component für den ⌘K-Button im Header.
+// Dispatcht ein Synthetic-KeyboardEvent, das der Command-Palette-Listener fängt.
+export function CommandBarButton({ ariaLabel = "Command palette öffnen" }: { ariaLabel?: string }) {
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      data-cursor="hover"
+      onClick={() => {
+        window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
+      }}
+      className="flex items-center gap-1.5 rounded border border-hairline bg-[color-mix(in_oklab,var(--panel)_50%,transparent)] px-2.5 py-1.5 font-mono text-xs text-muted transition-colors hover:border-accent hover:text-[var(--fg)]"
+    >
+      <span className="font-mono text-base leading-none">⌘</span>
+      <span>K</span>
+    </button>
+  );
+}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index f2f569e..ab2ae1d 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -6,6 +6,7 @@ import { LanguageSwitcher } from "./language-switcher";
 import { MobileNav } from "./mobile-nav";
 import { site } from "@/content/site";
 import { CommandPalette } from "./command-palette";
+import { CommandBarButton } from "./command-bar-button";
 
 export function SiteHeader({
   locale,
@@ -46,18 +47,7 @@ export function SiteHeader({
             <div className="hidden md:block">
               <LanguageSwitcher currentLocale={locale} />
             </div>
-            <button
-              type="button"
-              aria-label="Command palette öffnen"
-              data-cursor="hover"
-              onClick={() => {
-                window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }));
-              }}
-              className="flex items-center gap-1.5 rounded border border-hairline bg-[color-mix(in_oklab,var(--panel)_50%,transparent)] px-2.5 py-1.5 font-mono text-xs text-muted transition-colors hover:border-accent hover:text-[var(--fg)]"
-            >
-              <span className="font-mono text-base leading-none">⌘</span>
-              <span>K</span>
-            </button>
+            <CommandBarButton />
             <MobileNav locale={locale} items={nav} menuLabel={dict.nav.menu} switchLabel={dict.actions.languageSwitch} />
           </div>
         </div>