From d5dfc0d2dbf0310e06969b5ed63fde5362f9efd1 Mon Sep 17 00:00:00 2001
From: Bert Hausmans <bert@hausmans.nl>
Date: Thu, 21 May 2026 07:15:02 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E2=8C=98K=20search=20trigger?=
 =?UTF-8?q?=20in=20layout=20+=20/lessons=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/Layout.tsx | 30 ++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/Layout.tsx b/packages/frontend/src/components/Layout.tsx
index 2ba1005..51d9cae 100644
--- a/packages/frontend/src/components/Layout.tsx
+++ b/packages/frontend/src/components/Layout.tsx
@@ -1,11 +1,13 @@
+import { useEffect, useState } from 'react';
 import { NavLink, Outlet } from 'react-router-dom';
 import { useSettings } from '../stores/settingsStore.js';
 import { useAuth } from '../stores/authStore.js';
 import { UserMenu } from './UserMenu.js';
+import { SearchPalette } from './SearchPalette.js';
 
 const navItems = [
   { to: '/', label: 'Dashboard', end: true },
-  { to: '/admin', label: 'Lessen' },
+  { to: '/lessons', label: 'Lessen' },
   { to: '/marketplace', label: 'Marketplace 🛍️' },
   { to: '/stats', label: 'Stats' },
 ];
@@ -13,6 +15,19 @@ const navItems = [
 export function Layout() {
   const { theme, toggleTheme } = useSettings();
   const user = useAuth((s) => s.user);
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    }
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, []);
+
   return (
     <div className="flex h-full flex-col">
       <header className="sticky top-0 z-20 border-b border-white/40 bg-white/70 backdrop-blur-xl dark:border-slate-800/60 dark:bg-slate-950/70">
@@ -42,6 +57,18 @@ export function Layout() {
             </nav>
           )}
           <div className="ml-auto flex items-center gap-2">
+            {user && (
+              <button
+                onClick={() => setSearchOpen(true)}
+                className="flex items-center gap-2 rounded-xl border border-white/60 bg-white/70 px-3 py-1.5 text-xs text-slate-600 shadow-sm hover:bg-white dark:border-slate-800 dark:bg-slate-900/70 dark:text-slate-300"
+                aria-label="Zoeken"
+                title="Zoek (⌘K)"
+              >
+                <span>🔎</span>
+                <span className="hidden sm:inline">Zoek…</span>
+                <kbd className="hidden rounded-md border border-slate-300 px-1.5 py-0.5 text-[10px] sm:inline dark:border-slate-700">⌘K</kbd>
+              </button>
+            )}
             <button
               onClick={toggleTheme}
               className="grid h-9 w-9 place-items-center rounded-xl border border-white/60 bg-white/70 text-base shadow-sm transition hover:scale-105 dark:border-slate-800 dark:bg-slate-900/70"
@@ -76,6 +103,7 @@ export function Layout() {
           <Outlet />
         </div>
       </main>
+      <SearchPalette open={searchOpen} onClose={() => setSearchOpen(false)} />
     </div>
   );
 }