From 038cdb3ed32e7a77a10575431185825d8933c5dd Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 9 Feb 2026 15:24:38 +0530
Subject: [PATCH] feat: add new integrations and update icon handling in the
 homepage

---
 .../components/homepage/integrations.tsx      | 35 +++++++++----
 .../contracts/enums/connectorIcons.tsx        | 10 ++--
 .../public/connectors/circleback.svg          | 19 +++++++
 surfsense_web/public/connectors/linkup.svg    | 50 +++++++++++++++++++
 4 files changed, 98 insertions(+), 16 deletions(-)
 create mode 100644 surfsense_web/public/connectors/circleback.svg
 create mode 100644 surfsense_web/public/connectors/linkup.svg

diff --git a/surfsense_web/components/homepage/integrations.tsx b/surfsense_web/components/homepage/integrations.tsx
index d8361d721..fc250e65b 100644
--- a/surfsense_web/components/homepage/integrations.tsx
+++ b/surfsense_web/components/homepage/integrations.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type React from "react";
+import Image from "next/image";
 
 interface Integration {
 	name: string;
@@ -44,15 +45,24 @@ const INTEGRATIONS: Integration[] = [
 
 	// Media
 	{ name: "YouTube", icon: "/connectors/youtube.svg" },
+
+	// Search
+	{ name: "Linkup", icon: "/connectors/linkup.svg" },
+
+	// Meetings
+	{ name: "Circleback", icon: "/connectors/circleback.svg" },
+
+	// AI
+	{ name: "MCP", icon: "/connectors/modelcontextprotocol.svg" },
 ];
 
-// 5 vertical columns — 21 icons spread across categories
+// 5 vertical columns — 23 icons spread across categories
 const COLUMNS: number[][] = [
-	[2, 5, 10, 0, 11],
+	[2, 5, 10, 0, 21, 11],
 	[1, 7, 20, 17],
-	[13, 6, 4, 16],
+	[13, 6, 23, 4, 16],
 	[12, 8, 15, 18],
-	[3, 9, 14, 19],
+	[3, 9, 14, 22, 19],
 ];
 
 // Different scroll speeds per column for organic feel (seconds)
@@ -61,7 +71,7 @@ const SCROLL_DURATIONS = [26, 32, 22, 30, 28];
 function IntegrationCard({ integration }: { integration: Integration }) {
 	return (
 		<div
-			className="w-[60px] h-[60px] sm:w-[80px] sm:h-[80px] md:w-[120px] md:h-[120px] lg:w-[140px] lg:h-[140px] rounded-[16px] sm:rounded-[20px] md:rounded-[24px] flex items-center justify-center shrink-0"
+			className="w-[60px] h-[60px] sm:w-[80px] sm:h-[80px] md:w-[120px] md:h-[120px] lg:w-[140px] lg:h-[140px] rounded-[16px] sm:rounded-[20px] md:rounded-[24px] flex items-center justify-center shrink-0 select-none"
 			style={{
 				background:
 					"linear-gradient(145deg, var(--card-from), var(--card-to))",
@@ -69,12 +79,15 @@ function IntegrationCard({ integration }: { integration: Integration }) {
 					"inset 0 1px 0 0 var(--card-highlight), 0 4px 24px var(--card-shadow)",
 			}}
 		>
-			<img
-				src={integration.icon}
-				alt={integration.name}
-				className="w-6 h-6 sm:w-7 sm:h-7 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain"
-				loading="lazy"
-			/>
+		<Image
+			src={integration.icon}
+			alt={integration.name}
+			className="w-6 h-6 sm:w-7 sm:h-7 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain select-none pointer-events-none"
+			loading="lazy"
+			draggable={false}
+			width={48}
+			height={48}
+		/>
 		</div>
 	);
 }
diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index 18a872d94..e29e5be6e 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -1,4 +1,4 @@
-import { IconLinkPlus, IconUsersGroup } from "@tabler/icons-react";
+import { IconUsersGroup } from "@tabler/icons-react";
 import {
 	BookOpen,
 	File,
@@ -15,11 +15,11 @@ import { EnumConnectorName } from "./connector";
 
 export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
 	const iconProps = { className: className || "h-4 w-4" };
-	const imgProps = { className: className || "h-5 w-5", width: 20, height: 20 };
+	const imgProps = { className: `${className || "h-5 w-5"} select-none pointer-events-none`, width: 20, height: 20, draggable: false as const };
 
 	switch (connectorType) {
-		case EnumConnectorName.LINKUP_API:
-			return <IconLinkPlus {...iconProps} />;
+	case EnumConnectorName.LINKUP_API:
+		return <Image src="/connectors/linkup.svg" alt="Linkup" {...imgProps} />;
 		case EnumConnectorName.LINEAR_CONNECTOR:
 			return <Image src="/connectors/linear.svg" alt="Linear" {...imgProps} />;
 		case EnumConnectorName.GITHUB_CONNECTOR:
@@ -63,7 +63,7 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 		case EnumConnectorName.YOUTUBE_CONNECTOR:
 			return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;
 		case EnumConnectorName.CIRCLEBACK_CONNECTOR:
-			return <IconUsersGroup {...iconProps} />;
+			return <Image src="/connectors/circleback.svg" alt="Circleback" {...imgProps} />;
 		case EnumConnectorName.MCP_CONNECTOR:
 			return <Image src="/connectors/modelcontextprotocol.svg" alt="MCP" {...imgProps} />;
 		case EnumConnectorName.OBSIDIAN_CONNECTOR:
diff --git a/surfsense_web/public/connectors/circleback.svg b/surfsense_web/public/connectors/circleback.svg
new file mode 100644
index 000000000..76bdcddd8
--- /dev/null
+++ b/surfsense_web/public/connectors/circleback.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="340.000000pt" height="340.000000pt" viewBox="0 0 340.000000 340.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,340.000000) scale(0.100000,-0.100000)" stroke="none">
+<path fill="#F24D1D" d="M1385 2574 c-268 -38 -456 -142 -603 -335 -218 -286 -226 -755 -19
+-1054 110 -159 268 -272 467 -336 67 -21 94 -24 240 -24 185 0 243 11 367 70
+98 46 157 87 229 161 55 56 143 198 131 210 -8 8 -288 144 -296 144 -4 0 -16
+-19 -28 -43 -34 -69 -117 -153 -186 -187 -214 -105 -484 -39 -620 152 -121
+170 -141 455 -46 655 58 123 192 233 320 262 78 18 213 13 282 -10 101 -34
+202 -120 248 -211 12 -24 23 -44 24 -46 2 -2 295 136 304 144 2 2 -12 33 -30
+69 -82 165 -266 301 -477 356 -71 18 -247 31 -307 23z"/>
+<path fill="#4162FE" d="M2575 1135 c-114 -40 -147 -185 -61 -271 65 -65 167 -65 232 0 83 83
+59 213 -49 265 -50 24 -68 25 -122 6z"/>
+</g>
+</svg>
diff --git a/surfsense_web/public/connectors/linkup.svg b/surfsense_web/public/connectors/linkup.svg
new file mode 100644
index 000000000..8b0ffb071
--- /dev/null
+++ b/surfsense_web/public/connectors/linkup.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="130.000000pt" viewBox="0 0 512.000000 130.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,130.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M470 1287 c-73 -21 -118 -47 -176 -99 -168 -154 -270 -444 -290 -825
+-9 -174 -12 -172 168 -104 215 79 557 174 779 214 l77 14 6 -36 c3 -20 6 -66
+6 -102 0 -95 8 -128 34 -135 50 -12 368 132 447 204 56 51 68 81 45 117 -22
+33 -72 45 -190 45 -89 0 -98 2 -91 17 34 89 46 269 23 347 -16 53 -81 118
+-134 134 -52 15 -161 16 -221 1 -45 -12 -45 -12 -71 22 -114 150 -278 225
+-412 186z m201 -74 c51 -23 105 -67 149 -124 l31 -38 -73 -37 c-121 -61 -245
+-153 -371 -274 -107 -103 -297 -324 -327 -380 -6 -12 -14 -20 -16 -17 -9 8 17
+220 37 316 68 312 196 513 362 567 55 18 151 12 208 -13z m509 -202 c21 -11
+45 -35 60 -62 21 -38 25 -56 24 -129 0 -55 -9 -114 -23 -166 l-23 -81 -45 -7
+c-93 -12 -88 -16 -107 82 -21 103 -65 242 -101 313 -15 28 -24 53 -22 55 9 9
+124 21 162 17 22 -3 56 -13 75 -22z m-260 -98 c18 -42 38 -97 46 -122 17 -55
+54 -215 54 -234 0 -9 -32 -19 -97 -31 -160 -30 -467 -110 -643 -169 -91 -30
+-166 -54 -167 -53 -1 1 37 53 85 116 105 140 318 354 429 433 85 60 224 137
+248 137 7 0 27 -34 45 -77z m584 -405 c17 -9 16 -12 -10 -39 -29 -30 -174
+-109 -280 -152 l-62 -25 54 112 53 111 58 6 c69 6 161 0 187 -13z m-314 -3 c0
+-10 -81 -167 -84 -164 -2 2 -6 39 -10 81 l-7 77 28 4 c45 7 73 7 73 2z"/>
+<path d="M1880 645 l0 -415 45 0 45 0 0 415 0 415 -45 0 -45 0 0 -415z"/>
+<path d="M3180 645 l0 -415 45 0 45 0 0 125 c0 82 4 125 11 125 6 0 72 -56
+147 -125 l136 -125 59 0 c32 0 57 4 55 9 -1 5 -72 71 -155 146 -84 76 -153
+141 -153 145 0 5 68 68 150 140 83 72 150 133 150 136 0 2 -28 4 -62 4 l-63 0
+-125 -115 c-69 -63 -131 -114 -137 -114 -10 -1 -13 53 -13 239 l0 240 -45 0
+-45 0 0 -415z"/>
+<path d="M2184 1002 c-23 -15 -35 -51 -24 -72 31 -58 110 -39 110 26 0 35 -57
+66 -86 46z"/>
+<path d="M4774 820 c-43 -10 -102 -47 -121 -76 -23 -36 -33 -29 -33 21 l0 45
+-45 0 -45 0 0 -405 0 -405 45 0 45 0 0 160 c0 88 3 160 6 160 4 0 26 -18 49
+-39 53 -48 108 -65 197 -59 152 11 248 129 248 303 0 97 -23 158 -83 220 -72
+73 -163 99 -263 75z m171 -114 c52 -40 75 -95 75 -184 0 -87 -15 -127 -63
+-169 -74 -65 -176 -69 -260 -11 -59 42 -92 165 -68 256 14 49 63 109 106 129
+19 8 57 12 101 11 60 -3 76 -8 109 -32z"/>
+<path d="M2654 802 c-22 -11 -55 -37 -72 -58 l-32 -39 0 53 0 52 -50 0 -50 0
+2 -287 3 -288 45 0 45 0 5 190 c5 199 11 226 57 267 29 26 88 48 130 48 49 -1
+118 -32 135 -62 9 -16 14 -85 18 -233 l5 -210 45 0 45 0 3 193 c1 109 -2 210
+-8 231 -14 54 -61 115 -106 136 -57 28 -168 31 -220 7z"/>
+<path d="M2170 520 l0 -290 45 0 45 0 0 290 0 290 -45 0 -45 0 0 -290z"/>
+<path d="M3800 619 c0 -212 8 -260 52 -313 46 -56 100 -79 184 -79 81 0 136
+24 176 77 l23 31 5 -50 5 -50 45 0 45 0 3 288 2 287 -50 0 -50 0 0 -177 c0
+-193 -9 -232 -61 -280 -52 -47 -158 -59 -216 -23 -58 35 -63 57 -63 280 l0
+200 -50 0 -50 0 0 -191z"/>
+</g>
+</svg>