style: improve repo details layout (#596)

app/client/modules/repositories/components/compression-stats-chart.tsx

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Archive } from "lucide-react";
 import { getRepositoryStatsOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { ByteSize } from "~/client/components/bytes-size";
-import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Card, CardContent, CardTitle } from "~/client/components/ui/card";
 import type { GetRepositoryStatsResponse } from "~/client/api-client/types.gen";
 
 type Props = {
@@ -53,9 +53,9 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 
 	if (error) {
 		return (
-			<Card className="p-6">
+			<Card className="p-6 border-red-500/20 bg-red-500/5">
-				<p className="text-sm font-medium text-destructive">Failed to load compression statistics</p>
+				<p className="text-sm font-medium text-red-500">Failed to load compression statistics</p>
-				<p className="mt-2 text-sm text-muted-foreground wrap-break-word">{error.message}</p>
+				<p className="mt-2 text-sm text-red-500/80 wrap-break-word">{error.message}</p>
 			</Card>
 		);
 	}
@@ -71,67 +71,61 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 	}
 
 	return (
-		<Card className="flex flex-col h-full">
+		<Card className="flex flex-col px-6 py-6">
-			<CardHeader className="pb-4">
+			<div className="pb-4">
-				<CardTitle className="flex items-center gap-2 text-base font-semibold">
+				<CardTitle className="flex items-center gap-2">
-					<Archive className="h-4 w-4" />
+					<Archive className="h-5 w-5 text-muted-foreground" />
 					Compression Statistics
 				</CardTitle>
-			</CardHeader>
+			</div>
-			<CardContent className="flex-1">
+			<div>
-				<div className="grid grid-cols-2 md:grid-cols-3 gap-y-6 gap-x-6">
+				<CardContent className="grid grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-4 px-0">
 					<div className="flex flex-col gap-1.5">
-						<div className="flex items-center gap-2 text-muted-foreground">
+						<div className="text-sm font-medium text-muted-foreground">Stored Size</div>
-							<span className="text-xs font-medium uppercase tracking-wider">Stored Size</span>
-						</div>
 						<div className="flex items-baseline gap-2">
-							<ByteSize base={1024} bytes={storedSize} className="text-2xl font-bold font-mono text-foreground" />
+							<ByteSize base={1024} bytes={storedSize} className="text-xl font-semibold text-foreground font-mono" />
 						</div>
 					</div>
 
 					<div className="flex flex-col gap-1.5">
-						<div className="flex items-center gap-2 text-muted-foreground">
+						<div className="text-sm font-medium text-muted-foreground">Uncompressed</div>
-							<span className="text-xs font-medium uppercase tracking-wider">Uncompressed</span>
-						</div>
 						<div className="flex items-baseline gap-2">
-							<ByteSize base={1024} bytes={uncompressedSize} className="text-2xl font-bold font-mono text-foreground" />
+							<ByteSize
+								base={1024}
+								bytes={uncompressedSize}
+								className="text-xl font-semibold text-foreground font-mono"
+							/>
 						</div>
 					</div>
 
 					<div className="flex flex-col gap-1.5">
-						<div className="flex items-center gap-2 text-muted-foreground">
+						<div className="text-sm font-medium text-muted-foreground">Space Saved</div>
-							<span className="text-xs font-medium uppercase tracking-wider">Space Saved</span>
-						</div>
 						<div className="flex items-baseline gap-2">
-							<span className="text-2xl font-bold font-mono text-foreground">{spaceSavingPercent.toFixed(1)}%</span>
+							<span className="text-xl font-semibold text-foreground font-mono">{spaceSavingPercent.toFixed(1)}%</span>
-							<ByteSize base={1024} bytes={savedSize} className="text-sm text-muted-foreground font-mono" />
+							<ByteSize base={1024} bytes={savedSize} className="text-xs text-muted-foreground font-mono" />
 						</div>
 					</div>
 
 					<div className="flex flex-col gap-1.5">
-						<div className="flex items-center gap-2 text-muted-foreground">
+						<div className="text-sm font-medium text-muted-foreground">Ratio</div>
-							<span className="text-xs font-medium uppercase tracking-wider">Ratio</span>
-						</div>
 						<div className="flex items-baseline gap-2">
-							<span className="text-2xl font-bold font-mono text-foreground">
+							<span className="text-xl font-semibold text-foreground font-mono">
 								{compressionRatio > 0 ? `${compressionRatio.toFixed(2)}x` : "—"}
 							</span>
 						</div>
 					</div>
 
-					<div className="flex flex-col gap-1.5">
+					<div className="flex flex-col gap-1.5 lg:col-span-2">
-						<div className="flex items-center gap-2 text-muted-foreground">
+						<div className="text-sm font-medium text-muted-foreground">Snapshots</div>
-							<span className="text-xs font-medium uppercase tracking-wider">Snapshots</span>
-						</div>
 						<div className="flex items-baseline gap-2">
-							<span className="text-2xl font-bold font-mono text-foreground">{snapshotsCount.toLocaleString()}</span>
+							<span className="text-xl font-semibold text-foreground font-mono">{snapshotsCount.toLocaleString()}</span>
-							<span className="text-sm text-muted-foreground font-mono">
+							<span className="text-xs text-muted-foreground font-mono">
 								{compressionProgressPercent.toFixed(1)}% compressed
 							</span>
 						</div>
 					</div>
-				</div>
+				</CardContent>
-			</CardContent>
+			</div>
 		</Card>
 	);
 }

app/client/modules/repositories/components/doctor-report.tsx

@@ -2,6 +2,7 @@ import { AlertCircle, CheckCircle2 } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/client/components/ui/collapsible";
 import { formatDateTime } from "~/client/lib/datetime";
 import { cn, safeJsonParse } from "~/client/lib/utils";
+import { Card, CardTitle } from "~/client/components/ui/card";
 
 type DoctorStep = {
 	step: string;
@@ -23,66 +24,69 @@ type Props = {
 
 export const DoctorReport = ({ result, repositoryStatus }: Props) => {
 	return (
-		<div>
+		<Card className="px-6 py-6 flex flex-col gap-4 h-full">
-			<h3 className="text-lg font-semibold">Doctor Report</h3>
+			<div className="flex items-center justify-between">
+				<CardTitle>Doctor Report</CardTitle>
+				{result && (
+					<span className="text-xs text-muted-foreground bg-muted/50 px-2 py-1 rounded-md">
+						{formatDateTime(result.completedAt)}
+					</span>
+				)}
+			</div>
+
 			{result && (
 				<div className="space-y-2">
-					<span className="text-xs text-muted-foreground">Completed {formatDateTime(result.completedAt)}</span>
+					{result.steps.map((step) => (
-					<div className="space-y-2 mt-2">
+						<Collapsible key={step.step} className="border border-border/50 rounded-lg overflow-hidden group">
-						{result.steps.map((step) => (
+							<CollapsibleTrigger className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors">
-							<Collapsible key={step.step} className="border rounded overflow-hidden bg-muted/30 group">
+								<span className="text-sm font-medium capitalize">{step.step.replaceAll("_", " ")}</span>
-								<CollapsibleTrigger className="w-full flex items-center justify-start p-3 hover:bg-muted/50 transition-colors">
+								{step.success ? (
-									<div className="flex items-center gap-3">
+									<CheckCircle2 className="h-4 w-4 text-emerald-500" />
-										<span className="text-sm font-medium">{step.step.replaceAll("_", " ")}</span>
+								) : (
-										{step.success ? (
+									<AlertCircle className="h-4 w-4 text-red-500" />
-											<CheckCircle2 className="h-4 w-4 text-green-500" />
+								)}
-										) : (
+							</CollapsibleTrigger>
-											<AlertCircle className="h-4 w-4 text-red-500" />
+							<CollapsibleContent className="border-t border-border/50 bg-muted/30">
-										)}
+								<div className="p-3 space-y-3">
-									</div>
+									{step.output && (
-								</CollapsibleTrigger>
+										<pre className="text-xs font-mono bg-background p-3 rounded-md border border-border/50 overflow-auto max-h-50 whitespace-pre-wrap">
-								<CollapsibleContent className="border-t bg-muted/50">
+											{safeJsonParse(step.output) ? JSON.stringify(safeJsonParse(step.output), null, 2) : step.output}
-									<div className="p-2 space-y-3">
+										</pre>
-										{step.output && (
+									)}
-											<pre className="text-xs font-mono bg-background/50 p-3 border overflow-auto max-h-50 whitespace-pre-wrap">
+									{step.error && (
-												{safeJsonParse(step.output) ? JSON.stringify(safeJsonParse(step.output), null, 2) : step.output}
+										<div className="space-y-2">
+											<div className="text-[10px] uppercase font-bold text-red-500/70 tracking-wider">Error</div>
+											<pre className="text-xs font-mono bg-red-500/10 text-red-500 p-3 rounded-md border border-red-500/20 overflow-auto whitespace-pre-wrap">
+												{step.error}
 											</pre>
-										)}
+										</div>
-										{step.error && (
+									)}
-											<div className="space-y-1.5">
+									{!step.output && !step.error && (
-												<div className="text-[10px] uppercase font-bold text-red-500/70 px-1">Error</div>
+										<div className="text-sm text-muted-foreground italic">No output recorded</div>
-												<pre className="text-xs font-mono bg-red-500/5 text-red-500 p-3 border border-red-500/20 overflow-auto whitespace-pre-wrap">
+									)}
-													{step.error}
+								</div>
-												</pre>
+							</CollapsibleContent>
-											</div>
+						</Collapsible>
-										)}
+					))}
-										{!step.output && !step.error && (
-											<div className="text-xs text-muted-foreground italic px-1">No output recorded</div>
-										)}
-									</div>
-								</CollapsibleContent>
-							</Collapsible>
-						))}
-					</div>
 				</div>
 			)}
 			<div
-				className={cn("mt-2 bg-muted/30 border p-6 text-center", {
+				className={cn("bg-muted/30 border border-border/50 rounded-lg p-6 text-center", {
 					hidden: result != null || repositoryStatus === "doctor",
 				})}
 			>
 				<p className="text-sm text-muted-foreground">No doctor report available.</p>
 			</div>
 			<div
-				className={cn("mt-2 border p-6 text-center", {
+				className={cn("border border-border/50 rounded-lg p-6 text-center bg-muted/20", {
 					hidden: repositoryStatus !== "doctor",
 				})}
 			>
 				<div className="flex items-center justify-center gap-2">
 					<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-					<p className="text-sm ">Doctor operation running...</p>
+					<p className="text-sm font-medium">Doctor operation running...</p>
 				</div>
 			</div>
-		</div>
+		</Card>
 	);
 };

app/client/modules/repositories/tabs/info.tsx

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
 import { Pencil, Square, Stethoscope, Trash2, Unlock } from "lucide-react";
-import { Card } from "~/client/components/ui/card";
+import { Card, CardContent, CardTitle } from "~/client/components/ui/card";
 import { Button } from "~/client/components/ui/button";
 import {
 	AlertDialog,
@@ -106,135 +106,149 @@ export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) =>
 
 	return (
 		<>
-			<div className="grid gap-4">
+			<div className="flex flex-col gap-6 @container">
-				<Card className="p-6 @container">
+				<div className="flex flex-col @medium:flex-row items-start @medium:items-center justify-between gap-4">
-					<div className="flex flex-col @xl:flex-row items-start @xl:items-center justify-between gap-4">
-						<div>
-							<span className="text-lg font-semibold">Repository Settings</span>
-						</div>
-						<div className="flex flex-col @xl:flex-row w-full @xl:w-auto gap-2">
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => navigate({ to: `/repositories/${repository.shortId}/edit` })}
-							>
-								<Pencil className="h-4 w-4 mr-2" />
-								Edit
-							</Button>
-							<Button
-								type="button"
-								variant="destructive"
-								loading={cancelDoctor.isPending}
-								onClick={() => cancelDoctor.mutate({ path: { shortId: repository.shortId } })}
-								className={cn({ hidden: !isDoctorRunning })}
-							>
-								<Square className="h-4 w-4 mr-2" />
-								<span>Cancel doctor</span>
-							</Button>
-							<Button
-								type="button"
-								onClick={() => startDoctor.mutate({ path: { shortId: repository.shortId } })}
-								disabled={startDoctor.isPending}
-								className={cn({ hidden: isDoctorRunning })}
-							>
-								<Stethoscope className="h-4 w-4 mr-2" />
-								Run doctor
-							</Button>
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => unlockRepo.mutate({ path: { shortId: repository.shortId } })}
-								loading={unlockRepo.isPending}
-							>
-								<Unlock className="h-4 w-4 mr-2" />
-								Unlock
-							</Button>
-							<Button
-								type="button"
-								variant="destructive"
-								onClick={() => setShowDeleteConfirm(true)}
-								disabled={deleteRepo.isPending}
-							>
-								<Trash2 className="h-4 w-4 mr-2" />
-								Delete
-							</Button>
-						</div>
-					</div>
-
 					<div>
-						<h3 className="text-lg font-semibold mb-4">Current Configuration</h3>
+						<h2 className="text-lg font-semibold tracking-tight">Repository Settings</h2>
-						<div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
+					</div>
-							<div>
+					<div className="flex flex-wrap items-center gap-2">
-								<div className="text-sm font-medium text-muted-foreground">Name</div>
+						<Button
-								<p className="mt-1 text-sm">{repository.name}</p>
+							type="button"
-							</div>
+							variant="outline"
-							<div>
+							onClick={() => navigate({ to: `/repositories/${repository.shortId}/edit` })}
-								<div className="text-sm font-medium text-muted-foreground">Compression mode</div>
+						>
-								<p className="mt-1 text-sm">{repository.compressionMode || "off"}</p>
+							<Pencil className="h-4 w-4 mr-2" />
-							</div>
+							Edit
+						</Button>
+						<Button
+							type="button"
+							variant="destructive"
+							className={cn({ hidden: !isDoctorRunning })}
+							loading={cancelDoctor.isPending}
+							onClick={() => cancelDoctor.mutate({ path: { shortId: repository.shortId } })}
+						>
+							<Square className="h-4 w-4 mr-2" />
+							<span>Cancel doctor</span>
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							className={cn({ hidden: isDoctorRunning })}
+							onClick={() => startDoctor.mutate({ path: { shortId: repository.shortId } })}
+							disabled={startDoctor.isPending}
+						>
+							<Stethoscope className="h-4 w-4 mr-2" />
+							Run doctor
+						</Button>
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => unlockRepo.mutate({ path: { shortId: repository.shortId } })}
+							loading={unlockRepo.isPending}
+						>
+							<Unlock className="h-4 w-4 mr-2" />
+							Unlock
+						</Button>
+						<Button
+							type="button"
+							variant="destructive"
+							onClick={() => setShowDeleteConfirm(true)}
+							disabled={deleteRepo.isPending}
+						>
+							<Trash2 className="h-4 w-4 mr-2" />
+							Delete
+						</Button>
+					</div>
+				</div>
+
+				<div className="grid grid-cols-1 @wide:grid-cols-2 gap-6 items-stretch">
+					<div className="flex flex-col gap-6">
+						<Card className="px-6 py-6">
+							<CardTitle>Overview</CardTitle>
+							<CardContent className="grid grid-cols-1 @medium:grid-cols-2 gap-y-6 gap-x-4 px-0">
+								<div className="flex flex-col gap-1">
+									<div className="text-sm font-medium text-muted-foreground">Name</div>
+									<p className="text-sm">{repository.name}</p>
+								</div>
+								<div className="flex flex-col gap-1">
+									<div className="text-sm font-medium text-muted-foreground">Backend</div>
+									<p className="text-sm">{repository.type}</p>
+								</div>
+								<div className="flex flex-col gap-1">
+									<div className="text-sm font-medium text-muted-foreground">Compression Mode</div>
+									<p className="text-sm">{repository.compressionMode || "off"}</p>
+								</div>
+								<div className="flex flex-col gap-1">
+									<div className="text-sm font-medium text-muted-foreground">Created</div>
+									<p className="text-sm">{formatDateTime(repository.createdAt)}</p>
+								</div>
+								<div className="flex flex-col gap-1">
+									<div className="text-sm font-medium text-muted-foreground">Status</div>
+									<p className="text-sm flex items-center gap-2">
+										<span
+											className={cn("w-2 h-2 rounded-full", {
+												"bg-emerald-500": repository.status === "healthy",
+												"bg-red-500": repository.status === "error",
+												"bg-amber-500": repository.status !== "healthy" && repository.status !== "error",
+												"animate-pulse": repository.status === "doctor",
+											})}
+										/>
+										<span className="capitalize">{repository.status || "Unknown"}</span>
+									</p>
+								</div>
+								<div className="flex flex-col gap-1">
+									<div className="text-sm font-medium text-muted-foreground">Last Checked</div>
+									<p className="text-sm">{formatTimeAgo(repository.lastChecked)}</p>
+								</div>
+								{hasLocalPath && (
+									<div className="flex flex-col gap-1 @medium:col-span-2">
+										<div className="text-sm font-medium text-muted-foreground">Local Path</div>
+										<p className="text-sm font-mono bg-muted/50 p-2 rounded-md break-all">{effectiveLocalPath}</p>
+									</div>
+								)}
+								{hasCaCert && (
+									<div className="flex flex-col gap-1">
+										<div className="text-sm font-medium text-muted-foreground">CA Certificate</div>
+										<p className="text-sm text-green-500">Configured</p>
+									</div>
+								)}
+								{hasInsecureTlsConfig && (
+									<div className="flex flex-col gap-1">
+										<div className="text-sm font-medium text-muted-foreground">TLS Validation</div>
+										<p className="text-sm">
+											<span className={cn("text-red-500", { hidden: !isTlsValidationDisabled })}>Disabled</span>
+											<span className={cn("text-green-500", { hidden: isTlsValidationDisabled })}>Enabled</span>
+										</p>
+									</div>
+								)}
+							</CardContent>
+						</Card>
+
+						{hasLastError && (
+							<Card className="px-6 py-6 border-red-500/20 bg-red-500/5">
+								<h3 className="text-lg font-medium text-red-500 mb-2">Last Error</h3>
+								<p className="text-sm text-red-500/90 font-mono wrap-break-word">{repository.lastError}</p>
+							</Card>
+						)}
+
+						<div className="flex-1 flex flex-col">
+							<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
 						</div>
 					</div>
 
-					<div>
+					<div className="flex flex-col gap-6">
-						<h3 className="text-lg font-semibold mb-4">Repository Information</h3>
+						<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
-						<div className="grid grid-cols-1 @xl:grid-cols-2 gap-4">
+
-							<div>
+						<Card className="px-6 py-6 flex-1">
-								<div className="text-sm font-medium text-muted-foreground">Backend</div>
+							<CardTitle>Configuration</CardTitle>
-								<p className="mt-1 text-sm">{repository.type}</p>
+							<div className="bg-muted/50 rounded-md p-4 max-w-full">
+								<pre className="text-sm overflow-auto font-mono whitespace-pre-wrap">
+									{JSON.stringify(repository.config, null, 2)}
+								</pre>
 							</div>
-							<div>
+						</Card>
-								<div className="text-sm font-medium text-muted-foreground">Status</div>
-								<p className="mt-1 text-sm">{repository.status || "unknown"}</p>
-							</div>
-							<div className={cn({ hidden: !hasLocalPath })}>
-								<div className="text-sm font-medium text-muted-foreground">Local path</div>
-								<p className="mt-1 text-sm font-mono">{effectiveLocalPath}</p>
-							</div>
-							<div>
-								<div className="text-sm font-medium text-muted-foreground">Created at</div>
-								<p className="mt-1 text-sm">{formatDateTime(repository.createdAt)}</p>
-							</div>
-							<div>
-								<div className="text-sm font-medium text-muted-foreground">Last checked</div>
-								<p className="mt-1 text-sm">{formatTimeAgo(repository.lastChecked)}</p>
-							</div>
-							<div className={cn({ hidden: !hasCaCert })}>
-								<div className="text-sm font-medium text-muted-foreground">CA Certificate</div>
-								<p className="mt-1 text-sm">
-									<span className="text-green-500">configured</span>
-								</p>
-							</div>
-							<div className={cn({ hidden: !hasInsecureTlsConfig })}>
-								<div className="text-sm font-medium text-muted-foreground">TLS Certificate Validation</div>
-								<p className="mt-1 text-sm">
-									<span className={cn("text-red-500", { hidden: !isTlsValidationDisabled })}>disabled</span>
-									<span className={cn("text-green-500", { hidden: isTlsValidationDisabled })}>enabled</span>
-								</p>
-							</div>
-						</div>
 					</div>
-
+				</div>
-					<div>
-						<div className={cn({ hidden: !hasLastError })}>
-							<div className="flex items-center justify-between mb-4">
-								<h3 className="text-lg font-semibold text-red-500">Last Error</h3>
-							</div>
-							<div className="bg-red-500/10 border border-red-500/20 rounded-md p-4">
-								<p className="text-sm text-red-500 wrap-break-word">{repository.lastError}</p>
-							</div>
-						</div>
-
-						<div>
-							<h3 className="text-lg font-semibold mb-4">Configuration</h3>
-							<div className="bg-muted/50 rounded-md p-4">
-								<pre className="text-sm overflow-auto">{JSON.stringify(repository.config, null, 2)}</pre>
-							</div>
-						</div>
-					</div>
-
-					<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
-				</Card>
-				<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
 			</div>
 
 			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>