why is this novel shit broke

1 files changed, 55 insertions, 32 deletions

diff --git a/packages/ui/shadcn/combobox.tsx b/packages/ui/shadcn/combobox.tsx
index bb8de9df..7ebb1ef4 100644
--- a/packages/ui/shadcn/combobox.tsx
+++ b/packages/ui/shadcn/combobox.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { cn } from "../lib/utils";
+import { useState } from "react";
 import { Button } from "./button";
 import {
 	Command,
@@ -20,59 +19,83 @@ interface ComboboxWithCreateProps {
 	options: Option[];
 	onSelect: (value: string) => void;
 	onSubmit: (newName: string) => void;
-	placeholder?: string;
-	emptyMessage?: string;
-	createNewMessage?: string;
-	className?: string;
+	selectedSpaces: number[];
+	setSelectedSpaces: React.Dispatch<React.SetStateAction<number[]>>;
 }
 
-const ComboboxWithCreate: React.FC<ComboboxWithCreateProps> = ({
-	options: initialOptions,
+const ComboboxWithCreate = ({
+	options,
 	onSelect,
 	onSubmit,
-	placeholder = "Select an option",
-	emptyMessage = "No option found.",
-	createNewMessage = "Create - ",
-	className,
-}) => {
-	const [options, setOptions] = useState<Option[]>(initialOptions);
+	selectedSpaces,
+	setSelectedSpaces,
+}: ComboboxWithCreateProps) => {
 	const [inputValue, setInputValue] = useState("");
 
-	useEffect(() => {
-		setOptions(initialOptions);
-	}, [initialOptions]);
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(e.target.value);
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (
+			e.key === "Backspace" &&
+			inputValue === "" &&
+			selectedSpaces.length > 0
+		) {
+			setSelectedSpaces((prev) => prev.slice(0, -1));
+		}
+	};
+
+	const filteredOptions = options.filter(
+		(option) => !selectedSpaces.includes(parseInt(option.value)),
+	);
 
 	return (
-		<Command className={cn("group", className)}>
+		<Command
+			className={`group flex bg-[#2F353C] h-min rounded-md ${selectedSpaces.length > 0 && "p-2"} transition-all mt-4 mb-4`}
+		>
+			<div className="inline-flex flex-wrap gap-1">
+				{selectedSpaces.map((spaceId) => (
+					<button
+						key={spaceId}
+						type="button"
+						onClick={() =>
+							setSelectedSpaces((prev) => prev.filter((id) => id !== spaceId))
+						}
+						className="relative group rounded-md py-1 px-2 bg-[#3C464D] max-w-32"
+					>
+						<p className="line-clamp-1">
+							{options.find((opt) => opt.value === spaceId.toString())?.label}
+						</p>
+					</button>
+				))}
+			</div>
 			<CommandInput
-				onChangeCapture={(e: React.ChangeEvent<HTMLInputElement>) =>
-					setInputValue(e.currentTarget.value)
-				}
-				placeholder={placeholder}
+				onChangeCapture={handleInputChange}
+				onKeyDown={handleKeyDown}
+				placeholder="Select or create a new space."
 				value={inputValue}
 			/>
-			<CommandList className="z-10 translate-y-12 translate-x-5 opacity-0 absolute group-focus-within:opacity-100 bg-secondary p-2 rounded-b-xl max-w-64">
+			<CommandList className={`z-10 translate-x-5 opacity-0 transition-all absolute group-focus-within:opacity-100 bg-secondary p-2 rounded-b-xl max-w-64 ${selectedSpaces.length > 0 ?"translate-y-20": "translate-y-12"}`}>
 				<CommandGroup className="hidden group-focus-within:block">
-					{options.map((option, idx) => (
+					{filteredOptions.map((option) => (
 						<CommandItem
-							key={`opt-${idx}`}
+							key={option.value}
 							onSelect={() => onSelect(option.value)}
 						>
 							{option.label}
 						</CommandItem>
 					))}
-					{!options.map((opts) => opts.label).includes(inputValue) && (
+					{!options.map((opt) => opt.label).includes(inputValue) && (
 						<Button
 							className="px-1"
 							type="button"
-							onClick={async () => onSubmit(inputValue)}
+							onClick={() => onSubmit(inputValue)}
 							variant="link"
-							disabled={inputValue.length === 0}
+							disabled={inputValue.length < 1}
 						>
 							{inputValue.length > 0 ? (
-								<>
-									{createNewMessage} "{inputValue}"
-								</>
+								<>Create - "{inputValue}"</>
 							) : (
 								<>Type to create a new space</>
 							)}
@@ -84,4 +107,4 @@ const ComboboxWithCreate: React.FC<ComboboxWithCreateProps> = ({
 	);
 };
 
-export default ComboboxWithCreate;
+export default ComboboxWithCreate;
\ No newline at end of file