feat: mount volumes on startup

apps/client/app/components/status-dot.tsx

@@ -0,0 +1,49 @@
+import type { VolumeStatus } from "~/lib/types";
+import { cn } from "~/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export const StatusDot = ({ status }: { status: VolumeStatus }) => {
+	const statusMapping = {
+		mounted: {
+			color: "bg-green-500",
+			colorLight: "bg-green-400",
+			animated: true,
+		},
+		unmounted: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-red-400",
+			animated: true,
+		},
+		unknown: {
+			color: "bg-yellow-500",
+			colorLight: "bg-yellow-400",
+			animated: true,
+		},
+	}[status];
+
+	return (
+		<Tooltip>
+			<TooltipTrigger>
+				<span className="relative flex size-3 mx-auto">
+					{statusMapping.animated && (
+						<span
+							className={cn(
+								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+								`${statusMapping.colorLight}`,
+							)}
+						/>
+					)}
+					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+				</span>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p className="capitalize">{status}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};

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

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

apps/client/app/lib/types.ts

@@ -0,0 +1,3 @@
+import type { GetVolumeResponse } from "~/api-client";
+
+export type VolumeStatus = GetVolumeResponse["status"];

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>
 					))}

apps/client/package.json

@@ -17,6 +17,7 @@
 		"@radix-ui/react-select": "^2.2.5",
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@react-router/node": "^7.7.1",
 		"@react-router/serve": "^7.7.1",
 		"@tanstack/react-query": "^5.84.2",