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

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

9 files changed, 53 insertions, 71 deletions

diff --git a/packages/memory-graph/src/ui/badge.css.ts b/packages/memory-graph/src/ui/badge.css.ts
index 1af96c1d..0f8cbc92 100644
--- a/packages/memory-graph/src/ui/badge.css.ts
+++ b/packages/memory-graph/src/ui/badge.css.ts
@@ -1,6 +1,6 @@
-import { recipe, type RecipeVariants } from "@vanilla-extract/recipes";
-import { style, globalStyle } from "@vanilla-extract/css";
-import { themeContract } from "../styles/theme.css";
+import { recipe, type RecipeVariants } from "@vanilla-extract/recipes"
+import { style, globalStyle } from "@vanilla-extract/css"
+import { themeContract } from "../styles/theme.css"
 
 /**
  * Base styles for SVG icons inside badges
@@ -9,7 +9,7 @@ export const badgeIcon = style({
 	width: "0.75rem",
 	height: "0.75rem",
 	pointerEvents: "none",
-});
+})
 
 /**
  * Badge recipe with variants
@@ -44,14 +44,14 @@ const badgeBase = style({
 			borderColor: themeContract.colors.status.forgotten,
 		},
 	},
-});
+})
 
 // Global style for SVG children
 globalStyle(`${badgeBase} > svg`, {
 	width: "0.75rem",
 	height: "0.75rem",
 	pointerEvents: "none",
-});
+})
 
 export const badge = recipe({
 	base: badgeBase,
@@ -114,6 +114,6 @@ export const badge = recipe({
 	defaultVariants: {
 		variant: "default",
 	},
-});
+})
 
-export type BadgeVariants = RecipeVariants<typeof badge>;
+export type BadgeVariants = RecipeVariants<typeof badge>
diff --git a/packages/memory-graph/src/ui/badge.tsx b/packages/memory-graph/src/ui/badge.tsx
index 0708888f..a08578c3 100644
--- a/packages/memory-graph/src/ui/badge.tsx
+++ b/packages/memory-graph/src/ui/badge.tsx
@@ -1,27 +1,20 @@
-import { Slot } from "@radix-ui/react-slot";
-import type * as React from "react";
-import { badge, type BadgeVariants } from "./badge.css";
+import { Slot } from "@radix-ui/react-slot"
+import type * as React from "react"
+import { badge, type BadgeVariants } from "./badge.css"
 
 function Badge({
 	className,
 	variant,
 	asChild = false,
 	...props
-}: React.ComponentProps<"span"> &
-	BadgeVariants & { asChild?: boolean }) {
-	const Comp = asChild ? Slot : "span";
+}: React.ComponentProps<"span"> & BadgeVariants & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span"
 
 	const combinedClassName = className
 		? `${badge({ variant })} ${className}`
-		: badge({ variant });
+		: badge({ variant })
 
-	return (
-		<Comp
-			className={combinedClassName}
-			data-slot="badge"
-			{...props}
-		/>
-	);
+	return <Comp className={combinedClassName} data-slot="badge" {...props} />
 }
 
-export { Badge, badge as badgeVariants };
+export { Badge, badge as badgeVariants }
diff --git a/packages/memory-graph/src/ui/button.css.ts b/packages/memory-graph/src/ui/button.css.ts
index ad9cce8c..375d567b 100644
--- a/packages/memory-graph/src/ui/button.css.ts
+++ b/packages/memory-graph/src/ui/button.css.ts
@@ -1,6 +1,6 @@
-import { recipe, type RecipeVariants } from "@vanilla-extract/recipes";
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "../styles/theme.css";
+import { recipe, type RecipeVariants } from "@vanilla-extract/recipes"
+import { style } from "@vanilla-extract/css"
+import { themeContract } from "../styles/theme.css"
 
 /**
  * Base styles for SVG icons inside buttons
@@ -14,7 +14,7 @@ export const buttonIcon = style({
 			height: "1rem",
 		},
 	},
-});
+})
 
 /**
  * Button recipe with variants
@@ -205,6 +205,6 @@ export const button = recipe({
 		variant: "default",
 		size: "default",
 	},
-});
+})
 
-export type ButtonVariants = RecipeVariants<typeof button>;
+export type ButtonVariants = RecipeVariants<typeof button>
diff --git a/packages/memory-graph/src/ui/button.tsx b/packages/memory-graph/src/ui/button.tsx
index 031f2cc8..89015299 100644
--- a/packages/memory-graph/src/ui/button.tsx
+++ b/packages/memory-graph/src/ui/button.tsx
@@ -1,6 +1,6 @@
-import { Slot } from "@radix-ui/react-slot";
-import type * as React from "react";
-import { button, type ButtonVariants } from "./button.css";
+import { Slot } from "@radix-ui/react-slot"
+import type * as React from "react"
+import { button, type ButtonVariants } from "./button.css"
 
 function Button({
 	className,
@@ -10,21 +10,15 @@ function Button({
 	...props
 }: React.ComponentProps<"button"> &
 	ButtonVariants & {
-		asChild?: boolean;
+		asChild?: boolean
 	}) {
-	const Comp = asChild ? Slot : "button";
+	const Comp = asChild ? Slot : "button"
 
 	const combinedClassName = className
 		? `${button({ variant, size })} ${className}`
-		: button({ variant, size });
+		: button({ variant, size })
 
-	return (
-		<Comp
-			className={combinedClassName}
-			data-slot="button"
-			{...props}
-		/>
-	);
+	return <Comp className={combinedClassName} data-slot="button" {...props} />
 }
 
-export { Button, button as buttonVariants };
+export { Button, button as buttonVariants }
diff --git a/packages/memory-graph/src/ui/collapsible.tsx b/packages/memory-graph/src/ui/collapsible.tsx
index 0551ffdd..f8de4e4c 100644
--- a/packages/memory-graph/src/ui/collapsible.tsx
+++ b/packages/memory-graph/src/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client";
+"use client"
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
 function Collapsible({
 	...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
 }
 
 function CollapsibleTrigger({
@@ -16,7 +16,7 @@ function CollapsibleTrigger({
 			data-slot="collapsible-trigger"
 			{...props}
 		/>
-	);
+	)
 }
 
 function CollapsibleContent({
@@ -27,7 +27,7 @@ function CollapsibleContent({
 			data-slot="collapsible-content"
 			{...props}
 		/>
-	);
+	)
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/packages/memory-graph/src/ui/glass-effect.css.ts b/packages/memory-graph/src/ui/glass-effect.css.ts
index 16e0fcdc..c7160d98 100644
--- a/packages/memory-graph/src/ui/glass-effect.css.ts
+++ b/packages/memory-graph/src/ui/glass-effect.css.ts
@@ -1,6 +1,6 @@
-import { style } from "@vanilla-extract/css";
-import { recipe } from "@vanilla-extract/recipes";
-import { themeContract } from "../styles/theme.css";
+import { style } from "@vanilla-extract/css"
+import { recipe } from "@vanilla-extract/recipes"
+import { themeContract } from "../styles/theme.css"
 
 /**
  * Glass menu effect container
@@ -8,7 +8,7 @@ import { themeContract } from "../styles/theme.css";
 export const glassMenuContainer = style({
 	position: "absolute",
 	inset: 0,
-});
+})
 
 /**
  * Glass menu effect with customizable border radius
@@ -55,4 +55,4 @@ export const glassMenuEffect = recipe({
 	defaultVariants: {
 		rounded: "3xl",
 	},
-});
+})
diff --git a/packages/memory-graph/src/ui/glass-effect.tsx b/packages/memory-graph/src/ui/glass-effect.tsx
index e1908f52..5c072edf 100644
--- a/packages/memory-graph/src/ui/glass-effect.tsx
+++ b/packages/memory-graph/src/ui/glass-effect.tsx
@@ -1,11 +1,8 @@
-import {
-	glassMenuContainer,
-	glassMenuEffect,
-} from "./glass-effect.css";
+import { glassMenuContainer, glassMenuEffect } from "./glass-effect.css"
 
 interface GlassMenuEffectProps {
-	rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
-	className?: string;
+	rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
+	className?: string
 }
 
 export function GlassMenuEffect({
@@ -17,5 +14,5 @@ export function GlassMenuEffect({
 			{/* Frosted glass effect with translucent border */}
 			<div className={glassMenuEffect({ rounded })} />
 		</div>
-	);
+	)
 }
diff --git a/packages/memory-graph/src/ui/heading.css.ts b/packages/memory-graph/src/ui/heading.css.ts
index 128d97a6..384e4fdb 100644
--- a/packages/memory-graph/src/ui/heading.css.ts
+++ b/packages/memory-graph/src/ui/heading.css.ts
@@ -1,5 +1,5 @@
-import { style } from "@vanilla-extract/css";
-import { themeContract } from "../styles/theme.css";
+import { style } from "@vanilla-extract/css"
+import { themeContract } from "../styles/theme.css"
 
 /**
  * Responsive heading style with bold weight
@@ -21,4 +21,4 @@ export const headingH3Bold = style({
 			fontSize: themeContract.typography.fontSize.base, // 16px
 		},
 	},
-});
+})
diff --git a/packages/memory-graph/src/ui/heading.tsx b/packages/memory-graph/src/ui/heading.tsx
index 65e8abc8..ed9b80ef 100644
--- a/packages/memory-graph/src/ui/heading.tsx
+++ b/packages/memory-graph/src/ui/heading.tsx
@@ -1,18 +1,16 @@
-import { Root } from "@radix-ui/react-slot";
-import { headingH3Bold } from "./heading.css";
+import { Root } from "@radix-ui/react-slot"
+import { headingH3Bold } from "./heading.css"
 
 export function HeadingH3Bold({
 	className,
 	asChild,
 	...props
 }: React.ComponentProps<"h3"> & { asChild?: boolean }) {
-	const Comp = asChild ? Root : "h3";
+	const Comp = asChild ? Root : "h3"
 
 	const combinedClassName = className
 		? `${headingH3Bold} ${className}`
-		: headingH3Bold;
+		: headingH3Bold
 
-	return (
-		<Comp className={combinedClassName} {...props} />
-	);
+	return <Comp className={combinedClassName} {...props} />
 }