From 1760c1b8525a97bb6baf4fa0ab7723bd297e6fc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20LAGACHE?=
 <43389096+Asuniia@users.noreply.github.com>
Date: Wed, 28 Jan 2026 13:51:14 +0100
Subject: [PATCH] update: new org combobox

---
 .../organization/organization-combobox.tsx    | 183 ++++++++++++++----
 1 file changed, 143 insertions(+), 40 deletions(-)

diff --git a/src/components/wrappers/dashboard/organization/organization-combobox.tsx b/src/components/wrappers/dashboard/organization/organization-combobox.tsx
index 1a816bc8..e6686fb0 100644
--- a/src/components/wrappers/dashboard/organization/organization-combobox.tsx
+++ b/src/components/wrappers/dashboard/organization/organization-combobox.tsx
@@ -1,29 +1,39 @@
 "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";
+
+import * as React from "react"
+import { Building2, Check, ChevronsUpDown, Plus } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { authClient } from "@/lib/auth/auth-client"
+import { cn } from "@/lib/utils"
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+    SidebarMenuButton,
+    useSidebar,
+} from "@/components/ui/sidebar"
+import { CreateOrganizationModal } from "@/components/wrappers/dashboard/organization/create-organisation-modal"
+import { Skeleton } from "@/components/ui/skeleton"
 
 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);
+    const router = useRouter()
+    const { isMobile, state } = useSidebar()
+    const { data: organizations, isPending: isPendingList, refetch } = authClient.useListOrganizations()
+    const { data: activeOrganization, isPending: isPendingActive, refetch: refetchActiveOrga } = authClient.useActiveOrganization()
+    const [openModal, setOpenModal] = React.useState(false)
+    const [isOpen, setIsOpen] = React.useState(false)
 
-    // if (!organizations) return null;
-
-    // const values = organizations.map(org => ({ value: org.slug, label: org.name }));
-    const values = organizations?.map(org => ({ value: org.slug, label: org.name })) ?? [];
-
-
-
-    const onValueChange = async (slug: string) => {
-        await authClient.organization.setActive({ organizationSlug: slug });
-        router.refresh();
-    };
+    const handleSelect = async (slug: string) => {
+        if (activeOrganization?.slug === slug) return
+        await authClient.organization.setActive({ organizationSlug: slug })
+        router.refresh()
+        setIsOpen(false)
+    }
 
     const handleReload = () => {
         refetch();
@@ -31,23 +41,116 @@ export function OrganizationCombobox() {
         router.refresh();
     };
 
-    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"
+        const orgs = organizations || []
+
+        if (isPendingList || isPendingActive) {
+            return (
+                <SidebarMenuButton size="lg" className="pointer-events-none">
+                    <Skeleton className="size-8 rounded-lg shrink-0" />
+                    <div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
+                        <Skeleton className="h-4 w-24" />
+                        <Skeleton className="h-3 w-16" />
+                    </div>
+                    <Skeleton className="size-4 shrink-0" />
+                </SidebarMenuButton>
+            )
+        }
+
+    
+
+        return (
+            <>
+                <CreateOrganizationModal
+                    open={openModal}
+                    onSuccess={handleReload}
+                    onOpenChange={setOpenModal}
                 />
-            )}
+                <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton
+                            size="lg"
+                            className={cn(
+                                "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-all duration-200 ease-in-out",
+                                state === "collapsed" && "justify-center p-0"
+                            )}
+                        >
+                            <div className={cn(
+                                "flex aspect-square size-8 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-200",
+                                activeOrganization?.logo ? "bg-transparent" : "bg-orange-500",
+                                isOpen && "scale-105"
+                            )}>
+                                {activeOrganization?.logo ? (
+                                    <img src={activeOrganization.logo} alt={activeOrganization.name} className="size-8 rounded-lg object-cover" />
+                                ) : (
+                                    <Building2 className="size-5" />
+                                )}
+                            </div>
+                            <div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
+                                <span className="truncate font-semibold tracking-tight">
+                                    {activeOrganization?.name || "Select Organization"}
+                                </span>
+                            </div>
+                            <ChevronsUpDown className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-[--radix-dropdown-menu-trigger-width] min-w-64 rounded-xl border-2 border-border bg-popover shadow-none"
+                        align="start"
+                        side={isMobile ? "bottom" : "right"}
+                        sideOffset={4}
+                    >
+                        {orgs.map((org) => {
+                            const isActive = activeOrganization?.id === org.id;
+                            return (
+                                <DropdownMenuItem
+                                    key={org.id}
+                                    onClick={() => handleSelect(org.slug)}
+                                    className={cn(
+                                        "group gap-1 p-1 cursor-pointer rounded-lg mb-1 last:mb-0 transition-colors",
+                                        isActive 
+                                            ? "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20" 
+                                            : "focus:bg-accent hover:bg-accent/50 border border-transparent"
+                                    )}>
+                                    <div className={cn(
+                                        "flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
+                                        org.logo ? "bg-transparent border-transparent" : "",
+                                        isActive && !org.logo ? "bg-orange-500 text-white border-orange-500/30" : "bg-muted/50 border-border"
+                                    )}>
+                                        {org.logo ? (
+                                            <img src={org.logo} alt={org.name} className="size-9 rounded-md object-cover" />
+                                        ) : (
+                                            <Building2 className={cn(
+                                                "size-5",
+                                                isActive ? "text-white" : "text-muted-foreground"
+                                            )} />
+                                        )}
+                                    </div>
+                                <div className="flex flex-col gap-0.5">
+                                    <span className={cn(
+                                        "text-sm max-w-42.5 truncate font-medium leading-none",
+                                        isActive ? "text-orange-600 dark:text-orange-400" : ""
+                                    )}>{org.name}</span>
+                                </div>
+                                {isActive && (
+                                    <div className="ml-auto flex size-5 items-center justify-center rounded-full bg-orange-500 shadow-sm">
+                                        <Check className="size-3 text-white" strokeWidth={3} />
+                                    </div>
+                                )}
+                            </DropdownMenuItem>
+                        )
+                    })}
+                    <DropdownMenuSeparator className="my-2 bg-border/50" />
+                    <DropdownMenuItem
+                        className="gap-3 p-2.5 cursor-pointer text-muted-foreground focus:text-foreground group rounded-lg"
+                        onClick={() => setOpenModal(true)}
+                    >
+                        <div className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
+                            <Plus className="size-4" />
+                        </div>
+                        <div className="font-medium">Create new organization</div>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
         </>
-    );
-}
+    )
+}
\ No newline at end of file