feat(homelab)!: migrate to svelte kit, add more server stats endpoints

nix/homelab/frontend/src/lib/minecraft/Stats.svelte

@@ -2,6 +2,12 @@
   import { createQuery } from "@tanstack/svelte-query";
   import { fetchStats } from "./stats";
   import { LoaderCircle } from "@lucide/svelte";
+  import {
+    formatDistance,
+    formatDistanceToNow,
+    formatDuration,
+    intervalToDuration,
+  } from "date-fns";
 
   const query = createQuery(() => ({
     queryKey: ["minecraft-server-stats"],
@@ -9,6 +15,21 @@
     refetchInterval: 10000,
     staleTime: 5000,
   }));
+
+  const formatUptime = () => {
+    if (!query.data) {
+      return "--";
+    }
+    const started_at = query.data.uptime.started_at;
+    const duration = intervalToDuration({ start: started_at, end: new Date() });
+    $inspect(duration);
+    if (!duration.days && (duration.hours ?? 0) < 1) {
+      return formatDistanceToNow(new Date(query.data.uptime.started_at));
+    }
+    return formatDuration(duration, {
+      format: ["days", "hours", "minutes"],
+    });
+  };
 </script>
 
 {#snippet statItem(label: string, value?: string | number)}
@@ -21,7 +42,7 @@
 <div class="border border-zinc-600 rounded-lg p-4">
   <h3 class="text-lg font-medium mb-3">
     Server Stats {#if query.isError}
-      <span class="text-sm text-red-500"
+      <span class="ml-1 text-sm text-red-500"
         >an error occured fetching server stats</span
       >
     {:else if query.isPending}
@@ -31,7 +52,7 @@
   <div class="grid grid-cols-2 gap-4 text-zinc-400">
     {@render statItem("Players Online", query.data?.players_online ?? "--")}
     {@render statItem("Server Status", query.data?.status ?? "--")}
-    {@render statItem("Uptime", query.data?.uptime ?? "--")}
+    {@render statItem("Uptime", formatUptime())}
     {@render statItem("World Size", query.data?.world_size ?? "--")}
   </div>
 </div>

nix/homelab/frontend/src/lib/minecraft/stats.ts

@@ -2,13 +2,14 @@ type StatsResponse = {
   status: string;
   players_online: number;
   max_players: number;
-  uptime: string;
+  uptime: {
+    seconds: number;
+    started_at: string;
+  };
   world_size: string;
 };
 
 export const fetchStats = async () => {
-  const response = await fetch(
-    "http://localhost:5173/api/minecraft-server-stats",
-  );
+  const response = await fetch("/api/minecraft-server-stats");
   return (await response.json()) as StatsResponse;
 };