refactor: simplify snapshot file explorer

apps/client/app/components/file-tree.tsx

@@ -18,7 +18,7 @@ const NODE_PADDING_LEFT = 12;
 export interface FileEntry {
 	name: string;
 	path: string;
-	type: "file" | "directory";
+	type: string;
 	size?: number;
 	modifiedAt?: number;
 }

apps/client/app/components/ui/button.tsx

@@ -38,6 +38,7 @@ function Button({
 	variant,
 	size,
 	asChild = false,
+	loading,
 	...props
 }: React.ComponentProps<"button"> &
 	VariantProps<typeof buttonVariants> & {
@@ -47,13 +48,13 @@ function Button({
 
 	return (
 		<Comp
-			disabled={props.loading}
+			disabled={loading}
 			data-slot="button"
 			className={cn(buttonVariants({ variant, size, className }), "transition-all")}
 			{...props}
 		>
-			<Loader2 className={cn("h-4 w-4 animate-spin absolute", { invisible: !props.loading })} />
-			<div className={cn("flex items-center justify-center", { invisible: props.loading })}>{props.children}</div>
+			<Loader2 className={cn("h-4 w-4 animate-spin absolute", { invisible: !loading })} />
+			<div className={cn("flex items-center justify-center", { invisible: loading })}>{props.children}</div>
 		</Comp>
 	);
 }

apps/client/app/components/volume-file-browser.tsx

@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { FolderOpen } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
-import { listFiles } from "~/api-client";
 import { listFilesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { FileTree } from "~/components/file-tree";
 
@@ -76,16 +75,17 @@ export const VolumeFileBrowser = ({
 				setLoadingFolders((prev) => new Set(prev).add(folderPath));
 
 				try {
-					const result = await listFiles({
-						path: { name: volumeName },
-						query: { path: folderPath },
-						throwOnError: true,
-					});
+					const result = await queryClient.fetchQuery(
+						listFilesOptions({
+							path: { name: volumeName },
+							query: { path: folderPath },
+						}),
+					);
 
-					if (result.data.files) {
+					if (result.files) {
 						setAllFiles((prev) => {
 							const next = new Map(prev);
-							for (const file of result.data.files) {
+							for (const file of result.files) {
 								next.set(file.path, file);
 							}
 							return next;
@@ -104,7 +104,7 @@ export const VolumeFileBrowser = ({
 				}
 			}
 		},
-		[volumeName, fetchedFolders],
+		[volumeName, fetchedFolders, queryClient.fetchQuery],
 	);
 
 	const handleFolderHover = useCallback(