Improved the OrganizationCombobox.

src/components/wrappers/common/combobox.tsx

@@ -6,78 +6,77 @@ import {cn} from "@/lib/utils";
 import {Button} from "@/components/ui/button";
 import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from "@/components/ui/command";
 import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
-import {FormControl} from "@/components/ui/form";
 import {SidebarMenuButton} from "@/components/ui/sidebar";
 import {Separator} from "@/components/ui/separator";
-import {CreateOrganizationModal} from "@/components/wrappers/dashboard/organization/create-organisation-modal";
 
-export type comboBoxProps = {
-    values: Array<{ value: string; label: string }>;
-    defaultValue?: string;
-    onValueChange?: any;
+export type ComboBoxProps<T = string> = {
+    values: Array<{ value: T; label: string }>;
+    defaultValue?: T;
+    onValueChangeAction?: (value: T) => void;
     searchField?: boolean;
     sideBar?: boolean;
-    reload?: () => void;
-
+    onAddItemAction?: () => void;
+    addItemLabel?: string;
 };
 
-export function ComboBox(props: comboBoxProps) {
+export function ComboBox<T = string>(props: ComboBoxProps<T>) {
     const {
         values: choices,
-        defaultValue: defaultChoice = "",
-        onValueChange,
+        defaultValue,
+        onValueChangeAction,
         searchField = false,
-        sideBar = false
+        sideBar = false,
+        onAddItemAction,
+        addItemLabel = "Add item",
     } = props;
 
-    const [value, setValue] = useState<string>();
+    const [value, setValue] = useState<T | undefined>(defaultValue);
+    const [open, setOpen] = useState(false);
 
     useEffect(() => {
-        setValue(defaultChoice);
-    }, [defaultChoice]);
-
-    const [open, setOpen] = useState(false);
-    const [openModal, setOpenModal] = useState(false);
+        setValue(defaultValue);
+    }, [defaultValue]);
 
     return (
         <div>
-            <CreateOrganizationModal
-                open={openModal}
-                onSuccess={() => {
-                    props.reload?.();
-                }}
-                onOpenChange={setOpenModal}
-            />
-
             <Popover open={open} onOpenChange={setOpen}>
                 <PopoverTrigger asChild>
                     {sideBar ? (
                         <SidebarMenuButton>
-                            {value ? choices.find((choice) => choice.value === value)?.label : "Select choice..."}
+                            {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
                             <ChevronDown className="ml-auto"/>
                         </SidebarMenuButton>
                     ) : (
                         <Button variant="outline" role="combobox" aria-expanded={open}
                                 className="w-full justify-between">
-                            {value ? choices.find((choice) => choice.value === value)?.label : "Select choice..."}
+                            {value ? choices.find((c) => c.value === value)?.label : "Select choice..."}
                             <ChevronDown className="opacity-50"/>
                         </Button>
                     )}
                 </PopoverTrigger>
-                <PopoverContent className="p-0 popover-content-width-full">
+
+                <PopoverContent
+                    className="p-0"
+                    align="start"
+                    sideOffset={4}
+                    style={{ width: 'var(--radix-popover-trigger-width)' }}
+                >
                     <Command>
-                        {searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
+                        {searchField && <CommandInput placeholder="Search choice..." className="h-9"/>}
                         <CommandList>
                             <CommandEmpty>No choice found.</CommandEmpty>
                             <CommandGroup>
                                 {choices.map((choice) => (
                                     <CommandItem
-                                        key={choice.value}
-                                        value={choice.value}
+                                        key={String(choice.value)}
+                                        value={String(choice.value)}
                                         onSelect={(currentValue) => {
-                                            setValue(currentValue);
-                                            onValueChange(currentValue);
-                                            setOpen(false);
+                                            const v = choices.find(c => String(c.value) === currentValue)?.value;
+                                            if (v !== undefined) {
+                                                setValue(v);
+                                                onValueChangeAction?.(v);
+                                                setOpen(false);
+                                            }
                                         }}
                                     >
                                         {choice.label}
@@ -88,66 +87,26 @@ export function ComboBox(props: comboBoxProps) {
                             </CommandGroup>
                         </CommandList>
                     </Command>
-                    <Separator/>
-                    {sideBar ? (
-                        <SidebarMenuButton onClick={() => {
-                            setOpen(false)
-                            setOpenModal(true)
-                        }
-                        }>+ Create new organization</SidebarMenuButton>
-                    ) : null}
+                    {onAddItemAction && (
+                        <>
+                            <Separator/>
+                            {sideBar ? (
+                                <SidebarMenuButton onClick={() => {
+                                    setOpen(false);
+                                    onAddItemAction();
+                                }}>
+                                    + {addItemLabel}
+                                </SidebarMenuButton>
+                            ) : (
+                                <Button variant="outline" className="w-full" onClick={onAddItemAction}>
+                                    + {addItemLabel}
+                                </Button>
+                            )}
+                        </>
+                    )}
                 </PopoverContent>
             </Popover>
         </div>
     );
 }
 
-export type comboBoxFormItemProps = comboBoxProps & {
-    value: any;
-    name: any;
-    onChange: any;
-};
-
-export function ComboBoxFormItem(props: comboBoxFormItemProps) {
-    const {values: choices, searchField = false, value, name, onChange} = props;
-
-    const [open, setOpen] = useState(false);
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <FormControl>
-                    <Button variant="outline" role="combobox" aria-expanded={open}
-                            className={cn("w-full justify-between", !value && "text-muted-foreground")}>
-                        {value ? choices.find((choice) => choice.value === value)?.label : `Select ${name}`}
-                        <ChevronDown className="opacity-50"/>
-                    </Button>
-                </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="p-0 popover-content-width-full">
-                <Command>
-                    {searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
-                    <CommandList>
-                        <CommandEmpty>No {name} found.</CommandEmpty>
-                        <CommandGroup>
-                            {choices.map((choice) => (
-                                <CommandItem
-                                    value={choice.label}
-                                    key={choice.value}
-                                    onSelect={() => {
-                                        onChange(choice.value);
-                                        setOpen(false);
-                                    }}
-                                >
-                                    {choice.label}
-                                    <Check
-                                        className={cn("ml-auto", choice.value === value ? "opacity-100" : "opacity-0")}/>
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-}

src/components/wrappers/dashboard/common/sidebar/app-sidebar.tsx

@@ -32,7 +32,7 @@ export function AppSidebar() {
             </SidebarContent>
 
             <SidebarMenu className="mb-2">
-                <SidebarMenuItem>
+                <SidebarMenuItem className="p-2">
                     <LoggedInButton/>
                 </SidebarMenuItem>
             </SidebarMenu>

src/components/wrappers/dashboard/organization/create-organisation-modal.tsx

@@ -52,7 +52,10 @@ export function CreateOrganizationModal({open, onOpenChange, onSuccess}: createO
     });
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
+        <Dialog open={open} onOpenChange={(state) => {
+            form.reset()
+            onOpenChange(state)
+        }}>
             <DialogContent className="sm:max-w-[425px] w-full">
                 <DialogHeader>
                     <DialogTitle>Create a new organization</DialogTitle>

src/components/wrappers/dashboard/organization/organization-combobox.tsx

@@ -1,44 +1,50 @@
-"use client";
-
+"use client"
 import {ComboBox} from "@/components/wrappers/common/combobox";
 import {useSidebar} from "@/components/ui/sidebar";
 import {useRouter} from "next/navigation";
 import {authClient} from "@/lib/auth/auth-client";
-
+import {CreateOrganizationModal} from "@/components/wrappers/dashboard/organization/create-organisation-modal";
+import {useState} from "react";
 
 export function OrganizationCombobox() {
     const router = useRouter();
     const {state} = useSidebar();
-
     const {data: organizations, refetch} = authClient.useListOrganizations();
     const {data: activeOrganization, refetch: refetchActiveOrga} = authClient.useActiveOrganization();
+    const [openModal, setOpenModal] = useState(false);
 
     if (!organizations) return null;
 
-    const values = organizations.map((organization) => {
-        return {
-            value: organization.slug,
-            label: organization.name,
-        };
-    });
+    const values = organizations.map(org => ({ value: org.slug, label: org.name }));
 
     const onValueChange = async (slug: string) => {
-
-        await authClient.organization.setActive({
-            organizationSlug: slug,
-        });
+        await authClient.organization.setActive({ organizationSlug: slug });
         router.refresh();
-
     };
 
-    const handleReset = () => {
+    const handleReload = () => {
         refetch();
-        refetchActiveOrga()
+        refetchActiveOrga();
         router.refresh();
-    }
+    };
 
-    return <>{state === "expanded" &&
-        <ComboBox sideBar values={values} defaultValue={activeOrganization?.slug} onValueChange={onValueChange}
-                  reload={handleReset}/>}
-    </>;
+    return (
+        <>
+            <CreateOrganizationModal
+                open={openModal}
+                onSuccess={handleReload}
+                onOpenChange={setOpenModal}
+            />
+            {state === "expanded" && (
+                <ComboBox
+                    sideBar
+                    values={values}
+                    defaultValue={activeOrganization?.slug}
+                    onValueChangeAction={onValueChange}
+                    onAddItemAction={() => setOpenModal(true)}
+                    addItemLabel="Create new organization"
+                />
+            )}
+        </>
+    );
 }