feat: add webdav support

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

@@ -27,6 +27,22 @@ export type ListVolumesResponses = {
 				  }
 				| {
 						backend: "smb";
+						password: string;
+						server: string;
+						share: string;
+						username: string;
+						vers?: "1.0" | "2.0" | "2.1" | "3.0";
+						port?: number | string;
+						domain?: string;
+				  }
+				| {
+						backend: "webdav";
+						path: string;
+						server: string;
+						port?: number | string;
+						password?: string;
+						ssl?: boolean;
+						username?: string;
 				  };
 			createdAt: number;
 			lastError: string;
@@ -34,7 +50,7 @@ export type ListVolumesResponses = {
 			name: string;
 			path: string;
 			status: "error" | "mounted" | "unknown" | "unmounted";
-			type: "directory" | "nfs" | "smb";
+			type: "directory" | "nfs" | "smb" | "webdav";
 			updatedAt: number;
 		}>;
 	};
@@ -57,6 +73,22 @@ export type CreateVolumeData = {
 			  }
 			| {
 					backend: "smb";
+					password: string;
+					server: string;
+					share: string;
+					username: string;
+					vers?: "1.0" | "2.0" | "2.1" | "3.0";
+					port?: number | string;
+					domain?: string;
+			  }
+			| {
+					backend: "webdav";
+					path: string;
+					server: string;
+					port?: number | string;
+					password?: string;
+					ssl?: boolean;
+					username?: string;
 			  };
 		name: string;
 	};
@@ -95,6 +127,22 @@ export type TestConnectionData = {
 			  }
 			| {
 					backend: "smb";
+					password: string;
+					server: string;
+					share: string;
+					username: string;
+					vers?: "1.0" | "2.0" | "2.1" | "3.0";
+					port?: number | string;
+					domain?: string;
+			  }
+			| {
+					backend: "webdav";
+					path: string;
+					server: string;
+					port?: number | string;
+					password?: string;
+					ssl?: boolean;
+					username?: string;
 			  };
 	};
 	path?: never;
@@ -175,6 +223,22 @@ export type GetVolumeResponses = {
 				  }
 				| {
 						backend: "smb";
+						password: string;
+						server: string;
+						share: string;
+						username: string;
+						vers?: "1.0" | "2.0" | "2.1" | "3.0";
+						port?: number | string;
+						domain?: string;
+				  }
+				| {
+						backend: "webdav";
+						path: string;
+						server: string;
+						port?: number | string;
+						password?: string;
+						ssl?: boolean;
+						username?: string;
 				  };
 			createdAt: number;
 			lastError: string;
@@ -182,7 +246,7 @@ export type GetVolumeResponses = {
 			name: string;
 			path: string;
 			status: "error" | "mounted" | "unknown" | "unmounted";
-			type: "directory" | "nfs" | "smb";
+			type: "directory" | "nfs" | "smb" | "webdav";
 			updatedAt: number;
 		};
 	};
@@ -205,6 +269,22 @@ export type UpdateVolumeData = {
 			  }
 			| {
 					backend: "smb";
+					password: string;
+					server: string;
+					share: string;
+					username: string;
+					vers?: "1.0" | "2.0" | "2.1" | "3.0";
+					port?: number | string;
+					domain?: string;
+			  }
+			| {
+					backend: "webdav";
+					path: string;
+					server: string;
+					port?: number | string;
+					password?: string;
+					ssl?: boolean;
+					username?: string;
 			  };
 	};
 	path: {
@@ -241,6 +321,22 @@ export type UpdateVolumeResponses = {
 				  }
 				| {
 						backend: "smb";
+						password: string;
+						server: string;
+						share: string;
+						username: string;
+						vers?: "1.0" | "2.0" | "2.1" | "3.0";
+						port?: number | string;
+						domain?: string;
+				  }
+				| {
+						backend: "webdav";
+						path: string;
+						server: string;
+						port?: number | string;
+						password?: string;
+						ssl?: boolean;
+						username?: string;
 				  };
 			createdAt: number;
 			name: string;

apps/client/app/components/create-volume-form.tsx

@@ -62,7 +62,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 	const handleTestConnection = async () => {
 		const formValues = getValues();
 
-		if (formValues.backend === "nfs" || formValues.backend === "smb") {
+		if (formValues.backend === "nfs" || formValues.backend === "smb" || formValues.backend === "webdav") {
 			testBackendConnection.mutate({
 				body: { config: formValues },
 			});
@@ -108,6 +108,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 									<SelectItem value="directory">Directory</SelectItem>
 									<SelectItem value="nfs">NFS</SelectItem>
 									<SelectItem value="smb">SMB</SelectItem>
+									<SelectItem value="webdav">WebDAV</SelectItem>
 								</SelectContent>
 							</Select>
 							<FormDescription>Choose the storage backend for this volume.</FormDescription>
@@ -187,6 +188,102 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 					</>
 				)}
 
+				{watchedBackend === "webdav" && (
+					<>
+						<FormField
+							name="server"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Server</FormLabel>
+									<FormControl>
+										<Input placeholder="example.com" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>WebDAV server hostname or IP address.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="path"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Path</FormLabel>
+									<FormControl>
+										<Input placeholder="/webdav" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Path to the WebDAV directory on the server.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="username"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Username (Optional)</FormLabel>
+									<FormControl>
+										<Input placeholder="admin" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Username for WebDAV authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="password"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password (Optional)</FormLabel>
+									<FormControl>
+										<Input type="password" placeholder="••••••••" value={field.value ?? ""} onChange={field.onChange} />
+									</FormControl>
+									<FormDescription>Password for WebDAV authentication (optional).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="port"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Port</FormLabel>
+									<FormControl>
+										<Input
+											type="number"
+											placeholder="80"
+											value={field.value ?? ""}
+											onChange={(e) => field.onChange(parseInt(e.target.value, 10) || undefined)}
+										/>
+									</FormControl>
+									<FormDescription>WebDAV server port (default: 80 for HTTP, 443 for HTTPS).</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							name="ssl"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Use SSL/HTTPS</FormLabel>
+									<FormControl>
+										<div className="flex items-center space-x-2">
+											<input
+												type="checkbox"
+												checked={field.value ?? false}
+												onChange={(e) => field.onChange(e.target.checked)}
+												className="rounded border-gray-300"
+											/>
+											<span className="text-sm">Enable HTTPS for secure connections</span>
+										</div>
+									</FormControl>
+									<FormDescription>Use HTTPS instead of HTTP for secure connections.</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</>
+				)}
+
 				{watchedBackend === "smb" && (
 					<>
 						<FormField
@@ -373,6 +470,41 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 						)}
 					</div>
 				)}
+
+				{watchedBackend === "webdav" && (
+					<div className="space-y-3">
+						<div className="flex items-center gap-2">
+							<Button
+								type="button"
+								variant="outline"
+								onClick={handleTestConnection}
+								disabled={testStatus === "loading" || !form.watch("server") || !form.watch("path")}
+								className="flex-1"
+							>
+								{testStatus === "loading" && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+								{testStatus === "success" && <CheckCircle className="mr-2 h-4 w-4 text-green-500" />}
+								{testStatus === "error" && <XCircle className="mr-2 h-4 w-4 text-red-500" />}
+								{testStatus === "idle" && "Test Connection"}
+								{testStatus === "loading" && "Testing..."}
+								{testStatus === "success" && "Connection Successful"}
+								{testStatus === "error" && "Test Failed"}
+							</Button>
+						</div>
+						{testMessage && (
+							<div
+								className={`text-sm p-2 rounded-md ${
+									testStatus === "success"
+										? "bg-green-50 text-green-700 border border-green-200"
+										: testStatus === "error"
+											? "bg-red-50 text-red-700 border border-red-200"
+											: "bg-gray-50 text-gray-700 border border-gray-200"
+								}`}
+							>
+								{testMessage}
+							</div>
+						)}
+					</div>
+				)}
 			</form>
 		</Form>
 	);

apps/client/app/components/volume-icon.tsx

@@ -1,5 +1,5 @@
 import type { BackendType } from "@ironmount/schemas";
-import { Folder, Server, Share2 } from "lucide-react";
+import { Cloud, Folder, Server, Share2 } from "lucide-react";
 
 type VolumeIconProps = {
 	backend: BackendType;
@@ -26,6 +26,12 @@ const getIconAndColor = (backend: BackendType) => {
 				color: "text-purple-600 dark:text-purple-400",
 				label: "SMB",
 			};
+		case "webdav":
+			return {
+				icon: Cloud,
+				color: "text-green-600 dark:text-green-400",
+				label: "WebDAV",
+			};
 		default:
 			return {
 				icon: Folder,

apps/client/app/modules/details/components/storage-chart.tsx

@@ -18,7 +18,7 @@ export function StorageChart({ statfs }: Props) {
 			{
 				name: "Used",
 				value: statfs.used,
-				fill: "blue",
+				fill: "#2B7EFF",
 			},
 			{
 				name: "Free",
@@ -29,19 +29,7 @@ export function StorageChart({ statfs }: Props) {
 		[statfs],
 	);
 
-	const chartConfig = {
-		value: {
-			label: "Storage",
-		},
-		used: {
-			label: "Used",
-			color: "hsl(var(--destructive))",
-		},
-		free: {
-			label: "Free",
-			color: "hsl(var(--primary))",
-		},
-	} satisfies ChartConfig;
+	const chartConfig = {} satisfies ChartConfig;
 
 	const usagePercentage = React.useMemo(() => {
 		return Math.round((statfs.used / statfs.total) * 100);
@@ -75,37 +63,70 @@ export function StorageChart({ statfs }: Props) {
 				</CardTitle>
 			</CardHeader>
 			<CardContent className="flex-1 pb-0">
-				<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
-					<PieChart>
-						<ChartTooltip
-							cursor={false}
-							content={
-								<ChartTooltipContent
-									hideLabel
-									formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
-								/>
-							}
-						/>
-						<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
-							<Label
-								content={({ viewBox }) => {
-									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-										return (
-											<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
-												<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
-													{usagePercentage}%
-												</tspan>
-												<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
-													Used
-												</tspan>
-											</text>
-										);
-									}
-								}}
+				<div className="">
+					<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[250px]">
+						<PieChart>
+							<ChartTooltip
+								cursor={false}
+								content={
+									<ChartTooltipContent
+										hideLabel
+										formatter={(value, name) => [<ByteSize key={name} bytes={value as number} />, name]}
+									/>
+								}
 							/>
-						</Pie>
-					</PieChart>
-				</ChartContainer>
+							<Pie data={chartData} dataKey="value" nameKey="name" innerRadius={60} strokeWidth={5}>
+								<Label
+									content={({ viewBox }) => {
+										if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+											return (
+												<text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+													<tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+														{usagePercentage}%
+													</tspan>
+													<tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+														Used
+													</tspan>
+												</text>
+											);
+										}
+									}}
+								/>
+							</Pie>
+						</PieChart>
+					</ChartContainer>
+					<div className="flex flex-col h-full justify-center">
+						<div className="grid gap-4 w-full">
+							<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
+								<div className="flex items-center gap-3">
+									<HardDrive className="h-4 w-4 text-muted-foreground" />
+									<span className="font-medium">Total Capacity</span>
+								</div>
+								<ByteSize bytes={statfs.total} className="font-mono text-sm" />
+							</div>
+
+							<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
+								<div className="flex items-center gap-3">
+									<div className="h-4 w-4 rounded-full bg-blue-500" />
+									<span className="font-medium">Used Space</span>
+								</div>
+								<div className="text-right">
+									<ByteSize bytes={statfs.used} className="font-mono text-sm" />
+								</div>
+							</div>
+
+							<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
+								<div className="flex items-center gap-3">
+									<div className="h-4 w-4 rounded-full bg-primary" />
+									<span className="font-medium">Free Space</span>
+								</div>
+								<div className="text-right">
+									<ByteSize bytes={statfs.free} className="font-mono text-sm" />
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
 			</CardContent>
 		</Card>
 	);

apps/client/app/modules/details/components/storage-info-card.tsx

@@ -1,73 +0,0 @@
-import { Database, HardDrive, Unplug } from "lucide-react";
-import { ByteSize } from "~/components/bytes-size";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import type { StatFs } from "~/lib/types";
-
-type Props = {
-	statfs: StatFs;
-};
-
-export function StorageInfoCard({ statfs }: Props) {
-	const isEmpty = !statfs.total;
-
-	if (isEmpty) {
-		return (
-			<Card className="flex flex-col h-full text-sm">
-				<CardHeader className="items-center pb-0">
-					<CardTitle className="flex items-center gap-2">
-						<Database className="h-4 w-4" />
-						Storage Usage
-					</CardTitle>
-				</CardHeader>
-				<CardContent className="flex-1 pb-10 flex flex-col items-center justify-center text-center">
-					<Unplug className="mb-4 h-5 w-5 text-muted-foreground" />
-					<p className="text-muted-foreground">No storage data available. Mount the volume to see usage statistics.</p>
-				</CardContent>
-			</Card>
-		);
-	}
-
-	return (
-		<Card className="h-full text-sm">
-			<CardHeader>
-				<CardTitle className="flex items-center gap-2">
-					<Database className="h-4 w-4" />
-					Storage Details
-				</CardTitle>
-			</CardHeader>
-			<CardContent className="space-y-4">
-				<div className="flex flex-col h-full justify-center">
-					<div className="grid gap-4 w-full">
-						<div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
-							<div className="flex items-center gap-3">
-								<HardDrive className="h-4 w-4 text-muted-foreground" />
-								<span className="font-medium">Total Capacity</span>
-							</div>
-							<ByteSize bytes={statfs.total} className="font-mono text-sm" />
-						</div>
-
-						<div className="flex items-center justify-between p-3 rounded-lg bg-blue-500/10">
-							<div className="flex items-center gap-3">
-								<div className="h-4 w-4 rounded-full bg-blue-500" />
-								<span className="font-medium">Used Space</span>
-							</div>
-							<div className="text-right">
-								<ByteSize bytes={statfs.used} className="font-mono text-sm" />
-							</div>
-						</div>
-
-						<div className="flex items-center justify-between p-3 rounded-lg bg-primary/10">
-							<div className="flex items-center gap-3">
-								<div className="h-4 w-4 rounded-full bg-primary" />
-								<span className="font-medium">Free Space</span>
-							</div>
-							<div className="text-right">
-								<ByteSize bytes={statfs.free} className="font-mono text-sm" />
-							</div>
-						</div>
-					</div>
-				</div>
-			</CardContent>
-		</Card>
-	);
-}

apps/client/app/modules/details/tabs/info.tsx

@@ -3,7 +3,6 @@ import { Card } from "~/components/ui/card";
 import type { StatFs, Volume } from "~/lib/types";
 import { HealthchecksCard } from "../components/healthchecks-card";
 import { StorageChart } from "../components/storage-chart";
-import { StorageInfoCard } from "../components/storage-info-card";
 
 type Props = {
 	volume: Volume;
@@ -19,12 +18,9 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 			<div className="lg:col-span-2 lg:row-span-1">
 				<HealthchecksCard volume={volume} />
 			</div>
-			<div className="lg:col-span-1">
+			<div className="lg:col-span-2">
 				<StorageChart statfs={statfs} />
 			</div>
-			<div className="lg:col-span-1">
-				<StorageInfoCard statfs={statfs} />
-			</div>
 		</div>
 	);
 };