feat: url cards as content preview with rich details (#452)

Improved memory detail UI with better document icons and layout and Added dark mode support to the Chrome extension button

### What changed?

- Enhanced the WebsiteCard component with an `onOpenDetails` prop
- Improved the MemoryDetail component with:
  - Better layout for document headers and source links
  - Enhanced content scrolling with proper height constraints
  - Improved spacing and padding in various sections
- Added favicon support to document icons, showing website favicons for webpage documents
- Fixed document type detection for webpages and URLs
- Added dark mode support to the Chrome extension button component with appropriate color classes

[Screen Recording 2025-10-03 at 11.34.01 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/2f6ceef2-43a2-4e11-bafa-0f3ce614696b.mov" />](https://app.graphite.dev/user-attachments/video/2f6ceef2-43a2-4e11-bafa-0f3ce614696b.mov)

1 files changed, 118 insertions, 58 deletions

diff --git a/apps/web/lib/document-icon.tsx b/apps/web/lib/document-icon.tsx
index a0f56e63..edeaf76b 100644
--- a/apps/web/lib/document-icon.tsx
+++ b/apps/web/lib/document-icon.tsx
@@ -1,59 +1,119 @@
-import { MCPIcon } from '@/components/menu';
-import { colors } from '@repo/ui/memory-graph/constants';
+import { MCPIcon } from "@/components/menu"
+import { colors } from "@repo/ui/memory-graph/constants"
 import {
-  GoogleDocs,
-  MicrosoftWord,
-  NotionDoc,
-  GoogleDrive,
-  GoogleSheets,
-  GoogleSlides,
-  PDF,
-  OneDrive,
-  MicrosoftOneNote,
-  MicrosoftPowerpoint,
-  MicrosoftExcel,
-} from '@ui/assets/icons';
-import { FileText } from 'lucide-react';
-
-export const getDocumentIcon = (type: string, className: string, source?: string) => {
-  const iconProps = {
-    className,
-    style: { color: colors.text.muted },
-  };
-
-  if(source === "mcp") {
-    return <MCPIcon {...iconProps} />;
-  }
-
-  switch (type) {
-    case 'google_doc':
-      return <GoogleDocs {...iconProps} />;
-    case 'google_sheet':
-      return <GoogleSheets {...iconProps} />;
-    case 'google_slide':
-      return <GoogleSlides {...iconProps} />;
-    case 'google_drive':
-      return <GoogleDrive {...iconProps} />;
-    case 'notion':
-    case 'notion_doc':
-      return <NotionDoc {...iconProps} />;
-    case 'word':
-    case 'microsoft_word':
-      return <MicrosoftWord {...iconProps} />;
-    case 'excel':
-    case 'microsoft_excel':
-      return <MicrosoftExcel {...iconProps} />;
-    case 'powerpoint':
-    case 'microsoft_powerpoint':
-      return <MicrosoftPowerpoint {...iconProps} />;
-    case 'onenote':
-    case 'microsoft_onenote':
-      return <MicrosoftOneNote {...iconProps} />;
-    case 'onedrive':
-      return <OneDrive {...iconProps} />;
-    case 'pdf':
-      return <PDF {...iconProps} />;
-    default:
-      return <FileText {...iconProps} />;
-  }
-};
+	GoogleDocs,
+	MicrosoftWord,
+	NotionDoc,
+	GoogleDrive,
+	GoogleSheets,
+	GoogleSlides,
+	PDF,
+	OneDrive,
+	MicrosoftOneNote,
+	MicrosoftPowerpoint,
+	MicrosoftExcel,
+} from "@ui/assets/icons"
+import { FileText, Globe } from "lucide-react"
+import { useState } from "react"
+
+const getFaviconUrl = (url: string): string => {
+	try {
+		const domain = new URL(url).hostname
+		return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
+	} catch {
+		return ""
+	}
+}
+
+const FaviconIcon = ({
+	url,
+	className,
+	iconProps,
+}: {
+	url: string
+	className: string
+	iconProps: { className: string; style: { color: string } }
+}) => {
+	const [hasError, setHasError] = useState(false)
+	const faviconUrl = getFaviconUrl(url)
+
+	if (hasError || !faviconUrl) {
+		return <Globe {...iconProps} />
+	}
+
+	return (
+		<img
+			src={faviconUrl}
+			alt="Website favicon"
+			className={className}
+			style={{
+				width: "2em",
+				height: "2em",
+				objectFit: "contain",
+			}}
+			onError={() => setHasError(true)}
+		/>
+	)
+}
+
+export const getDocumentIcon = (
+	type: string,
+	className: string,
+	source?: string,
+	url?: string,
+) => {
+	const iconProps = {
+		className,
+		style: { color: colors.text.muted },
+	}
+
+	if (source === "mcp") {
+		return <MCPIcon {...iconProps} />
+	}
+
+	if (
+		type === "webpage" ||
+		type === "url" ||
+		(url && (type === "unknown" || !type))
+	) {
+		if (url) {
+			return (
+				<FaviconIcon url={url} className={className} iconProps={iconProps} />
+			)
+		}
+
+		return <Globe {...iconProps} />
+	}
+
+	switch (type) {
+		case "google_doc":
+			return <GoogleDocs {...iconProps} />
+		case "google_sheet":
+			return <GoogleSheets {...iconProps} />
+		case "google_slide":
+			return <GoogleSlides {...iconProps} />
+		case "google_drive":
+			return <GoogleDrive {...iconProps} />
+		case "notion":
+		case "notion_doc":
+			return <NotionDoc {...iconProps} />
+		case "word":
+		case "microsoft_word":
+			return <MicrosoftWord {...iconProps} />
+		case "excel":
+		case "microsoft_excel":
+			return <MicrosoftExcel {...iconProps} />
+		case "powerpoint":
+		case "microsoft_powerpoint":
+			return <MicrosoftPowerpoint {...iconProps} />
+		case "onenote":
+		case "microsoft_onenote":
+			return <MicrosoftOneNote {...iconProps} />
+		case "onedrive":
+			return <OneDrive {...iconProps} />
+		case "pdf":
+			return <PDF {...iconProps} />
+		default:
+			return <FileText {...iconProps} />
+	}
+}