feat: implement search functionality in connector popup

- Added a search input in the ConnectorDialogHeader to filter active connectors based on user input.
- Enhanced the ActiveConnectorsTab to filter displayed connectors and document types according to the search query.
- Introduced a clear search button for improved user experience when managing connectors.

surfsense_web/components/assistant-ui/connector-popup.tsx

@@ -292,6 +292,7 @@ export const ConnectorIndicator: FC = () => {
 									</TabsContent>
 
 									<ActiveConnectorsTab
+										searchQuery={searchQuery}
 										hasSources={hasSources}
 										totalSourceCount={totalSourceCount}
 										activeDocumentTypes={activeDocumentTypes}

surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import type { FC } from "react";
 import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { TabsList, TabsTrigger } from "@/components/ui/tabs";
@@ -67,10 +67,23 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 						<input
 							type="text"
 							placeholder="Search"
-							className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
+							className={cn(
+								"w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50",
+								searchQuery ? "pr-9" : "pr-4"
+							)}
 							value={searchQuery}
 							onChange={(e) => onSearchChange(e.target.value)}
 						/>
+						{searchQuery && (
+							<button
+								type="button"
+								onClick={() => onSearchChange("")}
+								className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
+								aria-label="Clear search"
+							>
+								<X className="size-4" />
+							</button>
+						)}
 					</div>
 				</div>
 			</div>

surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx

@@ -14,6 +14,7 @@ import { getDocumentCountForConnector } from "../utils/connector-document-mappin
 import { TabsContent } from "@/components/ui/tabs";
 
 interface ActiveConnectorsTabProps {
+	searchQuery: string;
 	hasSources: boolean;
 	totalSourceCount: number;
 	activeDocumentTypes: Array<[string, number]>;
@@ -26,6 +27,7 @@ interface ActiveConnectorsTabProps {
 }
 
 export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
+	searchQuery,
 	hasSources,
 	activeDocumentTypes,
 	connectors,
@@ -74,20 +76,34 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 			type: docType,
 			count,
 			label: getDocumentTypeLabel(docType),
-		}));
+		}))
+		.filter((doc) => {
+			if (!searchQuery) return true;
+			return doc.label.toLowerCase().includes(searchQuery.toLowerCase());
+		});
+
+	// Filter connectors based on search query
+	const filteredConnectors = connectors.filter((connector) => {
+		if (!searchQuery) return true;
+		const searchLower = searchQuery.toLowerCase();
+		return (
+			connector.name.toLowerCase().includes(searchLower) ||
+			connector.connector_type.toLowerCase().includes(searchLower)
+		);
+	});
 
 	return (
 		<TabsContent value="active" className="m-0">
 			{hasSources ? (
 				<div className="space-y-6">
 					{/* Active Connectors Section */}
-					{connectors.length > 0 && (
+					{filteredConnectors.length > 0 && (
 						<div className="space-y-4">
 							<div className="flex items-center gap-2">
 								<h3 className="text-sm font-semibold text-muted-foreground">Active Connectors</h3>
 							</div>
 							<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-								{connectors.map((connector) => {
+								{filteredConnectors.map((connector) => {
 									const isIndexing = indexingConnectorIds.has(connector.id);
 									const activeTask = logsSummary?.active_tasks?.find(
 										(task: LogActiveTask) => task.connector_id === connector.id