+ ) : null
+ }
+ />
+ );
+}
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
index aa4f1af7..9da93e84 100644
--- a/frontend/src/components/SearchBar.tsx
+++ b/frontend/src/components/SearchBar.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type FocusEventHandler, type KeyboardEventHandler, type ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { Search, X } from "lucide-react";
@@ -6,6 +6,12 @@ import { Search, X } from "lucide-react";
// (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.
+//
+// Optional slots keep the box reusable while letting one module enrich it: `leading` replaces the
+// search icon with a control (Plex's search scope-pill), and `below` renders an absolutely
+// positioned panel attached under the box (Plex's instant typeahead results). `onFocus`/`onBlur`/
+// `onKeyDown` pass through to the input so a caller can drive that panel (open on focus, arrow-key
+// navigation); the built-in Enter→Go fires only if the caller didn't `preventDefault()` first.
export default function SearchBar({
value,
onChange,
@@ -15,6 +21,11 @@ export default function SearchBar({
goIcon,
goDisabled,
goTitle,
+ leading,
+ below,
+ onFocus,
+ onBlur,
+ onKeyDown,
}: {
value: string;
onChange: (q: string) => void;
@@ -25,46 +36,57 @@ export default function SearchBar({
goIcon?: ReactNode;
goDisabled?: boolean;
goTitle?: string;
+ leading?: ReactNode;
+ below?: ReactNode;
+ onFocus?: FocusEventHandler;
+ onBlur?: FocusEventHandler;
+ onKeyDown?: KeyboardEventHandler;
}) {
const { t } = useTranslation();
const fire = () => {
if (onGo && !goDisabled) onGo();
};
return (
-