feat: add better default form when users open up a new playground

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slider": "^1.3.5",

src/client/Preview.tsx

@@ -44,6 +44,20 @@ import { AnimatePresence, motion } from "motion/react";
 import React from "react";
 import { type FC, type PropsWithChildren, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
+import { MultiSelectComboBox } from "./components/NewMultiSelectCombobox";
+
+const options = [
+	{ value: "apple", label: "Apple", group: "Fruit" },
+	{ value: "banana", label: "Banana", group: "Fruit" },
+	{ value: "carrot", label: "Carrot", group: "Vegetable" },
+	{ value: "orange", label: "Orange", group: "Fruit" },
+	{ value: "broccoli", label: "Broccoli", group: "Vegetable" },
+	{ value: "grape", label: "Grape", group: "Fruit" },
+	{ value: "spinach", label: "Spinach", group: "Vegetable" },
+	{ value: "mango", label: "Mango", group: "Fruit" },
+	{ value: "potato", label: "Potato", group: "Vegetable" },
+	{ value: "kiwi", label: "Kiwi", group: "Fruit" },
+];
 
 type PreviewProps = {
 	wasmLoadState: WasmLoadState;
@@ -186,6 +200,9 @@ export const Preview: FC<PreviewProps> = ({
 								<UserSelect setOwner={setOwner} />
 							</div>
 						}
+						<MultiSelectComboBox
+							options={options}
+						/>
 						{parameters.length === 0 ? (
 							<div className="flex h-full w-full items-center justify-center overflow-x-clip rounded-xl border p-4">
 								<PreviewEmptyState />

src/client/components/NewMultiSelectCombobox.tsx

@@ -0,0 +1,151 @@
+import { ChevronsUpDown, PlusIcon, XIcon } from "lucide-react";
+import { type FC, useRef, useState } from "react";
+import { Button } from "@/client/components/Button";
+
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/client/components/Popover";
+import { Badge } from "./Badge";
+
+type Option = { value: string; label: string; group?: string };
+
+type MultiSelectComboBoxProps = {
+	options: Option[];
+	value?: string[];
+	defaultValue?: string[];
+	canAddNew?: boolean;
+	badge?: "default" | "warning" | "destructive";
+};
+
+export const MultiSelectComboBox: FC<MultiSelectComboBoxProps> = ({
+	options,
+	defaultValue,
+	...props
+}) => {
+	const triggerRef = useRef<HTMLButtonElement>(null);
+
+	const [open, setOpen] = useState(false);
+	const [value, setValue] = useState<string[]>(props.value ?? []);
+
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const [searchValue, setSearchValue] = useState("");
+
+	const onToggleValue = (value: string) => {
+		setValue((curr) => {
+			const newValue = [...curr];
+
+			const existingIndex = newValue.findIndex((v) => v === value);
+			if (existingIndex >= 0) {
+				newValue.splice(existingIndex, 1);
+			} else {
+				newValue.push(value);
+			}
+
+			return newValue;
+		});
+	};
+
+	const filteredOptions = options.filter(
+		(o) =>
+			!value.some((value) => value === o.value) &&
+			(o.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()) ||
+				o.value.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())),
+	);
+
+	return (
+		<Popover
+			open={open}
+			onOpenChange={(isOpen) => {
+				if (isOpen) {
+					inputRef.current?.focus();
+				} else {
+					setSearchValue("");
+				}
+				setOpen(isOpen);
+			}}
+		>
+			<PopoverTrigger asChild ref={triggerRef}>
+				<Button
+					variant="outline"
+					role="combobox"
+					aria-expanded={open}
+					className="h-fit w-[300px] justify-between"
+				>
+					<div className="flex flex-wrap gap-2">
+						{value.length > 0 ? (
+							value.map((v) => (
+								<Badge asChild={true}>
+									<button
+										key={v}
+										onClick={(e) => {
+											e.stopPropagation();
+											onToggleValue(v);
+										}}
+									>
+										{options.find((o) => o.value === v)?.label ?? v}
+										<XIcon width={1} />
+									</button>
+								</Badge>
+							))
+						) : (
+							<span className="text-content-secondary">Select something</span>
+						)}
+					</div>
+					<ChevronsUpDown className="opacity-50" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				className="flex w-full flex-col gap-2 p-2"
+				align="start"
+				style={{ width: triggerRef.current?.clientWidth }}
+			>
+				<input
+					ref={inputRef}
+					value={searchValue}
+					onChange={(e) => setSearchValue(e.target.value)}
+					className="w-full rounded-md border bg-surface-primary px-2 py-1 text-sm"
+					placeholder="Search"
+				/>
+
+				<div className="flex flex-col items-start">
+					{filteredOptions.length > 0
+						? filteredOptions
+								.filter((f) => !value.some((value) => value === f.value))
+								.map((framework) => (
+									<button
+										className="w-full rounded-md px-2 py-1 text-left hover:bg-surface-secondary"
+										type="button"
+										onClick={() => {
+											onToggleValue(framework.value);
+										}}
+										key={framework.value}
+									>
+										{framework.label}
+									</button>
+								))
+						: null}
+
+					{filteredOptions.length === 0 && searchValue === "" ? (
+						<p className="text-content-secondary text-center px-2">No values</p>
+					) : null}
+
+					{searchValue !== "" ? (
+						<Button
+							size="sm"
+							className="w-full h-8"
+							variant="outline"
+							onClick={() => {
+								setValue((curr) => [...curr, searchValue]);
+								setSearchValue("");
+							}}
+						>
+							Add {searchValue}
+						</Button>
+					) : null}
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+};

src/client/components/Popover.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copied from shadcn/ui and modified on 12/13/2024
+ * @see {@link https://ui.shadcn.com/docs/components/popover}
+ */
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+	type ComponentPropsWithoutRef,
+	type ElementRef,
+	forwardRef,
+} from "react";
+import { cn } from "@/utils/cn";
+
+export const Popover = PopoverPrimitive.Root;
+
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+export const PopoverContent = forwardRef<
+	ElementRef<typeof PopoverPrimitive.Content>,
+	ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				`z-50 w-72 rounded-md border border-solid bg-surface-primary
+				text-content-primary shadow-md outline-none
+				data-[state=open]:animate-in data-[state=closed]:animate-out
+				data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+				data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+				data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+				data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2`,
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));