Function UserCombobox

site/src/modules/tasks/TasksSidebar/UserCombobox.tsx:39–122

({
	value,
	onValueChange,
})

};

export const UserCombobox: FC<UserComboboxProps> = ({
	value,
	onValueChange,
}) => {
	const [open, setOpen] = useState(false);
	const [search, setSearch] = useState("");
	const debouncedSearch = useDebouncedValue(search, 250);
	// By default, this combobox filters by the authenticated user.
	// To ensure consistent behavior, we must always include the
	// authenticated user in the list of options.
	const { user } = useAuthenticated();
	const { data: options, isFetched } = useQuery({
		...users({ q: debouncedSearch }),
		select: (res) => mapUsersToOptions(res.users, user, value),
		placeholderData: keepPreviousData,
	});
	const selectedOption = options?.find((o) => o.value === value);

	return (
		<Popover open={open} onOpenChange={setOpen}>
			<PopoverTrigger asChild>
				<Button
					disabled={!isFetched}
					role="combobox"
					aria-expanded={open}
					className="justify-between rounded-full bg-surface-tertiary border border-border hover:bg-surface-quaternary text-content-primary pl-3 w-fit"
					size="sm"
				>
					{isFetched ? (
						selectedOption ? (
							<UserItem option={selectedOption} className="-ml-2" />
						) : (
							"All users"
						)
					) : (
						"Loading users..."
					)}

					<ChevronsUpDownIcon className="shrink-0 opacity-50" />
				</Button>
			</PopoverTrigger>
			<PopoverContent
				className="flex flex-col w-[280px] p-0"
				side="bottom"
				align="start"
			>
				<Command className="flex-1 min-h-0">
					<CommandInput
						placeholder="Search user..."
						value={search}
						onValueChange={setSearch}
						aria-label="Search user"
					/>
					<CommandList className="flex-1 min-h-0 max-h-none">
						<CommandEmpty>No users found.</CommandEmpty>
						<CommandGroup>
							{options?.map((option) => (
								<CommandItem