From 8259fab254871b064e37239562fdd1104eb10bd9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 6 Apr 2026 13:27:49 +0530
Subject: [PATCH] refactor: update connector tabs to include search feedback
 and improve icon usage for better user experience

---
 .../connector-popup/tabs/active-connectors-tab.tsx | 14 +++++++++++---
 .../connector-popup/tabs/all-connectors-tab.tsx    | 13 +++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index ccf1476dd..55fc99150 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Cable } from "lucide-react";
+import { Search, Unplug } from "lucide-react";
 import type { FC } from "react";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
 import { Button } from "@/components/ui/button";
@@ -134,9 +134,17 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 	const hasActiveConnectors =
 		filteredOAuthConnectorTypes.length > 0 || filteredNonOAuthConnectors.length > 0;
 
+	const hasFilteredResults = hasActiveConnectors || standaloneDocuments.length > 0;
+
 	return (
 		<TabsContent value="active" className="m-0">
-			{hasSources ? (
+			{hasSources && !hasFilteredResults && searchQuery ? (
+				<div className="flex flex-col items-center justify-center py-20 text-center">
+					<Search className="size-8 text-muted-foreground mb-3" />
+					<p className="text-sm text-muted-foreground">No connectors found</p>
+					<p className="text-xs text-muted-foreground/60 mt-1">Try a different search term</p>
+				</div>
+			) : hasSources ? (
 				<div className="space-y-6">
 					{/* Active Connectors Section */}
 					{hasActiveConnectors && (
@@ -302,7 +310,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 			) : (
 				<div className="flex flex-col items-center justify-center py-20 text-center">
 					<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
-						<Cable className="size-8 text-muted-foreground" />
+						<Unplug className="size-8 text-muted-foreground" />
 					</div>
 					<h4 className="text-lg font-semibold">No active sources</h4>
 					<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 3e8aad620..0afc192da 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Search } from "lucide-react";
 import type { FC } from "react";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
@@ -287,6 +288,18 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 		moreIntegrationsOther.length > 0 ||
 		moreIntegrationsCrawlers.length > 0;
 
+	const hasAnyResults = hasDocumentFileConnectors || hasMoreIntegrations;
+
+	if (!hasAnyResults && searchQuery) {
+		return (
+			<div className="flex flex-col items-center justify-center py-20 text-center">
+				<Search className="size-8 text-muted-foreground mb-3" />
+				<p className="text-sm text-muted-foreground">No connectors found</p>
+				<p className="text-xs text-muted-foreground/60 mt-1">Try a different search term</p>
+			</div>
+		);
+	}
+
 	return (
 		<div className="space-y-8">
 			{/* Document/Files Connectors */}