chore: format

apps/client/app/app.css

@@ -7,8 +7,8 @@
 @theme {
 	--breakpoint-xs: 32rem;
 	--font-sans:
-    "Google Sans Code", ui-sans-serif, system-ui, sans-serif,
+		"Google Sans Code", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+		"Noto Color Emoji";
 }
 
 html,

apps/client/app/components/layout.tsx

@@ -52,23 +52,12 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 							<div className="flex items-center gap-4">
 								<span className="text-sm text-muted-foreground hidden md:inline-flex">
 									Welcome,&nbsp;
-                  <span className="text-strong-accent">
+									<span className="text-strong-accent">{loaderData.user?.username}</span>
-                    {loaderData.user?.username}
 								</span>
-                </span>
+								<Button variant="default" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={() => logout.mutate({})}
-                  loading={logout.isPending}
-                >
 									Logout
 								</Button>
-                <Button
+								<Button variant="default" size="sm" className="relative overflow-hidden hidden lg:inline-flex">
-                  variant="default"
-                  size="sm"
-                  className="relative overflow-hidden hidden lg:inline-flex"
-                >
 									<a
 										href="https://github.com/nicotsx/ironmount/issues/new"
 										target="_blank"

apps/client/app/components/onoff.tsx

@@ -9,20 +9,14 @@ type Props = {
 	disabled?: boolean;
 };
 
-export const OnOff = ({
+export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: Props) => {
-  isOn,
-  toggle,
-  enabledLabel,
-  disabledLabel,
-  disabled,
-}: Props) => {
 	return (
 		<div
 			className={cn(
 				"flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
 				isOn
 					? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
-          : "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10"
+					: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
 			)}
 		>
 			<span>{isOn ? enabledLabel : disabledLabel}</span>

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

@@ -34,16 +34,13 @@ export const StatusDot = ({ status }: { status: VolumeStatus }) => {
 						<span
 							className={cn(
 								"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
-                `${statusMapping.colorLight}`
+								`${statusMapping.colorLight}`,
 							)}
 						/>
 					)}
 					<span
 						aria-label={status}
-            className={cn(
+						className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)}
-              "relative inline-flex size-3 rounded-full",
-              `${statusMapping.color}`
-            )}
 					/>
 				</span>
 			</TooltipTrigger>

apps/client/app/modules/repositories/routes/repository-details.tsx

@@ -40,9 +40,7 @@ export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	if (repository.data) return repository.data;
 };
 
-export default function RepositoryDetailsPage({
+export default function RepositoryDetailsPage({ loaderData }: Route.ComponentProps) {
-  loaderData,
-}: Route.ComponentProps) {
 	const { name } = useParams<{ name: string }>();
 	const navigate = useNavigate();
 	const queryClient = useQueryClient();
@@ -95,35 +93,23 @@ export default function RepositoryDetailsPage({
 			<div className="flex items-center justify-between mb-4">
 				<div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
 					<span
-            className={cn(
+						className={cn("inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500", {
-              "inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500",
-              {
 							"bg-green-500/10 text-green-500": data.status === "healthy",
 							"bg-red-500/10 text-red-500": data.status === "error",
-              }
+						})}
-            )}
 					>
 						{data.status || "unknown"}
 					</span>
-          <span className="text-xs bg-primary/10 rounded-md px-2 py-1">
+					<span className="text-xs bg-primary/10 rounded-md px-2 py-1">{data.type}</span>
-            {data.type}
-          </span>
 				</div>
 				<div className="flex gap-4">
-          <Button
+					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteRepo.isPending}>
-            variant="destructive"
-            onClick={() => setShowDeleteConfirm(true)}
-            disabled={deleteRepo.isPending}
-          >
 						Delete
 					</Button>
 				</div>
 			</div>
 
-      <Tabs
+			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })}>
-        value={activeTab}
-        onValueChange={(value) => setSearchParams({ tab: value })}
-      >
 				<TabsList className="mb-2">
 					<TabsTrigger value="info">Configuration</TabsTrigger>
 					<TabsTrigger value="snapshots">Snapshots</TabsTrigger>
@@ -141,9 +127,8 @@ export default function RepositoryDetailsPage({
 					<AlertDialogHeader>
 						<AlertDialogTitle>Delete repository?</AlertDialogTitle>
 						<AlertDialogDescription>
-              Are you sure you want to delete the repository{" "}
+							Are you sure you want to delete the repository <strong>{name}</strong>? This action cannot be undone and
-              <strong>{name}</strong>? This action cannot be undone and will
+							will remove all backup data.
-              remove all backup data.
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<div className="flex gap-3 justify-end">

apps/client/app/modules/repositories/routes/snapshot-details.tsx

@@ -26,9 +26,7 @@ export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	return redirect("/repositories");
 };
 
-export default function SnapshotDetailsPage({
+export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
-  loaderData,
-}: Route.ComponentProps) {
 	const { name, snapshotId } = useParams<{
 		name: string;
 		snapshotId: string;
@@ -55,9 +53,7 @@ export default function SnapshotDetailsPage({
 			<div className="flex items-center justify-between">
 				<div>
 					<h1 className="text-2xl font-bold">{name}</h1>
-          <p className="text-sm text-muted-foreground">
+					<p className="text-sm text-muted-foreground">Snapshot: {snapshotId}</p>
-            Snapshot: {snapshotId}
-          </p>
 				</div>
 				<RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
 			</div>
@@ -91,10 +87,7 @@ export default function SnapshotDetailsPage({
 								<span className="text-muted-foreground">Paths:</span>
 								<div className="space-y-1 mt-1">
 									{data.snapshot.paths.map((path) => (
-                    <p
+										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded">
-                      key={path}
-                      className="font-mono text-xs bg-muted px-2 py-1 rounded"
-                    >
 											{path}
 										</p>
 									))}

apps/client/app/modules/volumes/routes/volume-details.tsx

@@ -121,8 +121,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 			<div className="flex flex-col items-start xs:items-center xs:flex-row xs:justify-between">
 				<div className="text-sm font-semibold mb-2 xs:mb-0 text-muted-foreground flex items-center gap-2">
 					<span className="flex items-center gap-2">
-            <StatusDot status={volume.status} />{" "}
+						<StatusDot status={volume.status} /> {volume.status[0].toUpperCase() + volume.status.slice(1)}
-            {volume.status[0].toUpperCase() + volume.status.slice(1)}
 					</span>
 					<VolumeIcon size={14} backend={volume?.config.backend} />
 				</div>
@@ -142,20 +141,12 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 					>
 						Unmount
 					</Button>
-          <Button
+					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteVol.isPending}>
-            variant="destructive"
-            onClick={() => setShowDeleteConfirm(true)}
-            disabled={deleteVol.isPending}
-          >
 						Delete
 					</Button>
 				</div>
 			</div>
-      <Tabs
+			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })} className="mt-4">
-        value={activeTab}
-        onValueChange={(value) => setSearchParams({ tab: value })}
-        className="mt-4"
-      >
 				<TabsList className="mb-2">
 					<TabsTrigger value="info">Configuration</TabsTrigger>
 					<TabsTrigger value="files">Files</TabsTrigger>
@@ -179,8 +170,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 					<AlertDialogHeader>
 						<AlertDialogTitle>Delete volume?</AlertDialogTitle>
 						<AlertDialogDescription>
-              Are you sure you want to delete the volume <strong>{name}</strong>
+							Are you sure you want to delete the volume <strong>{name}</strong>? This action cannot be undone.
-              ? This action cannot be undone.
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<div className="flex gap-3 justify-end">

apps/client/app/root.tsx

@@ -1,16 +1,5 @@
-import {
+import { MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
-  MutationCache,
+import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
-  QueryClient,
-  QueryClientProvider,
-} from "@tanstack/react-query";
-import {
-  isRouteErrorResponse,
-  Links,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "react-router";
 import { Toaster } from "~/components/ui/sonner";
 
 import type { Route } from "./+types/root";
@@ -52,27 +41,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
 		<html lang="en">
 			<head>
 				<meta charSet="utf-8" />
-        <meta
+				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-          name="viewport"
+				<link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96" />
-          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+				<link rel="icon" type="image/svg+xml" href="/images/favicon/favicon.svg" />
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          href="/images/favicon/favicon-96x96.png"
-          sizes="96x96"
-        />
-        <link
-          rel="icon"
-          type="image/svg+xml"
-          href="/images/favicon/favicon.svg"
-        />
 				<link rel="shortcut icon" href="/images/favicon/favicon.ico" />
-        <link
+				<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/images/favicon/apple-touch-icon.png"
-        />
 				<meta name="apple-mobile-web-app-title" content="Ironmount" />
 				<link rel="manifest" href="/images/favicon/site.webmanifest" />
 				<Meta />
@@ -103,10 +76,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 
 	if (isRouteErrorResponse(error)) {
 		message = error.status === 404 ? "404" : "Error";
-    details =
+		details = error.status === 404 ? "The requested page could not be found." : error.statusText || details;
-      error.status === 404
-        ? "The requested page could not be found."
-        : error.statusText || details;
 	} else if (import.meta.env.DEV && error && error instanceof Error) {
 		details = error.message;
 		stack = error.stack;