siftlode/frontend/src/components/Header.tsx

import { useTranslation } from "react-i18next";
import { Search, X, Youtube } from "lucide-react";
import type { FeedFilters, Me } from "../lib/api";
import type { Page } from "../lib/urlState";
import { pageTitleKey } from "../lib/pageMeta";
import PageTitle from "./PageTitle";

// Contextual top bar over the content column. Primary navigation, account and the per-user sync
// status live in the left NavSidebar; the feed's scope toggle now lives in the filter sidebar.
// The header carries just the feed search (or the current page title).
export default function Header({
  me,
  filters,
  setFilters,
  plexQ,
  setPlexQ,
  page,
  onYtSearch,
}: {
  me: Me;
  filters: FeedFilters;
  setFilters: (f: FeedFilters) => void;
  // Plex has its own ephemeral search term (see App) — the box is shared UI, the state is not.
  plexQ: string;
  setPlexQ: (q: string) => void;
  page: Page;
  // Trigger a live YouTube search for the current term (hidden for the demo account, which
  // can't spend the shared quota).
  onYtSearch: (q: string) => void;
}) {
  const { t } = useTranslation();
  const canSearchYt = !me.is_demo;
  // The search box serves both the YouTube feed and the Plex module (integrated search); the live
  // YouTube-search escalation (Enter / button) is feed-only. On Plex it drives `plexQ`, on the feed
  // the persisted `filters.q`.
  const isSearchPage = page === "feed" || page === "plex";
  const isPlex = page === "plex";
  const isYtCapable = page === "feed" && canSearchYt;
  const searchValue = isPlex ? plexQ : filters.q;
  const trimmedQ = searchValue.trim();

  return (
    <header className="glass h-14 shrink-0 border-b border-border flex items-center gap-3 px-4 z-20">
      {isSearchPage ? (
        <div className="flex-1 max-w-xl mx-auto flex items-center gap-2">
          <div className="flex-1 relative">
            <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
            <input
              value={searchValue}
              onChange={(e) => {
                const q = e.target.value;
                if (isPlex) {
                  setPlexQ(q);
                  return;
                }
                // When a search first appears, rank the feed by relevance — set atomically with
                // the query (race-free vs. per-keystroke updates). Only overrides the default
                // "newest" sort; a custom sort the user chose is left alone. Cleared in Feed.
                const startSearch =
                  !filters.q.trim() && !!q.trim() && filters.sort === "newest";
                setFilters({ ...filters, q, ...(startSearch ? { sort: "relevance" } : {}) });
              }}
              onKeyDown={(e) => {
                // On the feed, Enter escalates the typed term to a live YouTube search (the box
                // itself filters the local catalog / Plex library as you type).
                if (e.key === "Enter" && trimmedQ && isYtCapable) onYtSearch(trimmedQ);
              }}
              placeholder={page === "plex" ? t("plex.searchPlaceholder") : t("header.searchPlaceholder")}
              className="w-full bg-card border border-border rounded-full pl-9 pr-9 py-2 text-sm outline-none focus:border-accent"
            />
            {searchValue && (
              <button
                onClick={() => (isPlex ? setPlexQ("") : setFilters({ ...filters, q: "" }))}
                title={t("header.clearSearch")}
                aria-label={t("header.clearSearch")}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 p-0.5 rounded-full text-muted hover:text-fg hover:bg-border/60 transition"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>
          {trimmedQ && isYtCapable && (
            <button
              onClick={() => onYtSearch(trimmedQ)}
              title={t("header.searchYoutubeTip")}
              className="shrink-0 inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-2 text-xs font-medium text-muted hover:text-accent hover:border-accent transition"
            >
              <Youtube className="w-4 h-4" />
              <span className="hidden md:inline">{t("header.searchYoutube")}</span>
            </button>
          )}
        </div>
      ) : (
        <div className="flex-1 flex justify-center">
          <PageTitle label={t(pageTitleKey(page))} />
        </div>
      )}
    </header>
  );
}