feat: add dialog action for enabling/disabling Traefik dashboard and enhance manage ports component with warning alert

apps/dokploy/components/dashboard/settings/servers/actions/show-traefik-actions.tsx

@@ -1,5 +1,7 @@
 import { useTranslation } from "next-i18next";
 import { toast } from "sonner";
+import { AlertBlock } from "@/components/shared/alert-block";
+import { DialogAction } from "@/components/shared/dialog-action";
 import { Button } from "@/components/ui/button";
 import {
 	DropdownMenu,
@@ -85,7 +87,26 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 						</DropdownMenuItem>
 					</EditTraefikEnv>
 
-					<DropdownMenuItem
+					<DialogAction
+						title={
+							haveTraefikDashboardPortEnabled
+								? "Disable Traefik Dashboard"
+								: "Enable Traefik Dashboard"
+						}
+						description={
+							<div className="space-y-4">
+								<AlertBlock type="warning">
+									The Traefik container will be recreated from scratch. This
+									means the container will be deleted and created again, which
+									may cause downtime in your applications.
+								</AlertBlock>
+								<p>
+									Are you sure you want to{" "}
+									{haveTraefikDashboardPortEnabled ? "disable" : "enable"} the
+									Traefik dashboard?
+								</p>
+							</div>
+						}
 						onClick={async () => {
 							await toggleDashboard({
 								enableDashboard: !haveTraefikDashboardPortEnabled,
@@ -104,12 +125,19 @@ export const ShowTraefikActions = ({ serverId }: Props) => {
 									toast.error(errorMessage);
 								});
 						}}
-						className="w-full cursor-pointer space-x-3"
+						disabled={toggleDashboardIsLoading}
+						type="default"
 					>
-						<span>
-							{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"} Dashboard
-						</span>
-					</DropdownMenuItem>
+						<DropdownMenuItem
+							onSelect={(e) => e.preventDefault()}
+							className="w-full cursor-pointer space-x-3"
+						>
+							<span>
+								{haveTraefikDashboardPortEnabled ? "Disable" : "Enable"}{" "}
+								Dashboard
+							</span>
+						</DropdownMenuItem>
+					</DialogAction>
 					<ManageTraefikPorts serverId={serverId}>
 						<DropdownMenuItem
 							onSelect={(e) => e.preventDefault()}

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

@@ -158,11 +158,11 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 										</p>
 									</div>
 								) : (
-									<ScrollArea className="h-[400px] pr-4">
+									<ScrollArea className="pr-4">
 										<div className="grid gap-4">
 											{fields.map((field, index) => (
 												<Card key={field.id} className="bg-transparent">
-													<CardContent className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 p-4 transparent">
+													<CardContent className="grid grid-cols-4  gap-4 p-4 transparent">
 														<FormField
 															control={form.control}
 															name={`ports.${index}.targetPort`}
@@ -305,6 +305,12 @@ export const ManageTraefikPorts = ({ children, serverId }: Props) => {
 										</div>
 									</AlertBlock>
 								)}
+
+								<AlertBlock type="warning">
+									The Traefik container will be recreated from scratch. This
+									means the container will be deleted and created again, which
+									may cause downtime in your applications.
+								</AlertBlock>
 							</div>
 							<DialogFooter>
 								<Button