From ed73ca73fbc992010ed633d639f5e6d73d1eeeeb Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Thu, 30 Oct 2025 18:38:05 +0100
Subject: [PATCH] refactor(snapshots): unify tables in a single component

---
 .../client/app/components/snapshots-table.tsx |  92 +++++++++++++++
 .../details/components/schedule-summary.tsx   |  86 +-------------
 .../modules/repositories/tabs/snapshots.tsx   | 107 +++---------------
 3 files changed, 112 insertions(+), 173 deletions(-)
 create mode 100644 apps/client/app/components/snapshots-table.tsx

diff --git a/apps/client/app/components/snapshots-table.tsx b/apps/client/app/components/snapshots-table.tsx
new file mode 100644
index 0000000..53be81a
--- /dev/null
+++ b/apps/client/app/components/snapshots-table.tsx
@@ -0,0 +1,92 @@
+import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react";
+import type { ListSnapshotsResponse } from "~/api-client/types.gen";
+import { ByteSize } from "~/components/bytes-size";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
+
+type Snapshot = ListSnapshotsResponse["snapshots"][0];
+
+type Props = {
+	snapshots: Snapshot[];
+};
+
+export const SnapshotsTable = ({ snapshots }: Props) => {
+	return (
+		<div className="overflow-x-auto">
+			<Table className="border-t">
+				<TableHeader className="bg-card-header">
+					<TableRow>
+						<TableHead className="uppercase">Snapshot ID</TableHead>
+						<TableHead className="uppercase">Date & Time</TableHead>
+						<TableHead className="uppercase">Size</TableHead>
+						<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
+						<TableHead className="uppercase hidden text-right lg:table-cell">Volume</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{snapshots.map((snapshot) => (
+						<TableRow key={snapshot.short_id} className="hover:bg-accent/50">
+							<TableCell className="font-mono text-sm">
+								<div className="flex items-center gap-2">
+									<HardDrive className="h-4 w-4 text-muted-foreground" />
+									<span className="text-strong-accent">{snapshot.short_id}</span>
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Calendar className="h-4 w-4 text-muted-foreground" />
+									<span className="text-sm">{new Date(snapshot.time).toLocaleString()}</span>
+								</div>
+							</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-2">
+									<Database className="h-4 w-4 text-muted-foreground" />
+									<span className="font-medium">
+										<ByteSize bytes={snapshot.size} base={1024} />
+									</span>
+								</div>
+							</TableCell>
+							<TableCell className="hidden md:table-cell">
+								<div className="flex items-center justify-end gap-2">
+									<Clock className="h-4 w-4 text-muted-foreground" />
+									<span className="text-sm text-muted-foreground">
+										{formatSnapshotDuration(snapshot.duration / 1000)}
+									</span>
+								</div>
+							</TableCell>
+							<TableCell className="hidden lg:table-cell">
+								<div className="flex items-center justify-end gap-2">
+									<FolderTree className="h-4 w-4 text-muted-foreground" />
+									<div className="flex flex-wrap gap-1">
+										<span className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1" title={snapshot.paths[0]}>
+											{snapshot.paths[0].split("/").filter(Boolean).at(-2) || "/"}
+										</span>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<span
+													className={`text-xs bg-muted text-muted-foreground rounded-md px-2 py-1 cursor-help ${snapshot.paths.length <= 1 ? "hidden" : ""}`}
+												>
+													+{snapshot.paths.length - 1}
+												</span>
+											</TooltipTrigger>
+											<TooltipContent side="top" className="max-w-md">
+												<div className="flex flex-col gap-1">
+													{snapshot.paths.slice(1).map((path) => (
+														<div key={`${snapshot.short_id}-${path}`} className="text-xs">
+															{path}
+														</div>
+													))}
+												</div>
+											</TooltipContent>
+										</Tooltip>
+									</div>
+								</div>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+		</div>
+	);
+};
diff --git a/apps/client/app/modules/details/components/schedule-summary.tsx b/apps/client/app/modules/details/components/schedule-summary.tsx
index 63d7319..c960beb 100644
--- a/apps/client/app/modules/details/components/schedule-summary.tsx
+++ b/apps/client/app/modules/details/components/schedule-summary.tsx
@@ -1,15 +1,13 @@
 import { useQuery } from "@tanstack/react-query";
-import { Calendar, Clock, Database, FolderTree, HardDrive, Pencil } from "lucide-react";
+import { Database, Pencil } from "lucide-react";
 import { useMemo } from "react";
 import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
 import { ByteSize } from "~/components/bytes-size";
 import { OnOff } from "~/components/onoff";
+import { SnapshotsTable } from "~/components/snapshots-table";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
 import type { BackupSchedule, Repository, Volume } from "~/lib/types";
-import { formatSnapshotDuration } from "~/modules/repositories/tabs/snapshots";
 
 type Props = {
 	volume: Volume;
@@ -137,85 +135,7 @@ export const ScheduleSummary = (props: Props) => {
 					</CardContent>
 				) : (
 					<>
-						<div className="overflow-x-auto">
-							<Table className="border-t">
-								<TableHeader className="bg-card-header">
-									<TableRow>
-										<TableHead className="uppercase">Snapshot ID</TableHead>
-										<TableHead className="uppercase">Date & Time</TableHead>
-										<TableHead className="uppercase">Size</TableHead>
-										<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
-										<TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
-									</TableRow>
-								</TableHeader>
-
-								<TableBody>
-									{snapshots.snapshots.map((s) => (
-										<TableRow key={s.short_id} className="hover:bg-accent/50">
-											<TableCell className="font-mono text-sm">
-												<div className="flex items-center gap-2">
-													<HardDrive className="h-4 w-4 text-muted-foreground" />
-													<span className="text-strong-accent">{s.short_id}</span>
-												</div>
-											</TableCell>
-											<TableCell>
-												<div className="flex items-center gap-2">
-													<Calendar className="h-4 w-4 text-muted-foreground" />
-													<span className="text-sm">{new Date(s.time).toLocaleString()}</span>
-												</div>
-											</TableCell>
-											<TableCell>
-												<div className="flex items-center gap-2">
-													<Database className="h-4 w-4 text-muted-foreground" />
-													<span className="font-medium">
-														<ByteSize bytes={s.size} base={1024} />
-													</span>
-												</div>
-											</TableCell>
-											<TableCell className="hidden md:table-cell">
-												<div className="flex items-center justify-end gap-2">
-													<Clock className="h-4 w-4 text-muted-foreground" />
-													<span className="text-sm text-muted-foreground">
-														{formatSnapshotDuration(s.duration / 1000)}
-													</span>
-												</div>
-											</TableCell>
-											<TableCell className="hidden lg:table-cell">
-												<div className="flex items-center justify-end gap-2">
-													<FolderTree className="h-4 w-4 text-muted-foreground" />
-													<div className="flex flex-wrap gap-1">
-														<span
-															className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1"
-															title={s.paths[0]}
-														>
-															{s.paths[0].split("/").filter(Boolean).pop() || "/"}
-														</span>
-														<Tooltip>
-															<TooltipTrigger asChild>
-																<span
-																	className={`text-xs bg-muted text-muted-foreground rounded-md px-2 py-1 cursor-help ${s.paths.length <= 1 ? "hidden" : ""}`}
-																>
-																	+{s.paths.length - 1}
-																</span>
-															</TooltipTrigger>
-															<TooltipContent side="top" className="max-w-md">
-																<div className="flex flex-col gap-1">
-																	{s.paths.slice(1).map((path) => (
-																		<div key={`${s.short_id}-${path}`} className="text-xs">
-																			{path}
-																		</div>
-																	))}
-																</div>
-															</TooltipContent>
-														</Tooltip>
-													</div>
-												</div>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</div>
+						<SnapshotsTable snapshots={snapshots.snapshots} />
 						<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t">
 							<span>{`Showing ${snapshots.snapshots.length} of ${snapshots.snapshots.length}`}</span>
 							<span>
diff --git a/apps/client/app/modules/repositories/tabs/snapshots.tsx b/apps/client/app/modules/repositories/tabs/snapshots.tsx
index cb346bf..b948dcb 100644
--- a/apps/client/app/modules/repositories/tabs/snapshots.tsx
+++ b/apps/client/app/modules/repositories/tabs/snapshots.tsx
@@ -1,15 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 import { intervalToDuration } from "date-fns";
-import { Calendar, Clock, Database, FolderTree, HardDrive } from "lucide-react";
+import { Database } from "lucide-react";
 import { useState } from "react";
 import { listSnapshotsOptions } from "~/api-client/@tanstack/react-query.gen";
 import type { ListSnapshotsResponse } from "~/api-client/types.gen";
 import { ByteSize } from "~/components/bytes-size";
+import { SnapshotsTable } from "~/components/snapshots-table";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import { Table, TableBody, TableCell, TableRow } from "~/components/ui/table";
 import type { Repository } from "~/lib/types";
 
 type Props = {
@@ -137,97 +137,24 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 					</div>
 				</div>
 			</CardHeader>
-			<div className="overflow-x-auto">
+			{hasNoFilteredSnapshots ? (
 				<Table className="border-t">
-					<TableHeader className="bg-card-header">
-						<TableRow>
-							<TableHead className="uppercase">Snapshot ID</TableHead>
-							<TableHead className="uppercase">Date & Time</TableHead>
-							<TableHead className="uppercase">Size</TableHead>
-							<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
-							<TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
-						</TableRow>
-					</TableHeader>
 					<TableBody>
-						{hasNoFilteredSnapshots ? (
-							<TableRow>
-								<TableCell colSpan={5} className="text-center py-12">
-									<div className="flex flex-col items-center gap-3">
-										<p className="text-muted-foreground">No snapshots match your search.</p>
-										<Button onClick={() => setSearchQuery("")} variant="outline" size="sm">
-											Clear search
-										</Button>
-									</div>
-								</TableCell>
-							</TableRow>
-						) : (
-							filteredSnapshots.map((snapshot) => (
-								<TableRow key={snapshot.short_id} className="hover:bg-accent/50">
-									<TableCell className="font-mono text-sm">
-										<div className="flex items-center gap-2">
-											<HardDrive className="h-4 w-4 text-muted-foreground" />
-											<span className="text-strong-accent">{snapshot.short_id}</span>
-										</div>
-									</TableCell>
-									<TableCell>
-										<div className="flex items-center gap-2">
-											<Calendar className="h-4 w-4 text-muted-foreground" />
-											<span className="text-sm">{new Date(snapshot.time).toLocaleString()}</span>
-										</div>
-									</TableCell>
-									<TableCell>
-										<div className="flex items-center gap-2">
-											<Database className="h-4 w-4 text-muted-foreground" />
-											<span className="font-medium">
-												<ByteSize bytes={snapshot.size} base={1024} />
-											</span>
-										</div>
-									</TableCell>
-									<TableCell className="hidden md:table-cell">
-										<div className="flex items-center justify-end gap-2">
-											<Clock className="h-4 w-4 text-muted-foreground" />
-											<span className="text-sm text-muted-foreground">
-												{formatSnapshotDuration(snapshot.duration / 1000)}
-											</span>
-										</div>
-									</TableCell>
-									<TableCell className="hidden lg:table-cell">
-										<div className="flex items-center justify-end gap-2">
-											<FolderTree className="h-4 w-4 text-muted-foreground" />
-											<div className="flex flex-wrap gap-1">
-												<span
-													className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1"
-													title={snapshot.paths[0]}
-												>
-													{snapshot.paths[0].split("/").filter(Boolean).pop() || "/"}
-												</span>
-												<Tooltip>
-													<TooltipTrigger asChild>
-														<span
-															className={`text-xs bg-muted text-muted-foreground rounded-md px-2 py-1 cursor-help ${snapshot.paths.length <= 1 ? "hidden" : ""}`}
-														>
-															+{snapshot.paths.length - 1}
-														</span>
-													</TooltipTrigger>
-													<TooltipContent side="top" className="max-w-md">
-														<div className="flex flex-col gap-1">
-															{snapshot.paths.slice(1).map((path) => (
-																<div key={`${snapshot.short_id}-${path}`} className="text-xs">
-																	{path}
-																</div>
-															))}
-														</div>
-													</TooltipContent>
-												</Tooltip>
-											</div>
-										</div>
-									</TableCell>
-								</TableRow>
-							))
-						)}
+						<TableRow>
+							<TableCell colSpan={5} className="text-center py-12">
+								<div className="flex flex-col items-center gap-3">
+									<p className="text-muted-foreground">No snapshots match your search.</p>
+									<Button onClick={() => setSearchQuery("")} variant="outline" size="sm">
+										Clear search
+									</Button>
+								</div>
+							</TableCell>
+						</TableRow>
 					</TableBody>
 				</Table>
-			</div>
+			) : (
+				<SnapshotsTable snapshots={filteredSnapshots} />
+			)}
 			<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t">
 				<span>
 					{hasNoFilteredSnapshots