feat: remove individual snapshot (#26)

app/client/modules/backups/components/create-schedule-form.tsx

@@ -254,8 +254,8 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 						<CardHeader>
 							<CardTitle>Backup paths</CardTitle>
 							<CardDescription>
-								Select which folders or files to include in the backup. If no paths are selected, the entire volume will be
-								backed up.
+								Select which folders or files to include in the backup. If no paths are selected, the entire volume will
+								be backed up.
 							</CardDescription>
 						</CardHeader>
 						<CardContent>

app/client/modules/backups/components/snapshot-file-browser.tsx

@@ -26,10 +26,12 @@ interface Props {
 	snapshot: Snapshot;
 	repositoryName: string;
 	volume?: Volume;
+	onDeleteSnapshot?: (snapshotId: string) => void;
+	isDeletingSnapshot?: boolean;
 }
 
 export const SnapshotFileBrowser = (props: Props) => {
-	const { snapshot, repositoryName, volume } = props;
+	const { snapshot, repositoryName, volume, onDeleteSnapshot, isDeletingSnapshot } = props;
 
 	const isReadOnly = volume?.config && "readOnly" in volume.config && volume.config.readOnly === true;
 
@@ -136,30 +138,43 @@ export const SnapshotFileBrowser = (props: Props) => {
 							<CardTitle>File Browser</CardTitle>
 							<CardDescription>{`Viewing snapshot from ${new Date(snapshot?.time ?? 0).toLocaleString()}`}</CardDescription>
 						</div>
-						{selectedPaths.size > 0 && (
-							<Tooltip>
-								<TooltipTrigger asChild>
-									<span tabIndex={isReadOnly ? 0 : undefined}>
-										<Button
-											onClick={handleRestoreClick}
-											variant="primary"
-											size="sm"
-											disabled={isRestoring || isReadOnly}
-										>
-											{isRestoring
-												? "Restoring..."
-												: `Restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"}`}
-										</Button>
-									</span>
-								</TooltipTrigger>
-								{isReadOnly && (
-									<TooltipContent className="text-center">
-										<p>Volume is mounted as read-only.</p>
-										<p>Please remount with read-only disabled to restore files.</p>
-									</TooltipContent>
-								)}
-							</Tooltip>
-						)}
+						<div className="flex gap-2">
+							{selectedPaths.size > 0 && (
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<span tabIndex={isReadOnly ? 0 : undefined}>
+											<Button
+												onClick={handleRestoreClick}
+												variant="primary"
+												size="sm"
+												disabled={isRestoring || isReadOnly}
+											>
+												{isRestoring
+													? "Restoring..."
+													: `Restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"}`}
+											</Button>
+										</span>
+									</TooltipTrigger>
+									{isReadOnly && (
+										<TooltipContent className="text-center">
+											<p>Volume is mounted as read-only.</p>
+											<p>Please remount with read-only disabled to restore files.</p>
+										</TooltipContent>
+									)}
+								</Tooltip>
+							)}
+							{onDeleteSnapshot && (
+								<Button
+									variant="destructive"
+									size="sm"
+									onClick={() => onDeleteSnapshot(snapshot.short_id)}
+									disabled={isDeletingSnapshot}
+									loading={isDeletingSnapshot}
+								>
+									{isDeletingSnapshot ? "Deleting..." : "Delete Snapshot"}
+								</Button>
+							)}
+						</div>
 					</div>
 				</CardHeader>
 				<CardContent className="flex-1 overflow-hidden flex flex-col p-0">

app/client/modules/backups/routes/backup-details.tsx

@@ -3,6 +3,16 @@ import { useQuery, useMutation } from "@tanstack/react-query";
 import { redirect, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { Button } from "~/client/components/ui/button";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "~/client/components/ui/alert-dialog";
 import {
 	getBackupScheduleOptions,
 	runBackupNowMutation,
@@ -10,6 +20,7 @@ import {
 	listSnapshotsOptions,
 	updateBackupScheduleMutation,
 	stopBackupMutation,
+	deleteSnapshotMutation,
 } from "~/client/api-client/@tanstack/react-query.gen";
 import { parseError } from "~/client/lib/errors";
 import { getCronExpression } from "~/utils/utils";
@@ -50,6 +61,8 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 	const [isEditMode, setIsEditMode] = useState(false);
 	const formId = useId();
 	const [selectedSnapshotId, setSelectedSnapshotId] = useState<string>();
+	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+	const [snapshotToDelete, setSnapshotToDelete] = useState<string | null>(null);
 
 	const { data: schedule } = useQuery({
 		...getBackupScheduleOptions({ path: { scheduleId: params.id } }),
@@ -110,6 +123,17 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		},
 	});
 
+	const deleteSnapshot = useMutation({
+		...deleteSnapshotMutation(),
+		onSuccess: () => {
+			setShowDeleteConfirm(false);
+			setSnapshotToDelete(null);
+			if (selectedSnapshotId === snapshotToDelete) {
+				setSelectedSnapshotId(undefined);
+			}
+		},
+	});
+
 	const handleSubmit = (formValues: BackupScheduleFormValues) => {
 		if (!schedule) return;
 
@@ -150,6 +174,26 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		});
 	};
 
+	const handleDeleteSnapshot = (snapshotId: string) => {
+		setSnapshotToDelete(snapshotId);
+		setShowDeleteConfirm(true);
+	};
+
+	const handleConfirmDelete = () => {
+		if (snapshotToDelete) {
+			toast.promise(
+				deleteSnapshot.mutateAsync({
+					path: { name: schedule.repository.name, snapshotId: snapshotToDelete },
+				}),
+				{
+					loading: "Deleting snapshot...",
+					success: "Snapshot deleted successfully",
+					error: (error) => parseError(error)?.message || "Failed to delete snapshot",
+				},
+			);
+		}
+	};
+
 	if (isEditMode) {
 		return (
 			<div>
@@ -191,8 +235,32 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 					snapshot={selectedSnapshot}
 					repositoryName={schedule.repository.name}
 					volume={schedule.volume}
+					onDeleteSnapshot={handleDeleteSnapshot}
+					isDeletingSnapshot={deleteSnapshot.isPending}
 				/>
 			)}
+
+			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete snapshot?</AlertDialogTitle>
+						<AlertDialogDescription>
+							This action cannot be undone. This will permanently delete the snapshot and all its data from the
+							repository.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleConfirmDelete}
+							disabled={deleteSnapshot.isPending}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete snapshot
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	);
 }