From 389a69484e8cd67e4fe6beb42a5ece28291e3b56 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <siumauricio@icloud.com>
Date: Fri, 13 Feb 2026 00:25:02 -0600
Subject: [PATCH] refactor(sidebar): streamline organization dropdown menu
 interactions

- Simplified the organization selection process by enhancing the dropdown menu structure.
- Improved the layout for better visibility and usability, ensuring a smoother user experience when setting default organizations and deleting them.
- Added error handling for organization actions to provide user feedback on success or failure.
---
 apps/dokploy/components/layouts/side.tsx | 222 +++++++++++------------
 1 file changed, 111 insertions(+), 111 deletions(-)

diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx
index 0e7d0b9d0..4b3354ed8 100644
--- a/apps/dokploy/components/layouts/side.tsx
+++ b/apps/dokploy/components/layouts/side.tsx
@@ -640,126 +640,126 @@ function SidebarLogo() {
 								</DropdownMenuLabel>
 								<div className="overflow-y-auto overflow-x-hidden min-h-0 -mx-1 px-1">
 									{organizations?.map((org) => {
-									const isDefault = org.members?.[0]?.isDefault ?? false;
-									return (
-										<div
-											className="flex flex-row justify-between"
-											key={org.name}
-										>
-											<DropdownMenuItem
-												onClick={async () => {
-													await authClient.organization.setActive({
-														organizationId: org.id,
-													});
-													window.location.reload();
-												}}
-												className="w-full gap-2 p-2"
+										const isDefault = org.members?.[0]?.isDefault ?? false;
+										return (
+											<div
+												className="flex flex-row justify-between"
+												key={org.name}
 											>
-												<div className="flex flex-col gap-1">
-													<div className="flex items-center gap-2">
-														{org.name}
-													</div>
-												</div>
-												<div className="flex size-6 items-center justify-center rounded-sm border">
-													<Logo
-														className={cn(
-															"transition-all",
-															state === "collapsed" ? "size-6" : "size-10",
-														)}
-														logoUrl={org.logo ?? undefined}
-													/>
-												</div>
-											</DropdownMenuItem>
-
-											<div className="flex items-center gap-2">
-												<Button
-													variant="ghost"
-													size="icon"
-													className={cn(
-														"group",
-														isDefault
-															? "hover:bg-yellow-500/10"
-															: "hover:bg-blue-500/10",
-													)}
-													isLoading={isSettingDefault && !isDefault}
-													disabled={isDefault}
-													onClick={async (e) => {
-														if (isDefault) return;
-														e.stopPropagation();
-														await setDefaultOrganization({
+												<DropdownMenuItem
+													onClick={async () => {
+														await authClient.organization.setActive({
 															organizationId: org.id,
-														})
-															.then(() => {
-																refetch();
-																toast.success("Default organization updated");
-															})
-															.catch((error) => {
-																toast.error(
-																	error?.message ||
-																		"Error setting default organization",
-																);
-															});
+														});
+														window.location.reload();
 													}}
-													title={
-														isDefault
-															? "Default organization"
-															: "Set as default"
-													}
+													className="w-full gap-2 p-2"
 												>
-													{isDefault ? (
-														<Star
-															fill="#eab308"
-															stroke="#eab308"
-															className="size-4 text-yellow-500"
+													<div className="flex flex-col gap-1">
+														<div className="flex items-center gap-2">
+															{org.name}
+														</div>
+													</div>
+													<div className="flex size-6 items-center justify-center rounded-sm border">
+														<Logo
+															className={cn(
+																"transition-all",
+																state === "collapsed" ? "size-6" : "size-10",
+															)}
+															logoUrl={org.logo ?? undefined}
 														/>
-													) : (
-														<Star
-															fill="none"
-															stroke="currentColor"
-															className="size-4 text-gray-400 group-hover:text-blue-500 transition-colors"
-														/>
-													)}
-												</Button>
-												{org.ownerId === session?.user?.id && (
-													<>
-														<AddOrganization organizationId={org.id} />
-														<DialogAction
-															title="Delete Organization"
-															description="Are you sure you want to delete this organization?"
-															type="destructive"
-															onClick={async () => {
-																await deleteOrganization({
-																	organizationId: org.id,
+													</div>
+												</DropdownMenuItem>
+
+												<div className="flex items-center gap-2">
+													<Button
+														variant="ghost"
+														size="icon"
+														className={cn(
+															"group",
+															isDefault
+																? "hover:bg-yellow-500/10"
+																: "hover:bg-blue-500/10",
+														)}
+														isLoading={isSettingDefault && !isDefault}
+														disabled={isDefault}
+														onClick={async (e) => {
+															if (isDefault) return;
+															e.stopPropagation();
+															await setDefaultOrganization({
+																organizationId: org.id,
+															})
+																.then(() => {
+																	refetch();
+																	toast.success("Default organization updated");
 																})
-																	.then(() => {
-																		refetch();
-																		toast.success(
-																			"Organization deleted successfully",
-																		);
+																.catch((error) => {
+																	toast.error(
+																		error?.message ||
+																			"Error setting default organization",
+																	);
+																});
+														}}
+														title={
+															isDefault
+																? "Default organization"
+																: "Set as default"
+														}
+													>
+														{isDefault ? (
+															<Star
+																fill="#eab308"
+																stroke="#eab308"
+																className="size-4 text-yellow-500"
+															/>
+														) : (
+															<Star
+																fill="none"
+																stroke="currentColor"
+																className="size-4 text-gray-400 group-hover:text-blue-500 transition-colors"
+															/>
+														)}
+													</Button>
+													{org.ownerId === session?.user?.id && (
+														<>
+															<AddOrganization organizationId={org.id} />
+															<DialogAction
+																title="Delete Organization"
+																description="Are you sure you want to delete this organization?"
+																type="destructive"
+																onClick={async () => {
+																	await deleteOrganization({
+																		organizationId: org.id,
 																	})
-																	.catch((error) => {
-																		toast.error(
-																			error?.message ||
-																				"Error deleting organization",
-																		);
-																	});
-															}}
-														>
-															<Button
-																variant="ghost"
-																size="icon"
-																className="group hover:bg-red-500/10"
-																isLoading={isRemoving}
+																		.then(() => {
+																			refetch();
+																			toast.success(
+																				"Organization deleted successfully",
+																			);
+																		})
+																		.catch((error) => {
+																			toast.error(
+																				error?.message ||
+																					"Error deleting organization",
+																			);
+																		});
+																}}
 															>
-																<Trash2 className="size-4 text-primary group-hover:text-red-500" />
-															</Button>
-														</DialogAction>
-													</>
-												)}
+																<Button
+																	variant="ghost"
+																	size="icon"
+																	className="group hover:bg-red-500/10"
+																	isLoading={isRemoving}
+																>
+																	<Trash2 className="size-4 text-primary group-hover:text-red-500" />
+																</Button>
+															</DialogAction>
+														</>
+													)}
+												</div>
 											</div>
-										</div>
-									);
-								})}
+										);
+									})}
 								</div>
 								{(user?.role === "owner" ||
 									user?.role === "admin" ||