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,25 +65,25 @@ 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">
-				<CardTitle className="flex items-center gap-2 w-full">
-					<div className="flex items-center gap-2 flex-1">
-						<Archive className="h-5 w-5 text-muted-foreground" />
-						Compression Statistics
-					</div>
-					<Button
-						type="button"
-						variant="outline"
-						size="sm"
-						onClick={() => refreshStats.mutate({ path: { shortId: repositoryShortId } })}
-						disabled={refreshStats.isPending}
-						title="Refresh statistics"
-					>
-						<RefreshCw className={refreshStats.isPending ? "h-4 w-4 animate-spin" : "h-4 w-4"} />
-					</Button>
+			<div className="flex items-start justify-between mb-5">
+				<CardTitle className="flex items-center gap-2">
+					<Archive className="h-4 w-4 text-muted-foreground" />
+					Compression Statistics
 				</CardTitle>
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onClick={() => refreshStats.mutate({ path: { shortId: repositoryShortId } })}
+					disabled={refreshStats.isPending}
+					title="Refresh statistics"
+				>
+					<RefreshCw className={cn("h-4 w-4", { "animate-spin": refreshStats.isPending })} />
+				</Button>
 			</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,58 +93,65 @@ 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
-				className={cn("grid grid-cols-2 lg:grid-cols-3 gap-y-6 gap-x-4 px-0", {
-					hidden: isPending || !!error || !hasStats,
-				})}
-			>
-				<div className="flex flex-col gap-1.5">
-					<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 className={cn({ hidden: isPending || !!error || !hasStats })}>
+				<div className="space-y-4 mb-6">
+					<div>
+						<div className="flex items-center justify-between text-sm mb-1.5">
+							<span className="text-muted-foreground">Stored</span>
+							<ByteSize base={1024} bytes={storedSize} className="font-mono font-semibold text-sm" />
+						</div>
+						<div className="h-3 bg-muted/50 rounded-full overflow-hidden">
+							<div
+								className="h-full bg-strong-accent/80 rounded-full transition-all"
+								style={{ width: `${storedPercent}%` }}
+							/>
+						</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>
-
-				<div className="flex flex-col gap-1.5">
-					<div className="text-sm font-medium text-muted-foreground">Uncompressed</div>
-					<div className="flex items-baseline gap-2">
-						<ByteSize
-							base={1024}
-							bytes={uncompressedSize}
-							className="text-xl font-semibold text-foreground font-mono"
-						/>
+				<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">
+							<span className="text-xl font-semibold text-foreground font-mono">{spaceSavingPercent.toFixed(1)}%</span>
+							<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">
+							<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="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>
+						</div>
+					</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>
 				</div>
-
-				<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">
-						<span className="text-xl font-semibold text-foreground font-mono">{spaceSavingPercent.toFixed(1)}%</span>
-						<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">
-						<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 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">
-							{compressionProgressPercent.toFixed(1)}% compressed
-						</span>
-					</div>
-				</div>
-			</CardContent>
+			</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,173 +133,199 @@ 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">
-					<div>
-						<div className="flex items-center gap-2">
-							<h2 className="text-lg font-semibold tracking-tight">Repository Settings</h2>
-							{repository.provisioningId && <ManagedBadge />}
-						</div>
-					</div>
-					<div className="flex items-center gap-2">
-						{isDoctorRunning ? (
-							<Button
-								type="button"
-								variant="destructive"
-								loading={cancelDoctor.isPending}
-								onClick={() => cancelDoctor.mutate({ path: { shortId: repository.shortId } })}
-							>
-								<Square className="h-4 w-4 mr-2" />
-								Cancel doctor
-							</Button>
-						) : (
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => startDoctor.mutate({ path: { shortId: repository.shortId } })}
-								disabled={startDoctor.isPending}
-							>
-								<Stethoscope className="h-4 w-4 mr-2" />
-								Run doctor
-							</Button>
-						)}
-						<DropdownMenu>
-							<DropdownMenuTrigger asChild>
-								<Button variant="outline">
-									Actions
-									<ChevronDown className="h-4 w-4 ml-1" />
-								</Button>
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="end">
-								<DropdownMenuItem onClick={() => navigate({ to: `/repositories/${repository.shortId}/edit` })}>
-									<Pencil />
-									Edit
-								</DropdownMenuItem>
-								<DropdownMenuItem
-									onClick={() =>
-										toast.promise(unlockRepo.mutateAsync({ path: { shortId: repository.shortId } }), {
-											loading: "Unlocking repo",
-											success: "Repository unlocked successfully",
-											error: (e) => parseError(e)?.message || "Failed to unlock repository",
-										})
-									}
-									disabled={unlockRepo.isPending}
-								>
-									<Unlock />
-									Unlock
-								</DropdownMenuItem>
-								<DropdownMenuSeparator />
-								<DropdownMenuItem
-									variant="destructive"
-									onClick={() => setShowDeleteConfirm(true)}
-									disabled={deleteRepo.isPending}
-								>
-									<Trash2 />
-									Delete
-								</DropdownMenuItem>
-							</DropdownMenuContent>
-						</DropdownMenu>
-					</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">Management</div>
-									<p className="text-sm">{repository.provisioningId ? "Provisioned" : "Manual"}</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">
+				<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.name}</h2>
+									<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", {
+											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",
 											})}
 										/>
-										<span className="capitalize">{repository.status || "Unknown"}</span>
-									</p>
+										{repository.status || "Unknown"}
+									</Badge>
+									<Badge variant="secondary">{repository.type}</Badge>
+									{repository.provisioningId && <Badge variant="secondary">Managed</Badge>}
 								</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="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>
-						)}
-
-						<div className="flex-1 flex flex-col">
-							<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
+								<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">
+							{isDoctorRunning ? (
+								<Button
+									type="button"
+									variant="destructive"
+									loading={cancelDoctor.isPending}
+									onClick={() => cancelDoctor.mutate({ path: { shortId: repository.shortId } })}
+								>
+									<Square className="h-4 w-4 mr-2" />
+									Cancel doctor
+								</Button>
+							) : (
+								<Button
+									type="button"
+									variant="outline"
+									onClick={() => startDoctor.mutate({ path: { shortId: repository.shortId } })}
+									disabled={startDoctor.isPending}
+								>
+									<Stethoscope className="h-4 w-4 mr-2" />
+									Run doctor
+								</Button>
+							)}
+							<DropdownMenu>
+								<DropdownMenuTrigger asChild>
+									<Button variant="outline">
+										Actions
+										<ChevronDown className="h-4 w-4 ml-1" />
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="end">
+									<DropdownMenuItem onClick={() => navigate({ to: `/repositories/${repository.shortId}/edit` })}>
+										<Pencil />
+										Edit
+									</DropdownMenuItem>
+									<DropdownMenuItem
+										onClick={() =>
+											toast.promise(unlockRepo.mutateAsync({ path: { shortId: repository.shortId } }), {
+												loading: "Unlocking repo",
+												success: "Repository unlocked successfully",
+												error: (e) => parseError(e)?.message || "Failed to unlock repository",
+											})
+										}
+										disabled={unlockRepo.isPending}
+									>
+										<Unlock />
+										Unlock
+									</DropdownMenuItem>
+									<DropdownMenuSeparator />
+									<DropdownMenuItem
+										variant="destructive"
+										onClick={() => setShowDeleteConfirm(true)}
+										disabled={deleteRepo.isPending}
+									>
+										<Trash2 />
+										Delete
+									</DropdownMenuItem>
+								</DropdownMenuContent>
+							</DropdownMenu>
 						</div>
 					</div>
+				</Card>
 
-					<div className="flex flex-col gap-6">
-						<CompressionStatsChart repositoryShortId={repository.shortId} initialStats={initialStats} />
+				{hasLastError && (
+					<Card className="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 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 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>
 							</div>
-						</Card>
-					</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">Management</div>
+								<p className="text-sm">{repository.provisioningId ? "Provisioned" : "Manual"}</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">Last Checked</div>
+								<p className="text-sm flex items-center gap-1.5">
+									<Clock className="h-3 w-3 text-muted-foreground" />
+									{formatTimeAgo(repository.lastChecked)}
+								</p>
+							</div>
+							{hasLocalPath && (
+								<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>
+							)}
+						</CardContent>
+					</Card>
 				</div>
+
+				<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>
+				</Card>
+
+				<DoctorReport repositoryStatus={repository.status} result={repository.doctorResult} />
 			</div>
 
 			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>