refactor: improve sidebar

2025-06-26 18:27:59 +00:00 · 2025-01-19 01:29:29 -06:00
parent 43b7db00f9
commit 5310a559b0
16 changed files with 78 additions and 109 deletions
--- a/apps/dokploy/test/traefik/server/update-server-config.test.ts
+++ b/apps/dokploy/test/traefik/server/update-server-config.test.ts
@@ -1,98 +1,98 @@
 import { fs, vol } from "memfs";

 vi.mock("node:fs", () => ({
-  ...fs,
-  default: fs,
+	...fs,
+	default: fs,
 }));

 import type { Admin, FileConfig } from "@dokploy/server";
 import {
-  createDefaultServerTraefikConfig,
-  loadOrCreateConfig,
-  updateServerTraefik,
+	createDefaultServerTraefikConfig,
+	loadOrCreateConfig,
+	updateServerTraefik,
 } from "@dokploy/server";
 import { beforeEach, expect, test, vi } from "vitest";

 const baseAdmin: Admin = {
-  cleanupCacheApplications: false,
-  cleanupCacheOnCompose: false,
-  cleanupCacheOnPreviews: false,
-  createdAt: "",
-  authId: "",
-  adminId: "string",
-  serverIp: null,
-  certificateType: "none",
-  host: null,
-  letsEncryptEmail: null,
-  sshPrivateKey: null,
-  enableDockerCleanup: false,
-  enableLogRotation: false,
-  serversQuantity: 0,
-  stripeCustomerId: "",
-  stripeSubscriptionId: "",
+	cleanupCacheApplications: false,
+	cleanupCacheOnCompose: false,
+	cleanupCacheOnPreviews: false,
+	createdAt: "",
+	authId: "",
+	adminId: "string",
+	serverIp: null,
+	certificateType: "none",
+	host: null,
+	letsEncryptEmail: null,
+	sshPrivateKey: null,
+	enableDockerCleanup: false,
+	enableLogRotation: false,
+	serversQuantity: 0,
+	stripeCustomerId: "",
+	stripeSubscriptionId: "",
 };

 beforeEach(() => {
-  vol.reset();
-  createDefaultServerTraefikConfig();
+	vol.reset();
+	createDefaultServerTraefikConfig();
 });

 test("Should read the configuration file", () => {
-  const config: FileConfig = loadOrCreateConfig("dokploy");
+	const config: FileConfig = loadOrCreateConfig("dokploy");

-  expect(config.http?.routers?.["dokploy-router-app"]?.service).toBe(
-    "dokploy-service-app"
-  );
+	expect(config.http?.routers?.["dokploy-router-app"]?.service).toBe(
+		"dokploy-service-app",
+	);
 });

 test("Should apply redirect-to-https", () => {
-  updateServerTraefik(
-    {
-      ...baseAdmin,
-      certificateType: "letsencrypt",
-    },
-    "example.com"
-  );
+	updateServerTraefik(
+		{
+			...baseAdmin,
+			certificateType: "letsencrypt",
+		},
+		"example.com",
+	);

-  const config: FileConfig = loadOrCreateConfig("dokploy");
+	const config: FileConfig = loadOrCreateConfig("dokploy");

-  expect(config.http?.routers?.["dokploy-router-app"]?.middlewares).toContain(
-    "redirect-to-https"
-  );
+	expect(config.http?.routers?.["dokploy-router-app"]?.middlewares).toContain(
+		"redirect-to-https",
+	);
 });

 test("Should change only host when no certificate", () => {
-  updateServerTraefik(baseAdmin, "example.com");
+	updateServerTraefik(baseAdmin, "example.com");

-  const config: FileConfig = loadOrCreateConfig("dokploy");
+	const config: FileConfig = loadOrCreateConfig("dokploy");

-  expect(config.http?.routers?.["dokploy-router-app-secure"]).toBeUndefined();
+	expect(config.http?.routers?.["dokploy-router-app-secure"]).toBeUndefined();
 });

 test("Should not touch config without host", () => {
-  const originalConfig: FileConfig = loadOrCreateConfig("dokploy");
+	const originalConfig: FileConfig = loadOrCreateConfig("dokploy");

-  updateServerTraefik(baseAdmin, null);
+	updateServerTraefik(baseAdmin, null);

-  const config: FileConfig = loadOrCreateConfig("dokploy");
+	const config: FileConfig = loadOrCreateConfig("dokploy");

-  expect(originalConfig).toEqual(config);
+	expect(originalConfig).toEqual(config);
 });

 test("Should remove websecure if https rollback to http", () => {
-  const originalConfig: FileConfig = loadOrCreateConfig("dokploy");
+	const originalConfig: FileConfig = loadOrCreateConfig("dokploy");

-  updateServerTraefik(
-    { ...baseAdmin, certificateType: "letsencrypt" },
-    "example.com"
-  );
+	updateServerTraefik(
+		{ ...baseAdmin, certificateType: "letsencrypt" },
+		"example.com",
+	);

-  updateServerTraefik({ ...baseAdmin, certificateType: "none" }, "example.com");
+	updateServerTraefik({ ...baseAdmin, certificateType: "none" }, "example.com");

-  const config: FileConfig = loadOrCreateConfig("dokploy");
+	const config: FileConfig = loadOrCreateConfig("dokploy");

-  expect(config.http?.routers?.["dokploy-router-app-secure"]).toBeUndefined();
-  expect(
-    config.http?.routers?.["dokploy-router-app"]?.middlewares
-  ).not.toContain("redirect-to-https");
+	expect(config.http?.routers?.["dokploy-router-app-secure"]).toBeUndefined();
+	expect(
+		config.http?.routers?.["dokploy-router-app"]?.middlewares,
+	).not.toContain("redirect-to-https");
 });
--- a/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
+++ b/apps/dokploy/components/dashboard/database/backups/show-backups.tsx
@@ -75,7 +75,7 @@ export const ShowBackups = ({ id, type }: Props) => {
 				{data?.length === 0 ? (
 					<div className="flex flex-col items-center gap-3">
 						<DatabaseBackup className="size-8 text-muted-foreground" />
-						<span className="text-base text-muted-foreground">
+						<span className="text-base text-muted-foreground text-center">
 							To create a backup it is required to set at least 1 provider.
 							Please, go to{" "}
 							<Link
--- a/apps/dokploy/components/dashboard/monitoring/docker/show.tsx
+++ b/apps/dokploy/components/dashboard/monitoring/docker/show.tsx
@@ -200,7 +200,7 @@ export const DockerMonitoring = ({
 						</div>
 					</header>

-					<div className="grid gap-6 md:grid-cols-2">
+					<div className="grid gap-6 lg:grid-cols-2">
 						<Card className="bg-background">
 							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
 								<CardTitle className="text-sm font-medium">CPU Usage</CardTitle>
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -77,8 +77,8 @@ export const ShowProjects = () => {
 			<div className="w-full">
 				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
-						<div className="flex justify-between gap-4 w-full items-center">
-							<CardHeader className="">
+						<div className="flex justify-between gap-4 w-full items-center flex-wrap p-6">
+							<CardHeader className="p-0">
 								<CardTitle className="text-xl flex flex-row gap-2">
 									<FolderInput className="size-6 text-muted-foreground self-center" />
 									Projects
@@ -87,7 +87,7 @@ export const ShowProjects = () => {
 									Create and manage your projects
 								</CardDescription>
 							</CardHeader>
-							<div className=" px-4 ">
+							<div className="">
 								<HandleProject />
 							</div>
 						</div>
--- a/apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx
+++ b/apps/dokploy/components/dashboard/settings/certificates/show-certificates.tsx
@@ -50,7 +50,7 @@ export const ShowCertificates = () => {
 								{data?.length === 0 ? (
 									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
 										<ShieldCheck className="size-8 self-center text-muted-foreground" />
-										<span className="text-base text-muted-foreground">
+										<span className="text-base text-muted-foreground text-center">
 											You don't have any certificates created
 										</span>
 										<AddCertificate />
--- a/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
+++ b/apps/dokploy/components/dashboard/settings/notifications/show-notifications.tsx
@@ -47,7 +47,7 @@ export const ShowNotifications = () => {
 								{data?.length === 0 ? (
 									<div className="flex flex-col items-center gap-3  min-h-[25vh] justify-center">
 										<Bell />
-										<span className="text-base text-muted-foreground">
+										<span className="text-base text-muted-foreground text-center">
 											To send notifications it is required to set at least 1
 											provider.
 										</span>
--- a/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/details/details-card.tsx
@@ -60,7 +60,7 @@ export function NodeCard({ node, serverId }: Props) {
 							<div className="font-medium">{node.Hostname}</div>
 							<Badge variant="green">{node.ManagerStatus || "Worker"}</Badge>
 						</div>
-						<div className="flex flex-wrap items-center space-x-4">
+						<div className="flex flex-wrap items-center gap-4">
 							<Badge variant="green">TLS Status: {node.TLSStatus}</Badge>
 							<Badge variant="blue">Availability: {node.Availability}</Badge>
 						</div>
--- a/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
+++ b/apps/dokploy/components/dashboard/swarm/monitoring-card.tsx
@@ -72,7 +72,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 	return (
 		<Card className="h-full bg-sidebar  p-2.5 rounded-xl mx-auto w-full">
 			<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
-				<header className="flex items-center justify-between">
+				<header className="flex items-center flex-wrap gap-4 justify-between">
 					<div className="space-y-1">
 						<CardTitle className="text-xl flex flex-row gap-2">
 							<WorkflowIcon className="size-6 text-muted-foreground self-center" />
--- a/apps/dokploy/components/layouts/dashboard-layout.tsx
+++ b/apps/dokploy/components/layouts/dashboard-layout.tsx
@@ -5,9 +5,5 @@ interface Props {
 }

 export const DashboardLayout = ({ children }: Props) => {
-	return (
-		<Page>
-			<div>{children}</div>
-		</Page>
-	);
+	return <Page>{children}</Page>;
 };
--- a/apps/dokploy/components/layouts/onboarding-layout.tsx
+++ b/apps/dokploy/components/layouts/onboarding-layout.tsx
@@ -11,7 +11,7 @@ interface Props {
 export const OnboardingLayout = ({ children }: Props) => {
 	return (
 		<div className="container relative min-h-svh flex-col items-center justify-center flex lg:max-w-none lg:grid lg:grid-cols-2 lg:px-0 w-full">
-			<div className="relative hidden h-full flex-col  p-10 text-white dark:border-r lg:flex">
+			<div className="relative hidden h-full flex-col  p-10 text-primary dark:border-r lg:flex">
 				<div className="absolute inset-0 bg-muted" />
 				<Link
 					href="https://dokploy.com"
@@ -22,35 +22,16 @@ export const OnboardingLayout = ({ children }: Props) => {
 				</Link>
 				<div className="relative z-20 mt-auto">
 					<blockquote className="space-y-2">
-						<p className="text-lg">
+						<p className="text-lg text-primary">
 							&ldquo;The Open Source alternative to Netlify, Vercel,
 							Heroku.&rdquo;
 						</p>
-						{/* <footer className="text-sm">Sofia Davis</footer> */}
 					</blockquote>
 				</div>
 			</div>
 			<div className="w-full">
 				<div className="flex w-full flex-col justify-center space-y-6 max-w-lg mx-auto">
 					{children}
-
-					{/* <p className="px-8 text-center text-sm text-muted-foreground">
-							By clicking continue, you agree to our{" "}
-							<Link
-								href="/terms"
-								className="underline underline-offset-4 hover:text-primary"
-							>
-								Terms of Service
-							</Link>{" "}
-							and{" "}
-							<Link
-								href="/privacy"
-								className="underline underline-offset-4 hover:text-primary"
-							>
-								Privacy Policy
-							</Link>
-							.
-						</p> */}
 				</div>
 				<div className="flex items-center gap-4 justify-center absolute bottom-4 right-4 text-muted-foreground">
 					<Button variant="ghost" size="icon">
--- a/apps/dokploy/components/layouts/project-layout.tsx
+++ b/apps/dokploy/components/layouts/project-layout.tsx
@@ -5,9 +5,5 @@ interface Props {
 }

 export const ProjectLayout = ({ children }: Props) => {
-	return (
-		<div>
-			<Page>{children}</Page>
-		</div>
-	);
+	return <Page>{children}</Page>;
 };
--- a/apps/dokploy/components/layouts/side.tsx
+++ b/apps/dokploy/components/layouts/side.tsx
@@ -676,7 +676,7 @@ export default function Page({ children }: Props) {
 								<Separator orientation="vertical" className="mr-2 h-4" />
 								<Breadcrumb>
 									<BreadcrumbList>
-										<BreadcrumbItem className="hidden md:block">
+										<BreadcrumbItem className="block">
 											<BreadcrumbLink asChild>
 												<Link
 													href={activeItem?.url || "/"}
@@ -686,7 +686,7 @@ export default function Page({ children }: Props) {
 												</Link>
 											</BreadcrumbLink>
 										</BreadcrumbItem>
-										<BreadcrumbSeparator className="hidden md:block" />
+										<BreadcrumbSeparator className="block" />
 										<BreadcrumbItem>
 											<BreadcrumbPage>{activeItem?.title}</BreadcrumbPage>
 										</BreadcrumbItem>
--- a/apps/dokploy/components/shared/breadcrumb-sidebar.tsx
+++ b/apps/dokploy/components/shared/breadcrumb-sidebar.tsx
@@ -28,7 +28,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 						<BreadcrumbList>
 							{list.map((item, index) => (
 								<Fragment key={item.name}>
-									<BreadcrumbItem className="hidden md:block">
+									<BreadcrumbItem className="block">
 										<BreadcrumbLink href={item.href} asChild={!!item.href}>
 											{item.href ? (
 												<Link href={item.href}>{item.name}</Link>
@@ -37,7 +37,7 @@ export const BreadcrumbSidebar = ({ list }: Props) => {
 											)}
 										</BreadcrumbLink>
 									</BreadcrumbItem>
-									<BreadcrumbSeparator className="hidden md:block" />
+									<BreadcrumbSeparator className="block" />
 								</Fragment>
 							))}
 						</BreadcrumbList>
--- a/apps/dokploy/components/ui/sidebar.tsx
+++ b/apps/dokploy/components/ui/sidebar.tsx
@@ -329,7 +329,7 @@ const SidebarInset = React.forwardRef<
 		<main
 			ref={ref}
 			className={cn(
-				"relative flex min-h-svh flex-1 flex-col bg-background",
+				"relative flex min-h-svh  overflow-auto w-full flex-col bg-background",
 				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
 				className,
 			)}
--- a/apps/dokploy/pages/dashboard/project/[projectId].tsx
+++ b/apps/dokploy/pages/dashboard/project/[projectId].tsx
@@ -239,8 +239,8 @@ const Project = (
 			<div className="w-full">
 				<Card className="h-full bg-sidebar  p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
-						<div className="flex justify-between gap-4 w-full items-center">
-							<CardHeader className="">
+						<div className="flex justify-between gap-4 w-full items-center  flex-wrap p-6">
+							<CardHeader className="p-0">
 								<CardTitle className="text-xl flex flex-row gap-2">
 									<FolderInput className="size-6 text-muted-foreground self-center" />
 									{data?.name}
@@ -248,7 +248,7 @@ const Project = (
 								<CardDescription>{data?.description}</CardDescription>
 							</CardHeader>
 							{(auth?.rol === "admin" || user?.canCreateServices) && (
-								<div className="flex flex-row gap-4 flex-wrap px-4">
+								<div className="flex flex-row gap-4 flex-wrap">
 									<ProjectEnvironment projectId={projectId}>
 										<Button variant="outline">Project Environment</Button>
 									</ProjectEnvironment>
--- a/apps/dokploy/pages/dashboard/swarm.tsx
+++ b/apps/dokploy/pages/dashboard/swarm.tsx
@@ -8,11 +8,7 @@ import type { ReactElement } from "react";
 import superjson from "superjson";

 const Dashboard = () => {
-	return (
-		<>
-			<SwarmMonitorCard />
-		</>
-	);
+	return <SwarmMonitorCard />;
 };

 export default Dashboard;