style: redesign respository details page (#739)

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

@@ -8,7 +8,8 @@ import type { GetRepositoryStatsResponse } from "~/client/api-client/types.gen";
 import { ByteSize } from "~/client/components/bytes-size";
 import { useRootLoaderData } from "~/client/hooks/use-root-loader-data";
 import { Button } from "~/client/components/ui/button";
-import { Card, CardContent, CardTitle } from "~/client/components/ui/card";
+import { Card, CardTitle } from "~/client/components/ui/card";
+import { Separator } from "~/client/components/ui/separator";
 import { parseError } from "~/client/lib/errors";
 import { cn } from "~/client/lib/utils";
 import { toast } from "sonner";
@@ -64,14 +65,15 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 
 	const hasStats = !!stats && (storedSize > 0 || uncompressedSize > 0 || snapshotsCount > 0);
 
+	const storedPercent = uncompressedSize > 0 ? (storedSize / uncompressedSize) * 100 : 0;
+
 	return (
 		<Card className="flex flex-col px-6 py-6">
-			<div className="flex items-start justify-between gap-3 pb-4">
+			<div className="flex items-start justify-between mb-5">
-				<CardTitle className="flex items-center gap-2 w-full">
+				<CardTitle className="flex items-center gap-2">
-					<div className="flex items-center gap-2 flex-1">
+					<Archive className="h-4 w-4 text-muted-foreground" />
-						<Archive className="h-5 w-5 text-muted-foreground" />
 					Compression Statistics
-					</div>
+				</CardTitle>
 				<Button
 					type="button"
 					variant="outline"
@@ -80,9 +82,8 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 					disabled={refreshStats.isPending}
 					title="Refresh statistics"
 				>
-						<RefreshCw className={refreshStats.isPending ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
+					<RefreshCw className={cn("h-4 w-4", { "animate-spin": refreshStats.isPending })} />
 				</Button>
-				</CardTitle>
 			</div>
 			<p className={cn("text-sm text-muted-foreground", { hidden: !isPending })}>Loading compression statistics...</p>
 			<div className={cn("space-y-2", { hidden: !error || isPending })}>
@@ -92,29 +93,32 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 			<p className={cn("text-sm text-muted-foreground", { hidden: isPending || !!error || hasStats })}>
 				Stats will be populated after your first backup. You can also refresh them manually.
 			</p>
-			<CardContent
+			<div className={cn({ hidden: isPending || !!error || !hasStats })}>
-				className={cn("grid grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-4 px-0", {
+				<div className="space-y-4 mb-6">
-					hidden: isPending || !!error || !hasStats,
+					<div>
-				})}
+						<div className="flex items-center justify-between text-sm mb-1.5">
-			>
+							<span className="text-muted-foreground">Stored</span>
-				<div className="flex flex-col gap-1.5">
+							<ByteSize base={1024} bytes={storedSize} className="font-mono font-semibold text-sm" />
-					<div className="text-sm font-medium text-muted-foreground">Stored Size</div>
-					<div className="flex items-baseline gap-2">
-						<ByteSize base={1024} bytes={storedSize} className="text-xl font-semibold text-foreground font-mono" />
 						</div>
-				</div>
+						<div className="h-3 bg-muted/50 rounded-full overflow-hidden">
-
+							<div
-				<div className="flex flex-col gap-1.5">
+								className="h-full bg-strong-accent/80 rounded-full transition-all"
-					<div className="text-sm font-medium text-muted-foreground">Uncompressed</div>
+								style={{ width: `${storedPercent}%` }}
-					<div className="flex items-baseline gap-2">
-						<ByteSize
-							base={1024}
-							bytes={uncompressedSize}
-							className="text-xl font-semibold text-foreground font-mono"
 							/>
 						</div>
 					</div>
-
+					<div>
+						<div className="flex items-center justify-between text-sm mb-1.5">
+							<span className="text-muted-foreground">Uncompressed</span>
+							<ByteSize base={1024} bytes={uncompressedSize} className="font-mono font-semibold text-sm" />
+						</div>
+						<div className="h-3 bg-muted/50 rounded-full overflow-hidden">
+							<div className="h-full bg-muted-foreground/30 rounded-full" style={{ width: "100%" }} />
+						</div>
+					</div>
+				</div>
+				<Separator className="mb-4" />
+				<div className="grid grid-cols-2 gap-4">
 					<div className="flex flex-col gap-1.5">
 						<div className="text-sm font-medium text-muted-foreground">Space Saved</div>
 						<div className="flex items-baseline gap-2">
@@ -122,7 +126,6 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 							<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="text-sm font-medium text-muted-foreground">Ratio</div>
 						<div className="flex items-baseline gap-2">
@@ -131,19 +134,24 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
 							</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="text-sm font-medium text-muted-foreground">Snapshots</div>
 						<div className="flex items-baseline gap-2">
 							<span className="text-xl font-semibold text-foreground font-mono">
 								{snapshotsCount.toLocaleString(locale)}
 							</span>
-						<span className="text-xs text-muted-foreground font-mono">
+						</div>
-							{compressionProgressPercent.toFixed(1)}% compressed
+					</div>
+					<div className="flex flex-col gap-1.5">
+						<div className="text-sm font-medium text-muted-foreground">Compressed</div>
+						<div className="flex items-baseline gap-2">
+							<span className="text-xl font-semibold text-foreground font-mono">
+								{compressionProgressPercent.toFixed(1)}%
 							</span>
 						</div>
 					</div>
-			</CardContent>
+				</div>
+			</div>
 		</Card>
 	);
 }

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

@@ -1,9 +1,27 @@
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
-import { ChevronDown, Pencil, Square, Stethoscope, Trash2, Unlock } from "lucide-react";
+import {
+	Archive,
+	ChevronDown,
+	Clock,
+	Database,
+	FolderOpen,
+	Globe,
+	HardDrive,
+	Lock,
+	Pencil,
+	Settings,
+	Shield,
+	Square,
+	Stethoscope,
+	Trash2,
+	Unlock,
+} from "lucide-react";
 import { Card, CardContent, CardTitle } from "~/client/components/ui/card";
+import { Badge } from "~/client/components/ui/badge";
 import { Button } from "~/client/components/ui/button";
+import { Separator } from "~/client/components/ui/separator";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -29,14 +47,12 @@ import {
 	unlockRepositoryMutation,
 } from "~/client/api-client/@tanstack/react-query.gen";
 import type { RepositoryConfig } from "@zerobyte/core/restic";
-import { TimeAgo } from "~/client/components/time-ago";
 import { useTimeFormat } from "~/client/lib/datetime";
 import { DoctorReport } from "../components/doctor-report";
 import { parseError } from "~/client/lib/errors";
 import { useNavigate } from "@tanstack/react-router";
 import { CompressionStatsChart } from "../components/compression-stats-chart";
 import { cn } from "~/client/lib/utils";
-import { ManagedBadge } from "~/client/components/managed-badge";
 
 type Props = {
 	repository: Repository;
@@ -48,8 +64,21 @@ const getEffectiveLocalPath = (repository: Repository): string | null => {
 	return repository.config.path;
 };
 
+type ConfigRowProps = { icon: React.ReactNode; label: string; value: string; mono?: boolean; valueClassName?: string };
+function ConfigRow({ icon, label, value, mono, valueClassName }: ConfigRowProps) {
+	return (
+		<div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
+			<span className="text-muted-foreground shrink-0">{icon}</span>
+			<span className="text-sm text-muted-foreground w-40 shrink-0">{label}</span>
+			<span className={cn("text-sm break-all", { "font-mono bg-muted/50 px-2 py-0.5 rounded": mono }, valueClassName)}>
+				{value}
+			</span>
+		</div>
+	);
+}
+
 export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) => {
-	const { formatDateTime } = useTimeFormat();
+	const { formatDateTime, formatTimeAgo } = useTimeFormat();
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const navigate = useNavigate();
 
@@ -104,16 +133,38 @@ export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) =>
 	const hasCaCert = Boolean(config.cacert);
 	const hasLastError = Boolean(repository.lastError);
 	const hasInsecureTlsConfig = config.insecureTls !== undefined;
-	const isTlsValidationDisabled = config.insecureTls === true;
 
 	return (
 		<>
 			<div className="flex flex-col gap-6 @container">
-				<div className="flex flex-col @medium:flex-row items-start @medium:items-center justify-between gap-4">
+				<Card className="px-6 py-5">
+					<div className="flex flex-col @wide:flex-row @wide:items-center justify-between gap-4">
+						<div className="flex items-center gap-4">
+							<div className="hidden @medium:flex items-center justify-center w-10 h-10 rounded-lg bg-muted/50 border border-border/50">
+								<Database className="h-5 w-5 text-muted-foreground" />
+							</div>
 							<div>
 								<div className="flex items-center gap-2">
-							<h2 className="text-lg font-semibold tracking-tight">Repository Settings</h2>
+									<h2 className="text-lg font-semibold tracking-tight">{repository.name}</h2>
-							{repository.provisioningId && <ManagedBadge />}
+									<Separator orientation="vertical" className="h-4 mx-1" />
+									<Badge variant="outline" className="capitalize gap-1.5">
+										<span
+											className={cn("w-2 h-2 rounded-full shrink-0", {
+												"bg-success": repository.status === "healthy",
+												"bg-red-500": repository.status === "error",
+												"bg-amber-500": repository.status !== "healthy" && repository.status !== "error",
+												"animate-pulse": repository.status === "doctor",
+											})}
+										/>
+										{repository.status || "Unknown"}
+									</Badge>
+									<Badge variant="secondary">{repository.type}</Badge>
+									{repository.provisioningId && <Badge variant="secondary">Managed</Badge>}
+								</div>
+								<p className="text-sm text-muted-foreground mt-0.5">
+									Created {formatDateTime(repository.createdAt)} &middot; Last checked&nbsp;
+									{formatTimeAgo(repository.lastChecked)}
+								</p>
 							</div>
 						</div>
 						<div className="flex items-center gap-2">
@@ -176,12 +227,23 @@ export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) =>
 							</DropdownMenu>
 						</div>
 					</div>
+				</Card>
 
-				<div className="grid grid-cols-1 @wide:grid-cols-2 gap-6 items-stretch">
+				{hasLastError && (
-					<div className="flex flex-col gap-6">
 					<Card className="px-6 py-6">
-							<CardTitle>Overview</CardTitle>
+						<div className="space-y-2">
-							<CardContent className="grid grid-cols-1 @medium:grid-cols-2 gap-y-6 gap-x-4 px-0">
+							<p className="text-sm font-medium text-destructive">Last Error</p>
+							<p className="text-sm text-muted-foreground wrap-break-word">{repository.lastError}</p>
+						</div>
+					</Card>
+				)}
+
+				<div className="grid grid-cols-1 @wide:grid-cols-2 gap-6">
+					<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
+
+					<Card className="px-6 py-6">
+						<CardTitle className="mb-4">Overview</CardTitle>
+						<CardContent className="grid grid-cols-2 gap-y-4 gap-x-6 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>
@@ -203,74 +265,67 @@ export const RepositoryInfoTabContent = ({ repository, initialStats }: Props) =>
 								<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>
+								<div className="text-sm font-medium text-muted-foreground">Last Checked</div>
-									<p className="text-sm flex items-center gap-2">
+								<p className="text-sm flex items-center gap-1.5">
-										<span
+									<Clock className="h-3 w-3 text-muted-foreground" />
-											className={cn("w-2 h-2 rounded-full", {
+									{formatTimeAgo(repository.lastChecked)}
-												"bg-success": 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>
-									<TimeAgo date={repository.lastChecked} className="text-sm" />
-								</div>
 							{hasLocalPath && (
-									<div className="flex flex-col gap-1 @medium:col-span-2">
+								<div className="flex flex-col gap-1 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-success">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-success", { hidden: isTlsValidationDisabled })}>Enabled</span>
-										</p>
-									</div>
-								)}
 						</CardContent>
 					</Card>
-
-						{hasLastError && (
-							<Card className="flex flex-col px-6 py-6">
-								<div className="space-y-2">
-									<p className="text-sm font-medium text-destructive">Last Error</p>
-									<p className="text-sm text-muted-foreground wrap-break-word">{repository.lastError}</p>
 				</div>
-							</Card>
+
+				<Card className="px-6 py-6">
+					<CardTitle className="flex items-center gap-2 mb-5">
+						<Settings className="h-4 w-4 text-muted-foreground" />
+						Configuration
+					</CardTitle>
+					<div className="space-y-0 divide-y divide-border/50">
+						<ConfigRow icon={<HardDrive className="h-4 w-4" />} label="Backend" value={repository.type} />
+						{hasLocalPath && (
+							<ConfigRow
+								icon={<FolderOpen className="h-4 w-4" />}
+								label="Local Path"
+								value={effectiveLocalPath!}
+								mono
+							/>
+						)}
+						<ConfigRow
+							icon={<Archive className="h-4 w-4" />}
+							label="Compression Mode"
+							value={repository.compressionMode || "off"}
+						/>
+						<ConfigRow
+							icon={<Globe className="h-4 w-4" />}
+							label="Management"
+							value={repository.provisioningId ? "Provisioned" : "Manual"}
+						/>
+						{hasCaCert && (
+							<ConfigRow
+								icon={<Lock className="h-4 w-4" />}
+								label="CA Certificate"
+								value="Configured"
+								valueClassName="text-success"
+							/>
+						)}
+						{hasInsecureTlsConfig && (
+							<ConfigRow
+								icon={<Shield className="h-4 w-4" />}
+								label="TLS Validation"
+								value={config.insecureTls ? "Disabled" : "Enabled"}
+								valueClassName={config.insecureTls ? "text-red-500" : "text-success"}
+							/>
 						)}
-
-						<div className="flex-1 flex flex-col">
-							<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
-						</div>
-					</div>
-
-					<div className="flex flex-col gap-6">
-						<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
-
-						<Card className="px-6 py-6 flex-1">
-							<CardTitle>Configuration</CardTitle>
-							<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>
 				</Card>
-					</div>
+
-				</div>
+				<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
 			</div>
 
 			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>