Merge pull request 'AddMobile' (#1) from AddMobile into main

Reviewed-on: #1

src/app/_components/docker-table.tsx

@@ -4,90 +4,103 @@ import type { dockerRouterType } from "@/server/api/routers/docker";
 import { api } from "@/trpc/react";
 import type { JSX } from "react";
 
-function DockerRow({
+function DockerCard({
 	containerInfo,
 }: {
 	containerInfo: dockerRouterType["list"][number];
 }) {
-	const { data: latest, isError, isLoading } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });
+	const { data: latest, isError, isLoading, error } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });
-	const outdated = containerInfo.image.current.hash !== latest?.latest.hash;
 
 	let latestFragment: JSX.Element | null = null;
 	if (isError) {
 		latestFragment = (
-			<>
+			<div className="flex flex-row flex-wrap *:basis-1/2">
-				<td>{"Error"}</td>
+				<dt>Tag</dt>
-				<td>{"Error"}</td>
+				<dd>Error: {error.message}</dd>
-			</>
+
+				<dt>Short Hash</dt>
+				<dd>Error: {error.message}</dd>
+			</div>
 		);
 	} else if (isLoading) {
 		latestFragment = (
-			<>
+			<div className="flex flex-row flex-wrap *:basis-1/2">
-				<td>
+				<dt>Tag</dt>
-					<span className="loading loading-dots loading-lg" />
+				<dd className="loading loading-dots loading-sm" />
-				</td>
+
-				<td>
+				<dt>Short Hash</dt>
-					<span className="loading loading-dots loading-lg" />
+				<dd className="loading loading-dots loading-sm" />
-				</td>
+			</div>
-			</>
 		);
 	} else if (latest) {
 		latestFragment = (
-			<>
+			<div className="flex flex-row flex-wrap *:basis-1/2">
-				<td>{latest?.latest.tag}</td>
+				<dt>Tag</dt>
-				<td>{latest?.latest.hash}</td>
+				<dd>{latest?.latest.tag ?? "Unknown"}</dd>
-			</>
+
+				<dt>Short Hash</dt>
+				<dd>{latest?.latest.hash ?? "Unknown"}</dd>
+			</div>
 		);
 	}
 
+	const outdated = containerInfo.image.current.hash !== latest?.latest.hash;
+	const showWarning = isLoading || (!isError && !isLoading && (!latest?.latest.tag || !latest?.latest.hash));
+
 	return (
-		<tr key={containerInfo.container.name} className={`${outdated ? "bg-base-200" : null}`}>
+		<div
-			<td className={`border-l-8 ${isLoading ? "border-l-warning/80" : outdated ? "border-l-error/80" : "border-l-info/80"}`}>{containerInfo.container.name}</td>
+			key={containerInfo.container.name}
-			<td>{containerInfo.image.name}</td>
+			className={`card card-outline card-compact w-80 border-t-8 bg-base-300 shadow-md ${showWarning ? "border-t-warning/80" : outdated ? "border-t-error/80" : "border-t-info/80"}`}
-			<td>{containerInfo.image.current.tag}</td>
+		>
-			<td>{containerInfo.image.current.hash}</td>
+			<dl className="card-body flex flex-col flex-wrap items-center justify-around text-base">
-			{latestFragment}
+				<h2 className="text-center text-3xl">{containerInfo.container.name}</h2>
-		</tr>
+				<p>{containerInfo.image.name}</p>
+				<div className="divider divider-primary m-1" />
+				<h3 className="text-xl underline decoration-1 underline-offset-4">Current</h3>
+				<div className="flex flex-row flex-wrap *:basis-1/2">
+					<dt>Tag</dt>
+					<dd>{containerInfo.image.current.tag}</dd>
+					<dt>Short Hash</dt>
+					<dd>{containerInfo.image.current.hash}</dd>
+				</div>
+				<div className="divider divider-primary m-0" />
+				<h3 className="text-xl underline decoration-1 underline-offset-4">Latest</h3>
+				{latestFragment}
+			</dl>
+		</div>
 	);
 }
 
 export function DockerTable() {
-	const { data: list, isLoading: listLoading } = api.docker.list.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });
+	const { data: list, isLoading: listLoading, error } = api.docker.list.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });
+
 	return (
-		<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
+		<>
-			{!listLoading ? (
+			{listLoading ? (
-				<table className="table-s table">
+				<>Loading docker container list...</>
-					<thead>
-						<tr>
-							<th>Name</th>
-							<th>Image</th>
-							<th>Tag</th>
-							<th>Short Hash</th>
-							<th>Tag</th>
-							<th>Short Hash</th>
-						</tr>
-					</thead>
-					<tbody>
-						{list
-							? list
-									.sort((ca, cb) => {
-										if (ca.container.name && cb.container.name) {
-											if (ca.container.name < cb.container.name) {
-												return -1;
-											}
-											if (ca.container.name > cb.container.name) {
-												return 1;
-											}
-										}
-										return 0;
-									})
-									.map((containerInfo) => <DockerRow key={containerInfo.container.name} containerInfo={containerInfo} />)
-							: null}
-					</tbody>
-				</table>
 			) : (
-				<>Loading data...</>
+				<>
+					<div className={"flex flex-row flex-wrap justify-around gap-8"}>
+						{list ? (
+							list
+								.sort((ca, cb) => {
+									if (ca.container.name && cb.container.name) {
+										if (ca.container.name < cb.container.name) {
+											return -1;
+										}
+										if (ca.container.name > cb.container.name) {
+											return 1;
+										}
+									}
+									return 0;
+								})
+								.map((containerInfo) => <DockerCard key={containerInfo.container.name} containerInfo={containerInfo} />)
+						) : (
+							<>Error loading docker container list: {error?.message}</>
+						)}
+					</div>
+				</>
 			)}
-		</div>
+		</>
 	);
 }

src/app/page.tsx

@@ -5,10 +5,8 @@ export default async function Home() {
 	void api.docker.list.prefetch();
 
 	return (
-		<main className="flex min-h-screen flex-col items-center justify-center">
+		<main className="container flex min-h-screen flex-col items-center justify-center px-4 py-8">
-			<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+			<DockerTable />
-				<DockerTable />
-			</div>
 		</main>
 	);
 }

src/server/api/routers/docker.ts

@@ -188,6 +188,7 @@ async function getLatest(image: string, tag?: string): Promise<{ hash: string; t
 
 	return {
 		hash,
+		tag,
 	};
 }
 

src/styles/globals.css

@@ -6,4 +6,4 @@
 
 @theme {
 	--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
+}