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>
 	);
 };