From 777980618fcf12eb20ac9c52b1e0162d1f249dfb Mon Sep 17 00:00:00 2001
From: Ali Issa <ali.issa.lb@gmail.com>
Date: Fri, 31 Jan 2025 02:59:23 -0500
Subject: [PATCH] fix: improve domains page UX and button placement consistency

---
 .../application/domains/show-domains.tsx      |  97 ++++++++-------
 .../compose/domains/show-domains.tsx          | 112 +++++++++---------
 2 files changed, 107 insertions(+), 102 deletions(-)

diff --git a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
index 21b7a9f50..809cb5a73 100644
--- a/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
+++ b/apps/dokploy/components/dashboard/application/domains/show-domains.tsx
@@ -7,7 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
 import Link from "next/link";
@@ -74,64 +73,64 @@ export const ShowDomains = ({ applicationId }: Props) => {
 								return (
 									<div
 										key={item.domainId}
-										className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
 									>
 										<Link
+											className="md:basis-1/2 flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full"
 											target="_blank"
 											href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
 										>
-											<ExternalLink className="size-5" />
+											<span className="truncate max-w-full">{item.host}</span>
+											<ExternalLink className="size-4 min-w-4" />
 										</Link>
 
-										<Input disabled value={item.host} />
-										<Button variant="outline" disabled>
-											{item.path}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.port}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.https ? "HTTPS" : "HTTP"}
-										</Button>
-										<div className="flex flex-row gap-1">
-											<AddDomain
-												applicationId={applicationId}
-												domainId={item.domainId}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-blue-500/10 "
+										<div className="flex gap-8">
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+												<span>{item.path}</span>
+												<span>{item.port}</span>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
+											</div>
+
+											<div className="flex gap-2">
+												<AddDomain
+													applicationId={applicationId}
+													domainId={item.domainId}
 												>
-													<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
-												</Button>
-											</AddDomain>
-											<DialogAction
-												title="Delete Domain"
-												description="Are you sure you want to delete this domain?"
-												type="destructive"
-												onClick={async () => {
-													await deleteDomain({
-														domainId: item.domainId,
-													})
-														.then((data) => {
-															refetch();
-															toast.success("Domain deleted successfully");
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-blue-500/10 "
+													>
+														<PenBoxIcon className="size-3.5 text-primary group-hover:text-blue-500" />
+													</Button>
+												</AddDomain>
+												<DialogAction
+													title="Delete Domain"
+													description="Are you sure you want to delete this domain?"
+													type="destructive"
+													onClick={async () => {
+														await deleteDomain({
+															domainId: item.domainId,
 														})
-														.catch(() => {
-															toast.error("Error deleting domain");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
+															.then(() => {
+																refetch();
+																toast.success("Domain deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting domain");
+															});
+													}}
 												>
-													<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>
 								);
diff --git a/apps/dokploy/components/dashboard/compose/domains/show-domains.tsx b/apps/dokploy/components/dashboard/compose/domains/show-domains.tsx
index c524d4431..e30776d83 100644
--- a/apps/dokploy/components/dashboard/compose/domains/show-domains.tsx
+++ b/apps/dokploy/components/dashboard/compose/domains/show-domains.tsx
@@ -7,7 +7,6 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { api } from "@/utils/api";
 import { ExternalLink, GlobeIcon, PenBoxIcon, Trash2 } from "lucide-react";
 import Link from "next/link";
@@ -74,63 +73,70 @@ export const ShowDomainsCompose = ({ composeId }: Props) => {
 								return (
 									<div
 										key={item.domainId}
-										className="flex w-full items-center gap-4 max-sm:flex-wrap border p-4 rounded-lg"
+										className="flex w-full items-center justify-between gap-4 border p-4 md:px-6 rounded-lg flex-wrap"
 									>
-										<Link target="_blank" href={`http://${item.host}`}>
-											<ExternalLink className="size-5" />
-										</Link>
-										<Button variant="outline" disabled>
-											{item.serviceName}
-										</Button>
-										<Input disabled value={item.host} />
-										<Button variant="outline" disabled>
-											{item.path}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.port}
-										</Button>
-										<Button variant="outline" disabled>
-											{item.https ? "HTTPS" : "HTTP"}
-										</Button>
-										<div className="flex flex-row gap-1">
-											<AddDomainCompose
-												composeId={composeId}
-												domainId={item.domainId}
+										<div className="md:basis-1/2 flex gap-6 w-full items-center">
+											<span className="opacity-50 text-center font-medium text-sm">
+												{item.serviceName}
+											</span>
+
+											<Link
+												className="flex gap-2 lg:gap-3 items-center hover:underline transition-all w-full max-w-[calc(100%-4rem)]"
+												target="_blank"
+												href={`${item.https ? "https" : "http"}://${item.host}${item.path}`}
 											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-blue-500/10 "
+												<span className="truncate ">{item.host}</span>
+												<ExternalLink className="size-4 min-w-4" />
+											</Link>
+										</div>
+
+										<div className="flex gap-8">
+											<div className="flex gap-8 opacity-50 items-center h-10 text-center text-sm font-medium">
+												<span>{item.path}</span>
+												<span>{item.port}</span>
+												<span>{item.https ? "HTTPS" : "HTTP"}</span>
+											</div>
+
+											<div className="flex gap-2">
+												<AddDomainCompose
+													composeId={composeId}
+													domainId={item.domainId}
 												>
-													<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
-												</Button>
-											</AddDomainCompose>
-											<DialogAction
-												title="Delete Domain"
-												description="Are you sure you want to delete this domain?"
-												type="destructive"
-												onClick={async () => {
-													await deleteDomain({
-														domainId: item.domainId,
-													})
-														.then((data) => {
-															refetch();
-															toast.success("Domain deleted successfully");
+													<Button
+														variant="ghost"
+														size="icon"
+														className="group hover:bg-blue-500/10 "
+													>
+														<PenBoxIcon className="size-3.5  text-primary group-hover:text-blue-500" />
+													</Button>
+												</AddDomainCompose>
+												<DialogAction
+													title="Delete Domain"
+													description="Are you sure you want to delete this domain?"
+													type="destructive"
+													onClick={async () => {
+														await deleteDomain({
+															domainId: item.domainId,
 														})
-														.catch(() => {
-															toast.error("Error deleting domain");
-														});
-												}}
-											>
-												<Button
-													variant="ghost"
-													size="icon"
-													className="group hover:bg-red-500/10"
-													isLoading={isRemoving}
+															.then((data) => {
+																refetch();
+																toast.success("Domain deleted successfully");
+															})
+															.catch(() => {
+																toast.error("Error deleting domain");
+															});
+													}}
 												>
-													<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>
 								);