2739f25e6c
Replace the full-width top bar with a fixed floating header of glass pills: a fixed-position ModuleName (accent dot + label + prev/next cyclic module stepper) and a shared SearchBar. The header's left edge is anchored as if the nav rail and filter sidebar were both open, so it never shifts on collapse or module change; the right edge leaves a 10% margin. - ModuleName label width is measured live from the reachable modules' titles in the current language, recomputing on a language or account change. - Module names come from a shared moduleLabelKey (the same short labels as the nav rail); NavSidebar and the header now read from one source (lib/modules.ts). - The arrows step cyclically through moduleOrder(me) — dynamic, no hard-coded targets, wrapping at both ends. - Search is hoisted into the SearchBar for feed (YouTube search), plex, channels (including the Discovery tab) and playlists (new); Go button, Enter triggers it. - The Playlists left rail now reaches the top; header clearance via --hdr-h.
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Search, X } from "lucide-react";
|
|
|
|
// The floating search pill in the top header. One component for every module that searches
|
|
// (feed, Plex, channels, playlists): a glass rounded box with a search icon, the input, a
|
|
// clear button, and a "Go" trigger (Enter also fires it). The feed passes its live-YouTube
|
|
// escalation as the Go action; the other modules filter as you type and Go just commits/blurs.
|
|
export default function SearchBar({
|
|
value,
|
|
onChange,
|
|
placeholder,
|
|
onGo,
|
|
goLabel,
|
|
goIcon,
|
|
goDisabled,
|
|
goTitle,
|
|
}: {
|
|
value: string;
|
|
onChange: (q: string) => void;
|
|
placeholder: string;
|
|
// Enter / the Go button call this. Omit to hide the Go button entirely.
|
|
onGo?: () => void;
|
|
goLabel?: string;
|
|
goIcon?: ReactNode;
|
|
goDisabled?: boolean;
|
|
goTitle?: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const fire = () => {
|
|
if (onGo && !goDisabled) onGo();
|
|
};
|
|
return (
|
|
<div className="pointer-events-auto flex-1 min-w-0 max-w-xl h-11 pl-3 pr-2 rounded-2xl glass-menu flex items-center gap-2">
|
|
<Search className="w-4 h-4 shrink-0 text-muted" />
|
|
<input
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") fire();
|
|
}}
|
|
placeholder={placeholder}
|
|
className="flex-1 min-w-0 bg-transparent outline-none text-sm placeholder:text-muted"
|
|
/>
|
|
{value && (
|
|
<button
|
|
onClick={() => onChange("")}
|
|
title={t("header.clearSearch")}
|
|
aria-label={t("header.clearSearch")}
|
|
className="shrink-0 p-0.5 rounded-full text-muted transition hover:text-fg hover:bg-border/60"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
{onGo && (
|
|
<button
|
|
onClick={fire}
|
|
disabled={goDisabled}
|
|
title={goTitle ?? goLabel ?? t("header.goTip")}
|
|
className="shrink-0 inline-flex items-center gap-1.5 rounded-xl bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:opacity-90 disabled:opacity-40 disabled:pointer-events-none"
|
|
>
|
|
{goIcon}
|
|
<span className={goIcon ? "hidden md:inline" : undefined}>
|
|
{goLabel ?? t("header.go")}
|
|
</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|