added mcp modal

apps/web/app/new/page.tsx

@@ -7,11 +7,13 @@ import { AnimatePresence } from "motion/react"
 import { MemoriesGrid } from "@/components/new/memories-grid"
 import { AnimatedGradientBackground } from "@/components/new/animated-gradient-background"
 import { AddDocumentModal } from "@/components/new/add-document"
+import { MCPModal } from "@/components/new/mcp-modal"
 import { HotkeysProvider } from "react-hotkeys-hook"
 import { useHotkeys } from "react-hotkeys-hook"
 
 export default function NewPage() {
 	const [isAddDocumentOpen, setIsAddDocumentOpen] = useState(false)
+	const [isMCPModalOpen, setIsMCPModalOpen] = useState(false)
 	useHotkeys("c", () => setIsAddDocumentOpen(true))
 
 	return (
@@ -21,7 +23,10 @@ export default function NewPage() {
 					topPosition="15%"
 					animateFromBottom={false}
 				/>
-				<Header onAddMemory={() => setIsAddDocumentOpen(true)} />
+				<Header
+					onAddMemory={() => setIsAddDocumentOpen(true)}
+					onOpenMCP={() => setIsMCPModalOpen(true)}
+				/>
 				<main className="relative">
 					<div className="relative z-10">
 						<div className="flex flex-row h-[calc(100vh-90px)] relative">
@@ -39,6 +44,10 @@ export default function NewPage() {
 					isOpen={isAddDocumentOpen}
 					onClose={() => setIsAddDocumentOpen(false)}
 				/>
+				<MCPModal
+					isOpen={isMCPModalOpen}
+					onClose={() => setIsMCPModalOpen(false)}
+				/>
 			</div>
 		</HotkeysProvider>
 	)

apps/web/components/new/add-document/index.tsx

@@ -134,10 +134,10 @@ export function AddDocument() {
 					<Button variant="insideOut">
 						My Space <ChevronsUpDownIcon className="size-4" color="#737373" />
 					</Button>
-					<div>
+					<div className="flex items-center gap-2">
 						<Button
 							variant="ghost"
-							className="text-[#737373] hover:bg-none! cursor-pointer"
+							className="text-[#737373] cursor-pointer rounded-full"
 						>
 							Cancel
 						</Button>

apps/web/components/new/header.tsx

@@ -39,9 +39,10 @@ interface Project {
 
 interface HeaderProps {
 	onAddMemory?: () => void
+	onOpenMCP?: () => void
 }
 
-export function Header({ onAddMemory }: HeaderProps) {
+export function Header({ onAddMemory, onOpenMCP }: HeaderProps) {
 	const { user } = useAuth()
 	const [name, setName] = useState<string>("")
 	const projectName = useProjectName()
@@ -171,6 +172,13 @@ export function Header({ onAddMemory }: HeaderProps) {
 						C
 					</span>
 				</Button>
+				<Button
+					variant="headers"
+					className="rounded-full text-base gap-2 h-10!"
+					onClick={onOpenMCP}
+				>
+					<div className="flex items-center gap-2">MCP</div>
+				</Button>
 				<Button
 					variant="headers"
 					className="rounded-full text-base gap-2 h-10!"

apps/web/components/new/mcp-modal/index.tsx

@@ -0,0 +1,67 @@
+import { dmSans125ClassName, dmSansClassName } from "@/utils/fonts"
+import { Dialog, DialogContent, DialogFooter } from "@repo/ui/components/dialog"
+import { cn } from "@lib/utils"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { ChevronsUpDownIcon, XIcon } from "lucide-react"
+import { Button } from "@ui/components/button"
+
+export function MCPModal({
+	isOpen,
+	onClose,
+}: {
+	isOpen: boolean
+	onClose: () => void
+}) {
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+			<DialogContent
+				className={cn(
+					"w-[80%]! max-w-[900px]! h-[80%]! max-h-[600px]! border-none bg-[#1B1F24] flex flex-col p-4 gap-3 rounded-[22px]",
+					dmSansClassName(),
+				)}
+				style={{
+					boxShadow:
+						"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
+				}}
+				showCloseButton={false}
+			>
+				<div className="flex justify-between h-fit">
+					<div className="pl-1 space-y-1">
+						<p className={cn("font-semibold", dmSans125ClassName())}>
+							Connect your AI to Supermemory
+						</p>
+						<p className={cn("text-[#737373] font-medium")}>
+							Let your AI create and use your memories via MCP. Learn more
+						</p>
+					</div>
+					<div className="flex items-center gap-2">
+						<DialogPrimitive.Close
+							className="bg-[#0D121A] w-7 h-7 flex items-center justify-center focus:ring-ring rounded-full transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),inset_0_1px_2px_rgba(0,0,0,0.1)]"
+							data-slot="dialog-close"
+						>
+							<XIcon stroke="#737373" />
+							<span className="sr-only">Close</span>
+						</DialogPrimitive.Close>
+					</div>
+				</div>
+				<div className="w-full h-full p-4 rounded-[14px] bg-[#14161A] shadow-inside-out resize-none">
+					MCP steps
+				</div>
+				<DialogFooter className="justify-between!">
+					<div className="flex items-center gap-2">
+						<Button variant="insideOut">
+							My Space <ChevronsUpDownIcon className="size-4" color="#737373" />
+						</Button>
+						<Button
+							variant="ghost"
+							className="text-[#737373] cursor-pointer rounded-full"
+						>
+							Migrate from MCP v1
+						</Button>
+					</div>
+					<Button variant="insideOut" className="px-6 py-[10px]">Done</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	)
+}

apps/web/utils/fonts.ts

@@ -28,7 +28,23 @@ export function dmSansClassName(additionalClasses?: string) {
 	)
 }
 
+/**
+ * Utility function that combines dmSansFont.className with required typography styles
+ * (letter-spacing: -0.01em and line-height: 125%)
+ */
+export function dmSans125ClassName(additionalClasses?: string) {
+	return cn(
+		dmSansFont.className,
+		"tracking-[-0.01em]",
+		"leading-[125%]",
+		additionalClasses,
+	)
+}
 
+/**
+ * Utility function that combines dmMonoFont.className with required typography styles
+ * (letter-spacing: -0.01em and line-height: 135%)
+ */
 export function dmMonoClassName(additionalClasses?: string) {
 	return cn(
 		dmMonoFont.className,
@@ -36,4 +52,4 @@ export function dmMonoClassName(additionalClasses?: string) {
 		"leading-[135%]",
 		additionalClasses,
 	)
-}
+}