From d3f83afb3db26c640f4d6b68c2330574c6c9b43e Mon Sep 17 00:00:00 2001 From: CREDO23 Date: Wed, 31 Dec 2025 21:53:30 +0200 Subject: [PATCH 1/3] feat: add colored connector icons - Add 18 branded SVG icons to public/connectors/ - Clean naming convention (e.g., slack.svg, google-drive.svg) - Includes: Slack, Notion, GitHub, Jira, Google (Drive/Gmail/Calendar), Linear, Discord, Confluence, BookStack, ClickUp, Elasticsearch, Baidu, Airtable, YouTube, Teams, Zoom --- surfsense_web/public/connectors/airtable.svg | 1 + .../public/connectors/baidu-search.svg | 6 + surfsense_web/public/connectors/bookstack.svg | 1 + surfsense_web/public/connectors/clickup.svg | 1 + .../public/connectors/confluence.svg | 15 ++ surfsense_web/public/connectors/discord.svg | 155 ++++++++++++++++++ .../public/connectors/elasticsearch.svg | 1 + surfsense_web/public/connectors/github.svg | 1 + .../public/connectors/google-calendar.svg | 44 +++++ .../public/connectors/google-drive.svg | 44 +++++ .../public/connectors/google-gmail.svg | 44 +++++ surfsense_web/public/connectors/jira.svg | 16 ++ surfsense_web/public/connectors/linear.svg | 1 + .../public/connectors/microsoft-teams.svg | 155 ++++++++++++++++++ surfsense_web/public/connectors/notion.svg | 4 + surfsense_web/public/connectors/slack.svg | 6 + surfsense_web/public/connectors/youtube.svg | 1 + surfsense_web/public/connectors/zoom.svg | 4 + 18 files changed, 500 insertions(+) create mode 100644 surfsense_web/public/connectors/airtable.svg create mode 100644 surfsense_web/public/connectors/baidu-search.svg create mode 100644 surfsense_web/public/connectors/bookstack.svg create mode 100644 surfsense_web/public/connectors/clickup.svg create mode 100644 surfsense_web/public/connectors/confluence.svg create mode 100644 surfsense_web/public/connectors/discord.svg create mode 100644 surfsense_web/public/connectors/elasticsearch.svg create mode 100644 surfsense_web/public/connectors/github.svg create mode 100644 surfsense_web/public/connectors/google-calendar.svg create mode 100644 surfsense_web/public/connectors/google-drive.svg create mode 100644 surfsense_web/public/connectors/google-gmail.svg create mode 100644 surfsense_web/public/connectors/jira.svg create mode 100644 surfsense_web/public/connectors/linear.svg create mode 100644 surfsense_web/public/connectors/microsoft-teams.svg create mode 100644 surfsense_web/public/connectors/notion.svg create mode 100644 surfsense_web/public/connectors/slack.svg create mode 100644 surfsense_web/public/connectors/youtube.svg create mode 100644 surfsense_web/public/connectors/zoom.svg diff --git a/surfsense_web/public/connectors/airtable.svg b/surfsense_web/public/connectors/airtable.svg new file mode 100644 index 000000000..d7bfc550a --- /dev/null +++ b/surfsense_web/public/connectors/airtable.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/baidu-search.svg b/surfsense_web/public/connectors/baidu-search.svg new file mode 100644 index 000000000..5bf435123 --- /dev/null +++ b/surfsense_web/public/connectors/baidu-search.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/bookstack.svg b/surfsense_web/public/connectors/bookstack.svg new file mode 100644 index 000000000..8b7829055 --- /dev/null +++ b/surfsense_web/public/connectors/bookstack.svg @@ -0,0 +1 @@ +BookStack \ No newline at end of file diff --git a/surfsense_web/public/connectors/clickup.svg b/surfsense_web/public/connectors/clickup.svg new file mode 100644 index 000000000..4bf99cfd8 --- /dev/null +++ b/surfsense_web/public/connectors/clickup.svg @@ -0,0 +1 @@ +ClickUp \ No newline at end of file diff --git a/surfsense_web/public/connectors/confluence.svg b/surfsense_web/public/connectors/confluence.svg new file mode 100644 index 000000000..f8c539608 --- /dev/null +++ b/surfsense_web/public/connectors/confluence.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/surfsense_web/public/connectors/discord.svg b/surfsense_web/public/connectors/discord.svg new file mode 100644 index 000000000..138d32844 --- /dev/null +++ b/surfsense_web/public/connectors/discord.svg @@ -0,0 +1,155 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/elasticsearch.svg b/surfsense_web/public/connectors/elasticsearch.svg new file mode 100644 index 000000000..5189b6751 --- /dev/null +++ b/surfsense_web/public/connectors/elasticsearch.svg @@ -0,0 +1 @@ +file_type_elastic \ No newline at end of file diff --git a/surfsense_web/public/connectors/github.svg b/surfsense_web/public/connectors/github.svg new file mode 100644 index 000000000..63c462cc3 --- /dev/null +++ b/surfsense_web/public/connectors/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/google-calendar.svg b/surfsense_web/public/connectors/google-calendar.svg new file mode 100644 index 000000000..f1f6f96c3 --- /dev/null +++ b/surfsense_web/public/connectors/google-calendar.svg @@ -0,0 +1,44 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/google-drive.svg b/surfsense_web/public/connectors/google-drive.svg new file mode 100644 index 000000000..35f214efd --- /dev/null +++ b/surfsense_web/public/connectors/google-drive.svg @@ -0,0 +1,44 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/google-gmail.svg b/surfsense_web/public/connectors/google-gmail.svg new file mode 100644 index 000000000..47d9e973e --- /dev/null +++ b/surfsense_web/public/connectors/google-gmail.svg @@ -0,0 +1,44 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/jira.svg b/surfsense_web/public/connectors/jira.svg new file mode 100644 index 000000000..69c69f628 --- /dev/null +++ b/surfsense_web/public/connectors/jira.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/surfsense_web/public/connectors/linear.svg b/surfsense_web/public/connectors/linear.svg new file mode 100644 index 000000000..6252259bd --- /dev/null +++ b/surfsense_web/public/connectors/linear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/microsoft-teams.svg b/surfsense_web/public/connectors/microsoft-teams.svg new file mode 100644 index 000000000..caa352dff --- /dev/null +++ b/surfsense_web/public/connectors/microsoft-teams.svg @@ -0,0 +1,155 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/notion.svg b/surfsense_web/public/connectors/notion.svg new file mode 100644 index 000000000..38984c87b --- /dev/null +++ b/surfsense_web/public/connectors/notion.svg @@ -0,0 +1,4 @@ + + + + diff --git a/surfsense_web/public/connectors/slack.svg b/surfsense_web/public/connectors/slack.svg new file mode 100644 index 000000000..1832b4653 --- /dev/null +++ b/surfsense_web/public/connectors/slack.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/youtube.svg b/surfsense_web/public/connectors/youtube.svg new file mode 100644 index 000000000..ba2395b5d --- /dev/null +++ b/surfsense_web/public/connectors/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/surfsense_web/public/connectors/zoom.svg b/surfsense_web/public/connectors/zoom.svg new file mode 100644 index 000000000..84dd78bcd --- /dev/null +++ b/surfsense_web/public/connectors/zoom.svg @@ -0,0 +1,4 @@ + + + + From 9548dd289c7761e791dc7236e44e6187b28e0a34 Mon Sep 17 00:00:00 2001 From: CREDO23 Date: Wed, 31 Dec 2025 21:53:47 +0200 Subject: [PATCH 2/3] feat: integrate colored SVG icons in getConnectorIcon - Use Next.js Image component for SVG icons (20x20px) - Replace 16 Tabler/Lucide icons with branded SVGs - Add support for Teams, Zoom, YouTube string cases - Clean up unused icon imports - Maintain fallback for connectors without SVG icons --- .../contracts/enums/connectorIcons.tsx | 55 ++++++++----------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx index 9281c00e9..e8c2b4ed0 100644 --- a/surfsense_web/contracts/enums/connectorIcons.tsx +++ b/surfsense_web/contracts/enums/connectorIcons.tsx @@ -1,20 +1,6 @@ import { - IconBook, - IconBooks, - IconBrandDiscord, - IconBrandElastic, - IconBrandGithub, - IconBrandNotion, - IconBrandSlack, - IconBrandYoutube, - IconCalendar, - IconChecklist, - IconLayoutKanban, IconLinkPlus, - IconMail, IconSparkles, - IconTable, - IconTicket, IconUsersGroup, IconWorldWww, } from "@tabler/icons-react"; @@ -27,52 +13,53 @@ import { Sparkles, Telescope, Webhook, - HardDrive, } from "lucide-react"; +import Image from "next/image"; 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 }; switch (connectorType) { case EnumConnectorName.LINKUP_API: return ; case EnumConnectorName.LINEAR_CONNECTOR: - return ; + return Linear; case EnumConnectorName.GITHUB_CONNECTOR: - return ; + return GitHub; case EnumConnectorName.TAVILY_API: return ; case EnumConnectorName.SEARXNG_API: return ; case EnumConnectorName.BAIDU_SEARCH_API: - return ; + return Baidu; case EnumConnectorName.SLACK_CONNECTOR: - return ; + return Slack; case EnumConnectorName.NOTION_CONNECTOR: - return ; + return Notion; case EnumConnectorName.DISCORD_CONNECTOR: - return ; + return Discord; case EnumConnectorName.JIRA_CONNECTOR: - return ; + return Jira; case EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR: - return ; + return Google Calendar; case EnumConnectorName.GOOGLE_GMAIL_CONNECTOR: - return ; + return Gmail; case EnumConnectorName.GOOGLE_DRIVE_CONNECTOR: - return ; + return Google Drive; case EnumConnectorName.AIRTABLE_CONNECTOR: - return ; + return Airtable; case EnumConnectorName.CONFLUENCE_CONNECTOR: - return ; + return Confluence; case EnumConnectorName.BOOKSTACK_CONNECTOR: - return ; + return BookStack; case EnumConnectorName.CLICKUP_CONNECTOR: - return ; + return ClickUp; case EnumConnectorName.LUMA_CONNECTOR: return ; case EnumConnectorName.ELASTICSEARCH_CONNECTOR: - return ; + return Elasticsearch; case EnumConnectorName.WEBCRAWLER_CONNECTOR: return ; case EnumConnectorName.CIRCLEBACK_CONNECTOR: @@ -83,7 +70,13 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas case "CRAWLED_URL": return ; case "YOUTUBE_VIDEO": - return ; + return YouTube; + case "MICROSOFT_TEAMS": + case "ms-teams": + return Microsoft Teams; + case "ZOOM": + case "zoom": + return Zoom; case "FILE": return ; case "NOTE": From e2c062c079f67e976cda2a04a52259add210f91c Mon Sep 17 00:00:00 2001 From: CREDO23 Date: Wed, 31 Dec 2025 21:53:58 +0200 Subject: [PATCH 3/3] feat: use colored icons for Teams and Zoom in connector list - Replace IconBrandWindows with Teams SVG icon - Replace IconBrandZoom with Zoom SVG icon - Remove unused Tabler icon imports - Use getConnectorIcon helper for consistency --- surfsense_web/components/sources/connector-data.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/surfsense_web/components/sources/connector-data.tsx b/surfsense_web/components/sources/connector-data.tsx index 0ab696ceb..a1c6084d2 100644 --- a/surfsense_web/components/sources/connector-data.tsx +++ b/surfsense_web/components/sources/connector-data.tsx @@ -1,4 +1,3 @@ -import { IconBrandWindows, IconBrandZoom } from "@tabler/icons-react"; import { EnumConnectorName } from "@/contracts/enums/connector"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import type { ConnectorCategory } from "./types"; @@ -73,7 +72,7 @@ export const connectorCategories: ConnectorCategory[] = [ id: "ms-teams", title: "Microsoft Teams", description: "teams_desc", - icon: , + icon: getConnectorIcon("ms-teams", "h-6 w-6"), status: "coming-soon", }, ], @@ -208,7 +207,7 @@ export const connectorCategories: ConnectorCategory[] = [ id: "zoom", title: "Zoom", description: "zoom_desc", - icon: , + icon: getConnectorIcon("zoom", "h-6 w-6"), status: "coming-soon", }, ],