feat: sse for volume status change

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

@@ -15,7 +15,6 @@ interface FileEntry {
 type VolumeFileBrowserProps = {
 	volumeName: string;
 	enabled?: boolean;
-	refetchInterval?: number | false;
 	withCheckboxes?: boolean;
 	selectedPaths?: Set<string>;
 	onSelectionChange?: (paths: Set<string>) => void;
@@ -28,7 +27,6 @@ type VolumeFileBrowserProps = {
 export const VolumeFileBrowser = ({
 	volumeName,
 	enabled = true,
-	refetchInterval,
 	withCheckboxes = false,
 	selectedPaths,
 	onSelectionChange,
@@ -46,7 +44,6 @@ export const VolumeFileBrowser = ({
 	const { data, isLoading, error } = useQuery({
 		...listFilesOptions({ path: { name: volumeName } }),
 		enabled,
-		refetchInterval,
 	});
 
 	useMemo(() => {

apps/client/app/hooks/use-server-events.ts

@@ -92,6 +92,17 @@ export function useServerEvents() {
 			});
 		});
 
+		eventSource.addEventListener("volume:status_updated", (e) => {
+			const data = JSON.parse(e.data) as VolumeEvent;
+			console.log("[SSE] Volume status updated:", data);
+
+			queryClient.invalidateQueries();
+
+			handlersRef.current.get("volume:updated")?.forEach((handler) => {
+				handler(data);
+			});
+		});
+
 		eventSource.onerror = (error) => {
 			console.error("[SSE] Connection error:", error);
 		};

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

@@ -30,7 +30,6 @@ export const FilesTabContent = ({ volume }: Props) => {
 				<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."