peter
205f18a2e1
- #1: remove the 9 dead `shadow-*` from glass surfaces instead of letting them override the tuned glass box-shadow. The @layer components move made a JSX shadow-* win AND atomically drop the glass inset top-edge highlight; deleting the (always-dead) utilities keeps the intended glass depth incl. the inset sheen. Verified in-browser: a .glass box-shadow again includes its inset segment. - #3: drop the per-element focus-visible outlines from the rail chrome buttons and SavedViews action buttons — the global button:focus-visible fallback already draws the identical 2px accent ring, so they were redundant. Verified: the pin button rings from the global rule alone. - #5: unify the focus-within outline offset (offset-2) on the SearchBar and ShareDialog pills. - #2 (double outline on the pill when an inner button is focused): NOT fixed — the clean fix (has-[input:focus] so only the input rings the pill) does not generate under Tailwind v4 (measured: no rule emitted). Kept the working focus-within, which is a11y-correct (every element still shows a focus indicator); the overlapping ring is an accepted cosmetic edge-case. - #4 (weak ring on solid-fill selected items): deferred to R10 with the selected-paint tokenisation. Gate green (tsc/eslint/prettier/knip/vitest 79).
71 lines
2.4 KiB
TypeScript
71 lines
2.4 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 focus-within:outline-2 focus-within:outline-accent/60 focus-within:outline-offset-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-hidden 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>
|
|
);
|
|
}
|