add spaces selector with search (#600)update-memory-graph

relevant files to review:
\- memory-graph.tsx
\- spaces-dropdown.tsx
\- spaces-dropdown.css.ts

1 files changed, 86 insertions, 83 deletions

diff --git a/packages/memory-graph/src/components/legend.tsx b/packages/memory-graph/src/components/legend.tsx
index 16f588a9..db06da10 100644
--- a/packages/memory-graph/src/components/legend.tsx
+++ b/packages/memory-graph/src/components/legend.tsx
@@ -1,44 +1,44 @@
-"use client";
+"use client"
 
-import { useIsMobile } from "@/hooks/use-mobile";
+import { useIsMobile } from "@/hooks/use-mobile"
 import {
 	Collapsible,
 	CollapsibleContent,
 	CollapsibleTrigger,
-} from "@/ui/collapsible";
-import { GlassMenuEffect } from "@/ui/glass-effect";
-import { Brain, ChevronDown, ChevronUp, FileText } from "lucide-react";
-import { memo, useEffect, useState } from "react";
-import { colors } from "@/constants";
-import type { GraphEdge, GraphNode, LegendProps } from "@/types";
-import * as styles from "./legend.css";
+} from "@/ui/collapsible"
+import { GlassMenuEffect } from "@/ui/glass-effect"
+import { Brain, ChevronDown, ChevronUp, FileText } from "lucide-react"
+import { memo, useEffect, useState } from "react"
+import { colors } from "@/constants"
+import type { GraphEdge, GraphNode, LegendProps } from "@/types"
+import * as styles from "./legend.css"
 
 // Cookie utility functions for legend state
 const setCookie = (name: string, value: string, days = 365) => {
-	if (typeof document === "undefined") return;
-	const expires = new Date();
-	expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
-	document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
-};
+	if (typeof document === "undefined") return
+	const expires = new Date()
+	expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000)
+	document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`
+}
 
 const getCookie = (name: string): string | null => {
-	if (typeof document === "undefined") return null;
-	const nameEQ = `${name}=`;
-	const ca = document.cookie.split(";");
+	if (typeof document === "undefined") return null
+	const nameEQ = `${name}=`
+	const ca = document.cookie.split(";")
 	for (let i = 0; i < ca.length; i++) {
-		let c = ca[i];
-		if (!c) continue;
-		while (c.charAt(0) === " ") c = c.substring(1, c.length);
-		if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+		let c = ca[i]
+		if (!c) continue
+		while (c.charAt(0) === " ") c = c.substring(1, c.length)
+		if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
 	}
-	return null;
-};
+	return null
+}
 
 interface ExtendedLegendProps extends LegendProps {
-	id?: string;
-	nodes?: GraphNode[];
-	edges?: GraphEdge[];
-	isLoading?: boolean;
+	id?: string
+	nodes?: GraphNode[]
+	edges?: GraphEdge[]
+	isLoading?: boolean
 }
 
 export const Legend = memo(function Legend({
@@ -48,55 +48,57 @@ export const Legend = memo(function Legend({
 	edges = [],
 	isLoading = false,
 }: ExtendedLegendProps) {
-	const isMobile = useIsMobile();
-	const [isExpanded, setIsExpanded] = useState(true);
-	const [isInitialized, setIsInitialized] = useState(false);
+	const isMobile = useIsMobile()
+	const [isExpanded, setIsExpanded] = useState(true)
+	const [isInitialized, setIsInitialized] = useState(false)
 
 	// Load saved preference on client side
 	useEffect(() => {
 		if (!isInitialized) {
-			const savedState = getCookie("legendCollapsed");
+			const savedState = getCookie("legendCollapsed")
 			if (savedState === "true") {
-				setIsExpanded(false);
+				setIsExpanded(false)
 			} else if (savedState === "false") {
-				setIsExpanded(true);
+				setIsExpanded(true)
 			} else {
 				// Default: collapsed on mobile, expanded on desktop
-				setIsExpanded(!isMobile);
+				setIsExpanded(!isMobile)
 			}
-			setIsInitialized(true);
+			setIsInitialized(true)
 		}
-	}, [isInitialized, isMobile]);
+	}, [isInitialized, isMobile])
 
 	// Save to cookie when state changes
 	const handleToggleExpanded = (expanded: boolean) => {
-		setIsExpanded(expanded);
-		setCookie("legendCollapsed", expanded ? "false" : "true");
-	};
+		setIsExpanded(expanded)
+		setCookie("legendCollapsed", expanded ? "false" : "true")
+	}
 
 	// Get container class based on variant and mobile state
 	const getContainerClass = () => {
 		if (variant === "console") {
-			return isMobile ? styles.legendContainer.consoleMobile : styles.legendContainer.consoleDesktop;
+			return isMobile
+				? styles.legendContainer.consoleMobile
+				: styles.legendContainer.consoleDesktop
 		}
-		return isMobile ? styles.legendContainer.consumerMobile : styles.legendContainer.consumerDesktop;
-	};
+		return isMobile
+			? styles.legendContainer.consumerMobile
+			: styles.legendContainer.consumerDesktop
+	}
 
 	// Calculate stats
-	const memoryCount = nodes.filter((n) => n.type === "memory").length;
-	const documentCount = nodes.filter((n) => n.type === "document").length;
+	const memoryCount = nodes.filter((n) => n.type === "memory").length
+	const documentCount = nodes.filter((n) => n.type === "document").length
 
-	const containerClass = isMobile && !isExpanded
-		? `${getContainerClass()} ${styles.mobileSize.collapsed}`
-		: isMobile
-			? `${getContainerClass()} ${styles.mobileSize.expanded}`
-			: getContainerClass();
+	const containerClass =
+		isMobile && !isExpanded
+			? `${getContainerClass()} ${styles.mobileSize.collapsed}`
+			: isMobile
+				? `${getContainerClass()} ${styles.mobileSize.expanded}`
+				: getContainerClass()
 
 	return (
-		<div
-			className={containerClass}
-			id={id}
-		>
+		<div className={containerClass} id={id}>
 			<Collapsible onOpenChange={handleToggleExpanded} open={isExpanded}>
 				{/* Glass effect background */}
 				<GlassMenuEffect rounded="xl" />
@@ -128,18 +130,22 @@ export const Legend = memo(function Legend({
 									{/* Stats Section */}
 									{!isLoading && (
 										<div className={styles.sectionWrapper}>
-											<div className={styles.sectionTitle}>
-												Statistics
-											</div>
+											<div className={styles.sectionTitle}>Statistics</div>
 											<div className={styles.itemsList}>
 												<div className={styles.legendItem}>
-													<Brain className={styles.legendIcon} style={{ color: "rgb(96, 165, 250)" }} />
+													<Brain
+														className={styles.legendIcon}
+														style={{ color: "rgb(96, 165, 250)" }}
+													/>
 													<span className={styles.legendText}>
 														{memoryCount} memories
 													</span>
 												</div>
 												<div className={styles.legendItem}>
-													<FileText className={styles.legendIcon} style={{ color: "rgb(203, 213, 225)" }} />
+													<FileText
+														className={styles.legendIcon}
+														style={{ color: "rgb(203, 213, 225)" }}
+													/>
 													<span className={styles.legendText}>
 														{documentCount} documents
 													</span>
@@ -156,9 +162,7 @@ export const Legend = memo(function Legend({
 
 									{/* Node Types */}
 									<div className={styles.sectionWrapper}>
-										<div className={styles.sectionTitle}>
-											Nodes
-										</div>
+										<div className={styles.sectionTitle}>Nodes</div>
 										<div className={styles.itemsList}>
 											<div className={styles.legendItem}>
 												<div className={styles.documentNode} />
@@ -166,26 +170,26 @@ export const Legend = memo(function Legend({
 											</div>
 											<div className={styles.legendItem}>
 												<div className={styles.memoryNode} />
-												<span className={styles.legendText}>Memory (latest)</span>
+												<span className={styles.legendText}>
+													Memory (latest)
+												</span>
 											</div>
 											<div className={styles.legendItem}>
 												<div className={styles.memoryNodeOlder} />
-												<span className={styles.legendText}>Memory (older)</span>
+												<span className={styles.legendText}>
+													Memory (older)
+												</span>
 											</div>
 										</div>
 									</div>
 
 									{/* Status Indicators */}
 									<div className={styles.sectionWrapper}>
-										<div className={styles.sectionTitle}>
-											Status
-										</div>
+										<div className={styles.sectionTitle}>Status</div>
 										<div className={styles.itemsList}>
 											<div className={styles.legendItem}>
 												<div className={styles.forgottenNode}>
-													<div className={styles.forgottenIcon}>
-														✕
-													</div>
+													<div className={styles.forgottenIcon}>✕</div>
 												</div>
 												<span className={styles.legendText}>Forgotten</span>
 											</div>
@@ -204,9 +208,7 @@ export const Legend = memo(function Legend({
 
 									{/* Connection Types */}
 									<div className={styles.sectionWrapper}>
-										<div className={styles.sectionTitle}>
-											Connections
-										</div>
+										<div className={styles.sectionTitle}>Connections</div>
 										<div className={styles.itemsList}>
 											<div className={styles.legendItem}>
 												<div className={styles.connectionLine} />
@@ -214,16 +216,16 @@ export const Legend = memo(function Legend({
 											</div>
 											<div className={styles.legendItem}>
 												<div className={styles.similarityLine} />
-												<span className={styles.legendText}>Doc similarity</span>
+												<span className={styles.legendText}>
+													Doc similarity
+												</span>
 											</div>
 										</div>
 									</div>
 
 									{/* Relation Types */}
 									<div className={styles.sectionWrapper}>
-										<div className={styles.sectionTitle}>
-											Relations
-										</div>
+										<div className={styles.sectionTitle}>Relations</div>
 										<div className={styles.itemsList}>
 											{[
 												["updates", colors.relations.updates],
@@ -237,7 +239,10 @@ export const Legend = memo(function Legend({
 													/>
 													<span
 														className={styles.legendText}
-														style={{ color: color, textTransform: "capitalize" }}
+														style={{
+															color: color,
+															textTransform: "capitalize",
+														}}
 													>
 														{label}
 													</span>
@@ -248,9 +253,7 @@ export const Legend = memo(function Legend({
 
 									{/* Similarity Strength */}
 									<div className={styles.sectionWrapper}>
-										<div className={styles.sectionTitle}>
-											Similarity
-										</div>
+										<div className={styles.sectionTitle}>Similarity</div>
 										<div className={styles.itemsList}>
 											<div className={styles.legendItem}>
 												<div className={styles.weakSimilarity} />
@@ -269,7 +272,7 @@ export const Legend = memo(function Legend({
 				</div>
 			</Collapsible>
 		</div>
-	);
-});
+	)
+})
 
-Legend.displayName = "Legend";
+Legend.displayName = "Legend"