Improved the OrganizationCombobox.

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"
+                />
+            )}
+        </>
+    );
 }