115 lines
3.7 KiB
TypeScript
115 lines
3.7 KiB
TypeScript
"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,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
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(
|
|
"border-b border-border bg-card px-6",
|
|
sticky ? "py-4 sticky top-0 z-20" : "py-4",
|
|
className,
|
|
)}
|
|
>
|
|
{/*
|
|
Layout strategy:
|
|
- Mobile: actions float to the right so the title text wraps around
|
|
them on the first line and uses the FULL container width on every
|
|
subsequent line (which is what `pr-*` cannot achieve since padding
|
|
applies to all lines).
|
|
- Desktop (md+): standard flex row so title and actions sit side-by-side.
|
|
*/}
|
|
<div className="max-w-5xl mx-auto md:flex md:items-start md:justify-between md:gap-4">
|
|
{/* Actions — float on mobile (rendered first so float works correctly),
|
|
inline flex on desktop. Order doesn't matter visually on desktop
|
|
because the parent's `justify-between` places them at the end. */}
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-1.5",
|
|
// Mobile: float so the title text wraps around it
|
|
"max-md:float-right max-md:ml-2",
|
|
// Desktop: inline at the right of the flex row
|
|
"md:pt-1 md:order-1",
|
|
searchExpanded
|
|
? "max-md:float-none max-md:flex max-md:w-full max-md:min-w-0"
|
|
: "md:shrink-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>
|
|
|
|
{/* Title / logo area — hidden on mobile when search is active */}
|
|
<div
|
|
className={cn(
|
|
"md:flex-1 md: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"
|
|
>
|
|
← 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>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|