feat: select folders to backup when creating a job

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