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/components/path-selector.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { DirectoryBrowser } from "./directory-browser";
+import { Button } from "./ui/button";
+
+type Props = {
+	value: string;
+	onChange: (path: string) => void;
+	label?: string;
+};
+
+export const PathSelector = ({ value, onChange }: Props) => {
+	const [showBrowser, setShowBrowser] = useState(false);
+
+	if (showBrowser) {
+		return (
+			<div className="space-y-2">
+				<DirectoryBrowser
+					onSelectPath={(path) => {
+						onChange(path);
+						setShowBrowser(false);
+					}}
+					selectedPath={value}
+				/>
+				<Button type="button" variant="ghost" size="sm" onClick={() => setShowBrowser(false)}>
+					Cancel
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex items-center gap-2">
+			<div className="flex-1 text-sm font-mono bg-muted px-3 py-2 rounded-md border">{value}</div>
+			<Button type="button" variant="outline" onClick={() => setShowBrowser(true)} size="sm">
+				Change
+			</Button>
+		</div>
+	);
+};

app/client/components/restore-form.tsx

@@ -0,0 +1,325 @@
+import { useCallback, useState } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { ChevronDown, FileIcon, FolderOpen, RotateCcw } from "lucide-react";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Checkbox } from "~/client/components/ui/checkbox";
+import { Input } from "~/client/components/ui/input";
+import { Label } from "~/client/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { PathSelector } from "~/client/components/path-selector";
+import { FileTree } from "~/client/components/file-tree";
+import { listSnapshotFilesOptions, restoreSnapshotMutation } from "~/client/api-client/@tanstack/react-query.gen";
+import { useFileBrowser } from "~/client/hooks/use-file-browser";
+import { OVERWRITE_MODES, type OverwriteMode } from "~/schemas/restic";
+import type { Snapshot } from "~/client/lib/types";
+
+type RestoreLocation = "original" | "custom";
+
+interface RestoreFormProps {
+	snapshot: Snapshot;
+	repositoryName: string;
+	snapshotId: string;
+	returnPath: string;
+}
+
+export function RestoreForm({ snapshot, repositoryName, snapshotId, returnPath }: RestoreFormProps) {
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+
+	const volumeBasePath = snapshot.paths[0]?.match(/^(.*?_data)(\/|$)/)?.[1] || "/";
+
+	const [restoreLocation, setRestoreLocation] = useState<RestoreLocation>("original");
+	const [customTargetPath, setCustomTargetPath] = useState("");
+	const [overwriteMode, setOverwriteMode] = useState<OverwriteMode>("always");
+	const [showAdvanced, setShowAdvanced] = useState(false);
+	const [excludeXattr, setExcludeXattr] = useState("");
+	const [deleteExtraFiles, setDeleteExtraFiles] = useState(false);
+
+	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
+
+	const { data: filesData, isLoading: filesLoading } = useQuery({
+		...listSnapshotFilesOptions({
+			path: { name: repositoryName, snapshotId },
+			query: { path: volumeBasePath },
+		}),
+		enabled: !!repositoryName && !!snapshotId,
+	});
+
+	const stripBasePath = useCallback(
+		(path: string): string => {
+			if (!volumeBasePath) return path;
+			if (path === volumeBasePath) return "/";
+			if (path.startsWith(`${volumeBasePath}/`)) {
+				const stripped = path.slice(volumeBasePath.length);
+				return stripped;
+			}
+			return path;
+		},
+		[volumeBasePath],
+	);
+
+	const addBasePath = useCallback(
+		(displayPath: string): string => {
+			const vbp = volumeBasePath === "/" ? "" : volumeBasePath;
+
+			if (!vbp) return displayPath;
+			if (displayPath === "/") return vbp;
+			return `${vbp}${displayPath}`;
+		},
+		[volumeBasePath],
+	);
+
+	const fileBrowser = useFileBrowser({
+		initialData: filesData,
+		isLoading: filesLoading,
+		fetchFolder: async (path) => {
+			return await queryClient.ensureQueryData(
+				listSnapshotFilesOptions({
+					path: { name: repositoryName, snapshotId },
+					query: { path },
+				}),
+			);
+		},
+		prefetchFolder: (path) => {
+			queryClient.prefetchQuery(
+				listSnapshotFilesOptions({
+					path: { name: repositoryName, snapshotId },
+					query: { path },
+				}),
+			);
+		},
+		pathTransform: {
+			strip: stripBasePath,
+			add: addBasePath,
+		},
+	});
+
+	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.`,
+			});
+			navigate(returnPath);
+		},
+		onError: (error) => {
+			toast.error("Restore failed", { description: error.message || "Failed to restore snapshot" });
+		},
+	});
+
+	const handleRestore = useCallback(() => {
+		if (!repositoryName || !snapshotId) return;
+
+		const excludeXattrArray = excludeXattr
+			?.split(",")
+			.map((s) => s.trim())
+			.filter(Boolean);
+
+		const isCustomLocation = restoreLocation === "custom";
+		const targetPath = isCustomLocation && customTargetPath.trim() ? customTargetPath.trim() : undefined;
+
+		const pathsArray = Array.from(selectedPaths);
+		const includePaths = pathsArray.map((path) => addBasePath(path));
+
+		restoreSnapshot({
+			path: { name: repositoryName },
+			body: {
+				snapshotId,
+				include: includePaths.length > 0 ? includePaths : undefined,
+				delete: deleteExtraFiles,
+				excludeXattr: excludeXattrArray && excludeXattrArray.length > 0 ? excludeXattrArray : undefined,
+				targetPath,
+				overwrite: overwriteMode,
+			},
+		});
+	}, [
+		repositoryName,
+		snapshotId,
+		excludeXattr,
+		restoreLocation,
+		customTargetPath,
+		selectedPaths,
+		addBasePath,
+		deleteExtraFiles,
+		overwriteMode,
+		restoreSnapshot,
+	]);
+
+	const canRestore = restoreLocation === "original" || customTargetPath.trim();
+
+	return (
+		<div className="space-y-6">
+			<div className="flex items-center justify-between">
+				<div>
+					<h1 className="text-2xl font-bold">Restore Snapshot</h1>
+					<p className="text-sm text-muted-foreground">
+						{repositoryName} / {snapshotId}
+					</p>
+				</div>
+				<div className="flex gap-2">
+					<Button variant="outline" onClick={() => navigate(returnPath)}>
+						Cancel
+					</Button>
+					<Button variant="primary" onClick={handleRestore} disabled={isRestoring || !canRestore}>
+						{isRestoring
+							? "Restoring..."
+							: selectedPaths.size > 0
+								? `Restore ${selectedPaths.size} ${selectedPaths.size === 1 ? "item" : "items"}`
+								: "Restore All"}
+					</Button>
+				</div>
+			</div>
+
+			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+				<div className="space-y-6">
+					<Card>
+						<CardHeader>
+							<CardTitle>Restore Location</CardTitle>
+							<CardDescription>Choose where to restore the files</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div className="grid grid-cols-1 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">
+									<PathSelector value={customTargetPath || "/"} onChange={setCustomTargetPath} />
+									<p className="text-xs text-muted-foreground">Files will be restored directly to this path</p>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<CardTitle>Overwrite Mode</CardTitle>
+							<CardDescription>How to handle existing files</CardDescription>
+						</CardHeader>
+						<CardContent className="space-y-3">
+							<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>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader className="cursor-pointer" onClick={() => setShowAdvanced(!showAdvanced)}>
+							<div className="flex items-center justify-between">
+								<CardTitle className="text-base">Advanced options</CardTitle>
+								<ChevronDown size={16} className={`transition-transform ${showAdvanced ? "rotate-180" : ""}`} />
+							</div>
+						</CardHeader>
+						{showAdvanced && (
+							<CardContent className="space-y-4">
+								<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>
+							</CardContent>
+						)}
+					</Card>
+				</div>
+				<Card className="lg:col-span-2 flex flex-col">
+					<CardHeader>
+						<CardTitle>Select Files to Restore</CardTitle>
+						<CardDescription>
+							{selectedPaths.size > 0
+								? `${selectedPaths.size} ${selectedPaths.size === 1 ? "item" : "items"} selected`
+								: "Select specific files or folders, or leave empty to restore everything"}
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="flex-1 overflow-hidden flex flex-col p-0">
+						{fileBrowser.isLoading && (
+							<div className="flex items-center justify-center flex-1">
+								<p className="text-muted-foreground">Loading files...</p>
+							</div>
+						)}
+
+						{fileBrowser.isEmpty && (
+							<div className="flex flex-col items-center justify-center flex-1 text-center p-8">
+								<FileIcon className="w-12 h-12 text-muted-foreground/50 mb-4" />
+								<p className="text-muted-foreground">No files in this snapshot</p>
+							</div>
+						)}
+
+						{!fileBrowser.isLoading && !fileBrowser.isEmpty && (
+							<div className="overflow-auto flex-1 border border-border rounded-md bg-card m-4">
+								<FileTree
+									files={fileBrowser.fileArray}
+									onFolderExpand={fileBrowser.handleFolderExpand}
+									onFolderHover={fileBrowser.handleFolderHover}
+									expandedFolders={fileBrowser.expandedFolders}
+									loadingFolders={fileBrowser.loadingFolders}
+									className="px-2 py-2"
+									withCheckboxes={true}
+									selectedPaths={selectedPaths}
+									onSelectionChange={setSelectedPaths}
+								/>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+			</div>
+		</div>
+	);
+}

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

@@ -1,54 +1,26 @@
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChevronDown, FileIcon, FolderOpen, RotateCcw } from "lucide-react";
+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 { Button, buttonVariants } from "~/client/components/ui/button";
-import { Checkbox } from "~/client/components/ui/checkbox";
+import type { Snapshot } from "~/client/lib/types";
-import { Label } from "~/client/components/ui/label";
+import { listSnapshotFilesOptions } from "~/client/api-client/@tanstack/react-query.gen";
-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 { 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 { snapshot, repositoryName, backupId, onDeleteSnapshot, isDeletingSnapshot } = props;
-
-	const isReadOnly = volume?.config && "readOnly" in volume.config && volume.config.readOnly === true;
 
 	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 && (
+							<Link
-								<Tooltip>
+								to={
-									<TooltipTrigger asChild>
+									backupId
-										<span tabIndex={isReadOnly ? 0 : undefined}>
+										? `/backups/${backupId}/${snapshot.short_id}/restore`
-											<Button
+										: `/repositories/${repositoryName}/${snapshot.short_id}/restore`
-												onClick={handleRestoreClick}
+								}
-												variant="primary"
+								className={buttonVariants({ variant: "primary", size: "sm" })}
-												size="sm"
+							>
-												disabled={isRestoring || isReadOnly}
+								Restore
-											>
+							</Link>
-												{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"
@@ -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
+					<CreateNotificationForm mode="create" formId={formId} onSubmit={handleSubmit} />
-						mode="create"
-						formId={formId}
-						onSubmit={handleSubmit}
-						loading={createNotification.isPending}
-					/>
 					<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
-						<CreateNotificationForm
+						mode="update"
-							mode="update"
+						formId={formId}
-							formId={formId}
+						onSubmit={handleSubmit}
-							onSubmit={handleSubmit}
+						initialValues={data.config}
-							initialValues={data.config}
+						loading={updateDestination.isPending}
-							loading={updateDestination.isPending}
+					/>
-						/>
+					<div className="flex justify-end gap-2 pt-4 border-t">
-						<div className="flex justify-end gap-2 pt-4 border-t">
+						<Button type="submit" form={formId} loading={updateDestination.isPending}>
-							<Button type="submit" form={formId} loading={updateDestination.isPending}>
+							Save Changes
-								Save Changes
+						</Button>
-							</Button>
+					</div>
-						</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} />

app/drizzle/meta/_journal.json

@@ -1,132 +1,132 @@
 {
-  "version": "7",
+	"version": "7",
-  "dialect": "sqlite",
+	"dialect": "sqlite",
-  "entries": [
+	"entries": [
-    {
+		{
-      "idx": 0,
+			"idx": 0,
-      "version": "6",
+			"version": "6",
-      "when": 1755765658194,
+			"when": 1755765658194,
-      "tag": "0000_known_madelyne_pryor",
+			"tag": "0000_known_madelyne_pryor",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 1,
+			"idx": 1,
-      "version": "6",
+			"version": "6",
-      "when": 1755775437391,
+			"when": 1755775437391,
-      "tag": "0001_far_frank_castle",
+			"tag": "0001_far_frank_castle",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 2,
+			"idx": 2,
-      "version": "6",
+			"version": "6",
-      "when": 1756930554198,
+			"when": 1756930554198,
-      "tag": "0002_cheerful_randall",
+			"tag": "0002_cheerful_randall",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 3,
+			"idx": 3,
-      "version": "6",
+			"version": "6",
-      "when": 1758653407064,
+			"when": 1758653407064,
-      "tag": "0003_mature_hellcat",
+			"tag": "0003_mature_hellcat",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 4,
+			"idx": 4,
-      "version": "6",
+			"version": "6",
-      "when": 1758961535488,
+			"when": 1758961535488,
-      "tag": "0004_wealthy_tomas",
+			"tag": "0004_wealthy_tomas",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 5,
+			"idx": 5,
-      "version": "6",
+			"version": "6",
-      "when": 1759416698274,
+			"when": 1759416698274,
-      "tag": "0005_simple_alice",
+			"tag": "0005_simple_alice",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 6,
+			"idx": 6,
-      "version": "6",
+			"version": "6",
-      "when": 1760734377440,
+			"when": 1760734377440,
-      "tag": "0006_secret_micromacro",
+			"tag": "0006_secret_micromacro",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 7,
+			"idx": 7,
-      "version": "6",
+			"version": "6",
-      "when": 1761224911352,
+			"when": 1761224911352,
-      "tag": "0007_watery_sersi",
+			"tag": "0007_watery_sersi",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 8,
+			"idx": 8,
-      "version": "6",
+			"version": "6",
-      "when": 1761414054481,
+			"when": 1761414054481,
-      "tag": "0008_silent_lady_bullseye",
+			"tag": "0008_silent_lady_bullseye",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 9,
+			"idx": 9,
-      "version": "6",
+			"version": "6",
-      "when": 1762095226041,
+			"when": 1762095226041,
-      "tag": "0009_little_adam_warlock",
+			"tag": "0009_little_adam_warlock",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 10,
+			"idx": 10,
-      "version": "6",
+			"version": "6",
-      "when": 1762610065889,
+			"when": 1762610065889,
-      "tag": "0010_perfect_proemial_gods",
+			"tag": "0010_perfect_proemial_gods",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 11,
+			"idx": 11,
-      "version": "6",
+			"version": "6",
-      "when": 1763644043601,
+			"when": 1763644043601,
-      "tag": "0011_familiar_stone_men",
+			"tag": "0011_familiar_stone_men",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 12,
+			"idx": 12,
-      "version": "6",
+			"version": "6",
-      "when": 1764100562084,
+			"when": 1764100562084,
-      "tag": "0012_add_short_ids",
+			"tag": "0012_add_short_ids",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 13,
+			"idx": 13,
-      "version": "6",
+			"version": "6",
-      "when": 1764182159797,
+			"when": 1764182159797,
-      "tag": "0013_elite_sprite",
+			"tag": "0013_elite_sprite",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 14,
+			"idx": 14,
-      "version": "6",
+			"version": "6",
-      "when": 1764182405089,
+			"when": 1764182405089,
-      "tag": "0014_wild_echo",
+			"tag": "0014_wild_echo",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 15,
+			"idx": 15,
-      "version": "6",
+			"version": "6",
-      "when": 1764182465287,
+			"when": 1764182465287,
-      "tag": "0015_jazzy_sersi",
+			"tag": "0015_jazzy_sersi",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 16,
+			"idx": 16,
-      "version": "6",
+			"version": "6",
-      "when": 1764194697035,
+			"when": 1764194697035,
-      "tag": "0016_fix-timestamps-to-ms",
+			"tag": "0016_fix-timestamps-to-ms",
-      "breakpoints": true
+			"breakpoints": true
-    },
+		},
-    {
+		{
-      "idx": 17,
+			"idx": 17,
-      "version": "6",
+			"version": "6",
-      "when": 1764357897219,
+			"when": 1764357897219,
-      "tag": "0017_fix-compression-modes",
+			"tag": "0017_fix-compression-modes",
-      "breakpoints": true
+			"breakpoints": true
-    }
+		}
-  ]
+	]
-}
+}

app/routes.ts

@@ -12,10 +12,12 @@ export default [
 		route("backups", "./client/modules/backups/routes/backups.tsx"),
 		route("backups/create", "./client/modules/backups/routes/create-backup.tsx"),
 		route("backups/:id", "./client/modules/backups/routes/backup-details.tsx"),
+		route("backups/:id/:snapshotId/restore", "./client/modules/backups/routes/restore-snapshot.tsx"),
 		route("repositories", "./client/modules/repositories/routes/repositories.tsx"),
 		route("repositories/create", "./client/modules/repositories/routes/create-repository.tsx"),
 		route("repositories/:name", "./client/modules/repositories/routes/repository-details.tsx"),
 		route("repositories/:name/:snapshotId", "./client/modules/repositories/routes/snapshot-details.tsx"),
+		route("repositories/:name/:snapshotId/restore", "./client/modules/repositories/routes/restore-snapshot.tsx"),
 		route("notifications", "./client/modules/notifications/routes/notifications.tsx"),
 		route("notifications/create", "./client/modules/notifications/routes/create-notification.tsx"),
 		route("notifications/:id", "./client/modules/notifications/routes/notification-details.tsx"),

app/server/modules/auth/auth.controller.ts

@@ -21,7 +21,6 @@ import {
 } from "./auth.dto";
 import { authService } from "./auth.service";
 import { toMessage } from "../../utils/errors";
-import { logger } from "~/server/utils/logger";
 
 const COOKIE_NAME = "session_id";
 const COOKIE_OPTIONS = {

app/server/modules/lifecycle/checkpoint.ts

@@ -2,7 +2,6 @@ import { eq, sql } from "drizzle-orm";
 import { db } from "../../db/db";
 import { appMetadataTable, usersTable } from "../../db/schema";
 import { logger } from "../../utils/logger";
-import { REQUIRED_MIGRATIONS } from "~/server/core/constants";
 
 const MIGRATION_KEY_PREFIX = "migration:";