[pull] main from supermemoryai:main

apps/web/app/new/onboarding/layout.tsx

@@ -54,6 +54,9 @@ export default function OnboardingLayout({
 
 		if (storedName) {
 			setNameState(storedName)
+		} else if (user?.displayUsername) {
+			setNameState(user.displayUsername)
+			localStorage.setItem("onboarding_name", user.displayUsername)
 		} else if (user?.name) {
 			setNameState(user.name)
 			localStorage.setItem("onboarding_name", user.name)
@@ -66,7 +69,7 @@ export default function OnboardingLayout({
 				// ignore parse errors
 			}
 		}
-	}, [user?.name])
+	}, [user?.displayUsername, user?.name])
 
 	const setName = useCallback((newName: string) => {
 		setNameState(newName)

apps/web/app/new/onboarding/welcome/page.tsx

@@ -18,6 +18,7 @@ import {
 	type WelcomeStep as WelcomeStepType,
 } from "./layout"
 import { gapVariants, orbVariants } from "@/lib/variants"
+import { authClient } from "@lib/auth"
 
 function UserSupermemory({ name }: { name: string }) {
 	return (
@@ -76,10 +77,17 @@ export default function WelcomePage() {
 		goToStep,
 	} = useWelcomeContext()
 
-	const handleSubmit = () => {
+	const handleSubmit = async () => {
 		localStorage.setItem("username", name)
 		if (name.trim()) {
 			setIsSubmitting(true)
+
+			try {
+				await authClient.updateUser({ displayUsername: name.trim() })
+			} catch (error) {
+				console.error("Failed to update displayUsername:", error)
+			}
+
 			goToStep("greeting")
 			setIsSubmitting(false)
 		}

apps/web/components/create-project-dialog.tsx

@@ -34,11 +34,14 @@ export function CreateProjectDialog({
 
 	const handleCreate = () => {
 		if (projectName.trim()) {
-			createProjectMutation.mutate(projectName, {
-				onSuccess: () => {
-					handleClose()
+			createProjectMutation.mutate(
+				{ name: projectName },
+				{
+					onSuccess: () => {
+						handleClose()
+					},
 				},
-			})
+			)
 		}
 	}
 

apps/web/components/new/add-space-modal.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import { useState } from "react"
+import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts"
+import { Dialog, DialogContent } from "@repo/ui/components/dialog"
+import { cn } from "@lib/utils"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon, Loader2 } from "lucide-react"
+import { Button } from "@ui/components/button"
+import { useProjectMutations } from "@/hooks/use-project-mutations"
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@ui/components/popover"
+
+const EMOJI_LIST = [
+	"📁", "📂", "🗂️", "📚", "📖", "📝", "✏️", "📌",
+	"🎯", "🚀", "💡", "⭐", "🔥", "💎", "🎨", "🎵",
+	"🏠", "💼", "🛠️", "⚙️", "🔧", "📊", "📈", "💰",
+	"🌟", "✨", "🌈", "🌸", "🌺", "🍀", "🌿", "🌴",
+	"🐶", "🐱", "🦊", "🦁", "🐼", "🐨", "🦄", "🐝",
+	"❤️", "💜", "💙", "💚", "💛", "🧡", "🖤", "🤍",
+]
+
+export function AddSpaceModal({
+	isOpen,
+	onClose,
+}: {
+	isOpen: boolean
+	onClose: () => void
+}) {
+	const [spaceName, setSpaceName] = useState("")
+	const [emoji, setEmoji] = useState("📁")
+	const [isEmojiOpen, setIsEmojiOpen] = useState(false)
+	const { createProjectMutation } = useProjectMutations()
+
+	const handleClose = () => {
+		onClose()
+		setSpaceName("")
+		setEmoji("📁")
+	}
+
+	const handleCreate = () => {
+		const trimmedName = spaceName.trim()
+		if (!trimmedName) return
+
+		createProjectMutation.mutate(
+			{ name: trimmedName, emoji: emoji || undefined },
+			{
+				onSuccess: () => {
+					handleClose()
+				},
+			},
+		)
+	}
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter" && spaceName.trim() && !createProjectMutation.isPending) {
+			e.preventDefault()
+			handleCreate()
+		}
+	}
+
+	const handleEmojiSelect = (selectedEmoji: string) => {
+		setEmoji(selectedEmoji)
+		setIsEmojiOpen(false)
+	}
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+			<DialogContent
+				className={cn(
+					"w-[90%]! max-w-[500px]! border-none bg-[#1B1F24] flex flex-col p-4 gap-4 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 flex-col gap-4">
+					<div className="flex justify-between items-start gap-4">
+						<div className="pl-1 space-y-1 flex-1">
+							<p className={cn("font-semibold text-[#fafafa]", dmSans125ClassName())}>
+								Create new space
+							</p>
+							<p className={cn("text-[#737373] font-medium text-[16px] leading-[1.35]")}>
+								Create spaces to organize your memories and documents and create a context rich environment
+							</p>
+						</div>
+						<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 border border-[rgba(115,115,115,0.2)] shrink-0"
+							style={{
+								boxShadow: "inset 1.313px 1.313px 3.938px 0px rgba(0,0,0,0.7)",
+							}}
+							data-slot="dialog-close"
+						>
+							<XIcon stroke="#737373" />
+							<span className="sr-only">Close</span>
+						</DialogPrimitive.Close>
+					</div>
+
+					<div className="flex gap-[6px] items-center">
+						<Popover open={isEmojiOpen} onOpenChange={setIsEmojiOpen}>
+							<PopoverTrigger asChild>
+								<button
+									type="button"
+									id="emoji-picker-trigger"
+									className="bg-[#14161A] border border-[rgba(82,89,102,0.2)] flex items-center justify-center p-3 rounded-[12px] size-[45px] cursor-pointer transition-colors hover:bg-[#1a1e24]"
+									style={{
+										boxShadow:
+											"0px 1px 2px 0px rgba(0,43,87,0.1), inset 0px 0px 0px 1px rgba(43,49,67,0.08), inset 0px 1px 1px 0px rgba(0,0,0,0.08), inset 0px 2px 4px 0px rgba(0,0,0,0.02)",
+									}}
+								>
+									<span className="text-xl">{emoji}</span>
+								</button>
+							</PopoverTrigger>
+							<PopoverContent
+								align="start"
+								className="w-[280px] p-3 bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px]"
+								style={{
+									boxShadow:
+										"0px 1px 2px 0px rgba(0,43,87,0.1), inset 0px 0px 0px 1px rgba(43,49,67,0.08)",
+								}}
+							>
+								<div className="grid grid-cols-8 gap-1">
+									{EMOJI_LIST.map((e) => (
+										<button
+											key={e}
+											type="button"
+											onClick={() => handleEmojiSelect(e)}
+											className={cn(
+												"size-8 flex items-center justify-center rounded-md text-lg cursor-pointer transition-colors hover:bg-[#1B1F24]",
+												emoji === e && "bg-[#1B1F24] ring-1 ring-[rgba(115,115,115,0.3)]",
+											)}
+										>
+											{e}
+										</button>
+									))}
+								</div>
+							</PopoverContent>
+						</Popover>
+
+						<input
+							type="text"
+							id="space-name-input"
+							value={spaceName}
+							onChange={(e) => setSpaceName(e.target.value)}
+							onKeyDown={handleKeyDown}
+							placeholder="Space name"
+							className={cn(
+								"flex-1 bg-[#14161A] border border-[rgba(82,89,102,0.2)] px-4 py-3 rounded-[12px] text-[#fafafa] text-[14px] placeholder:text-[#737373] focus:outline-none focus:ring-1 focus:ring-[rgba(115,115,115,0.3)]",
+								dmSansClassName(),
+							)}
+							style={{
+								boxShadow:
+									"0px 1px 2px 0px rgba(0,43,87,0.1), inset 0px 0px 0px 1px rgba(43,49,67,0.08), inset 0px 1px 1px 0px rgba(0,0,0,0.08), inset 0px 2px 4px 0px rgba(0,0,0,0.02)",
+							}}
+							autoFocus
+						/>
+					</div>
+
+					<div className="flex items-center justify-end gap-[22px]">
+						<button
+							type="button"
+							onClick={handleClose}
+							disabled={createProjectMutation.isPending}
+							className={cn(
+								"text-[#737373] font-medium text-[14px] cursor-pointer transition-colors hover:text-[#999]",
+								dmSansClassName(),
+							)}
+						>
+							Cancel
+						</button>
+						<Button
+							variant="insideOut"
+							onClick={handleCreate}
+							disabled={!spaceName.trim() || createProjectMutation.isPending}
+							className="px-4 py-[10px] rounded-full"
+						>
+							{createProjectMutation.isPending ? (
+								<>
+									<Loader2 className="size-4 animate-spin mr-2" />
+									Creating...
+								</>
+							) : (
+								<>
+									<span className="text-[10px] mr-1">+</span>
+									Create Space
+								</>
+							)}
+						</Button>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	)
+}

apps/web/components/new/header.tsx

@@ -3,7 +3,6 @@
 import { Logo } from "@ui/assets/Logo"
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
 import { useAuth } from "@lib/auth-context"
-import { useEffect, useState } from "react"
 import {
 	LayoutGridIcon,
 	Plus,
@@ -38,18 +37,16 @@ interface HeaderProps {
 
 export function Header({ onAddMemory, onOpenMCP }: HeaderProps) {
 	const { user } = useAuth()
-	const [name, setName] = useState<string>("")
 	const { selectedProject } = useProject()
 	const { switchProject } = useProjectMutations()
 	const router = useRouter()
 
-	useEffect(() => {
-		const storedName =
-			localStorage.getItem("username") || localStorage.getItem("userName") || ""
-		setName(storedName)
-	}, [])
-
-	const userName = name ? `${name.split(" ")[0]}'s` : "My"
+	const displayName =
+		user?.displayUsername ||
+		localStorage.getItem("username") ||
+		localStorage.getItem("userName") ||
+		""
+	const userName = displayName ? `${displayName.split(" ")[0]}'s` : "My"
 	return (
 		<div className="flex p-4 justify-between items-center">
 			<div className="flex items-center justify-center gap-4 z-10!">
@@ -60,7 +57,7 @@ export function Header({ onAddMemory, onOpenMCP }: HeaderProps) {
 							className="flex items-center rounded-lg px-2 py-1.5 -ml-2 cursor-pointer hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 transition-colors"
 						>
 							<Logo className="h-7" />
-							{name && (
+							{userName && (
 								<div className="flex flex-col items-start justify-center ml-2">
 									<p className="text-[#8B8B8B] text-[11px] leading-tight">
 										{userName}
@@ -114,6 +111,7 @@ export function Header({ onAddMemory, onOpenMCP }: HeaderProps) {
 					value={selectedProject}
 					onValueChange={switchProject}
 					showChevron
+					enableDelete
 				/>
 			</div>
 			<Tabs defaultValue="grid">

apps/web/components/new/onboarding/setup/header.tsx

@@ -1,20 +1,17 @@
 import { motion } from "motion/react"
 import { Logo } from "@ui/assets/Logo"
 import { useAuth } from "@lib/auth-context"
-import { useEffect, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@ui/components/avatar"
 
 export function SetupHeader() {
 	const { user } = useAuth()
-	const [name, setName] = useState<string>("")
 
-	useEffect(() => {
-		const storedName =
-			localStorage.getItem("username") || localStorage.getItem("userName") || ""
-		setName(storedName)
-	}, [])
-
-	const userName = name ? `${name.split(" ")[0]}'s` : "My"
+	const displayName =
+		user?.displayUsername ||
+		localStorage.getItem("username") ||
+		localStorage.getItem("userName") ||
+		""
+	const userName = displayName ? `${displayName.split(" ")[0]}'s` : "My"
 
 	return (
 		<motion.div
@@ -25,7 +22,7 @@ export function SetupHeader() {
 		>
 			<div className="flex items-center z-10!">
 				<Logo className="h-7" />
-				{name && (
+				{displayName && (
 					<div className="flex flex-col items-start justify-center ml-2">
 						<p className="text-[#8B8B8B] text-[11px] leading-tight">
 							{userName}