initial commit

apps/web/components/add-document/connections.tsx

@@ -4,7 +4,7 @@ import { $fetch } from "@lib/api"
 import { hasActivePlan } from "@lib/queries"
 import type { ConnectionResponseSchema } from "@repo/validation/api"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { GoogleDrive, Notion, OneDrive } from "@ui/assets/icons"
+import { GoogleDrive, Notion, Obsidian, OneDrive } from "@ui/assets/icons"
 import { useCustomer } from "autumn-js/react"
 import {
 	Check,
@@ -48,7 +48,7 @@ const GDRIVE_SCOPE_LABELS: Record<GDriveSyncScope, string> = {
 
 type Connection = z.infer<typeof ConnectionResponseSchema>
 
-type ConnectorProvider = "google-drive" | "notion" | "onedrive"
+type ConnectorProvider = "google-drive" | "notion" | "onedrive" | "obsidian"
 
 const CONNECTORS: Record<
 	ConnectorProvider,
@@ -77,6 +77,12 @@ const CONNECTORS: Record<
 		documentLabel: "documents",
 		icon: OneDrive,
 	},
+	obsidian: {
+		title: "Obsidian",
+		description: "Sync your Obsidian vault via the community plugin",
+		documentLabel: "notes",
+		icon: Obsidian,
+	},
 } as const
 
 /** Extract typed metadata from a connection, with runtime validation. */
@@ -394,7 +400,9 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
 			}
 
 			const response = await $fetch("@post/connections/:provider", {
-				params: { provider },
+				params: {
+					provider: provider as Exclude<ConnectorProvider, "obsidian">,
+				},
 				body: {
 					redirectUrl: window.location.href,
 					containerTags: [selectedProject],
@@ -436,7 +444,9 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
 			containerTags: string[] | undefined
 		}) => {
 			const response = await $fetch("@post/connections/:provider", {
-				params: { provider },
+				params: {
+					provider: provider as Exclude<ConnectorProvider, "obsidian">,
+				},
 				body: {
 					redirectUrl: window.location.href,
 					containerTags: containerTags ?? [selectedProject],
@@ -491,6 +501,12 @@ export function ConnectContent({ selectedProject }: ConnectContentProps) {
 	})
 
 	const handleConnect = (provider: ConnectorProvider) => {
+		if (provider === "obsidian") {
+			toast.info(
+				"Install the Supermemory plugin in Obsidian → Settings → Community plugins → Browse → search 'Supermemory'. Once installed, paste your API key into the plugin settings.",
+			)
+			return
+		}
 		setConnectingProvider(provider)
 		addConnectionMutation.mutate({
 			provider,

apps/web/components/document-icon.tsx

@@ -13,6 +13,7 @@ import {
 	MicrosoftOneNote,
 	OneDrive,
 	NotionDoc,
+	Obsidian,
 	PDF,
 } from "@ui/assets/icons"
 import { Globe, FileText, Image } from "lucide-react"
@@ -50,6 +51,8 @@ const BRAND_COLORS: Record<string, string> = {
 	microsoft_onenote: "#7719AA",
 	onenote: "#7719AA",
 	onedrive: "#0078D4",
+	obsidian: "#7C3AED",
+	obsidian_note: "#7C3AED",
 	pdf: "#FF7673",
 	text: "#FAFAFA",
 	note: "#FAFAFA",
@@ -255,6 +258,10 @@ export function DocumentIcon({
 				</span>
 			)
 
+		case "obsidian":
+		case "obsidian_note":
+			return <Obsidian className={iconClassName} />
+
 		case "pdf":
 			return <PDF className={iconClassName} />
 
@@ -316,6 +323,9 @@ export function getDocumentTypeLabel(type: string | null | undefined): string {
 			return "OneNote"
 		case "onedrive":
 			return "OneDrive"
+		case "obsidian":
+		case "obsidian_note":
+			return "Obsidian"
 		case "pdf":
 			return "PDF"
 		case "youtube":

packages/ui/assets/icons.tsx

@@ -1,3 +1,22 @@
+export const Obsidian = ({ className }: { className?: string }) => (
+	<svg
+		className={className}
+		viewBox="0 0 64 64"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<title>Obsidian</title>
+		<defs>
+			<linearGradient id="obsidian-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+				<stop offset="0%" stopColor="#a78bfa" />
+				<stop offset="100%" stopColor="#6d28d9" />
+			</linearGradient>
+		</defs>
+		<path d="M32 4 L52 18 L44 56 L20 56 L12 18 Z" fill="url(#obsidian-grad)" />
+		<path d="M32 4 L52 18 L36 24 Z" fill="#ffffff" fillOpacity="0.18" />
+		<path d="M20 56 L36 24 L44 56 Z" fill="#000000" fillOpacity="0.15" />
+	</svg>
+)
+
 export const OneDrive = ({ className }: { className?: string }) => (
 	<svg
 		className={className}