feat: toggle auto remount

apps/client/app/api-client/types.gen.ts

@@ -256,7 +256,8 @@ export type GetVolumeResponse = GetVolumeResponses[keyof GetVolumeResponses];
 
 export type UpdateVolumeData = {
 	body?: {
-		config:
+		autoRemount?: boolean;
+		config?:
 			| {
 					backend: "directory";
 			  }
@@ -308,6 +309,7 @@ export type UpdateVolumeResponses = {
 	200: {
 		message: string;
 		volume: {
+			autoRemount: boolean;
 			config:
 				| {
 						backend: "directory";
@@ -339,9 +341,12 @@ export type UpdateVolumeResponses = {
 						username?: string;
 				  };
 			createdAt: number;
+			lastError: string;
+			lastHealthCheck: number;
 			name: string;
 			path: string;
-			type: string;
+			status: "error" | "mounted" | "unknown" | "unmounted";
+			type: "directory" | "nfs" | "smb" | "webdav";
 			updatedAt: number;
 		};
 	};

apps/client/app/components/onoff.tsx

@@ -6,9 +6,10 @@ type Props = {
 	toggle: (v: boolean) => void;
 	enabledLabel: string;
 	disabledLabel: string;
+	disabled?: boolean;
 };
 
-export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel }: Props) => {
+export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: Props) => {
 	return (
 		<div
 			className={cn(
@@ -19,7 +20,7 @@ export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel }: Props) => {
 			)}
 		>
 			<span>{isOn ? enabledLabel : disabledLabel}</span>
-			<Switch checked={isOn} onCheckedChange={toggle} />
+			<Switch disabled={disabled} checked={isOn} onCheckedChange={toggle} />
 		</div>
 	);
 };

apps/client/app/modules/details/components/healthchecks-card.tsx

@@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { formatDistanceToNow } from "date-fns";
 import { HeartIcon } from "lucide-react";
 import { toast } from "sonner";
-import { healthCheckVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
+import { healthCheckVolumeMutation, updateVolumeMutation } from "~/api-client/@tanstack/react-query.gen";
 import { OnOff } from "~/components/onoff";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
@@ -28,6 +28,15 @@ export const HealthchecksCard = ({ volume }: Props) => {
 		},
 	});
 
+	const toggleAutoRemount = useMutation({
+		...updateVolumeMutation(),
+		onSuccess: (d) => {
+			toast.success("Volume updated", {
+				description: `Auto remount is now ${d.volume.autoRemount ? "enabled" : "paused"}.`,
+			});
+		},
+	});
+
 	return (
 		<Card className="flex-1 flex flex-col h-full">
 			<CardHeader>
@@ -46,7 +55,15 @@ export const HealthchecksCard = ({ volume }: Props) => {
 					)}
 					<span className="flex justify-between items-center gap-2">
 						<span className="text-sm">Remount on error</span>
-						<OnOff isOn={volume.autoRemount} toggle={() => {}} enabledLabel="Enabled" disabledLabel="Paused" />
+						<OnOff
+							isOn={volume.autoRemount}
+							toggle={() =>
+								toggleAutoRemount.mutate({ path: { name: volume.name }, body: { autoRemount: !volume.autoRemount } })
+							}
+							disabled={toggleAutoRemount.isPending}
+							enabledLabel="Enabled"
+							disabledLabel="Paused"
+						/>
 					</span>
 				</div>
 				{volume.status !== "unmounted" && (