Add scrolling to organization picker dropdown

Co-authored-by: Siumauricio <47042324+Siumauricio@users.noreply.github.com>

apps/dokploy/components/dashboard/application/advanced/traefik/update-traefik-config.tsx

@@ -7,6 +7,7 @@ import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { CodeEditor } from "@/components/shared/code-editor";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
 	Dialog,
 	DialogContent,
@@ -24,7 +25,6 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { api } from "@/utils/api";
 

apps/dokploy/components/dashboard/compose/logs/show.tsx

@@ -1,8 +1,8 @@
 import { Loader2 } from "lucide-react";
-import { badgeStateColor } from "@/components/dashboard/application/logs/show";
-import { Badge } from "@/components/ui/badge";
 import dynamic from "next/dynamic";
 import { useEffect, useState } from "react";
+import { badgeStateColor } from "@/components/dashboard/application/logs/show";
+import { Badge } from "@/components/ui/badge";
 import {
 	Card,
 	CardContent,

apps/dokploy/components/dashboard/settings/git/gitea/add-gitea-provider.tsx

@@ -19,9 +19,9 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
-	FormDescription,
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";

apps/dokploy/components/dashboard/settings/git/gitea/edit-gitea-provider.tsx

@@ -17,9 +17,9 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
-	FormDescription,
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";

apps/dokploy/components/dashboard/settings/git/gitlab/add-gitlab-provider.tsx

@@ -19,9 +19,9 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
-	FormDescription,
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";

apps/dokploy/components/dashboard/settings/git/gitlab/edit-gitlab-provider.tsx

@@ -18,9 +18,9 @@ import {
 import {
 	Form,
 	FormControl,
+	FormDescription,
 	FormField,
 	FormItem,
-	FormDescription,
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";

apps/dokploy/components/dashboard/settings/web-server/edit-traefik-env.tsx

@@ -1,7 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { useHealthCheckAfterMutation } from "@/hooks/use-health-check-after-mutation";
 import { toast } from "sonner";
 import { z } from "zod";
 import { AlertBlock } from "@/components/shared/alert-block";
@@ -24,6 +23,7 @@ import {
 	FormLabel,
 	FormMessage,
 } from "@/components/ui/form";
+import { useHealthCheckAfterMutation } from "@/hooks/use-health-check-after-mutation";
 import { api } from "@/utils/api";
 
 const schema = z.object({

apps/dokploy/components/dashboard/settings/web-server/manage-traefik-ports.tsx

@@ -1,7 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowRightLeft, Plus, Trash2 } from "lucide-react";
 import { useTranslation } from "next-i18next";
-import { useHealthCheckAfterMutation } from "@/hooks/use-health-check-after-mutation";
 import type React from "react";
 import { useEffect, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
@@ -36,6 +35,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { useHealthCheckAfterMutation } from "@/hooks/use-health-check-after-mutation";
 import { api } from "@/utils/api";
 
 interface Props {

apps/dokploy/components/layouts/side.tsx

@@ -638,127 +638,129 @@ function SidebarLogo() {
 								<DropdownMenuLabel className="text-xs text-muted-foreground">
 									Organizations
 								</DropdownMenuLabel>
-								{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"
+								<div className="max-h-[60vh] overflow-y-auto">
+									{organizations?.map((org) => {
+										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" ||
 									isCloud) && (

apps/dokploy/components/proprietary/auth/sign-in-with-github.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import { toast } from "sonner";
-import { authClient } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
 
 export function SignInWithGithub() {
 	const [isLoading, setIsLoading] = useState(false);

apps/dokploy/components/proprietary/auth/sign-in-with-google.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import { toast } from "sonner";
-import { authClient } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
 
 export function SignInWithGoogle() {
 	const [isLoading, setIsLoading] = useState(false);

apps/dokploy/server/api/root.ts

@@ -22,12 +22,12 @@ import { mountRouter } from "./routers/mount";
 import { mysqlRouter } from "./routers/mysql";
 import { notificationRouter } from "./routers/notification";
 import { organizationRouter } from "./routers/organization";
-import { licenseKeyRouter } from "./routers/proprietary/license-key";
-import { ssoRouter } from "./routers/proprietary/sso";
 import { portRouter } from "./routers/port";
 import { postgresRouter } from "./routers/postgres";
 import { previewDeploymentRouter } from "./routers/preview-deployment";
 import { projectRouter } from "./routers/project";
+import { licenseKeyRouter } from "./routers/proprietary/license-key";
+import { ssoRouter } from "./routers/proprietary/sso";
 import { redirectsRouter } from "./routers/redirects";
 import { redisRouter } from "./routers/redis";
 import { registryRouter } from "./routers/registry";

apps/dokploy/setup.ts

@@ -1,8 +1,9 @@
-import { exit } from "node:process";
 import { exec } from "node:child_process";
+import { exit } from "node:process";
 import { promisify } from "node:util";
 
 const execAsync = promisify(exec);
+
 import { setupDirectories } from "@dokploy/server/setup/config-paths";
 import { initializePostgres } from "@dokploy/server/setup/postgres-setup";
 import { initializeRedis } from "@dokploy/server/setup/redis-setup";