restore as a page (#87)

* feat: add custom restore target directory

Adds the ability to restore snapshots to a custom directory instead of
only the original path. Closes #12.

Changes:
- Add target parameter to restore API endpoint
- Add directory picker UI in file browser restore dialog
- Add target input field in snapshot restore form
- Create reusable PathSelector component

Note: Run `bun run gen:api-client` after merging to regenerate types.

* refactor: path selector design

* refactor: unify restore snapshot dialogs

* refactor: restore snapshot as a page

* chore: fix liniting issues

* chore(create-notification): remove un-used prop

---------

Co-authored-by: Deepseek1 <Deepseek1@users.noreply.github.com>

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

@@ -1,54 +1,26 @@
-import { useCallback, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChevronDown, FileIcon, FolderOpen, RotateCcw } from "lucide-react";
+import { useCallback } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { FileIcon } from "lucide-react";
+import { Link } from "react-router";
 import { FileTree } from "~/client/components/file-tree";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { Button } from "~/client/components/ui/button";
-import { Checkbox } from "~/client/components/ui/checkbox";
-import { Label } from "~/client/components/ui/label";
-import { Input } from "~/client/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "~/client/components/ui/alert-dialog";
-import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
-import type { Snapshot, Volume } from "~/client/lib/types";
-import { toast } from "sonner";
-import { listSnapshotFilesOptions, restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { Button, buttonVariants } from "~/client/components/ui/button";
+import type { Snapshot } from "~/client/lib/types";
+import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { useFileBrowser } from "~/client/hooks/use-file-browser";
-import { OVERWRITE_MODES, type OverwriteMode } from "~/schemas/restic";
-
-type RestoreLocation = "original" | "custom";
 
 interface Props {
 	snapshot: Snapshot;
 	repositoryName: string;
-	volume?: Volume;
+	backupId?: string;
 	onDeleteSnapshot?: (snapshotId: string) => void;
 	isDeletingSnapshot?: boolean;
 }
 
 export const SnapshotFileBrowser = (props: Props) => {
-	const { snapshot, repositoryName, volume, onDeleteSnapshot, isDeletingSnapshot } = props;
-
-	const isReadOnly = volume?.config && "readOnly" in volume.config && volume.config.readOnly === true;
+	const { snapshot, repositoryName, backupId, onDeleteSnapshot, isDeletingSnapshot } = props;
 
 	const queryClient = useQueryClient();
-	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
-	const [showRestoreDialog, setShowRestoreDialog] = useState(false);
-	const [deleteExtraFiles, setDeleteExtraFiles] = useState(false);
-	const [showAdvanced, setShowAdvanced] = useState(false);
-	const [excludeXattr, setExcludeXattr] = useState("");
-	const [restoreLocation, setRestoreLocation] = useState<RestoreLocation>("original");
-	const [customTargetPath, setCustomTargetPath] = useState("");
-	const [overwriteMode, setOverwriteMode] = useState<OverwriteMode>("always");
 
 	const volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "/";
 
@@ -108,61 +80,6 @@ export const SnapshotFileBrowser = (props: Props) => {
 		},
 	});
 
-	const { mutate: restoreSnapshot, isPending: isRestoring } = useMutation({
-		...restoreSnapshotMutation(),
-		onSuccess: (data) => {
-			toast.success("Restore completed", {
-				description: `Successfully restored ${data.filesRestored} file(s). ${data.filesSkipped} file(s) skipped.`,
-			});
-			setSelectedPaths(new Set());
-		},
-		onError: (error) => {
-			toast.error("Restore failed", { description: error.message || "Failed to restore snapshot" });
-		},
-	});
-
-	const handleRestoreClick = useCallback(() => {
-		setShowRestoreDialog(true);
-	}, []);
-
-	const handleConfirmRestore = useCallback(() => {
-		const pathsArray = Array.from(selectedPaths);
-		const includePaths = pathsArray.map((path) => addBasePath(path));
-
-		const excludeXattrArray = excludeXattr
-			?.split(",")
-			.map((s) => s.trim())
-			.filter(Boolean);
-
-		const isCustomLocation = restoreLocation === "custom";
-		const targetPath = isCustomLocation && customTargetPath.trim() ? customTargetPath.trim() : undefined;
-
-		restoreSnapshot({
-			path: { name: repositoryName },
-			body: {
-				snapshotId: snapshot.short_id,
-				include: includePaths,
-				delete: deleteExtraFiles,
-				excludeXattr: excludeXattrArray && excludeXattrArray.length > 0 ? excludeXattrArray : undefined,
-				targetPath,
-				overwrite: overwriteMode,
-			},
-		});
-
-		setShowRestoreDialog(false);
-	}, [
-		selectedPaths,
-		addBasePath,
-		repositoryName,
-		snapshot.short_id,
-		restoreSnapshot,
-		deleteExtraFiles,
-		excludeXattr,
-		restoreLocation,
-		customTargetPath,
-		overwriteMode,
-	]);
-
 	return (
 		<div className="space-y-4">
 			<Card className="h-[600px] flex flex-col">
@@ -173,30 +90,16 @@ export const SnapshotFileBrowser = (props: Props) => {
 							<CardDescription>{`Viewing snapshot from ${new Date(snapshot?.time ?? 0).toLocaleString()}`}</CardDescription>
 						</div>
 						<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>
-							)}
+							<Link
+								to={
+									backupId
+										? `/backups/${backupId}/${snapshot.short_id}/restore`
+										: `/repositories/${repositoryName}/${snapshot.short_id}/restore`
+								}
+								className={buttonVariants({ variant: "primary", size: "sm" })}
+							>
+								Restore
+							</Link>
 							{onDeleteSnapshot && (
 								<Button
 									variant="destructive"
@@ -234,140 +137,11 @@ export const SnapshotFileBrowser = (props: Props) => {
 								expandedFolders={fileBrowser.expandedFolders}
 								loadingFolders={fileBrowser.loadingFolders}
 								className="px-2 py-2"
-								withCheckboxes={true}
-								selectedPaths={selectedPaths}
-								onSelectionChange={setSelectedPaths}
 							/>
 						</div>
 					)}
 				</CardContent>
 			</Card>
-
-			<AlertDialog open={showRestoreDialog} onOpenChange={setShowRestoreDialog}>
-				<AlertDialogContent className="max-w-lg">
-					<AlertDialogHeader>
-						<AlertDialogTitle>Confirm Restore</AlertDialogTitle>
-						<AlertDialogDescription>
-							{selectedPaths.size > 0
-								? `This will restore ${selectedPaths.size} selected ${selectedPaths.size === 1 ? "item" : "items"} from the snapshot.`
-								: "This will restore everything from the snapshot."}
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<div className="space-y-4">
-						<div className="space-y-3">
-							<Label className="text-sm font-medium">Restore Location</Label>
-							<div className="grid grid-cols-2 gap-2">
-								<Button
-									type="button"
-									variant={restoreLocation === "original" ? "secondary" : "outline"}
-									size="sm"
-									className="flex justify-start gap-2"
-									onClick={() => setRestoreLocation("original")}
-								>
-									<RotateCcw size={16} className="mr-1" />
-									Original location
-								</Button>
-								<Button
-									type="button"
-									variant={restoreLocation === "custom" ? "secondary" : "outline"}
-									size="sm"
-									className="justify-start gap-2"
-									onClick={() => setRestoreLocation("custom")}
-								>
-									<FolderOpen size={16} className="mr-1" />
-									Custom location
-								</Button>
-							</div>
-							{restoreLocation === "custom" && (
-								<div className="space-y-2">
-									<Input
-										placeholder="/path/to/restore"
-										value={customTargetPath}
-										onChange={(e) => setCustomTargetPath(e.target.value)}
-									/>
-									<p className="text-xs text-muted-foreground">Files will be restored directly to this path</p>
-								</div>
-							)}
-						</div>
-
-						<div className="space-y-2">
-							<Label className="text-sm font-medium">Overwrite Mode</Label>
-							<Select value={overwriteMode} onValueChange={(value) => setOverwriteMode(value as OverwriteMode)}>
-								<SelectTrigger className="w-full">
-									<SelectValue placeholder="Select overwrite behavior" />
-								</SelectTrigger>
-								<SelectContent>
-									<SelectItem value={OVERWRITE_MODES.always}>Always overwrite</SelectItem>
-									<SelectItem value={OVERWRITE_MODES.ifChanged}>Only if content changed</SelectItem>
-									<SelectItem value={OVERWRITE_MODES.ifNewer}>Only if snapshot is newer</SelectItem>
-									<SelectItem value={OVERWRITE_MODES.never}>Never overwrite</SelectItem>
-								</SelectContent>
-							</Select>
-							<p className="text-xs text-muted-foreground">
-								{overwriteMode === OVERWRITE_MODES.always &&
-									"Existing files will always be replaced with the snapshot version."}
-								{overwriteMode === OVERWRITE_MODES.ifChanged &&
-									"Files are only replaced if their content differs from the snapshot."}
-								{overwriteMode === OVERWRITE_MODES.ifNewer &&
-									"Files are only replaced if the snapshot version has a newer modification time."}
-								{overwriteMode === OVERWRITE_MODES.never &&
-									"Existing files will never be replaced, only missing files are restored."}
-							</p>
-						</div>
-
-						<div>
-							<Button
-								type="button"
-								variant="ghost"
-								size="sm"
-								onClick={() => setShowAdvanced(!showAdvanced)}
-								className="h-auto p-0 text-sm font-normal"
-							>
-								Advanced Options
-								<ChevronDown size={16} className={`ml-1 transition-transform ${showAdvanced ? "rotate-180" : ""}`} />
-							</Button>
-
-							{showAdvanced && (
-								<div className="mt-4 space-y-3">
-									<div className="space-y-2">
-										<Label htmlFor="exclude-xattr" className="text-sm">
-											Exclude Extended Attributes
-										</Label>
-										<Input
-											id="exclude-xattr"
-											placeholder="com.apple.metadata,user.*,nfs4.*"
-											value={excludeXattr}
-											onChange={(e) => setExcludeXattr(e.target.value)}
-										/>
-										<p className="text-xs text-muted-foreground">
-											Exclude specific extended attributes during restore (comma-separated)
-										</p>
-									</div>
-									<div className="flex items-center space-x-2">
-										<Checkbox
-											id="delete-extra"
-											checked={deleteExtraFiles}
-											onCheckedChange={(checked) => setDeleteExtraFiles(checked === true)}
-										/>
-										<Label htmlFor="delete-extra" className="text-sm font-normal cursor-pointer">
-											Delete files not present in the snapshot
-										</Label>
-									</div>
-								</div>
-							)}
-						</div>
-					</div>
-					<AlertDialogFooter>
-						<AlertDialogCancel>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={handleConfirmRestore}
-							disabled={restoreLocation === "custom" && !customTargetPath.trim()}
-						>
-							Confirm Restore
-						</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
 		</div>
 	);
 };

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

@@ -240,7 +240,7 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 					key={selectedSnapshot?.short_id}
 					snapshot={selectedSnapshot}
 					repositoryName={schedule.repository.name}
-					volume={schedule.volume}
+					backupId={schedule.id.toString()}
 					onDeleteSnapshot={handleDeleteSnapshot}
 					isDeletingSnapshot={deleteSnapshot.isPending}
 				/>

app/client/modules/backups/routes/restore-snapshot.tsx

@@ -0,0 +1,54 @@
+import { redirect } from "react-router";
+import { getBackupSchedule, getSnapshotDetails } from "~/client/api-client";
+import { RestoreForm } from "~/client/components/restore-form";
+import type { Route } from "./+types/restore-snapshot";
+
+export const handle = {
+	breadcrumb: (match: Route.MetaArgs) => [
+		{ label: "Backups", href: "/backups" },
+		{ label: `Schedule #${match.params.id}`, href: `/backups/${match.params.id}` },
+		{ label: match.params.snapshotId },
+		{ label: "Restore" },
+	],
+};
+
+export function meta({ params }: Route.MetaArgs) {
+	return [
+		{ title: `Zerobyte - Restore Snapshot ${params.snapshotId}` },
+		{
+			name: "description",
+			content: "Restore files from a backup snapshot.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
+	const schedule = await getBackupSchedule({ path: { scheduleId: params.id } });
+	if (!schedule.data) return redirect("/backups");
+
+	const repositoryName = schedule.data.repository.name;
+	const snapshot = await getSnapshotDetails({
+		path: { name: repositoryName, snapshotId: params.snapshotId },
+	});
+	if (!snapshot.data) return redirect(`/backups/${params.id}`);
+
+	return {
+		snapshot: snapshot.data,
+		repositoryName,
+		snapshotId: params.snapshotId,
+		backupId: params.id,
+	};
+};
+
+export default function RestoreSnapshotFromBackupPage({ loaderData }: Route.ComponentProps) {
+	const { snapshot, repositoryName, snapshotId, backupId } = loaderData;
+
+	return (
+		<RestoreForm
+			snapshot={snapshot}
+			repositoryName={repositoryName}
+			snapshotId={snapshotId}
+			returnPath={`/backups/${backupId}`}
+		/>
+	);
+}

app/client/modules/notifications/components/create-notification-form.tsx

@@ -30,7 +30,6 @@ type Props = {
 	mode?: "create" | "update";
 	initialValues?: Partial<NotificationFormValues>;
 	formId?: string;
-	loading?: boolean;
 	className?: string;
 };
 

app/client/modules/notifications/routes/create-notification.tsx

@@ -62,12 +62,7 @@ export default function CreateNotification() {
 							</AlertDescription>
 						</Alert>
 					)}
-					<CreateNotificationForm
-						mode="create"
-						formId={formId}
-						onSubmit={handleSubmit}
-						loading={createNotification.isPending}
-					/>
+					<CreateNotificationForm mode="create" formId={formId} onSubmit={handleSubmit} />
 					<div className="flex justify-end gap-2 pt-4 border-t">
 						<Button type="button" variant="secondary" onClick={() => navigate("/notifications")}>
 							Cancel

app/client/modules/notifications/routes/notification-details.tsx

@@ -171,20 +171,18 @@ export default function NotificationDetailsPage({ loaderData }: Route.ComponentP
 							</AlertDescription>
 						</Alert>
 					)}
-					<>
-						<CreateNotificationForm
-							mode="update"
-							formId={formId}
-							onSubmit={handleSubmit}
-							initialValues={data.config}
-							loading={updateDestination.isPending}
-						/>
-						<div className="flex justify-end gap-2 pt-4 border-t">
-							<Button type="submit" form={formId} loading={updateDestination.isPending}>
-								Save Changes
-							</Button>
-						</div>
-					</>
+					<CreateNotificationForm
+						mode="update"
+						formId={formId}
+						onSubmit={handleSubmit}
+						initialValues={data.config}
+						loading={updateDestination.isPending}
+					/>
+					<div className="flex justify-end gap-2 pt-4 border-t">
+						<Button type="submit" form={formId} loading={updateDestination.isPending}>
+							Save Changes
+						</Button>
+					</div>
 				</CardContent>
 			</Card>
 

app/client/modules/repositories/components/restore-snapshot-dialog.tsx

@@ -1,100 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { RotateCcw } from "lucide-react";
-import { useId, useState } from "react";
-import { toast } from "sonner";
-import { restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
-import { parseError } from "~/client/lib/errors";
-import { Button } from "~/client/components/ui/button";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogFooter,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "~/client/components/ui/dialog";
-import { ScrollArea } from "~/client/components/ui/scroll-area";
-import { RestoreSnapshotForm, type RestoreSnapshotFormValues } from "./restore-snapshot-form";
-
-type Props = {
-	name: string;
-	snapshotId: string;
-};
-
-export const RestoreSnapshotDialog = ({ name, snapshotId }: Props) => {
-	const [open, setOpen] = useState(false);
-	const formId = useId();
-
-	const restore = useMutation({
-		...restoreSnapshotMutation(),
-		onSuccess: (data) => {
-			toast.success("Snapshot restored successfully", {
-				description: `${data.filesRestored} files restored, ${data.filesSkipped} files skipped`,
-			});
-			setOpen(false);
-		},
-		onError: (error) => {
-			toast.error("Failed to restore snapshot", {
-				description: parseError(error)?.message,
-			});
-		},
-	});
-
-	const handleSubmit = (values: RestoreSnapshotFormValues) => {
-		const include = values.include
-			?.split(",")
-			.map((s) => s.trim())
-			.filter(Boolean);
-
-		const exclude = values.exclude
-			?.split(",")
-			.map((s) => s.trim())
-			.filter(Boolean);
-
-		const excludeXattr = values.excludeXattr
-			?.split(",")
-			.map((s) => s.trim())
-			.filter(Boolean);
-
-		restore.mutate({
-			path: { name },
-			body: {
-				snapshotId,
-				include: include && include.length > 0 ? include : undefined,
-				exclude: exclude && exclude.length > 0 ? exclude : undefined,
-				excludeXattr: excludeXattr && excludeXattr.length > 0 ? excludeXattr : undefined,
-			},
-		});
-	};
-
-	return (
-		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button>
-					<RotateCcw size={16} className="mr-2" />
-					Restore
-				</Button>
-			</DialogTrigger>
-			<DialogContent>
-				<ScrollArea className="max-h-[600px] p-4">
-					<DialogHeader>
-						<DialogTitle>Restore Snapshot</DialogTitle>
-						<DialogDescription>
-							Restore snapshot {snapshotId.substring(0, 8)} to a local filesystem path
-						</DialogDescription>
-					</DialogHeader>
-					<RestoreSnapshotForm className="mt-4" formId={formId} onSubmit={handleSubmit} />
-					<DialogFooter className="mt-4">
-						<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-							Cancel
-						</Button>
-						<Button type="submit" form={formId} disabled={restore.isPending}>
-							{restore.isPending ? "Restoring..." : "Restore"}
-						</Button>
-					</DialogFooter>
-				</ScrollArea>
-			</DialogContent>
-		</Dialog>
-	);
-};

app/client/modules/repositories/components/restore-snapshot-form.tsx

@@ -1,138 +0,0 @@
-import { arktypeResolver } from "@hookform/resolvers/arktype";
-import { type } from "arktype";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "~/client/components/ui/form";
-import { Input } from "~/client/components/ui/input";
-import { Button } from "~/client/components/ui/button";
-
-const restoreSnapshotFormSchema = type({
-	path: "string?",
-	include: "string?",
-	exclude: "string?",
-	excludeXattr: "string?",
-});
-
-export type RestoreSnapshotFormValues = typeof restoreSnapshotFormSchema.inferIn;
-
-type Props = {
-	formId: string;
-	onSubmit: (values: RestoreSnapshotFormValues) => void;
-	className?: string;
-};
-
-export const RestoreSnapshotForm = ({ formId, onSubmit, className }: Props) => {
-	const [showAdvanced, setShowAdvanced] = useState(false);
-
-	const form = useForm<RestoreSnapshotFormValues>({
-		resolver: arktypeResolver(restoreSnapshotFormSchema),
-		defaultValues: {
-			path: "",
-			include: "",
-			exclude: "",
-			excludeXattr: "",
-		},
-	});
-
-	const handleSubmit = (values: RestoreSnapshotFormValues) => {
-		onSubmit(values);
-	};
-
-	return (
-		<Form {...form}>
-			<form id={formId} onSubmit={form.handleSubmit(handleSubmit)} className={className}>
-				<div className="space-y-4">
-					<FormField
-						control={form.control}
-						name="path"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Path (Optional)</FormLabel>
-								<FormControl>
-									<Input placeholder="/specific/path" {...field} />
-								</FormControl>
-								<FormDescription>
-									Restore only a specific path from the snapshot (leave empty to restore all)
-								</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<FormField
-						control={form.control}
-						name="include"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Include Patterns (Optional)</FormLabel>
-								<FormControl>
-									<Input placeholder="*.txt,/documents/**" {...field} />
-								</FormControl>
-								<FormDescription>Include only files matching these patterns (comma-separated)</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<FormField
-						control={form.control}
-						name="exclude"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Exclude Patterns (Optional)</FormLabel>
-								<FormControl>
-									<Input placeholder="*.log,/temp/**" {...field} />
-								</FormControl>
-								<FormDescription>Exclude files matching these patterns (comma-separated)</FormDescription>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-
-					<div>
-						<Button
-							type="button"
-							variant="ghost"
-							size="sm"
-							onClick={() => setShowAdvanced(!showAdvanced)}
-							className="h-auto p-0 text-sm font-normal"
-						>
-							Advanced
-							<ChevronDown size={16} className={`ml-1 transition-transform ${showAdvanced ? "rotate-180" : ""}`} />
-						</Button>
-
-						{showAdvanced && (
-							<div className="mt-4">
-								<FormField
-									control={form.control}
-									name="excludeXattr"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Exclude Extended Attributes (Optional)</FormLabel>
-											<FormControl>
-												<Input placeholder="com.apple.metadata,user.custom" {...field} />
-											</FormControl>
-											<FormDescription>
-												Exclude specific extended attributes during restore (comma-separated)
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-							</div>
-						)}
-					</div>
-				</div>
-			</form>
-		</Form>
-	);
-};

app/client/modules/repositories/routes/restore-snapshot.tsx

@@ -0,0 +1,45 @@
+import { redirect } from "react-router";
+import { getSnapshotDetails } from "~/client/api-client";
+import { RestoreForm } from "~/client/components/restore-form";
+import type { Route } from "./+types/restore-snapshot";
+
+export const handle = {
+	breadcrumb: (match: Route.MetaArgs) => [
+		{ label: "Repositories", href: "/repositories" },
+		{ label: match.params.name, href: `/repositories/${match.params.name}` },
+		{ label: match.params.snapshotId, href: `/repositories/${match.params.name}/${match.params.snapshotId}` },
+		{ label: "Restore" },
+	],
+};
+
+export function meta({ params }: Route.MetaArgs) {
+	return [
+		{ title: `Zerobyte - Restore Snapshot ${params.snapshotId}` },
+		{
+			name: "description",
+			content: "Restore files from a backup snapshot.",
+		},
+	];
+}
+
+export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
+	const snapshot = await getSnapshotDetails({
+		path: { name: params.name, snapshotId: params.snapshotId },
+	});
+	if (snapshot.data) return { snapshot: snapshot.data, name: params.name, snapshotId: params.snapshotId };
+
+	return redirect("/repositories");
+};
+
+export default function RestoreSnapshotPage({ loaderData }: Route.ComponentProps) {
+	const { snapshot, name, snapshotId } = loaderData;
+
+	return (
+		<RestoreForm
+			snapshot={snapshot}
+			repositoryName={name}
+			snapshotId={snapshotId}
+			returnPath={`/repositories/${name}/${snapshotId}`}
+		/>
+	);
+}

app/client/modules/repositories/routes/snapshot-details.tsx

@@ -2,7 +2,6 @@ import { useQuery } from "@tanstack/react-query";
 import { redirect, useParams } from "react-router";
 import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { Card, CardContent, CardHeader, CardTitle } from "~/client/components/ui/card";
-import { RestoreSnapshotDialog } from "../components/restore-snapshot-dialog";
 import { SnapshotFileBrowser } from "~/client/modules/backups/components/snapshot-file-browser";
 import { getSnapshotDetails } from "~/client/api-client";
 import type { Route } from "./+types/snapshot-details";
@@ -63,7 +62,6 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
 					<h1 className="text-2xl font-bold">{name}</h1>
 					<p className="text-sm text-muted-foreground">Snapshot: {snapshotId}</p>
 				</div>
-				<RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
 			</div>
 
 			<SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />