v3: search engine, responsive header with compact user menu

src/components/PageShell.tsx

@@ -1,15 +1,17 @@
 import { type ReactNode } from "react";
 import { AppHeader } from "./AppHeader.tsx";
+import { SearchBar } from "./SearchBar.tsx";
 
 interface PageShellProps {
   children: ReactNode;
   centered?: boolean;
+  centerSlot?: ReactNode;
 }
 
-export function PageShell({ children, centered = false }: PageShellProps) {
+export function PageShell({ children, centered = false, centerSlot }: PageShellProps) {
   return (
     <div className="page-shell">
-      <AppHeader />
+      <AppHeader centerSlot={centerSlot ?? <SearchBar />} />
       <main
         className={`page-content${centered ? " page-content--centered" : ""}`}
       >