fix(backups): allow removing selected paths that no longer exist on filesystem (#272)

Add X button to selected paths list in backup schedule form. When files/folders
are selected for backup but later deleted from the volume, restic fails because
`--files-from` references non-existent paths. Previously, users couldn't remove
these stale paths since they don't appear in the file browser to uncheck.

The X button enables direct removal of any selected path, fixing stuck backup
configurations that would always fail with "file not found" errors.

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

@@ -2,6 +2,7 @@ import { arktypeResolver } from "@hookform/resolvers/arktype";
 
 import { useQuery } from "@tanstack/react-query";
 import { type } from "arktype";
+import { X } from "lucide-react";
 import { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
 import { listRepositoriesOptions } from "~/client/api-client/@tanstack/react-query.gen";
@@ -169,6 +170,16 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 		[form],
 	);
 
+	const handleRemovePath = useCallback(
+		(pathToRemove: string) => {
+			const newPaths = new Set(selectedPaths);
+			newPaths.delete(pathToRemove);
+			setSelectedPaths(newPaths);
+			form.setValue("includePatterns", Array.from(newPaths));
+		},
+		[selectedPaths, form],
+	);
+
 	return (
 		<Form {...form}>
 			<form
@@ -373,8 +384,19 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									<p className="text-xs text-muted-foreground mb-2">Selected paths:</p>
 									<div className="flex flex-wrap gap-2">
 										{Array.from(selectedPaths).map((path) => (
-											<span key={path} className="text-xs bg-accent px-2 py-1 rounded-md font-mono">
+											<span
+												key={path}
+												className="text-xs bg-accent px-2 py-1 rounded-md font-mono inline-flex items-center gap-1"
+											>
 												{path}
+												<button
+													type="button"
+													onClick={() => handleRemovePath(path)}
+													className="ml-1 hover:bg-destructive/20 rounded p-0.5 transition-colors"
+													aria-label={`Remove ${path}`}
+												>
+													<X className="h-3 w-3" />
+												</button>
 											</span>
 										))}
 									</div>