Merge pull request #316 from MODSetter/dev

refactor: connector icon handling by centralizing icon retrieval in contracts.

surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx

@@ -6,7 +6,6 @@ import { Calendar as CalendarIcon, Edit, Plus, RefreshCw, Trash2 } from "lucide-
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { getConnectorIcon } from "@/components/chat";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -41,6 +40,7 @@ import {
 } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 import { cn } from "@/lib/utils";
 

surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx

@@ -5,7 +5,6 @@ import { ArrowLeft, Check, Loader2 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { toast } from "sonner";
-import { getConnectorIcon } from "@/components/chat";
 import { EditConnectorLoadingSkeleton } from "@/components/editConnector/EditConnectorLoadingSkeleton";
 import { EditConnectorNameForm } from "@/components/editConnector/EditConnectorNameForm";
 import { EditGitHubConnectorConfig } from "@/components/editConnector/EditGitHubConnectorConfig";
@@ -20,6 +19,7 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { Form } from "@/components/ui/form";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useConnectorEditPage } from "@/hooks/useConnectorEditPage";
 // Import Utils, Types, Hook, and Components
 import { getConnectorTypeDisplay } from "@/lib/connectors/utils";

surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { IconBrandAirtable } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
 import Link from "next/link";
@@ -17,6 +16,8 @@ import {
 	CardTitle,
 } from "@/components/ui/card";
 import { EnumConnectorName } from "@/contracts/enums/connector";
+// import { IconBrandAirtable } from "@tabler/icons-react";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import {
 	type SearchSourceConnector,
 	useSearchSourceConnectors,
@@ -88,8 +89,8 @@ export default function AirtableConnectorPage() {
 						Back to connectors
 					</Link>
 					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
+						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							<IconBrandAirtable className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+							{getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6")}
 						</div>
 						<div>
 							<h1 className="text-3xl font-bold tracking-tight">Connect Airtable</h1>

surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx

@@ -20,6 +20,8 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -59,7 +61,7 @@ export default function ClickUpConnectorPage() {
 		try {
 			const connectorData = {
 				name: values.name,
-				connector_type: "CLICKUP_CONNECTOR",
+				connector_type: EnumConnectorName.CLICKUP_CONNECTOR,
 				is_indexable: true,
 				config: {
 					CLICKUP_API_TOKEN: values.api_token,
@@ -90,6 +92,21 @@ export default function ClickUpConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect ClickUp</h1>
+						<p className="text-muted-foreground">
+							Connect your ClickUp workspace to search tasks and projects.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<Card>
 				<CardHeader>
 					<CardTitle>ClickUp Configuration</CardTitle>

surfsense_web/app/dashboard/[search_space_id]/connectors/add/confluence-connector/page.tsx

@@ -22,7 +22,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -78,7 +79,7 @@ export default function ConfluenceConnectorPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "CONFLUENCE_CONNECTOR",
+				connector_type: EnumConnectorName.CONFLUENCE_CONNECTOR,
 				config: {
 					CONFLUENCE_BASE_URL: values.base_url,
 					CONFLUENCE_EMAIL: values.email,
@@ -111,6 +112,21 @@ export default function ConfluenceConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Confluence</h1>
+						<p className="text-muted-foreground">
+							Connect your Confluence instance to search pages and spaces.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx

@@ -35,6 +35,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -73,7 +75,7 @@ export default function DiscordConnectorPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "DISCORD_CONNECTOR",
+				connector_type: EnumConnectorName.DISCORD_CONNECTOR,
 				config: {
 					DISCORD_BOT_TOKEN: values.bot_token,
 				},
@@ -102,6 +104,21 @@ export default function DiscordConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg ">
+						{getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Discord</h1>
+						<p className="text-muted-foreground">
+							Connect your Discord server to search messages and channels.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx

@@ -36,6 +36,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 // Assuming useSearchSourceConnectors hook exists and works similarly
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
@@ -148,7 +150,7 @@ export default function GithubConnectorPage() {
 		try {
 			await createConnector({
 				name: connectorName, // Use the stored name
-				connector_type: "GITHUB_CONNECTOR",
+				connector_type: EnumConnectorName.GITHUB_CONNECTOR,
 				config: {
 					GITHUB_PAT: validatedPat, // Use the stored validated PAT
 					repo_full_names: selectedRepos, // Add the selected repo names
@@ -215,7 +217,7 @@ export default function GithubConnectorPage() {
 							<CardHeader>
 								<CardTitle className="text-2xl font-bold flex items-center gap-2">
 									{step === "enter_pat" ? (
-										<Github className="h-6 w-6" />
+										getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6")
 									) : (
 										<ListChecks className="h-6 w-6" />
 									)}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { IconCalendar } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
 import Link from "next/link";
@@ -19,6 +18,8 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import {
 	type SearchSourceConnector,
 	useSearchSourceConnectors,
@@ -36,7 +37,8 @@ export default function GoogleCalendarConnectorPage() {
 	useEffect(() => {
 		fetchConnectors().then((data) => {
 			const connector = data.find(
-				(c: SearchSourceConnector) => c.connector_type === "GOOGLE_CALENDAR_CONNECTOR"
+				(c: SearchSourceConnector) =>
+					c.connector_type === EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR
 			);
 			if (connector) {
 				setDoesConnectorExist(true);
@@ -92,8 +94,8 @@ export default function GoogleCalendarConnectorPage() {
 						Back to connectors
 					</Link>
 					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900">
+						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							<IconCalendar className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+							{getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6")}
 						</div>
 						<div>
 							<h1 className="text-3xl font-bold tracking-tight">Connect Google Calendar</h1>

surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { IconMail } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
 import Link from "next/link";
@@ -19,6 +18,8 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import {
 	type SearchSourceConnector,
 	useSearchSourceConnectors,
@@ -36,7 +37,7 @@ export default function GoogleGmailConnectorPage() {
 	useEffect(() => {
 		fetchConnectors().then((data) => {
 			const connector = data.find(
-				(c: SearchSourceConnector) => c.connector_type === "GOOGLE_GMAIL_CONNECTOR"
+				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.GOOGLE_GMAIL_CONNECTOR
 			);
 			if (connector) {
 				setDoesConnectorExist(true);
@@ -92,8 +93,8 @@ export default function GoogleGmailConnectorPage() {
 						Back to connectors
 					</Link>
 					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900">
+						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							<IconMail className="h-6 w-6 text-red-600 dark:text-red-400" />
+							{getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6")}
 						</div>
 						<div>
 							<h1 className="text-3xl font-bold tracking-tight">Connect Google Gmail</h1>

surfsense_web/app/dashboard/[search_space_id]/connectors/add/jira-connector/page.tsx

@@ -35,6 +35,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -90,7 +92,7 @@ export default function JiraConnectorPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "JIRA_CONNECTOR",
+				connector_type: EnumConnectorName.JIRA_CONNECTOR,
 				config: {
 					JIRA_BASE_URL: values.base_url,
 					JIRA_EMAIL: values.email,
@@ -123,6 +125,21 @@ export default function JiraConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Jira</h1>
+						<p className="text-muted-foreground">
+							Connect your Jira instance to search issues and tickets.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/linear-connector/page.tsx

@@ -35,6 +35,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -77,7 +79,7 @@ export default function LinearConnectorPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "LINEAR_CONNECTOR",
+				connector_type: EnumConnectorName.LINEAR_CONNECTOR,
 				config: {
 					LINEAR_API_KEY: values.api_key,
 				},
@@ -108,6 +110,21 @@ export default function LinearConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Linear</h1>
+						<p className="text-muted-foreground">
+							Connect your Linear workspace to search issues and projects.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/linkup-api/page.tsx

@@ -28,6 +28,8 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -65,7 +67,7 @@ export default function LinkupApiPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "LINKUP_API",
+				connector_type: EnumConnectorName.LINKUP_API,
 				config: {
 					LINKUP_API_KEY: values.api_key,
 				},
@@ -96,6 +98,21 @@ export default function LinkupApiPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Linkup API</h1>
+						<p className="text-muted-foreground">
+							Connect Linkup API for enhanced search capabilities.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/notion-connector/page.tsx

@@ -35,6 +35,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -72,7 +74,7 @@ export default function NotionConnectorPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "NOTION_CONNECTOR",
+				connector_type: EnumConnectorName.NOTION_CONNECTOR,
 				config: {
 					NOTION_INTEGRATION_TOKEN: values.integration_token,
 				},
@@ -103,6 +105,21 @@ export default function NotionConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Notion</h1>
+						<p className="text-muted-foreground">
+							Connect your Notion workspace to search pages and databases.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx

@@ -1,23 +1,10 @@
 "use client";
 
 import {
-	IconBook,
-	IconBrandDiscord,
-	IconBrandGithub,
-	IconBrandNotion,
-	IconBrandSlack,
 	IconBrandWindows,
 	IconBrandZoom,
-	IconCalendar,
-	IconChecklist,
 	IconChevronDown,
 	IconChevronRight,
-	IconLayoutKanban,
-	IconLinkPlus,
-	IconMail,
-	IconTable,
-	IconTicket,
-	IconWorldWww,
 } from "@tabler/icons-react";
 import { AnimatePresence, motion, type Variants } from "framer-motion";
 import Link from "next/link";
@@ -27,6 +14,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 
 // Define the Connector type
 interface Connector {
@@ -53,14 +42,14 @@ const connectorCategories: ConnectorCategory[] = [
 				id: "tavily-api",
 				title: "Tavily API",
 				description: "Search the web using the Tavily API",
-				icon: <IconWorldWww className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "linkup-api",
 				title: "Linkup API",
 				description: "Search the web using the Linkup API",
-				icon: <IconLinkPlus className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
 				status: "available",
 			},
 		],
@@ -73,7 +62,7 @@ const connectorCategories: ConnectorCategory[] = [
 				id: "slack-connector",
 				title: "Slack",
 				description: "Connect to your Slack workspace to access messages and channels.",
-				icon: <IconBrandSlack className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
@@ -87,7 +76,7 @@ const connectorCategories: ConnectorCategory[] = [
 				id: "discord-connector",
 				title: "Discord",
 				description: "Connect to Discord servers to access messages and channels.",
-				icon: <IconBrandDiscord className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 		],
@@ -100,21 +89,21 @@ const connectorCategories: ConnectorCategory[] = [
 				id: "linear-connector",
 				title: "Linear",
 				description: "Connect to Linear to search issues, comments and project data.",
-				icon: <IconLayoutKanban className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "jira-connector",
 				title: "Jira",
 				description: "Connect to Jira to search issues, tickets and project data.",
-				icon: <IconTicket className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "clickup-connector",
 				title: "ClickUp",
 				description: "Connect to ClickUp to search tasks, comments and project data.",
-				icon: <IconChecklist className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 		],
@@ -127,28 +116,28 @@ const connectorCategories: ConnectorCategory[] = [
 				id: "notion-connector",
 				title: "Notion",
 				description: "Connect to your Notion workspace to access pages and databases.",
-				icon: <IconBrandNotion className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "github-connector",
 				title: "GitHub",
 				description: "Connect a GitHub PAT to index code and docs from accessible repositories.",
-				icon: <IconBrandGithub className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "confluence-connector",
 				title: "Confluence",
 				description: "Connect to Confluence to search pages, comments and documentation.",
-				icon: <IconBook className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "airtable-connector",
 				title: "Airtable",
 				description: "Connect to Airtable to search records, tables and database content.",
-				icon: <IconTable className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 		],
@@ -161,14 +150,14 @@ const connectorCategories: ConnectorCategory[] = [
 				id: "google-calendar-connector",
 				title: "Google Calendar",
 				description: "Connect to Google Calendar to search events, meetings and schedules.",
-				icon: <IconCalendar className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{
 				id: "google-gmail-connector",
 				title: "Gmail",
 				description: "Connect to your Gmail account to search through your emails.",
-				icon: <IconMail className="h-6 w-6" />,
+				icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
 				status: "available",
 			},
 			{

surfsense_web/app/dashboard/[search_space_id]/connectors/add/serper-api/page.tsx

@@ -28,6 +28,8 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -65,7 +67,7 @@ export default function SerperApiPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "SERPER_API",
+				connector_type: EnumConnectorName.SERPER_API,
 				config: {
 					SERPER_API_KEY: values.api_key,
 				},
@@ -96,6 +98,21 @@ export default function SerperApiPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.SERPER_API, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Serper API</h1>
+						<p className="text-muted-foreground">
+							Connect Serper API for Google search capabilities.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/slack-connector/page.tsx

@@ -35,6 +35,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -72,7 +74,7 @@ export default function SlackConnectorPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "SLACK_CONNECTOR",
+				connector_type: EnumConnectorName.SLACK_CONNECTOR,
 				config: {
 					SLACK_BOT_TOKEN: values.bot_token,
 				},
@@ -103,6 +105,21 @@ export default function SlackConnectorPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Slack</h1>
+						<p className="text-muted-foreground">
+							Connect your Slack workspace to search messages and channels.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/connectors/add/tavily-api/page.tsx

@@ -28,6 +28,8 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";
 
 // Define the form schema with Zod
@@ -65,7 +67,7 @@ export default function TavilyApiPage() {
 		try {
 			await createConnector({
 				name: values.name,
-				connector_type: "TAVILY_API",
+				connector_type: EnumConnectorName.TAVILY_API,
 				config: {
 					TAVILY_API_KEY: values.api_key,
 				},
@@ -96,6 +98,21 @@ export default function TavilyApiPage() {
 				Back to Connectors
 			</Button>
 
+			{/* Header */}
+			<div className="mb-8">
+				<div className="flex items-center gap-4">
+					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+						{getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6")}
+					</div>
+					<div>
+						<h1 className="text-3xl font-bold tracking-tight">Connect Tavily API</h1>
+						<p className="text-muted-foreground">
+							Connect Tavily API for AI-powered search capabilities.
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<motion.div
 				initial={{ opacity: 0, y: 20 }}
 				animate={{ opacity: 1, y: 0 }}

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx

@@ -1,44 +1,12 @@
 "use client";
 
-import {
-	IconBook,
-	IconBrandDiscord,
-	IconBrandGithub,
-	IconBrandNotion,
-	IconBrandSlack,
-	IconBrandYoutube,
-	IconCalendar,
-	IconChecklist,
-	IconLayoutKanban,
-	IconMail,
-	IconTable,
-	IconTicket,
-} from "@tabler/icons-react";
-import { File, Globe, Webhook } from "lucide-react";
 import type React from "react";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 
 type IconComponent = React.ComponentType<{ size?: number; className?: string }>;
 
-const documentTypeIcons: Record<string, IconComponent> = {
+export function getDocumentTypeIcon(type: string): React.ReactNode {
-	EXTENSION: Webhook,
+	return getConnectorIcon(type);
-	CRAWLED_URL: Globe,
-	SLACK_CONNECTOR: IconBrandSlack,
-	NOTION_CONNECTOR: IconBrandNotion,
-	FILE: File,
-	YOUTUBE_VIDEO: IconBrandYoutube,
-	GITHUB_CONNECTOR: IconBrandGithub,
-	LINEAR_CONNECTOR: IconLayoutKanban,
-	JIRA_CONNECTOR: IconTicket,
-	DISCORD_CONNECTOR: IconBrandDiscord,
-	CONFLUENCE_CONNECTOR: IconBook,
-	CLICKUP_CONNECTOR: IconChecklist,
-	GOOGLE_CALENDAR_CONNECTOR: IconCalendar,
-	GOOGLE_GMAIL_CONNECTOR: IconMail,
-	AIRTABLE_CONNECTOR: IconTable,
-};
-
-export function getDocumentTypeIcon(type: string): IconComponent {
-	return documentTypeIcons[type] ?? File;
 }
 
 export function getDocumentTypeLabel(type: string): string {
@@ -49,7 +17,7 @@ export function getDocumentTypeLabel(type: string): string {
 }
 
 export function DocumentTypeChip({ type, className }: { type: string; className?: string }) {
-	const Icon = getDocumentTypeIcon(type);
+	const icon = getDocumentTypeIcon(type);
 	return (
 		<span
 			className={
@@ -57,7 +25,7 @@ export function DocumentTypeChip({ type, className }: { type: string; className?
 				(className ?? "")
 			}
 		>
-			<Icon size={14} className="text-primary" />
+			<span className="text-primary">{icon}</span>
 			{getDocumentTypeLabel(type)}
 		</span>
 	);

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -197,7 +197,7 @@ export function DocumentsTableShell({
 							</TableHeader>
 							<TableBody>
 								{sorted.map((doc, index) => {
-									const Icon = getDocumentTypeIcon(doc.document_type);
+									const icon = getDocumentTypeIcon(doc.document_type);
 									const title = doc.title;
 									const truncatedTitle = title.length > 30 ? `${title.slice(0, 30)}...` : title;
 									return (
@@ -235,7 +235,7 @@ export function DocumentsTableShell({
 														<Tooltip>
 															<TooltipTrigger asChild>
 																<span className="flex items-center gap-2">
-																	<Icon size={16} className="text-muted-foreground shrink-0" />
+																	<span className="text-muted-foreground shrink-0">{icon}</span>
 																	<span>{truncatedTitle}</span>
 																</span>
 															</TooltipTrigger>
@@ -293,7 +293,7 @@ export function DocumentsTableShell({
 					</div>
 					<div className="md:hidden divide-y">
 						{sorted.map((doc) => {
-							const Icon = getDocumentTypeIcon(doc.document_type);
+							const icon = getDocumentTypeIcon(doc.document_type);
 							return (
 								<div key={doc.id} className="p-3">
 									<div className="flex items-start gap-3">
@@ -305,7 +305,7 @@ export function DocumentsTableShell({
 										<div className="flex-1 min-w-0">
 											<div className="flex items-center justify-between gap-2">
 												<div className="flex items-center gap-2 min-w-0">
-													<Icon size={16} className="text-muted-foreground shrink-0" />
+													<span className="text-muted-foreground shrink-0">{icon}</span>
 													<div className="font-medium truncate">{doc.title}</div>
 												</div>
 												<RowActions

surfsense_web/components/chat/ChatCitation.tsx

@@ -15,6 +15,7 @@ import {
 	SheetTitle,
 	SheetTrigger,
 } from "@/components/ui/sheet";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useDocumentByChunk } from "@/hooks/use-document-by-chunk";
 import { cn } from "@/lib/utils";
 
@@ -74,7 +75,7 @@ export const CitationDisplay: React.FC<{ index: number; node: any }> = ({ index,
 			<SheetContent side="right" className="w-full sm:max-w-5xl lg:max-w-7xl">
 				<SheetHeader className="px-6 py-4 border-b">
 					<SheetTitle className="flex items-center gap-3 text-lg">
-						<FileText className="h-6 w-6" />
+						{getConnectorIcon(sourceType)}
 						{document?.title || node?.metadata?.title || node?.metadata?.group_name || "Source"}
 					</SheetTitle>
 					<SheetDescription className="text-base mt-2">

surfsense_web/components/chat/ChatInputGroup.tsx

@@ -5,10 +5,7 @@ import { Brain, Check, FolderOpen, Zap } from "lucide-react";
 import { useParams } from "next/navigation";
 import React, { Suspense, useCallback, useState } from "react";
 import type { ResearchMode } from "@/components/chat";
-import {
+import { ConnectorButton as ConnectorButtonComponent } from "@/components/chat/ConnectorComponents";
-	ConnectorButton as ConnectorButtonComponent,
-	getConnectorIcon,
-} from "@/components/chat/ConnectorComponents";
 import { DocumentsDataTable } from "@/components/chat/DocumentsDataTable";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -27,6 +24,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { type Document, useDocuments } from "@/hooks/use-documents";
 import { useLLMConfigs, useLLMPreferences } from "@/hooks/use-llm-configs";
 import { useSearchSourceConnectors } from "@/hooks/useSearchSourceConnectors";

surfsense_web/components/chat/ChatSources.tsx

@@ -1,31 +1,14 @@
 "use client";
 
 import { getAnnotationData, type Message } from "@llamaindex/chat-ui";
-import {
+import { ExternalLink, FileText } from "lucide-react";
-	IconBrandDiscord,
-	IconBrandGithub,
-	IconBrandNotion,
-	IconBrandSlack,
-	IconBrandYoutube,
-} from "@tabler/icons-react";
-import {
-	BookOpen,
-	Calendar,
-	CheckSquare,
-	Database,
-	ExternalLink,
-	FileText,
-	Globe,
-	Link2,
-	Mail,
-	Puzzle,
-} from "lucide-react";
 import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 
 interface Source {
 	id: string;
@@ -56,86 +39,11 @@ interface SourceNode {
 }
 
 function getSourceIcon(type: string) {
-	switch (type) {
+	// Handle USER_SELECTED_ prefix
-		// GitHub
+	const normalizedType = type.startsWith("USER_SELECTED_")
-		case "USER_SELECTED_GITHUB_CONNECTOR":
+		? type.replace("USER_SELECTED_", "")
-		case "GITHUB_CONNECTOR":
+		: type;
-			return <IconBrandGithub className="h-4 w-4" />;
+	return getConnectorIcon(normalizedType, "h-4 w-4");
-
-		// Notion
-		case "USER_SELECTED_NOTION_CONNECTOR":
-		case "NOTION_CONNECTOR":
-			return <IconBrandNotion className="h-4 w-4" />;
-
-		// Slack
-		case "USER_SELECTED_SLACK_CONNECTOR":
-		case "SLACK_CONNECTOR":
-			return <IconBrandSlack className="h-4 w-4" />;
-
-		// Discord
-		case "USER_SELECTED_DISCORD_CONNECTOR":
-		case "DISCORD_CONNECTOR":
-			return <IconBrandDiscord className="h-4 w-4" />;
-
-		// Google Calendar
-		case "USER_SELECTED_GOOGLE_CALENDAR_CONNECTOR":
-		case "GOOGLE_CALENDAR_CONNECTOR":
-			return <Calendar className="h-4 w-4" />;
-
-		// Google Gmail
-		case "USER_SELECTED_GOOGLE_GMAIL_CONNECTOR":
-		case "GOOGLE_GMAIL_CONNECTOR":
-			return <Mail className="h-4 w-4" />;
-
-		// Airtable
-		case "USER_SELECTED_AIRTABLE_CONNECTOR":
-		case "AIRTABLE_CONNECTOR":
-			return <Database className="h-4 w-4" />;
-
-		// YouTube
-		case "USER_SELECTED_YOUTUBE_VIDEO":
-		case "YOUTUBE_VIDEO":
-			return <IconBrandYoutube className="h-4 w-4" />;
-
-		// Linear
-		case "USER_SELECTED_LINEAR_CONNECTOR":
-		case "LINEAR_CONNECTOR":
-			return <CheckSquare className="h-4 w-4" />;
-
-		// Jira
-		case "USER_SELECTED_JIRA_CONNECTOR":
-		case "JIRA_CONNECTOR":
-			return <CheckSquare className="h-4 w-4" />;
-
-		// Confluence
-		case "USER_SELECTED_CONFLUENCE_CONNECTOR":
-		case "CONFLUENCE_CONNECTOR":
-			return <BookOpen className="h-4 w-4" />;
-
-		// ClickUp
-		case "USER_SELECTED_CLICKUP_CONNECTOR":
-		case "CLICKUP_CONNECTOR":
-			return <CheckSquare className="h-4 w-4" />;
-
-		// Files
-		case "USER_SELECTED_FILE":
-		case "FILE":
-			return <FileText className="h-4 w-4" />;
-
-		// Extension
-		case "USER_SELECTED_EXTENSION":
-		case "EXTENSION":
-			return <Puzzle className="h-4 w-4" />;
-
-		// Crawled URL
-		case "USER_SELECTED_CRAWLED_URL":
-		case "CRAWLED_URL":
-			return <Link2 className="h-4 w-4" />;
-
-		// Default for any other source type
-		default:
-			return <Globe className="h-4 w-4" />;
-	}
 }
 
 function SourceCard({ source }: { source: Source }) {

surfsense_web/components/chat/ConnectorComponents.tsx

@@ -1,81 +1,9 @@
-import {
+import { ChevronDown, FileText, MessageCircle, Plus } from "lucide-react";
-	IconBrandDiscord,
-	IconBrandGithub,
-	IconBrandNotion,
-	IconBrandSlack,
-	IconBrandYoutube,
-	IconCalendar,
-	IconLayoutKanban,
-	IconLinkPlus,
-	IconMail,
-	IconTable,
-	IconTicket,
-} from "@tabler/icons-react";
-import {
-	ChevronDown,
-	File,
-	FileText,
-	Globe,
-	Link,
-	MessageCircle,
-	Microscope,
-	Plus,
-	Search,
-	Sparkles,
-	Telescope,
-	Webhook,
-} from "lucide-react";
 import type React from "react";
 import { Button } from "@/components/ui/button";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { Connector, ResearchMode } from "./types";
 
-// Helper function to get connector icon
-export const getConnectorIcon = (connectorType: string) => {
-	const iconProps = { className: "h-4 w-4" };
-
-	switch (connectorType) {
-		case "LINKUP_API":
-			return <IconLinkPlus {...iconProps} />;
-		case "LINEAR_CONNECTOR":
-			return <IconLayoutKanban {...iconProps} />;
-		case "GITHUB_CONNECTOR":
-			return <IconBrandGithub {...iconProps} />;
-		case "YOUTUBE_VIDEO":
-			return <IconBrandYoutube {...iconProps} />;
-		case "CRAWLED_URL":
-			return <Globe {...iconProps} />;
-		case "FILE":
-			return <File {...iconProps} />;
-		case "EXTENSION":
-			return <Webhook {...iconProps} />;
-		case "SERPER_API":
-		case "TAVILY_API":
-			return <Link {...iconProps} />;
-		case "SLACK_CONNECTOR":
-			return <IconBrandSlack {...iconProps} />;
-		case "NOTION_CONNECTOR":
-			return <IconBrandNotion {...iconProps} />;
-		case "DISCORD_CONNECTOR":
-			return <IconBrandDiscord {...iconProps} />;
-		case "JIRA_CONNECTOR":
-			return <IconTicket {...iconProps} />;
-		case "GOOGLE_CALENDAR_CONNECTOR":
-			return <IconCalendar {...iconProps} />;
-		case "GOOGLE_GMAIL_CONNECTOR":
-			return <IconMail {...iconProps} />;
-		case "AIRTABLE_CONNECTOR":
-			return <IconTable {...iconProps} />;
-		case "DEEP":
-			return <Sparkles {...iconProps} />;
-		case "DEEPER":
-			return <Microscope {...iconProps} />;
-		case "DEEPEST":
-			return <Telescope {...iconProps} />;
-		default:
-			return <Search {...iconProps} />;
-	}
-};
-
 export const researcherOptions: {
 	value: ResearchMode;
 	label: string;

surfsense_web/components/chat/DocumentsDataTable.tsx

@@ -14,7 +14,6 @@ import {
 } from "@tanstack/react-table";
 import { ArrowUpDown, Calendar, FileText, Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
@@ -33,6 +32,8 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { Document, DocumentType } from "@/hooks/use-documents";
 
 interface DocumentsDataTableProps {
@@ -42,42 +43,16 @@ interface DocumentsDataTableProps {
 	initialSelectedDocuments?: Document[];
 }
 
-const DOCUMENT_TYPES: (DocumentType | "ALL")[] = [
+// Combine EnumConnectorName with additional document types
+const DOCUMENT_TYPES: (string | "ALL")[] = [
 	"ALL",
 	"FILE",
 	"EXTENSION",
 	"CRAWLED_URL",
 	"YOUTUBE_VIDEO",
-	"SLACK_CONNECTOR",
+	...Object.values(EnumConnectorName),
-	"NOTION_CONNECTOR",
-	"GITHUB_CONNECTOR",
-	"LINEAR_CONNECTOR",
-	"DISCORD_CONNECTOR",
-	"JIRA_CONNECTOR",
-	"CONFLUENCE_CONNECTOR",
-	"CLICKUP_CONNECTOR",
-	"GOOGLE_CALENDAR_CONNECTOR",
-	"GOOGLE_GMAIL_CONNECTOR",
-	"AIRTABLE_CONNECTOR",
 ];
 
-const getDocumentTypeColor = (type: DocumentType) => {
-	const colors = {
-		FILE: "bg-blue-50 text-blue-700 border-blue-200",
-		EXTENSION: "bg-green-50 text-green-700 border-green-200",
-		CRAWLED_URL: "bg-purple-50 text-purple-700 border-purple-200",
-		YOUTUBE_VIDEO: "bg-red-50 text-red-700 border-red-200",
-		SLACK_CONNECTOR: "bg-yellow-50 text-yellow-700 border-yellow-200",
-		NOTION_CONNECTOR: "bg-indigo-50 text-indigo-700 border-indigo-200",
-		GITHUB_CONNECTOR: "bg-gray-50 text-gray-700 border-gray-200",
-		LINEAR_CONNECTOR: "bg-pink-50 text-pink-700 border-pink-200",
-		DISCORD_CONNECTOR: "bg-violet-50 text-violet-700 border-violet-200",
-		JIRA_CONNECTOR: "bg-orange-50 text-orange-700 border-orange-200",
-		CONFLUENCE_CONNECTOR: "bg-teal-50 text-teal-700 border-teal-200",
-	};
-	return colors[type] || "bg-gray-50 text-gray-700 border-gray-200";
-};
-
 const columns: ColumnDef<Document>[] = [
 	{
 		id: "select",
@@ -133,13 +108,9 @@ const columns: ColumnDef<Document>[] = [
 		cell: ({ row }) => {
 			const type = row.getValue("document_type") as DocumentType;
 			return (
-				<Badge
+				<div className="flex items-center gap-2" title={type}>
-					variant="outline"
+					<span className="text-primary">{getConnectorIcon(type)}</span>
-					className={`${getDocumentTypeColor(type)} text-[10px] sm:text-xs px-1 sm:px-2`}
+				</div>
-				>
-					<span className="hidden sm:inline">{type.replace(/_/g, " ")}</span>
-					<span className="sm:hidden">{type.split("_")[0]}</span>
-				</Badge>
 			);
 		},
 		size: 80,
@@ -214,7 +185,7 @@ export function DocumentsDataTable({
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-	const [documentTypeFilter, setDocumentTypeFilter] = useState<DocumentType | "ALL">("ALL");
+	const [documentTypeFilter, setDocumentTypeFilter] = useState<string | "ALL">("ALL");
 
 	// Memoize initial row selection to prevent infinite loops
 	const initialRowSelection = useMemo(() => {
@@ -311,7 +282,7 @@ export function DocumentsDataTable({
 					</div>
 					<Select
 						value={documentTypeFilter}
-						onValueChange={(value) => setDocumentTypeFilter(value as DocumentType | "ALL")}
+						onValueChange={(value) => setDocumentTypeFilter(value as string | "ALL")}
 					>
 						<SelectTrigger className="w-full sm:w-[180px]">
 							<SelectValue />

surfsense_web/contracts/enums/connectorIcons.tsx

@@ -0,0 +1,70 @@
+import {
+	IconBook,
+	IconBrandDiscord,
+	IconBrandGithub,
+	IconBrandNotion,
+	IconBrandSlack,
+	IconBrandYoutube,
+	IconCalendar,
+	IconChecklist,
+	IconLayoutKanban,
+	IconLinkPlus,
+	IconMail,
+	IconTable,
+	IconTicket,
+	IconWorldWww,
+} from "@tabler/icons-react";
+import { File, Globe, Link, Microscope, Search, Sparkles, Telescope, Webhook } from "lucide-react";
+import { EnumConnectorName } from "./connector";
+
+export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
+	const iconProps = { className: className || "h-4 w-4" };
+
+	switch (connectorType) {
+		case EnumConnectorName.LINKUP_API:
+			return <IconLinkPlus {...iconProps} />;
+		case EnumConnectorName.LINEAR_CONNECTOR:
+			return <IconLayoutKanban {...iconProps} />;
+		case EnumConnectorName.GITHUB_CONNECTOR:
+			return <IconBrandGithub {...iconProps} />;
+		case EnumConnectorName.SERPER_API:
+			return <Link {...iconProps} />;
+		case EnumConnectorName.TAVILY_API:
+			return <IconWorldWww {...iconProps} />;
+		case EnumConnectorName.SLACK_CONNECTOR:
+			return <IconBrandSlack {...iconProps} />;
+		case EnumConnectorName.NOTION_CONNECTOR:
+			return <IconBrandNotion {...iconProps} />;
+		case EnumConnectorName.DISCORD_CONNECTOR:
+			return <IconBrandDiscord {...iconProps} />;
+		case EnumConnectorName.JIRA_CONNECTOR:
+			return <IconTicket {...iconProps} />;
+		case EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR:
+			return <IconCalendar {...iconProps} />;
+		case EnumConnectorName.GOOGLE_GMAIL_CONNECTOR:
+			return <IconMail {...iconProps} />;
+		case EnumConnectorName.AIRTABLE_CONNECTOR:
+			return <IconTable {...iconProps} />;
+		case EnumConnectorName.CONFLUENCE_CONNECTOR:
+			return <IconBook {...iconProps} />;
+		case EnumConnectorName.CLICKUP_CONNECTOR:
+			return <IconChecklist {...iconProps} />;
+		// Additional cases for non-enum connector types
+		case "YOUTUBE_VIDEO":
+			return <IconBrandYoutube {...iconProps} />;
+		case "CRAWLED_URL":
+			return <Globe {...iconProps} />;
+		case "FILE":
+			return <File {...iconProps} />;
+		case "EXTENSION":
+			return <Webhook {...iconProps} />;
+		case "DEEP":
+			return <Sparkles {...iconProps} />;
+		case "DEEPER":
+			return <Microscope {...iconProps} />;
+		case "DEEPEST":
+			return <Telescope {...iconProps} />;
+		default:
+			return <Search {...iconProps} />;
+	}
+};