@@ -213,6 +244,91 @@ function SummaryStrip({ channels }: { channels: ChannelDetail[] }) {
);
}
+// ── Channel search bar ────────────────────────────────────────────────────────
+
+interface ChannelSearchBarProps {
+ query: string;
+ onQueryChange: (v: string) => void;
+ statusFilter: StatusFilter;
+ onStatusChange: (v: StatusFilter) => void;
+ resultCount: number;
+ totalCount: number;
+}
+
+function ChannelSearchBar({
+ query,
+ onQueryChange,
+ statusFilter,
+ onStatusChange,
+ resultCount,
+ totalCount,
+}: ChannelSearchBarProps) {
+ const hasActiveFilters = query.trim() !== '' || statusFilter !== 'all';
+
+ return (
+
+
+
+ onQueryChange(e.target.value)}
+ aria-label="Search channels by name, protocol, or description"
+ autoComplete="off"
+ />
+
+
+
+
+ Status
+
+
+ {STATUS_BUTTONS.map(({ value, label }) => (
+
+ ))}
+
+
+ {resultCount} of {totalCount} channel{totalCount !== 1 ? 's' : ''}
+
+ )}
+
+ );
+}
+
// ── Page ──────────────────────────────────────────────────────────────────────
export function ChannelDetailsPage() {
@@ -220,6 +336,11 @@ export function ChannelDetailsPage() {
const [loading, setLoading] = useState(true);
const [error, setError] = useState
(null);
+ // Search state — input is uncontrolled-feeling (instant) while filtering is debounced
+ const [searchInput, setSearchInput] = useState('');
+ const debouncedQuery = useDebounce(searchInput, 250);
+ const [statusFilter, setStatusFilter] = useState('all');
+
useEffect(() => {
let cancelled = false;
setLoading(true);
@@ -243,6 +364,11 @@ export function ChannelDetailsPage() {
};
}, []);
+ const filteredChannels = useMemo(
+ () => filterChannels(channels, debouncedQuery, statusFilter),
+ [channels, debouncedQuery, statusFilter],
+ );
+
function handleRetry() {
setChannels([]);
setLoading(true);
@@ -253,6 +379,8 @@ export function ChannelDetailsPage() {
}, 600);
}
+ const isFiltering = searchInput.trim() !== '' || statusFilter !== 'all';
+
return (
{/* Page header */}
@@ -276,14 +404,56 @@ export function ChannelDetailsPage() {