From 23916764255dcd8c87c9f7f7438f0b2e103d5ab8 Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommmu <mahesh.svmr@gmail.com>
Date: Mon, 22 Dec 2025 23:32:14 -0800
Subject: [PATCH] added stash changes

---
 apps/web/app/onboarding/page.tsx              |  2 +-
 apps/web/components/mcp-detail-view.tsx       |  5 +-
 .../new/document-modal/content/yt-video.tsx   | 89 +++++++++++++++++++
 .../components/new/document-modal/index.tsx   |  4 +
 .../components/x-bookmarks-detail-view.tsx    |  2 +-
 5 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/components/new/document-modal/content/yt-video.tsx

diff --git a/apps/web/app/onboarding/page.tsx b/apps/web/app/onboarding/page.tsx
index b90898ec..f3d8a769 100644
--- a/apps/web/app/onboarding/page.tsx
+++ b/apps/web/app/onboarding/page.tsx
@@ -33,7 +33,7 @@ function UserSupermemory({ name }: { name: string }) {
 		>
 			<Logo className="h-14 text-white" />
 			<div className="flex flex-col items-start justify-center ml-4">
-				<p className="text-white text-xs font-medium leading-none">
+				<p className="text-white text-[25px] font-medium leading-none">
 					{name.split(" ")[0]}'s
 				</p>
 				<p className="text-white font-bold text-4xl leading-none -mt-2">
diff --git a/apps/web/components/mcp-detail-view.tsx b/apps/web/components/mcp-detail-view.tsx
index 4cd98c58..adaddf6f 100644
--- a/apps/web/components/mcp-detail-view.tsx
+++ b/apps/web/components/mcp-detail-view.tsx
@@ -152,6 +152,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 							disabled={!selectedClient}
 						>
 							<span
+								className="text-lg"
 								style={
 									activeStep === 1
 										? {
@@ -355,6 +356,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 							)}
 						>
 							<span
+								className="text-lg"
 								style={
 									activeStep === 2
 										? {
@@ -540,7 +542,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 														</>
 													) : (
 														<>
-															<CopyIcon className="size-3 text-white" />
+															<CopyIcon className="size-[20px] text-white stroke-[2px]" />
 															<span className="text-white">Copy</span>
 														</>
 													)}
@@ -563,6 +565,7 @@ export function MCPDetailView({ onBack }: MCPDetailViewProps) {
 							)}
 						>
 							<span
+								className="text-lg"
 								style={
 									activeStep === 3
 										? {
diff --git a/apps/web/components/new/document-modal/content/yt-video.tsx b/apps/web/components/new/document-modal/content/yt-video.tsx
new file mode 100644
index 00000000..65c15ad2
--- /dev/null
+++ b/apps/web/components/new/document-modal/content/yt-video.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { useState, useEffect } from "react"
+
+interface YoutubeVideoProps {
+	url: string | null | undefined
+}
+
+// Extract YouTube video ID from various URL formats
+function extractVideoId(url: string): string | null {
+	if (!url) return null
+
+	const patterns = [
+		/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
+		/youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+	]
+
+	for (const pattern of patterns) {
+		const match = url.match(pattern)
+		if (match?.[1]) {
+			return match[1]
+		}
+	}
+
+	return null
+}
+
+export function YoutubeVideo({ url }: YoutubeVideoProps) {
+	const [videoId, setVideoId] = useState<string | null>(null)
+	const [loading, setLoading] = useState(true)
+	const [error, setError] = useState<string | null>(null)
+
+	useEffect(() => {
+		if (!url) {
+			setError("No YouTube URL provided")
+			setLoading(false)
+			return
+		}
+
+		const id = extractVideoId(url)
+		if (!id) {
+			setError("Invalid YouTube URL format")
+			setLoading(false)
+			return
+		}
+
+		setVideoId(id)
+		setLoading(false)
+		setError(null)
+	}, [url])
+
+	if (!url) {
+		return (
+			<div className="flex items-center justify-center h-full text-gray-400">
+				No YouTube URL provided
+			</div>
+		)
+	}
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center h-full text-gray-400">
+				Loading video...
+			</div>
+		)
+	}
+
+	if (error || !videoId) {
+		return (
+			<div className="flex items-center justify-center h-full text-red-400">
+				Error: {error || "Failed to extract video ID"}
+			</div>
+		)
+	}
+
+	return (
+		<div className="flex-1 flex items-center justify-center w-full p-4">
+			<div className="w-full max-w-4xl aspect-video">
+				<iframe
+					src={`https://www.youtube.com/embed/${videoId}`}
+					title="YouTube video player"
+					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+					allowFullScreen
+					className="w-full h-full rounded-lg shadow-lg"
+				/>
+			</div>
+		</div>
+	)
+}
diff --git a/apps/web/components/new/document-modal/index.tsx b/apps/web/components/new/document-modal/index.tsx
index d7049b0b..fc5e3821 100644
--- a/apps/web/components/new/document-modal/index.tsx
+++ b/apps/web/components/new/document-modal/index.tsx
@@ -11,6 +11,7 @@ import { Summary as DocumentSummary } from "./summary"
 import { dmSansClassName } from "@/utils/fonts"
 import { GraphListMemories, type MemoryEntry } from "./graph-list-memories"
 import { PdfViewer } from "./content/pdf"
+import { YoutubeVideo } from "./content/yt-video"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
@@ -77,6 +78,9 @@ export function DocumentModal({
 							<div className="p-4">{_document.content}</div>
 						)}
 						{_document?.type === "pdf" && <PdfViewer url={_document.url} />}
+						{(_document?.url?.includes("youtube.com")) && (
+							<YoutubeVideo url={_document.url} />
+						)}
 					</div>
 					<div
 						id="document-memories-summary"
diff --git a/apps/web/components/x-bookmarks-detail-view.tsx b/apps/web/components/x-bookmarks-detail-view.tsx
index a359d083..72befe96 100644
--- a/apps/web/components/x-bookmarks-detail-view.tsx
+++ b/apps/web/components/x-bookmarks-detail-view.tsx
@@ -66,7 +66,7 @@ export function XBookmarksDetailView({
 						need, right when you need it.
 					</p>
 
-					<div className="grid grid-cols-3 gap-6 mb-6 max-w-5xl w-full">
+					<div className="grid grid-cols-3 gap-4 mb-6 max-w-5xl w-full">
 						{steps.map((step) => (
 							<div
 								key={step.number}