From 604e92ab1ea289fa9d6a013f78205c035afa574d Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Fri, 26 Sep 2025 22:07:06 +0200
Subject: [PATCH] refactor: unify layout across tabs

---
 .../details/components/healthchecks-card.tsx  | 67 +++++++++++--------
 .../app/modules/details/tabs/backups.tsx      |  6 +-
 .../app/modules/details/tabs/docker.tsx       | 54 +++++++++++----
 apps/client/app/modules/details/tabs/info.tsx | 16 +++--
 4 files changed, 92 insertions(+), 51 deletions(-)

diff --git a/apps/client/app/modules/details/components/healthchecks-card.tsx b/apps/client/app/modules/details/components/healthchecks-card.tsx
index 4798f39..616f4c4 100644
--- a/apps/client/app/modules/details/components/healthchecks-card.tsx
+++ b/apps/client/app/modules/details/components/healthchecks-card.tsx
@@ -1,7 +1,7 @@
 import { formatDistanceToNow } from "date-fns";
-import { ScanHeartIcon } from "lucide-react";
+import { HeartIcon } from "lucide-react";
 import { Button } from "~/components/ui/button";
-import { Card } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Switch } from "~/components/ui/switch";
 import type { Volume } from "~/lib/types";
 import { cn } from "~/lib/utils";
@@ -16,34 +16,45 @@ export const HealthchecksCard = ({ volume }: Props) => {
 	});
 
 	return (
-		<Card className="p-6 flex-1 flex flex-col h-full">
-			<div className="flex flex-col flex-1 justify-start">
-				<span className="flex items-center gap-2 mb-4">
-					<ScanHeartIcon className="h-4 w-4" />
-					<h2 className="text-lg font-medium">Health Checks</h2>
-				</span>
-				{volume.lastError && <span className="text-md text-amber-600 ">{volume.lastError}</span>}
-				{volume.status === "mounted" && <span className="text-md text-emerald-500">Healthy</span>}
-				{volume.status !== "unmounted" && (
-					<span className="text-xs text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
-				)}
+		<Card className="flex-1 flex flex-col h-full">
+			<CardHeader>
+				<CardTitle className="flex items-center gap-2">
+					<HeartIcon className="h-4 w-4" />
+					Health Checks
+				</CardTitle>
+				<CardDescription>Monitor and automatically remount volumes on errors to ensure availability.</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="flex flex-col flex-1 justify-start">
+					{volume.lastError && <span className="text-sm text-red-500 ">{volume.lastError}</span>}
+					{volume.status === "mounted" && <span className="text-md text-emerald-500">Healthy</span>}
+					{volume.status !== "unmounted" && (
+						<span className="text-xs text-muted-foreground mb-4">Checked {timeAgo || "never"}</span>
+					)}
 
-				<span className="flex justify-between items-center gap-2">
-					Remount on error
-					<div
-						className={cn(
-							"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
-							Boolean(volume.autoRemount)
-								? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
-								: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
-						)}
-					>
-						<span>{volume.autoRemount ? "Enabled" : "Paused"}</span>
-						<Switch checked={Boolean(volume.autoRemount)} onCheckedChange={() => {}} />
+					<span className="flex justify-between items-center gap-2">
+						<span className="text-sm">Remount on error</span>
+						<div
+							className={cn(
+								"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
+								Boolean(volume.autoRemount)
+									? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
+									: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
+							)}
+						>
+							<span>{volume.autoRemount ? "Enabled" : "Paused"}</span>
+							<Switch checked={Boolean(volume.autoRemount)} onCheckedChange={() => {}} />
+						</div>
+					</span>
+				</div>
+				{volume.status !== "unmounted" && (
+					<div className="flex justify-center">
+						<Button variant="outline" className="mt-4 self-end">
+							Run Health Check
+						</Button>
 					</div>
-				</span>
-			</div>
-			<Button variant="outline">Run Health Check</Button>
+				)}
+			</CardContent>
 		</Card>
 	);
 };
diff --git a/apps/client/app/modules/details/tabs/backups.tsx b/apps/client/app/modules/details/tabs/backups.tsx
index 6debd03..c387689 100644
--- a/apps/client/app/modules/details/tabs/backups.tsx
+++ b/apps/client/app/modules/details/tabs/backups.tsx
@@ -134,14 +134,16 @@ export const VolumeBackupsTabContent = ({ volume }: Props) => {
 	};
 
 	return (
-		<div className="grid gap-4 grid-cols-1 xl:grid-cols-[minmax(0,_2fr)_minmax(260px,_1fr)]">
+		<div className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]">
 			<Form {...form}>
 				<form onSubmit={form.handleSubmit(handleSubmit)} className="grid gap-4">
 					<Card>
 						<CardHeader className="flex flex-row items-center justify-between gap-4">
 							<div>
 								<CardTitle>Backup automation</CardTitle>
-								<CardDescription>Enable scheduled snapshots and off-site replication for this volume.</CardDescription>
+								<CardDescription className="mt-1">
+									Enable scheduled snapshots and off-site replication for this volume.
+								</CardDescription>
 							</div>
 							<FormField
 								control={form.control}
diff --git a/apps/client/app/modules/details/tabs/docker.tsx b/apps/client/app/modules/details/tabs/docker.tsx
index 59ed2c2..477325b 100644
--- a/apps/client/app/modules/details/tabs/docker.tsx
+++ b/apps/client/app/modules/details/tabs/docker.tsx
@@ -1,7 +1,7 @@
-import { Card } from "~/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { CodeBlock } from "~/components/ui/code-block";
 import type { Volume } from "~/lib/types";
 import * as YML from "yaml";
-import { CodeBlock } from "~/components/ui/code-block";
 
 type Props = {
 	volume: Volume;
@@ -22,20 +22,46 @@ export const DockerTabContent = ({ volume }: Props) => {
 		},
 	});
 
+	const dockerRunCommand = `docker run -v ${volume.name}:/path/in/container nginx:latest`;
+
 	return (
-		<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
-			<Card className="p-6 lg:col-span-2 lg:row-span-2">
-				<div className="text-sm text-muted-foreground">
-					This volume can be used in your Docker Compose files by referencing it as an external volume. The example
-					demonstrates how to mount the volume to a service (nginx in this case). Make sure to adjust the path inside
-					the container to fit your application's needs.
-				</div>
-				<CodeBlock code={yamlString} language="yaml" filename="docker-compose.yml" />
-				<div className="text-sm text-muted-foreground">
-					Alternatively, you can use the following command to run a Docker container with the volume mounted:
-				</div>
-				<CodeBlock code={`docker run -v ${volume.name}:/path/in/container nginx:latest`} />
+		<div className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]">
+			<Card>
+				<CardHeader>
+					<CardTitle>Plug-and-play Docker integration</CardTitle>
+					<CardDescription className="mt-2">
+						This volume can be used in your Docker Compose files by referencing it as an external volume. The example
+						demonstrates how to mount the volume to a service (nginx in this case). Make sure to adjust the path inside
+						the container to fit your application's needs
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="relative space-y-6">
+						<div className="space-y-4">
+							<div className="flex flex-col gap-4">
+								<CodeBlock code={yamlString} language="yaml" filename="docker-compose.yml" />
+							</div>
+							<div className="text-sm text-muted-foreground">
+								Alternatively, you can use the following command to run a Docker container with the volume mounted
+							</div>
+							<div className="flex flex-col gap-4">
+								<CodeBlock code={dockerRunCommand} filename="CLI one-liner" />
+							</div>
+						</div>
+					</div>
+				</CardContent>
 			</Card>
+
+			<div className="grid">
+				<Card>
+					<CardHeader>
+						<CardTitle>Best practices</CardTitle>
+						<CardDescription>Validate the automation before enabling it in production.</CardDescription>
+					</CardHeader>
+
+					<CardContent className="space-y-4 text-sm"></CardContent>
+				</Card>
+			</div>
 		</div>
 	);
 };
diff --git a/apps/client/app/modules/details/tabs/info.tsx b/apps/client/app/modules/details/tabs/info.tsx
index c2b25a5..f124551 100644
--- a/apps/client/app/modules/details/tabs/info.tsx
+++ b/apps/client/app/modules/details/tabs/info.tsx
@@ -11,15 +11,17 @@ type Props = {
 
 export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 	return (
-		<div className="grid gap-3 grid-cols-1 lg:grid-cols-4 lg:grid-rows-[auto_auto]">
-			<Card className="p-6 lg:col-span-2 lg:row-span-2">
+		<div className="grid gap-4 xl:grid-cols-[minmax(0,_2.3fr)_minmax(320px,_1fr)]">
+			<Card className="p-6">
 				<CreateVolumeForm initialValues={{ ...volume, ...volume.config }} onSubmit={console.log} />
 			</Card>
-			<div className="lg:col-span-2 lg:row-span-1">
-				<HealthchecksCard volume={volume} />
-			</div>
-			<div className="lg:col-span-2">
-				<StorageChart statfs={statfs} />
+			<div className="grid gap-4">
+				<div className="lg:row-span-1">
+					<HealthchecksCard volume={volume} />
+				</div>
+				<div className="">
+					<StorageChart statfs={statfs} />
+				</div>
 			</div>
 		</div>
 	);