feat: vertd connection testing

src/lib/sections/settings/Vertd.svelte

@@ -5,8 +5,31 @@
 	import { GITHUB_URL_VERTD } from "$lib/consts";
 	import { RefreshCwIcon, SaveAllIcon, ServerIcon } from "lucide-svelte";
 	import type { Settings } from "./index.svelte";
+	import clsx from "clsx";
 
+	let vertdCommit = $state<string | null>(null);
 	const { settings }: { settings: Settings } = $props();
+
+	$effect(() => {
+		if (settings.settings.vertdURL) {
+			vertdCommit = "loading";
+			fetch(`${settings.settings.vertdURL}/api/version`)
+				.then((res) => {
+					if (res.ok) {
+						res.json().then((data) => {
+							vertdCommit = data.data;
+						});
+					} else {
+						vertdCommit = null;
+					}
+				})
+				.catch(() => {
+					vertdCommit = null;
+				});
+		} else {
+			vertdCommit = null;
+		}
+	});
 </script>
 
 <Panel class="flex flex-col gap-8 p-6">
@@ -19,6 +42,19 @@
 			/>
 			<code>vertd</code>
 		</h2>
+		<p
+			class={clsx("text-sm font-normal", {
+				"text-red-700 dynadark:text-red-100": vertdCommit === null,
+				"text-green-700 dynadark:text-green-100": vertdCommit !== null,
+				"!text-muted": vertdCommit === "loading",
+			})}
+		>
+			status: {vertdCommit
+				? vertdCommit === "loading"
+					? "loading..."
+					: `available, commit id ${vertdCommit}`
+				: "unavailable (is the url right?)"}
+		</p>
 		<div class="flex flex-col gap-8">
 			<div class="flex flex-col gap-4">
 				<p class="text-sm text-muted font-normal">