feat: select folders to backup when creating a job

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

@@ -1,6 +1,7 @@
 import { arktypeResolver } from "@hookform/resolvers/arktype";
 import { useQuery } from "@tanstack/react-query";
 import { type } from "arktype";
+import { useCallback, useState } from "react";
 import { useForm } from "react-hook-form";
 import { listRepositoriesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { RepositoryIcon } from "~/components/repository-icon";
@@ -8,6 +9,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/com
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { VolumeFileBrowser } from "~/components/volume-file-browser";
 import type { BackupSchedule, Volume } from "~/lib/types";
 import { deepClean } from "~/utils/object";
 
@@ -69,6 +71,7 @@ const backupScheduleToFormValues = (schedule?: BackupSchedule): BackupScheduleFo
 		frequency,
 		dailyTime,
 		weeklyDay,
+		includePatterns: schedule.includePatterns || undefined,
 		...schedule.retentionPolicy,
 	};
 };
@@ -86,6 +89,16 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 	const frequency = form.watch("frequency");
 	const formValues = form.watch();
 
+	const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set(initialValues?.includePatterns || []));
+
+	const handleSelectionChange = useCallback(
+		(paths: Set<string>) => {
+			setSelectedPaths(paths);
+			form.setValue("includePatterns", Array.from(paths));
+		},
+		[form],
+	);
+
 	return (
 		<Form {...form}>
 			<form
@@ -204,6 +217,38 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 						</CardContent>
 					</Card>
 
+					<Card>
+						<CardHeader>
+							<CardTitle>Backup paths</CardTitle>
+							<CardDescription>
+								Select which folders to include in the backup. If no paths are selected, the entire volume will be
+								backed up.
+							</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<VolumeFileBrowser
+								volumeName={volume.name}
+								selectedPaths={selectedPaths}
+								onSelectionChange={handleSelectionChange}
+								withCheckboxes={true}
+								foldersOnly={true}
+								className="overflow-auto flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px]"
+							/>
+							{selectedPaths.size > 0 && (
+								<div className="mt-4">
+									<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">
+												{path}
+											</span>
+										))}
+									</div>
+								</div>
+							)}
+						</CardContent>
+					</Card>
+
 					<Card>
 						<CardHeader>
 							<CardTitle>Retention policy</CardTitle>

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

@@ -87,6 +87,8 @@ export default function ScheduleDetailsPage() {
 				enabled: schedule.enabled,
 				cronExpression,
 				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+				includePatterns: formValues.includePatterns,
+				excludePatterns: formValues.excludePatterns,
 			},
 		});
 	};
@@ -101,6 +103,8 @@ export default function ScheduleDetailsPage() {
 				enabled,
 				cronExpression: schedule.cronExpression,
 				retentionPolicy: schedule.retentionPolicy || undefined,
+				includePatterns: schedule.includePatterns || undefined,
+				excludePatterns: schedule.excludePatterns || undefined,
 			},
 		});
 	};

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

@@ -38,7 +38,6 @@ export const clientLoader = async () => {
 
 export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 	const navigate = useNavigate();
-	const queryClient = useQueryClient();
 	const formId = useId();
 	const [selectedVolumeId, setSelectedVolumeId] = useState<number | undefined>();
 
@@ -56,7 +55,6 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 		...createBackupScheduleMutation(),
 		onSuccess: (data) => {
 			toast.success("Backup job created successfully");
-			queryClient.invalidateQueries({ queryKey: ["listBackupSchedules"] });
 			navigate(`/backups/${data.id}`);
 		},
 		onError: (error) => {
@@ -86,6 +84,8 @@ export default function CreateBackup({ loaderData }: Route.ComponentProps) {
 				enabled: true,
 				cronExpression,
 				retentionPolicy: Object.keys(retentionPolicy).length > 0 ? retentionPolicy : undefined,
+				includePatterns: formValues.includePatterns,
+				excludePatterns: formValues.excludePatterns,
 			},
 		});
 	};

apps/client/app/modules/volumes/tabs/files.tsx

@@ -1,9 +1,5 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { FolderOpen } from "lucide-react";
-import { useCallback, useMemo, useState } from "react";
-import { listFilesOptions } from "~/api-client/@tanstack/react-query.gen";
-import { listFiles } from "~/api-client/sdk.gen";
-import { FileTree } from "~/components/file-tree";
+import { VolumeFileBrowser } from "~/components/volume-file-browser";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import type { Volume } from "~/lib/types";
 
@@ -11,99 +7,7 @@ type Props = {
 	volume: Volume;
 };
 
-interface FileEntry {
-	name: string;
-	path: string;
-	type: "file" | "directory";
-	size?: number;
-	modifiedAt?: number;
-}
-
 export const FilesTabContent = ({ volume }: Props) => {
-	const queryClient = useQueryClient();
-	const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set());
-	const [fetchedFolders, setFetchedFolders] = useState<Set<string>>(new Set(["/"]));
-	const [loadingFolders, setLoadingFolders] = useState<Set<string>>(new Set());
-	const [allFiles, setAllFiles] = useState<Map<string, FileEntry>>(new Map());
-
-	const { data, isLoading, error } = useQuery({
-		...listFilesOptions({ path: { name: volume.name } }),
-		enabled: volume.status === "mounted",
-		refetchInterval: 10000,
-	});
-
-	useMemo(() => {
-		if (data?.files) {
-			setAllFiles((prev) => {
-				const next = new Map(prev);
-				for (const file of data.files) {
-					next.set(file.path, file);
-				}
-				return next;
-			});
-		}
-	}, [data]);
-
-	const handleFolderExpand = useCallback(
-		async (folderPath: string) => {
-			setExpandedFolders((prev) => {
-				const next = new Set(prev);
-				next.add(folderPath);
-				return next;
-			});
-
-			if (!fetchedFolders.has(folderPath)) {
-				setLoadingFolders((prev) => new Set(prev).add(folderPath));
-
-				try {
-					const result = await listFiles({
-						path: { name: volume.name },
-						query: { path: folderPath },
-						throwOnError: true,
-					});
-
-					if (result.data?.files) {
-						setAllFiles((prev) => {
-							const next = new Map(prev);
-							for (const file of result.data.files) {
-								next.set(file.path, file);
-							}
-							return next;
-						});
-					}
-
-					setFetchedFolders((prev) => new Set(prev).add(folderPath));
-				} catch (error) {
-					console.error("Failed to fetch folder contents:", error);
-				} finally {
-					setLoadingFolders((prev) => {
-						const next = new Set(prev);
-						next.delete(folderPath);
-						return next;
-					});
-				}
-			}
-		},
-		[volume.name, fetchedFolders],
-	);
-
-	// Prefetch folder contents on hover
-	const handleFolderHover = useCallback(
-		(folderPath: string) => {
-			if (!fetchedFolders.has(folderPath) && !loadingFolders.has(folderPath)) {
-				queryClient.prefetchQuery(
-					listFilesOptions({
-						path: { name: volume.name },
-						query: { path: folderPath },
-					}),
-				);
-			}
-		},
-		[volume.name, fetchedFolders, loadingFolders, queryClient],
-	);
-
-	const fileArray = useMemo(() => Array.from(allFiles.values()), [allFiles]);
-
 	if (volume.status !== "mounted") {
 		return (
 			<Card>
@@ -123,38 +27,14 @@ export const FilesTabContent = ({ volume }: Props) => {
 				<CardDescription>Browse the files and folders in this volume.</CardDescription>
 			</CardHeader>
 			<CardContent className="flex-1 overflow-hidden flex flex-col">
-				{isLoading && (
-					<div className="flex items-center justify-center h-full">
-						<p className="text-muted-foreground">Loading files...</p>
-					</div>
-				)}
-				{error && (
-					<div className="flex items-center justify-center h-full">
-						<p className="text-destructive">Failed to load files: {error.message}</p>
-					</div>
-				)}
-				{!isLoading && !error && (
-					<div className="overflow-auto flex-1 border rounded-md bg-card">
-						{fileArray.length === 0 ? (
-							<div className="flex flex-col items-center justify-center h-full text-center p-8">
-								<FolderOpen className="mb-4 h-12 w-12 text-muted-foreground" />
-								<p className="text-muted-foreground">This volume is empty.</p>
-								<p className="text-sm text-muted-foreground mt-2">
-									Files and folders will appear here once you add them.
-								</p>
-							</div>
-						) : (
-							<FileTree
-								files={fileArray}
-								onFolderExpand={handleFolderExpand}
-								onFolderHover={handleFolderHover}
-								expandedFolders={expandedFolders}
-								loadingFolders={loadingFolders}
-								className="p-2"
-							/>
-						)}
-					</div>
-				)}
+				<VolumeFileBrowser
+					volumeName={volume.name}
+					enabled={volume.status === "mounted"}
+					refetchInterval={10000}
+					className="overflow-auto flex-1 border rounded-md bg-card p-2"
+					emptyMessage="This volume is empty."
+					emptyDescription="Files and folders will appear here once you add them."
+				/>
 			</CardContent>
 		</Card>
 	);