fix: search component and breadcrumbs fix

components/page-header.tsx

@@ -1,7 +1,13 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter, usePathname } from "next/navigation";
 import { ReadingSettings } from "@/components/reading-settings";
 import { HeaderSearchButton } from "@/components/header-search";
 import { cn } from "@/lib/utils";
 
+const SEARCH_RETURN_KEY = "spsays_from_search";
+
 export function PageHeader({
   children,
   sticky = false,
@@ -11,6 +17,29 @@ export function PageHeader({
   sticky?: boolean;
   className?: string;
 }) {
+  const [searchExpanded, setSearchExpanded] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Read (and consume) the search-return flag once on first render.
+  // The lazy initialiser runs exactly once; on the server
+  // (typeof window === "undefined") it returns false.
+  const [fromSearch, setFromSearch] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      if (
+        sessionStorage.getItem(SEARCH_RETURN_KEY) === "1" &&
+        !pathname.startsWith("/search")
+      ) {
+        sessionStorage.removeItem(SEARCH_RETURN_KEY);
+        return true;
+      }
+    } catch {
+      // sessionStorage unavailable
+    }
+    return false;
+  });
+
   return (
     <header
       className={cn(
@@ -20,10 +49,45 @@ export function PageHeader({
       )}
     >
       <div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
-        <div className="flex-1 min-w-0">{children}</div>
-        <div className="shrink-0 pt-1 flex items-center gap-1.5">
-          <HeaderSearchButton />
-          <ReadingSettings />
+        {/* Title / logo area — hidden on mobile when search is active */}
+        <div
+          className={cn("flex-1 min-w-0", searchExpanded && "max-md:hidden")}
+        >
+          {fromSearch ? (
+            <>
+              <button
+                type="button"
+                onClick={() => {
+                  setFromSearch(false);
+                  router.back();
+                }}
+                className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                &larr; Back to search results
+              </button>
+              {/* Hide the page's own breadcrumb link (always the first <a>) */}
+              <div className="[&>a:first-child]:hidden">{children}</div>
+            </>
+          ) : (
+            children
+          )}
+        </div>
+
+        {/* Actions — expands to fill width on mobile when search is active */}
+        <div
+          className={cn(
+            "shrink-0 pt-1 flex items-center gap-1.5",
+            searchExpanded && "max-md:flex-1 max-md:min-w-0",
+          )}
+        >
+          <HeaderSearchButton
+            expanded={searchExpanded}
+            onExpandedChange={setSearchExpanded}
+          />
+          {/* Hide reading settings on mobile when search is active */}
+          <div className={cn(searchExpanded && "max-md:hidden")}>
+            <ReadingSettings />
+          </div>
         </div>
       </div>
     </header>