Initial commit, most things work

src/app/page.tsx

@@ -0,0 +1,70 @@
+import { HydrateClient, api } from "@/trpc/server";
+
+export default async function Home() {
+	const list = await api.docker.list();
+
+	void api.docker.list.prefetch();
+
+	return (
+		<HydrateClient>
+			<main className="flex min-h-screen flex-col items-center justify-center">
+				<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+					{list ? (
+						<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
+							<table className="table-s table">
+								<thead>
+									<tr>
+										<th>Name</th>
+										<th>Image</th>
+										<th>Version</th>
+										<th>Short Hash</th>
+										<th>Version</th>
+										<th>Short Hash</th>
+									</tr>
+								</thead>
+								<tbody>
+									{list
+										.sort((ca, cb) => {
+											if (ca.Names[0] < cb.Names[0]) {
+												return -1;
+											}
+											if (ca.Names[0] > cb.Names[0]) {
+												return 1;
+											}
+											return 0;
+										})
+										.map((containerInfo) => {
+											const outdated =
+												containerInfo.current.version !==
+													containerInfo.latest.version ||
+												containerInfo.current.hash !==
+													containerInfo.latest.hash;
+											return (
+												<tr
+													key={containerInfo.Image.split(":")[0]}
+													className={`${outdated ? "bg-base-200" : null}`}
+												>
+													<td
+														className={`border-l-8 ${outdated ? "border-l-error/80" : "border-l-info/80"}`}
+													>
+														{containerInfo.Names[0]?.substring(1)}
+													</td>
+													<td>{containerInfo.Image.split(":")[0]}</td>
+													<td>{containerInfo.current.version}</td>
+													<td>{containerInfo.current.hash}</td>
+													<td>{containerInfo.latest.version}</td>
+													<td>{containerInfo.latest.hash}</td>
+												</tr>
+											);
+										})}
+								</tbody>
+							</table>
+						</div>
+					) : (
+						"Loading tRPC query..."
+					)}
+				</div>
+			</main>
+		</HydrateClient>
+	);
+}