feat: Implement build management UI with routing and toast notifications

2026-08-07 09:22:56 +02:00 · 2025-11-22 08:52:41 -08:00
parent 629e8376dd
commit b6c2b92ba4
10 changed files with 507 additions and 45 deletions
@@ -1,27 +1,36 @@
-import {
-	Authenticated,
-	AuthLoading,
-	Unauthenticated,
-} from "convex/react";
+import { Authenticated, AuthLoading, Unauthenticated } from "convex/react";
 import { Loader2 } from "lucide-react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { Toaster } from "@/components/ui/sonner";
+import BuildDetail from "./pages/BuildDetail";
 import Dashboard from "./pages/Dashboard";
 import LandingPage from "./pages/LandingPage";

 function App() {
 	return (
-		<>
+		<BrowserRouter>
 			<AuthLoading>
 				<div className="flex items-center justify-center min-h-screen bg-slate-950">
 					<Loader2 className="w-10 h-10 text-cyan-500 animate-spin" />
 				</div>
 			</AuthLoading>
+
 			<Unauthenticated>
-				<LandingPage />
+				<Routes>
+					<Route path="/" element={<LandingPage />} />
+					<Route path="*" element={<Navigate to="/" replace />} />
+				</Routes>
 			</Unauthenticated>
+
 			<Authenticated>
-				<Dashboard />
+				<Routes>
+					<Route path="/" element={<Dashboard />} />
+					<Route path="/builds/:buildId" element={<BuildDetail />} />
+					<Route path="*" element={<Navigate to="/" replace />} />
+				</Routes>
 			</Authenticated>
-		</>
+			<Toaster />
+		</BrowserRouter>
 	);
 }

@@ -0,0 +1,160 @@
+import { useMutation, useQuery } from "convex/react";
+import {
+	Clock,
+	CheckCircle,
+	XCircle,
+	Loader2,
+	Trash2,
+	RotateCw,
+	ExternalLink,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";
+
+interface BuildsPanelProps {
+	profileId: Id<"profiles">;
+}
+
+export default function BuildsPanel({ profileId }: BuildsPanelProps) {
+	const builds = useQuery(api.builds.listByProfile, { profileId });
+	const deleteBuild = useMutation(api.builds.deleteBuild);
+	const retryBuild = useMutation(api.builds.retryBuild);
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "success":
+				return <CheckCircle className="w-4 h-4 text-green-500" />;
+			case "failure":
+				return <XCircle className="w-4 h-4 text-red-500" />;
+			case "in_progress":
+				return <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />;
+			default:
+				return <Clock className="w-4 h-4 text-yellow-500" />;
+		}
+	};
+
+	const getStatusColor = (status: string) => {
+		switch (status) {
+			case "success":
+				return "text-green-400";
+			case "failure":
+				return "text-red-400";
+			case "in_progress":
+				return "text-blue-400";
+			default:
+				return "text-yellow-400";
+		}
+	};
+
+	const handleDelete = async (buildId: Id<"builds">) => {
+		try {
+			await deleteBuild({ buildId });
+			toast.success("Build deleted", {
+				description: "Build record has been removed.",
+			});
+		} catch (error) {
+			toast.error("Delete failed", {
+				description: String(error),
+			});
+		}
+	};
+
+	const handleRetry = async (buildId: Id<"builds">) => {
+		try {
+			await retryBuild({ buildId });
+			toast.success("Build retrying", {
+				description: "Build has been queued again.",
+			});
+		} catch (error) {
+			toast.error("Retry failed", {
+				description: String(error),
+			});
+		}
+	};
+
+	if (!builds || builds.length === 0) {
+		return (
+			<div className="text-slate-500 text-sm py-4">
+				No builds yet. Click "Build" to start.
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-3">
+			<h3 className="text-lg font-semibold">Build History</h3>
+			{builds.map((build) => (
+				<div
+					key={build._id}
+					className="border border-slate-800 rounded-lg p-4 bg-slate-900/30"
+				>
+					<div className="flex items-start justify-between mb-2">
+						<Link
+							to={`/builds/${build._id}`}
+							className="flex items-center gap-2 hover:opacity-80"
+						>
+							{getStatusIcon(build.status)}
+							<span className="font-medium hover:underline">
+								{build.target}
+							</span>
+							<span className={`text-sm ${getStatusColor(build.status)}`}>
+								{build.status}
+							</span>
+						</Link>
+						<div className="flex gap-2">
+							{build.status === "failure" && (
+								<Button
+									size="sm"
+									variant="ghost"
+									onClick={() => handleRetry(build._id)}
+								>
+									<RotateCw className="w-4 h-4" />
+								</Button>
+							)}
+							<Button
+								size="sm"
+								variant="ghost"
+								onClick={() => handleDelete(build._id)}
+							>
+								<Trash2 className="w-4 h-4" />
+							</Button>
+						</div>
+					</div>
+
+					{build.logs && (
+						<pre className="text-xs bg-slate-950 p-2 rounded mt-2 overflow-x-auto text-slate-400 max-h-32 overflow-y-auto">
+							{build.logs.split("\n").slice(-5).join("\n")}
+						</pre>
+					)}
+
+					<div className="flex items-center justify-between mt-3">
+						<Link
+							to={`/builds/${build._id}`}
+							className="text-sm text-cyan-400 hover:underline flex items-center gap-1"
+						>
+							View Details <ExternalLink className="w-3 h-3" />
+						</Link>
+
+						{build.artifactUrl && (
+							<a
+								href={build.artifactUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								className="text-sm text-cyan-400 hover:underline"
+							>
+								Download Artifact →
+							</a>
+						)}
+					</div>
+
+					<div className="text-xs text-slate-500 mt-2">
+						Started: {new Date(build.startedAt).toLocaleString()}
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
@@ -0,0 +1,29 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
@@ -0,0 +1,127 @@
+import { useQuery } from "convex/react";
+import {
+	ArrowLeft,
+	CheckCircle,
+	Clock,
+	Download,
+	Loader2,
+	Terminal,
+	XCircle,
+} from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";
+
+export default function BuildDetail() {
+	const { buildId } = useParams<{ buildId: string }>();
+	const build = useQuery(api.builds.get, {
+		buildId: buildId as Id<"builds">,
+	});
+
+	if (build === undefined) {
+		return (
+			<div className="flex items-center justify-center min-h-screen bg-slate-950 text-white">
+				<Loader2 className="w-8 h-8 animate-spin text-cyan-500" />
+			</div>
+		);
+	}
+
+	if (build === null) {
+		return (
+			<div className="flex flex-col items-center justify-center min-h-screen bg-slate-950 text-white gap-4">
+				<h1 className="text-2xl font-bold">Build Not Found</h1>
+				<Link to="/">
+					<Button variant="outline">Return to Dashboard</Button>
+				</Link>
+			</div>
+		);
+	}
+
+	const getStatusColor = (status: string) => {
+		switch (status) {
+			case "success":
+				return "text-green-400";
+			case "failure":
+				return "text-red-400";
+			case "in_progress":
+				return "text-blue-400";
+			default:
+				return "text-yellow-400";
+		}
+	};
+
+	const getStatusIcon = (status: string) => {
+		switch (status) {
+			case "success":
+				return <CheckCircle className="w-6 h-6 text-green-500" />;
+			case "failure":
+				return <XCircle className="w-6 h-6 text-red-500" />;
+			case "in_progress":
+				return <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />;
+			default:
+				return <Clock className="w-6 h-6 text-yellow-500" />;
+		}
+	};
+
+	return (
+		<div className="min-h-screen bg-slate-950 text-white p-8">
+			<div className="max-w-4xl mx-auto">
+				<header className="mb-8">
+					<Link
+						to="/"
+						className="inline-flex items-center text-slate-400 hover:text-white mb-4"
+					>
+						<ArrowLeft className="w-4 h-4 mr-2" /> Back to Dashboard
+					</Link>
+
+					<div className="flex items-center justify-between">
+						<div className="flex items-center gap-4">
+							{getStatusIcon(build.status)}
+							<div>
+								<h1 className="text-3xl font-bold">{build.target}</h1>
+								<div className="flex items-center gap-2 text-slate-400 mt-1">
+									<span>Build ID: {build._id}</span>
+									<span>•</span>
+									<span className={getStatusColor(build.status)}>
+										{build.status.toUpperCase()}
+									</span>
+									<span>•</span>
+									<span>{new Date(build.startedAt).toLocaleString()}</span>
+								</div>
+							</div>
+						</div>
+
+						{build.artifactUrl && (
+							<a
+								href={build.artifactUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<Button className="bg-cyan-600 hover:bg-cyan-700">
+									<Download className="w-4 h-4 mr-2" /> Download Firmware
+								</Button>
+							</a>
+						)}
+					</div>
+				</header>
+
+				<main className="space-y-6">
+					<div className="bg-slate-900 rounded-lg border border-slate-800 overflow-hidden">
+						<div className="flex items-center gap-2 px-4 py-3 bg-slate-900 border-b border-slate-800">
+							<Terminal className="w-4 h-4 text-slate-400" />
+							<span className="font-mono text-sm text-slate-300">
+								Build Logs
+							</span>
+						</div>
+						<div className="p-4 overflow-x-auto">
+							<pre className="font-mono text-sm text-slate-300 whitespace-pre-wrap">
+								{build.logs || "No logs available..."}
+							</pre>
+						</div>
+					</div>
+				</main>
+			</div>
+		</div>
+	);
+}
@@ -1,14 +1,18 @@
 import { useAuthActions } from "@convex-dev/auth/react";
-import { useQuery } from "convex/react";
+import { useMutation, useQuery } from "convex/react";
 import { Plus } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
+import BuildsPanel from "@/components/BuildsPanel";
 import ProfileEditor from "@/components/ProfileEditor";
 import { Button } from "@/components/ui/button";
 import { api } from "../../convex/_generated/api";
+import type { Id } from "../../convex/_generated/dataModel";

 export default function Dashboard() {
 	const { signOut } = useAuthActions();
 	const profiles = useQuery(api.profiles.list);
+	const triggerBuild = useMutation(api.builds.triggerBuild);
 	const [isEditing, setIsEditing] = useState(false);
 	const [editingProfile, setEditingProfile] = useState<any>(null);

@@ -22,6 +26,19 @@ export default function Dashboard() {
 		setIsEditing(true);
 	};

+	const handleBuild = async (profileId: Id<"profiles">) => {
+		try {
+			await triggerBuild({ profileId });
+			toast.success("Build started", {
+				description: "Check the build status below.",
+			});
+		} catch (error) {
+			toast.error("Build failed", {
+				description: String(error),
+			});
+		}
+	};
+
 	return (
 		<div className="min-h-screen bg-slate-950 text-white p-8">
 			<header className="flex justify-between items-center mb-8">
@@ -65,7 +82,13 @@ export default function Dashboard() {
 									>
 										Edit
 									</Button>
-									<Button size="sm">Build</Button>
+									<Button size="sm" onClick={() => handleBuild(profile._id)}>
+										Build
+									</Button>
+								</div>
+
+								<div className="mt-4 pt-4 border-t border-slate-800">
+									<BuildsPanel profileId={profile._id} />
 								</div>
 							</div>
 						))}