From 299469728e824789df7a0d538dfca8258c859ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Tr=C3=A1vn=C3=ADk?= <jakub.travnik@gmail.com>
Date: Mon, 22 Dec 2025 14:16:57 +0100
Subject: [PATCH] feat: add volume column to snapshots table and display backup
 volume names

---
 app/client/components/snapshots-table.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/client/components/snapshots-table.tsx b/app/client/components/snapshots-table.tsx
index 5911a9d8..7e0bee5d 100644
--- a/app/client/components/snapshots-table.tsx
+++ b/app/client/components/snapshots-table.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Calendar, Clock, Database, FolderTree, HardDrive, Trash2 } from "lucide-react";
+import { Calendar, Clock, Database, FolderTree, HardDrive, Server, Trash2 } from "lucide-react";
 import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { ByteSize } from "~/client/components/bytes-size";
@@ -79,6 +79,7 @@ export const SnapshotsTable = ({ snapshots, repositoryName, backups }: Props) =>
 							<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>
 							<TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
 							<TableHead className="uppercase text-right">Actions</TableHead>
 						</TableRow>
@@ -135,6 +136,22 @@ export const SnapshotsTable = ({ snapshots, repositoryName, backups }: Props) =>
 											<span className="text-sm text-muted-foreground">{formatDuration(snapshot.duration / 1000)}</span>
 										</div>
 									</TableCell>
+									<TableCell className="hidden lg:table-cell">
+										<div className="flex items-center justify-end gap-2">
+											<Server className="h-4 w-4 text-muted-foreground" />
+											{backup ? (
+												<Link
+													to={`/volumes/${backup.volume.id}`}
+													onClick={(e) => e.stopPropagation()}
+													className="text-sm hover:underline"
+												>
+													{backup.volume.name}
+												</Link>
+											) : (
+												<span className="text-sm text-muted-foreground">-</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" />