feat(frontend): ⌘K search trigger in layout + /lessons nav

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>
   );
 }