From f5022c269143c879ab02904bc843193554fed204 Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommu <maheshthedev@gmail.com>
Date: Thu, 18 Jun 2026 22:06:30 -0700
Subject: [PATCH] feat(web): add Slack connect card to home + space selector
 polish

Adds the 'Add Supermemory to your Slack' card (status + install) on the home dashboard, and removes the border on the space-selector trigger.
---
 apps/web/components/dashboard-view.tsx     |   2 +
 apps/web/components/slack-connect-card.tsx | 106 +++++++++++++++++++++
 apps/web/components/space-selector.tsx     |   4 +-
 3 files changed, 110 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/slack-connect-card.tsx

diff --git a/apps/web/components/dashboard-view.tsx b/apps/web/components/dashboard-view.tsx
index fe2e3f0c..3f497a5e 100644
--- a/apps/web/components/dashboard-view.tsx
+++ b/apps/web/components/dashboard-view.tsx
@@ -31,6 +31,7 @@ import {
 import { StaticGraphPreview } from "@/components/memory-graph/graph-card"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@ui/components/tooltip"
 import { ChromeIcon, RaycastIcon } from "@/components/integration-icons"
+import { SlackConnectCard } from "@/components/slack-connect-card"
 import { GoogleDrive, Notion, MCPIcon } from "@ui/assets/icons"
 import { analytics } from "@/lib/analytics"
 import type { IntegrationParamValue } from "@/lib/search-params"
@@ -1325,6 +1326,7 @@ export function DashboardView({
 			)}
 		>
 			<div className="mx-auto w-full max-w-4xl space-y-4 md:space-y-5">
+				<SlackConnectCard />
 				{headerNotice ? <div className="space-y-2">{headerNotice}</div> : null}
 
 				{/* Header */}
diff --git a/apps/web/components/slack-connect-card.tsx b/apps/web/components/slack-connect-card.tsx
new file mode 100644
index 00000000..2fc6de2c
--- /dev/null
+++ b/apps/web/components/slack-connect-card.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useHasCompanyBrain } from "@/hooks/use-company-brain"
+
+const BACKEND =
+	process.env.NEXT_PUBLIC_BACKEND_URL ?? "https://api.supermemory.ai"
+
+type SlackStatus = { connected: boolean; teamName: string | null }
+
+function SlackMark({ className }: { className?: string }) {
+	return (
+		<svg viewBox="0 0 122.8 122.8" className={className} aria-hidden="true">
+			<title>Slack</title>
+			<path
+				d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9z"
+				fill="#E01E5A"
+			/>
+			<path
+				d="M32.3 77.6c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
+				fill="#E01E5A"
+			/>
+			<path
+				d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2z"
+				fill="#36C5F0"
+			/>
+			<path
+				d="M45.2 32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z"
+				fill="#36C5F0"
+			/>
+			<path
+				d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2z"
+				fill="#2EB67D"
+			/>
+			<path
+				d="M90.5 45.2c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z"
+				fill="#2EB67D"
+			/>
+			<path
+				d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9z"
+				fill="#ECB22E"
+			/>
+			<path
+				d="M77.6 90.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z"
+				fill="#ECB22E"
+			/>
+		</svg>
+	)
+}
+
+export function SlackConnectCard() {
+	const isCompanyBrain = useHasCompanyBrain()
+	const [status, setStatus] = useState<SlackStatus | null>(null)
+	const [loading, setLoading] = useState(true)
+
+	useEffect(() => {
+		if (!isCompanyBrain) return
+		let active = true
+		;(async () => {
+			try {
+				const res = await fetch(`${BACKEND}/brain/slack/status`, {
+					credentials: "include",
+				})
+				if (active && res.ok) setStatus((await res.json()) as SlackStatus)
+			} finally {
+				if (active) setLoading(false)
+			}
+		})()
+		return () => {
+			active = false
+		}
+	}, [isCompanyBrain])
+
+	if (!isCompanyBrain || loading) return null
+
+	const connected = status?.connected
+
+	return (
+		<div className="flex items-center justify-between gap-4 rounded-[14px] bg-[#191D24] p-4 shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)] sm:px-5">
+			<div className="min-w-0">
+				<p className="text-sm font-semibold text-fg-primary">
+					Add Supermemory to your Slack
+				</p>
+				<p className="mt-0.5 truncate text-[12px] text-fg-muted">
+					{connected
+						? `Connected to ${status?.teamName ?? "your workspace"}.`
+						: "Answer from your company brain and act on connected apps — right inside Slack."}
+				</p>
+			</div>
+			{connected ? (
+				<span className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-surface-skeleton px-3 py-1.5 text-[12px] font-medium text-fg-muted ring-1 ring-surface-border">
+					<span className="size-1.5 rounded-full bg-[#2EB67D]" />
+					Connected
+				</span>
+			) : (
+				<a
+					href={`${BACKEND}/brain/slack/oauth/install`}
+					className="inline-flex shrink-0 items-center gap-2 rounded-lg bg-white px-3.5 py-2 text-[13px] font-semibold text-[#1D1C1D] transition-transform hover:scale-[1.02]"
+				>
+					<SlackMark className="size-4" />
+					Add to Slack
+				</a>
+			)}
+		</div>
+	)
+}
diff --git a/apps/web/components/space-selector.tsx b/apps/web/components/space-selector.tsx
index f4af92b8..8bba3f38 100644
--- a/apps/web/components/space-selector.tsx
+++ b/apps/web/components/space-selector.tsx
@@ -61,8 +61,8 @@ export interface SpaceSelectorProps {
 
 const triggerVariants = {
 	default:
-		"h-10 min-h-10 shrink-0 rounded-full border border-[#161F2C] bg-muted px-3 gap-2 " +
-		"hover:bg-white/5 hover:border-[#2261CA33] " +
+		"h-10 min-h-10 shrink-0 rounded-full bg-muted px-3 gap-2 " +
+		"hover:bg-white/5 " +
 		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2261CA33]/35",
 	insideOut:
 		"h-10 min-h-10 gap-2 px-3 rounded-full bg-[#0D121A] shadow-inside-out hover:bg-[#121820]",