feat: mount volumes on startup

apps/client/app/routes/details.tsx

@@ -17,6 +17,7 @@ import { parseError } from "~/lib/errors";
 import { HealthchecksCard } from "~/modules/details/components/healthchecks-card";
 import type { Route } from "./+types/details";
 import { cn } from "~/lib/utils";
+import { StatusDot } from "~/components/status-dot";
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	const volume = await getVolume({ path: { name: params.name ?? "" } });
@@ -89,9 +90,8 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 				<div>
 					<h1 className="text-3xl font-bold mb-0 uppercase">Volume: {name}</h1>
 					<div className="text-sm font-semibold mb-2 text-muted-foreground flex items-center gap-2">
-						<span className="text-green-500 flex items-center gap-2">
-							<WifiIcon size={16} />
-							{data.status}
+						<span className="flex items-center gap-2">
+							<StatusDot status={data.status} /> {data.status[0].toUpperCase() + data.status.slice(1)}
 						</span>
 						<VolumeIcon size={14} backend={data?.config.backend} />
 					</div>

apps/client/app/routes/home.tsx

@@ -11,6 +11,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
 import { VolumeIcon } from "~/components/volume-icon";
 import type { Route } from "./+types/home";
+import { StatusDot } from "~/components/status-dot";
 
 export function meta(_: Route.MetaArgs) {
 	return [
@@ -101,10 +102,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 								</span>
 							</TableCell>
 							<TableCell className="text-center">
-								<span className="relative flex size-3 mx-auto">
-									<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
-									<span className="relative inline-flex size-3 rounded-full bg-green-500" />
-								</span>
+								<StatusDot status={volume.status} />
 							</TableCell>
 						</TableRow>
 					))}