From 67e7d36fe7bd154ef0cf1e735a908faccbc2b5b6 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Sun, 2 Nov 2025 16:36:02 +0100
Subject: [PATCH] refactor(ui): use dot for backup status

---
 .gitignore                                    |  2 +
 apps/client/app/lib/breadcrumbs.ts            |  4 +-
 .../backups/components/backup-status-dot.tsx  | 55 +++++++++++++++++++
 .../app/modules/backups/routes/backups.tsx    | 19 ++-----
 4 files changed, 65 insertions(+), 15 deletions(-)
 create mode 100644 apps/client/app/modules/backups/components/backup-status-dot.tsx

diff --git a/.gitignore b/.gitignore
index 97813dd..2bd0209 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,3 +43,5 @@ node_modules/
 mutagen.yml.lock
 
 data/
+
+CLAUDE.md
diff --git a/apps/client/app/lib/breadcrumbs.ts b/apps/client/app/lib/breadcrumbs.ts
index ba46e3a..7411203 100644
--- a/apps/client/app/lib/breadcrumbs.ts
+++ b/apps/client/app/lib/breadcrumbs.ts
@@ -49,9 +49,9 @@ export function generateBreadcrumbs(pathname: string, params: Record<string, str
 			isCurrentPage: pathname === "/backups",
 		});
 
-		if (pathname.startsWith("/backups/") && params.scheduleId) {
+		if (pathname.startsWith("/backups/") && params.id) {
 			breadcrumbs.push({
-				label: `Schedule #${params.scheduleId}`,
+				label: `Schedule #${params.id}`,
 				isCurrentPage: true,
 			});
 		}
diff --git a/apps/client/app/modules/backups/components/backup-status-dot.tsx b/apps/client/app/modules/backups/components/backup-status-dot.tsx
new file mode 100644
index 0000000..dd497eb
--- /dev/null
+++ b/apps/client/app/modules/backups/components/backup-status-dot.tsx
@@ -0,0 +1,55 @@
+import { cn } from "~/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+
+type BackupStatus = "active" | "paused" | "error";
+
+export const BackupStatusDot = ({ enabled, hasError }: { enabled: boolean; hasError?: boolean }) => {
+	let status: BackupStatus = "paused";
+	if (hasError) {
+		status = "error";
+	} else if (enabled) {
+		status = "active";
+	}
+
+	const statusMapping = {
+		active: {
+			color: "bg-green-500",
+			colorLight: "bg-emerald-400",
+			animated: true,
+			label: "Active",
+		},
+		paused: {
+			color: "bg-gray-500",
+			colorLight: "bg-gray-400",
+			animated: false,
+			label: "Paused",
+		},
+		error: {
+			color: "bg-red-500",
+			colorLight: "bg-red-400",
+			animated: true,
+			label: "Error",
+		},
+	}[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>{statusMapping.label}</p>
+			</TooltipContent>
+		</Tooltip>
+	);
+};
diff --git a/apps/client/app/modules/backups/routes/backups.tsx b/apps/client/app/modules/backups/routes/backups.tsx
index 71d83e7..2685068 100644
--- a/apps/client/app/modules/backups/routes/backups.tsx
+++ b/apps/client/app/modules/backups/routes/backups.tsx
@@ -3,8 +3,8 @@ import { CalendarClock, Database, HardDrive, Plus } from "lucide-react";
 import { Link } from "react-router";
 import { listBackupSchedules } from "~/api-client";
 import { listBackupSchedulesOptions } from "~/api-client/@tanstack/react-query.gen";
+import { BackupStatusDot } from "../components/backup-status-dot";
 import { EmptyState } from "~/components/empty-state";
-import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import type { Route } from "./+types/backups";
@@ -73,9 +73,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
 											Volume <span className="text-strong-accent">{schedule.volume.name}</span>
 										</CardTitle>
 									</div>
-									<Badge variant={schedule.enabled ? "default" : "secondary"} className="flex-shrink-0">
-										{schedule.enabled ? "Active" : "Paused"}
-									</Badge>
+									<BackupStatusDot enabled={schedule.enabled} hasError={!!schedule.lastBackupError} />
 								</div>
 								<CardDescription className="flex items-center gap-2 mt-2">
 									<Database className="h-4 w-4" />
@@ -100,15 +98,10 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
 											{schedule.nextBackupAt ? new Date(schedule.nextBackupAt).toLocaleDateString() : "N/A"}
 										</span>
 									</div>
-									{schedule.lastBackupStatus && (
-										<div className="flex items-center justify-between text-sm">
-											<span className="text-muted-foreground">Status</span>
-											<Badge
-												variant={schedule.lastBackupStatus === "success" ? "primary" : "destructive"}
-												className="text-xs"
-											>
-												{schedule.lastBackupStatus}
-											</Badge>
+									{schedule.lastBackupError && (
+										<div className="flex items-start justify-between text-sm gap-2">
+											<span className="text-muted-foreground">Error</span>
+											<span className="text-xs text-red-600 text-right line-clamp-2">{schedule.lastBackupError}</span>
 										</div>
 									)}
 								</div>