"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { History, LogOut, Play, Settings, User as UserIcon } from "lucide-react";
import { SearchSheet, SearchTrigger, useSearchSheet } from "@/components/layout/search-sheet";
import { useSession } from "@/components/layout/session-provider";
import { AuthModal } from "@/components/auth/auth-modal";
import { DropdownMenu } from "@/components/ui/dropdown";
import { siteConfig } from "@/config/site";
import { cn } from "@/lib/utils";
/**
* Transparent top header.
*
* Sits over the hero artwork on the homepage and over the page background
* everywhere else. It is `fixed`, transparent, and reserves no space in the
* document flow — the hero starts flush against the top of the viewport and
* scrolls *under* the header, which is what keeps the top of the hero uncropped.
*
* Because the bar is transparent, the hero's own top scrim (`hero-scrim-top`) is
* what makes the controls readable over artwork; the gradient below is only
* enough to carry them on the non-hero routes, whose background is already dark.
* Once the page is scrolled the bar takes a solid blurred surface, so the
* controls never end up sitting over arbitrary content.
*
* Single owner of search: `useSearchSheet` registers a global `/` shortcut and an
* Escape handler, so exactly one instance may be mounted at a time. The header is
* that instance, and the floating nav deliberately ships no search control — see
* `floating-nav.tsx`.
*/
export function SiteHeader() {
const pathname = usePathname();
const router = useRouter();
const { user, signOut } = useSession();
const sheet = useSearchSheet();
const [scrolled, setScrolled] = useState(false);
const [lastPath, setLastPath] = useState(pathname);
const [authOpen, setAuthOpen] = useState(false);
/* Close the search sheet on navigation, and drop the scrolled state. */
if (pathname !== lastPath) {
setLastPath(pathname);
setScrolled(false);
setAuthOpen(false);
sheet.closeSheet();
}
/* Solid surface once the page moves, so the bar never floats over content. */
useEffect(() => {
const sync = () => setScrolled(window.scrollY > 8);
sync();
window.addEventListener("scroll", sync, { passive: true });
return () => window.removeEventListener("scroll", sync);
}, []);
/*
The account menu is built only for an authenticated visitor.
This is a real branch, not a CSS toggle: for a guest `accountItems` is an
empty array, so `DropdownMenu` is never even mounted — the guest path gets
the "Sign in" button that opens the auth dialog instead. Settings, Watch
history and Sign out all require a session, and both of their routes
redirect an anonymous visitor to the login page, so exposing them without
one would only ever be a dead end.
*/
const accountItems = user
? [
{
id: "profile",
label: (
{user.displayName}@{user.username}
),
onSelect: () => router.push("/profile"),
},
{
id: "settings",
label: "Settings",
icon: ,
onSelect: () => router.push("/settings"),
},
{
id: "history",
label: "Watch history",
icon: ,
onSelect: () => router.push("/history"),
},
{
id: "logout",
label: "Sign out",
icon: ,
onSelect: () => {
/*
`signOut()` clears the session in the provider and therefore
re-renders this header as the guest variant immediately — no
`router.refresh()` needed for the menu itself. The push and refresh
afterwards drop any page that was only reachable while signed in.
*/
void signOut().then(() => {
router.push("/");
router.refresh();
});
},
},
]
: [];
return (
<>
{/* LEFT — wordmark */}
{siteConfig.shortName}
{/* RIGHT — search, then the account control */}
{/*
Signed in and signed out are two genuinely different controls, not
one menu with items hidden. A guest gets the button that opens the
auth dialog; only an authenticated visitor gets the account
dropdown, because Settings, Watch history and Sign out are all
meaningless — and unreachable — without a session. Nothing is
hidden with CSS: the items are simply never built.
*/}
{user ? (
{({ open, toggle, id }) => (
)}
) : (
)}
{sheet.open ? : null}
{/*
The auth dialog is mounted only while it is open, so the portal — and the
portal subtree — never exists in the tree for the 99% of visits that
never touch "Sign in". `/login` and `/register` still stand on their own
as deep-linkable routes; `lib/require-session.ts` and
`add-to-list-button.tsx` both redirect to `/login`, which remains a
working entry point to the same API.
*/}
{authOpen ? setAuthOpen(false)} /> : null}
);
}