Merge branch 'main' into missing-icons

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

@@ -23,8 +23,11 @@ import type { BackupSchedule, Volume } from "~/client/lib/types";
 import { deepClean } from "~/utils/object";
 
 const internalFormSchema = type({
+	name: "1 <= string <= 32",
 	repositoryId: "string",
 	excludePatternsText: "string?",
+	excludeIfPresentText: "string?",
+	includePatternsText: "string?",
 	includePatterns: "string[]?",
 	frequency: "string",
 	dailyTime: "string?",
@@ -50,8 +53,12 @@ export const weeklyDays = [
 
 type InternalFormValues = typeof internalFormSchema.infer;
 
-export type BackupScheduleFormValues = Omit<InternalFormValues, "excludePatternsText"> & {
+export type BackupScheduleFormValues = Omit<
+	InternalFormValues,
+	"excludePatternsText" | "excludeIfPresentText" | "includePatternsText"
+> & {
 	excludePatterns?: string[];
+	excludeIfPresent?: string[];
 };
 
 type Props = {
@@ -79,13 +86,21 @@ const backupScheduleToFormValues = (schedule?: BackupSchedule): InternalFormValu
 
 	const weeklyDay = frequency === "weekly" ? dayOfWeekPart : undefined;
 
+	const patterns = schedule.includePatterns || [];
+	const isGlobPattern = (p: string) => /[*?[\]]/.test(p);
+	const fileBrowserPaths = patterns.filter((p) => !isGlobPattern(p));
+	const textPatterns = patterns.filter(isGlobPattern);
+
 	return {
+		name: schedule.name,
 		repositoryId: schedule.repositoryId,
 		frequency,
 		dailyTime,
 		weeklyDay,
-		includePatterns: schedule.includePatterns || undefined,
+		includePatterns: fileBrowserPaths.length > 0 ? fileBrowserPaths : undefined,
+		includePatternsText: textPatterns.length > 0 ? textPatterns.join("\n") : undefined,
 		excludePatternsText: schedule.excludePatterns?.join("\n") || undefined,
+		excludeIfPresentText: schedule.excludeIfPresent?.join("\n") || undefined,
 		...schedule.retentionPolicy,
 	};
 };
@@ -98,18 +113,40 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 
 	const handleSubmit = useCallback(
 		(data: InternalFormValues) => {
-			// Convert excludePatternsText string to excludePatterns array
-			const { excludePatternsText, ...rest } = data;
+			const {
+				excludePatternsText,
+				excludeIfPresentText,
+				includePatternsText,
+				includePatterns: fileBrowserPatterns,
+				...rest
+			} = data;
 			const excludePatterns = excludePatternsText
 				? excludePatternsText
 						.split("\n")
 						.map((p) => p.trim())
 						.filter(Boolean)
-				: undefined;
+				: [];
+
+			const excludeIfPresent = excludeIfPresentText
+				? excludeIfPresentText
+						.split("\n")
+						.map((p) => p.trim())
+						.filter(Boolean)
+				: [];
+
+			const textPatterns = includePatternsText
+				? includePatternsText
+						.split("\n")
+						.map((p) => p.trim())
+						.filter(Boolean)
+				: [];
+			const includePatterns = [...(fileBrowserPatterns || []), ...textPatterns];
 
 			onSubmit({
 				...rest,
+				includePatterns: includePatterns.length > 0 ? includePatterns : [],
 				excludePatterns,
+				excludeIfPresent,
 			});
 		},
 		[onSubmit],
@@ -148,6 +185,21 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 							</CardDescription>
 						</CardHeader>
 						<CardContent className="grid gap-6 md:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="name"
+								render={({ field }) => (
+									<FormItem className="md:col-span-2">
+										<FormLabel>Backup name</FormLabel>
+										<FormControl>
+											<Input placeholder="My backup" {...field} />
+										</FormControl>
+										<FormDescription>A unique name to identify this backup schedule.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
 							<FormField
 								control={form.control}
 								name="repositoryId"
@@ -260,6 +312,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 						</CardHeader>
 						<CardContent>
 							<VolumeFileBrowser
+								key={volume.id}
 								volumeName={volume.name}
 								selectedPaths={selectedPaths}
 								onSelectionChange={handleSelectionChange}
@@ -279,6 +332,27 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									</div>
 								</div>
 							)}
+							<FormField
+								control={form.control}
+								name="includePatternsText"
+								render={({ field }) => (
+									<FormItem className="mt-6">
+										<FormLabel>Additional include patterns</FormLabel>
+										<FormControl>
+											<Textarea
+												{...field}
+												placeholder="/data/**&#10;/config/*.json&#10;*.db"
+												className="font-mono text-sm min-h-[100px]"
+											/>
+										</FormControl>
+										<FormDescription>
+											Optionally add custom include patterns using glob syntax. Enter one pattern per line. These will
+											be combined with the paths selected above.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 						</CardContent>
 					</Card>
 
@@ -320,6 +394,28 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									</FormItem>
 								)}
 							/>
+							<FormField
+								control={form.control}
+								name="excludeIfPresentText"
+								render={({ field }) => (
+									<FormItem className="mt-6">
+										<FormLabel>Exclude if file present</FormLabel>
+										<FormControl>
+											<Textarea
+												{...field}
+												placeholder=".nobackup&#10;.exclude-from-backup&#10;CACHEDIR.TAG"
+												className="font-mono text-sm min-h-20"
+											/>
+										</FormControl>
+										<FormDescription>
+											Exclude folders containing a file with the specified name. Enter one filename per line. For
+											example, use <code className="bg-muted px-1 rounded">.nobackup</code> to skip any folder
+											containing a <code className="bg-muted px-1 rounded">.nobackup</code> file.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
 						</CardContent>
 					</Card>
 
@@ -482,18 +578,27 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									{repositoriesData?.find((r) => r.id === formValues.repositoryId)?.name || "—"}
 								</p>
 							</div>
-							{formValues.includePatterns && formValues.includePatterns.length > 0 && (
+							{(formValues.includePatterns && formValues.includePatterns.length > 0) ||
+							formValues.includePatternsText ? (
 								<div>
-									<p className="text-xs uppercase text-muted-foreground">Include paths</p>
+									<p className="text-xs uppercase text-muted-foreground">Include paths/patterns</p>
 									<div className="flex flex-col gap-1">
-										{formValues.includePatterns.map((path) => (
+										{formValues.includePatterns?.map((path) => (
 											<span key={path} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
 												{path}
 											</span>
 										))}
+										{formValues.includePatternsText
+											?.split("\n")
+											.filter(Boolean)
+											.map((pattern) => (
+												<span key={pattern} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+													{pattern.trim()}
+												</span>
+											))}
 									</div>
 								</div>
-							)}
+							) : null}
 							{formValues.excludePatternsText && (
 								<div>
 									<p className="text-xs uppercase text-muted-foreground">Exclude patterns</p>
@@ -509,6 +614,21 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									</div>
 								</div>
 							)}
+							{formValues.excludeIfPresentText && (
+								<div>
+									<p className="text-xs uppercase text-muted-foreground">Exclude if present</p>
+									<div className="flex flex-col gap-1">
+										{formValues.excludeIfPresentText
+											.split("\n")
+											.filter(Boolean)
+											.map((filename) => (
+												<span key={filename} className="text-xs font-mono bg-accent px-1.5 py-0.5 rounded">
+													{filename.trim()}
+												</span>
+											))}
+									</div>
+								</div>
+							)}
 							<div>
 								<p className="text-xs uppercase text-muted-foreground">Retention</p>
 								<p className="font-medium">

app/client/modules/backups/components/schedule-mirrors-config.tsx

@@ -0,0 +1,352 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Copy, Plus, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "~/client/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
+import { Switch } from "~/client/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/client/components/ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/client/components/ui/table";
+import { Badge } from "~/client/components/ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/client/components/ui/tooltip";
+import {
+	getScheduleMirrorsOptions,
+	getMirrorCompatibilityOptions,
+	updateScheduleMirrorsMutation,
+} from "~/client/api-client/@tanstack/react-query.gen";
+import { parseError } from "~/client/lib/errors";
+import type { Repository } from "~/client/lib/types";
+import { RepositoryIcon } from "~/client/components/repository-icon";
+import { StatusDot } from "~/client/components/status-dot";
+import { formatDistanceToNow } from "date-fns";
+import { Link } from "react-router";
+import { cn } from "~/client/lib/utils";
+
+type Props = {
+	scheduleId: number;
+	primaryRepositoryId: string;
+	repositories: Repository[];
+};
+
+type MirrorAssignment = {
+	repositoryId: string;
+	enabled: boolean;
+	lastCopyAt: number | null;
+	lastCopyStatus: "success" | "error" | null;
+	lastCopyError: string | null;
+};
+
+export const ScheduleMirrorsConfig = ({ scheduleId, primaryRepositoryId, repositories }: Props) => {
+	const [assignments, setAssignments] = useState<Map<string, MirrorAssignment>>(new Map());
+	const [hasChanges, setHasChanges] = useState(false);
+	const [isAddingNew, setIsAddingNew] = useState(false);
+
+	const { data: currentMirrors } = useQuery({
+		...getScheduleMirrorsOptions({ path: { scheduleId: scheduleId.toString() } }),
+	});
+
+	const { data: compatibility } = useQuery({
+		...getMirrorCompatibilityOptions({ path: { scheduleId: scheduleId.toString() } }),
+	});
+
+	const updateMirrors = useMutation({
+		...updateScheduleMirrorsMutation(),
+		onSuccess: () => {
+			toast.success("Mirror settings saved successfully");
+			setHasChanges(false);
+		},
+		onError: (error) => {
+			toast.error("Failed to save mirror settings", {
+				description: parseError(error)?.message,
+			});
+		},
+	});
+
+	const compatibilityMap = useMemo(() => {
+		const map = new Map<string, { compatible: boolean; reason: string | null }>();
+		if (compatibility) {
+			for (const item of compatibility) {
+				map.set(item.repositoryId, { compatible: item.compatible, reason: item.reason });
+			}
+		}
+		return map;
+	}, [compatibility]);
+
+	useEffect(() => {
+		if (currentMirrors && !hasChanges) {
+			const map = new Map<string, MirrorAssignment>();
+			for (const mirror of currentMirrors) {
+				map.set(mirror.repositoryId, {
+					repositoryId: mirror.repositoryId,
+					enabled: mirror.enabled,
+					lastCopyAt: mirror.lastCopyAt,
+					lastCopyStatus: mirror.lastCopyStatus,
+					lastCopyError: mirror.lastCopyError,
+				});
+			}
+
+			setAssignments(map);
+		}
+	}, [currentMirrors, hasChanges]);
+
+	const addRepository = (repositoryId: string) => {
+		const newAssignments = new Map(assignments);
+		newAssignments.set(repositoryId, {
+			repositoryId,
+			enabled: true,
+			lastCopyAt: null,
+			lastCopyStatus: null,
+			lastCopyError: null,
+		});
+
+		setAssignments(newAssignments);
+		setHasChanges(true);
+		setIsAddingNew(false);
+	};
+
+	const removeRepository = (repositoryId: string) => {
+		const newAssignments = new Map(assignments);
+		newAssignments.delete(repositoryId);
+		setAssignments(newAssignments);
+		setHasChanges(true);
+	};
+
+	const toggleEnabled = (repositoryId: string) => {
+		const assignment = assignments.get(repositoryId);
+		if (!assignment) return;
+
+		const newAssignments = new Map(assignments);
+		newAssignments.set(repositoryId, {
+			...assignment,
+			enabled: !assignment.enabled,
+		});
+
+		setAssignments(newAssignments);
+		setHasChanges(true);
+	};
+
+	const handleSave = () => {
+		const mirrorsList = Array.from(assignments.values()).map((a) => ({
+			repositoryId: a.repositoryId,
+			enabled: a.enabled,
+		}));
+		updateMirrors.mutate({
+			path: { scheduleId: scheduleId.toString() },
+			body: {
+				mirrors: mirrorsList,
+			},
+		});
+	};
+
+	const handleReset = () => {
+		if (currentMirrors) {
+			const map = new Map<string, MirrorAssignment>();
+			for (const mirror of currentMirrors) {
+				map.set(mirror.repositoryId, {
+					repositoryId: mirror.repositoryId,
+					enabled: mirror.enabled,
+					lastCopyAt: mirror.lastCopyAt,
+					lastCopyStatus: mirror.lastCopyStatus,
+					lastCopyError: mirror.lastCopyError,
+				});
+			}
+			setAssignments(map);
+			setHasChanges(false);
+		}
+	};
+
+	const selectableRepositories =
+		repositories?.filter((r) => {
+			if (r.id === primaryRepositoryId) return false;
+			if (assignments.has(r.id)) return false;
+			return true;
+		}) || [];
+
+	const hasAvailableRepositories = selectableRepositories.some((r) => {
+		const compat = compatibilityMap.get(r.id);
+		return compat?.compatible !== false;
+	});
+
+	const assignedRepositories = Array.from(assignments.keys())
+		.map((id) => repositories?.find((r) => r.id === id))
+		.filter((r) => r !== undefined);
+
+	const getStatusVariant = (status: "success" | "error" | null) => {
+		if (status === "success") return "success";
+		if (status === "error") return "error";
+		return "neutral";
+	};
+
+	const getStatusLabel = (assignment: MirrorAssignment) => {
+		if (assignment.lastCopyStatus === "error" && assignment.lastCopyError) {
+			return assignment.lastCopyError;
+		}
+		if (assignment.lastCopyStatus === "success") {
+			return "Last copy successful";
+		}
+		return "Never copied";
+	};
+
+	return (
+		<Card>
+			<CardHeader>
+				<div className="flex items-center justify-between">
+					<div>
+						<CardTitle className="flex items-center gap-2">
+							<Copy className="h-5 w-5" />
+							Mirror Repositories
+						</CardTitle>
+						<CardDescription>
+							Configure secondary repositories where snapshots will be automatically copied after each backup
+						</CardDescription>
+					</div>
+					{!isAddingNew && selectableRepositories.length > 0 && (
+						<Button variant="outline" size="sm" onClick={() => setIsAddingNew(true)}>
+							<Plus className="h-4 w-4 mr-2" />
+							Add mirror
+						</Button>
+					)}
+				</div>
+			</CardHeader>
+			<CardContent>
+				{isAddingNew && (
+					<div className="mb-6 flex items-center gap-2 max-w-md">
+						<Select onValueChange={addRepository}>
+							<SelectTrigger className="w-full">
+								<SelectValue placeholder="Select a repository to mirror to..." />
+							</SelectTrigger>
+							<SelectContent>
+								{selectableRepositories.map((repository) => {
+									const compat = compatibilityMap.get(repository.id);
+
+									return (
+										<Tooltip key={repository.id}>
+											<TooltipTrigger asChild>
+												<div>
+													<SelectItem value={repository.id} disabled={!compat?.compatible}>
+														<div className="flex items-center gap-2">
+															<RepositoryIcon backend={repository.type} className="h-4 w-4" />
+															<span>{repository.name}</span>
+															<span className="text-xs uppercase text-muted-foreground">({repository.type})</span>
+														</div>
+													</SelectItem>
+												</div>
+											</TooltipTrigger>
+											<TooltipContent side="right" className={cn("max-w-xs", { hidden: compat?.compatible })}>
+												<p>{compat?.reason || "This repository is not compatible for mirroring."}</p>
+												<p className="mt-1 text-xs text-muted-foreground">
+													Consider creating a new backup scheduler with the desired destination instead.
+												</p>
+											</TooltipContent>
+										</Tooltip>
+									);
+								})}
+								{!hasAvailableRepositories && selectableRepositories.length > 0 && (
+									<div className="px-2 py-3 text-sm text-muted-foreground text-center">
+										All available repositories have conflicting backends.
+										<br />
+										<span className="text-xs">
+											Consider creating a new backup scheduler with the desired destination instead.
+										</span>
+									</div>
+								)}
+							</SelectContent>
+						</Select>
+						<Button variant="ghost" size="sm" onClick={() => setIsAddingNew(false)}>
+							Cancel
+						</Button>
+					</div>
+				)}
+
+				{assignedRepositories.length === 0 ? (
+					<div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
+						<Copy className="h-8 w-8 mb-2 opacity-20" />
+						<p className="text-sm">No mirror repositories configured for this schedule.</p>
+						<p className="text-xs mt-1">Click "Add mirror" to replicate backups to additional repositories.</p>
+					</div>
+				) : (
+					<div className="rounded-md border">
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Repository</TableHead>
+									<TableHead className="text-center w-[100px]">Enabled</TableHead>
+									<TableHead className="w-[180px]">Last Copy</TableHead>
+									<TableHead className="w-[50px]"></TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody>
+								{assignedRepositories.map((repository) => {
+									const assignment = assignments.get(repository.id);
+									if (!assignment) return null;
+
+									return (
+										<TableRow key={repository.id}>
+											<TableCell>
+												<div className="flex items-center gap-2">
+													<Link
+														to={`/repositories/${repository.name}`}
+														className="hover:underline flex items-center gap-2"
+													>
+														<RepositoryIcon backend={repository.type} className="h-4 w-4" />
+														<span className="font-medium">{repository.name}</span>
+													</Link>
+													<Badge variant="outline" className="text-[10px] align-middle">
+														{repository.type}
+													</Badge>
+												</div>
+											</TableCell>
+											<TableCell className="text-center">
+												<Switch
+													className="align-middle"
+													checked={assignment.enabled}
+													onCheckedChange={() => toggleEnabled(repository.id)}
+												/>
+											</TableCell>
+											<TableCell>
+												{assignment.lastCopyAt ? (
+													<div className="flex items-center gap-2">
+														<StatusDot
+															variant={getStatusVariant(assignment.lastCopyStatus)}
+															label={getStatusLabel(assignment)}
+														/>
+														<span className="text-sm text-muted-foreground">
+															{formatDistanceToNow(new Date(assignment.lastCopyAt), { addSuffix: true })}
+														</span>
+													</div>
+												) : (
+													<span className="text-sm text-muted-foreground">Never</span>
+												)}
+											</TableCell>
+											<TableCell>
+												<Button
+													variant="ghost"
+													size="icon"
+													onClick={() => removeRepository(repository.id)}
+													className="h-8 w-8 text-muted-foreground hover:text-destructive align-baseline"
+												>
+													<Trash2 className="h-4 w-4" />
+												</Button>
+											</TableCell>
+										</TableRow>
+									);
+								})}
+							</TableBody>
+						</Table>
+					</div>
+				)}
+
+				{hasChanges && (
+					<div className="flex gap-2 justify-end mt-4 pt-4">
+						<Button variant="outline" size="sm" onClick={handleReset}>
+							Cancel
+						</Button>
+						<Button variant="default" size="sm" onClick={handleSave} loading={updateMirrors.isPending}>
+							Save changes
+						</Button>
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+};

app/client/modules/backups/components/schedule-summary.tsx

@@ -1,4 +1,4 @@
-import { Check, Eraser, Pencil, Play, Square, Trash2, X } from "lucide-react";
+import { Check, Database, Eraser, HardDrive, Pencil, Play, Square, Trash2, X } from "lucide-react";
 import { useMemo, useState } from "react";
 import { OnOff } from "~/client/components/onoff";
 import { Button } from "~/client/components/ui/button";
@@ -18,6 +18,7 @@ import { runForgetMutation } from "~/client/api-client/@tanstack/react-query.gen
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { parseError } from "~/client/lib/errors";
+import { Link } from "react-router";
 
 type Props = {
 	schedule: BackupSchedule;
@@ -82,10 +83,17 @@ export const ScheduleSummary = (props: Props) => {
 				<CardHeader className="space-y-4">
 					<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
 						<div>
-							<CardTitle>Backup schedule</CardTitle>
-							<CardDescription>
-								Automated backup configuration for volume&nbsp;
-								<strong className="text-strong-accent">{schedule.volume.name}</strong>
+							<CardTitle>{schedule.name}</CardTitle>
+							<CardDescription className="mt-1">
+								<Link to={`/volumes/${schedule.volume.name}`} className="hover:underline">
+									<HardDrive className="inline h-4 w-4 mr-2" />
+									<span>{schedule.volume.name}</span>
+								</Link>
+								<span className="mx-2">→</span>
+								<Link to={`/repositories/${schedule.repository.name}`} className="hover:underline">
+									<Database className="inline h-4 w-4 mr-2 text-strong-accent" />
+									<span className="text-strong-accent">{schedule.repository.name}</span>
+								</Link>
 							</CardDescription>
 						</div>
 						<div className="flex items-center gap-2 justify-between sm:justify-start">

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

@@ -30,15 +30,16 @@ import { ScheduleSummary } from "../components/schedule-summary";
 import type { Route } from "./+types/backup-details";
 import { SnapshotFileBrowser } from "../components/snapshot-file-browser";
 import { SnapshotTimeline } from "../components/snapshot-timeline";
-import { getBackupSchedule, listNotificationDestinations } from "~/client/api-client";
+import { getBackupSchedule, listNotificationDestinations, listRepositories } from "~/client/api-client";
 import { ScheduleNotificationsConfig } from "../components/schedule-notifications-config";
+import { ScheduleMirrorsConfig } from "../components/schedule-mirrors-config";
 import { cn } from "~/client/lib/utils";
 
 export const handle = {
-	breadcrumb: (match: Route.MetaArgs) => [
-		{ label: "Backups", href: "/backups" },
-		{ label: `Schedule #${match.params.id}` },
-	],
+	breadcrumb: (match: Route.MetaArgs) => {
+		const data = match.loaderData;
+		return [{ label: "Backups", href: "/backups" }, { label: data.schedule.name }];
+	},
 };
 
 export function meta(_: Route.MetaArgs) {
@@ -54,10 +55,11 @@ export function meta(_: Route.MetaArgs) {
 export const clientLoader = async ({ params }: Route.LoaderArgs) => {
 	const schedule = await getBackupSchedule({ path: { scheduleId: params.id } });
 	const notifs = await listNotificationDestinations();
+	const repos = await listRepositories();
 
 	if (!schedule.data) return redirect("/backups");
 
-	return { schedule: schedule.data, notifs: notifs.data };
+	return { schedule: schedule.data, notifs: notifs.data, repos: repos.data };
 };
 
 export default function ScheduleDetailsPage({ params, loaderData }: Route.ComponentProps) {
@@ -152,12 +154,14 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 		updateSchedule.mutate({
 			path: { scheduleId: schedule.id.toString() },
 			body: {
+				name: formValues.name,
 				repositoryId: formValues.repositoryId,
 				enabled: schedule.enabled,
 				cronExpression,
 				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
 				includePatterns: formValues.includePatterns,
 				excludePatterns: formValues.excludePatterns,
+				excludeIfPresent: formValues.excludeIfPresent,
 			},
 		});
 	};
@@ -170,8 +174,9 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 				enabled,
 				cronExpression: schedule.cronExpression,
 				retentionPolicy: schedule.retentionPolicy || undefined,
-				includePatterns: schedule.includePatterns || undefined,
-				excludePatterns: schedule.excludePatterns || undefined,
+				includePatterns: schedule.includePatterns || [],
+				excludePatterns: schedule.excludePatterns || [],
+				excludeIfPresent: schedule.excludeIfPresent || [],
 			},
 		});
 	};
@@ -229,6 +234,13 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 			<div className={cn({ hidden: !loaderData.notifs?.length })}>
 				<ScheduleNotificationsConfig scheduleId={schedule.id} destinations={loaderData.notifs ?? []} />
 			</div>
+			<div className={cn({ hidden: !loaderData.repos?.length || loaderData.repos.length < 2 })}>
+				<ScheduleMirrorsConfig
+					scheduleId={schedule.id}
+					primaryRepositoryId={schedule.repositoryId}
+					repositories={loaderData.repos ?? []}
+				/>
+			</div>
 			<SnapshotTimeline
 				loading={isLoading}
 				snapshots={snapshots ?? []}

app/client/modules/backups/routes/backups.tsx

@@ -67,13 +67,11 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
 				{schedules.map((schedule) => (
 					<Link key={schedule.id} to={`/backups/${schedule.id}`}>
 						<Card key={schedule.id} className="flex flex-col h-full">
-							<CardHeader className="pb-3">
-								<div className="flex items-start justify-between gap-2">
-									<div className="flex items-center gap-2 flex-1 min-w-0">
-										<HardDrive className="h-5 w-5 text-muted-foreground shrink-0" />
-										<CardTitle className="text-lg truncate">
-											Volume <span className="text-strong-accent">{schedule.volume.name}</span>
-										</CardTitle>
+							<CardHeader className="pb-3 overflow-hidden">
+								<div className="flex items-center justify-between gap-2 w-full">
+									<div className="flex items-center gap-2 flex-1 min-w-0 w-0">
+										<CalendarClock className="h-5 w-5 text-muted-foreground shrink-0" />
+										<CardTitle className="text-lg truncate">{schedule.name}</CardTitle>
 									</div>
 									<BackupStatusDot
 										enabled={schedule.enabled}
@@ -81,9 +79,12 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
 										isInProgress={schedule.lastBackupStatus === "in_progress"}
 									/>
 								</div>
-								<CardDescription className="flex items-center gap-2 mt-2">
-									<Database className="h-4 w-4" />
-									<span className="truncate">{schedule.repository.name}</span>
+								<CardDescription className="ml-0.5 flex items-center gap-2 text-xs">
+									<HardDrive className="h-3.5 w-3.5" />
+									<span className="truncate">{schedule.volume.name}</span>
+									<span className="text-muted-foreground">→</span>
+									<Database className="h-3.5 w-3.5 text-strong-accent" />
+									<span className="truncate text-strong-accent">{schedule.repository.name}</span>
 								</CardDescription>
 							</CardHeader>
 							<CardContent className="flex-1 space-y-4">

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

@@ -83,6 +83,7 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 
 		createSchedule.mutate({
 			body: {
+				name: formValues.name,
 				volumeId: selectedVolumeId,
 				repositoryId: formValues.repositoryId,
 				enabled: true,
@@ -90,6 +91,7 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
 				includePatterns: formValues.includePatterns,
 				excludePatterns: formValues.excludePatterns,
+				excludeIfPresent: formValues.excludeIfPresent,
 			},
 		});
 	};

app/client/modules/repositories/tabs/snapshots.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Database, X } from "lucide-react";
 import { useState } from "react";
-import { listSnapshotsOptions } from "~/client/api-client/@tanstack/react-query.gen";
+import { listBackupSchedulesOptions, listSnapshotsOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { SnapshotsTable } from "~/client/components/snapshots-table";
 import { Button } from "~/client/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
@@ -21,6 +21,10 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 		initialData: [],
 	});
 
+	const schedules = useQuery({
+		...listBackupSchedulesOptions(),
+	});
+
 	const filteredSnapshots = data.filter((snapshot: Snapshot) => {
 		if (!searchQuery) return true;
 		const searchLower = searchQuery.toLowerCase();
@@ -133,7 +137,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 					</TableBody>
 				</Table>
 			) : (
-				<SnapshotsTable snapshots={filteredSnapshots} repositoryName={repository.name} />
+				<SnapshotsTable snapshots={filteredSnapshots} repositoryName={repository.name} backups={schedules.data ?? []} />
 			)}
 			<div className="px-4 py-2 text-sm text-muted-foreground bg-card-header flex justify-between border-t">
 				<span>