Finished basic functionality for multiple servers in the backend.

No special CLI or Liquid support yet and also no refresh support

web/src/App.tsx

@@ -8,6 +8,7 @@ import { Data } from "./types";
 import { theme } from "./theme";
 import RefreshButton from "./components/RefreshButton";
 import Search from "./components/Search";
+import { Server } from "./components/Server";
 
 const SORT_ORDER = [
   "monitored_images",
@@ -40,15 +41,17 @@ function App() {
             className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
           >
             <dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4">
-              {Object.entries(data.metrics).sort((a, b) => {
-                return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]);
-              }).map(([name]) => (
-                <Statistic
-                  name={name as keyof typeof data.metrics}
-                  metrics={data.metrics}
-                  key={name}
-                />
-              ))}
+              {Object.entries(data.metrics)
+                .sort((a, b) => {
+                  return SORT_ORDER.indexOf(a[0]) - SORT_ORDER.indexOf(b[0]);
+                })
+                .map(([name]) => (
+                  <Statistic
+                    name={name as keyof typeof data.metrics}
+                    metrics={data.metrics}
+                    key={name}
+                  />
+                ))}
             </dl>
           </div>
           <div
@@ -61,11 +64,27 @@ function App() {
               <RefreshButton />
             </div>
             <Search onChange={setSearchQuery} />
-            <ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
-              {data.images
-                .filter((image) => image.reference.includes(searchQuery))
-                .map((image) => (
-                  <Image data={image} key={image.reference} />
+            <ul>
+              {Object.entries(
+                data.images.reduce(
+                  (acc, image) => {
+                    const server = image.server ?? "";
+                    if (!acc[server]) acc[server] = [];
+                    acc[server].push(image);
+                    return acc;
+                  },
+                  {} as Record<string, typeof data.images>,
+                ),
+              )
+                .sort()
+                .map(([server, images]) => (
+                  <Server name={server} key={server}>
+                    {images
+                      .filter((image) => image.reference.includes(searchQuery))
+                      .map((image) => (
+                        <Image data={image} key={image.reference} />
+                      ))}
+                  </Server>
                 ))}
             </ul>
           </div>

web/src/components/Image.tsx

@@ -51,11 +51,8 @@ export default function Image({ data }: { data: Image }) {
   }
   return (
     <>
-      <button
-        onClick={handleOpen}
-        className={`w-full *:flex *:items-center *:gap-3 *:px-6 *:py-4`}
-      >
-        <li className="break-all text-start">
+      <button onClick={handleOpen} className="w-full">
+        <li className="flex items-center gap-4 break-all px-6 py-4 text-start">
           <IconCube className="size-6 shrink-0" />
           {data.reference}
           <Icon data={data} />

web/src/components/Server.tsx

@@ -0,0 +1,45 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { theme } from "../theme";
+import { IconChevronDown } from "@tabler/icons-react";
+
+export function Server({
+  name,
+  children,
+}: {
+  name: string;
+  children: React.ReactNode;
+}) {
+  if (name.length === 0)
+    return (
+      <li className="mb-8 last:mb-0">
+        <ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
+          {children}
+        </ul>
+      </li>
+    );
+  return (
+    <Disclosure defaultOpen as="li" className={`mb-4 last:mb-0`}>
+      <DisclosureButton className="group my-4 flex w-full items-center justify-between px-6">
+        <span
+          className={`text-lg font-semibold text-${theme}-600 dark:text-${theme}-400 group-data-[hover]:text-${theme}-800 group-data-[hover]:dark:text-${theme}-200 transition-colors duration-300`}
+        >
+          {name}
+        </span>
+        <IconChevronDown
+          className={`duration:300 size-5 text-${theme}-600 transition-transform group-data-[open]:rotate-180 dark:text-${theme}-400 group-data-[hover]:text-${theme}-800 group-data-[hover]:dark:text-${theme}-200 transition-colors duration-300`}
+        />
+      </DisclosureButton>
+      <DisclosurePanel
+        className={`dark:divide-${theme}-800 divide-y dark:text-white`}
+        as="ul"
+        transition
+      >
+        {children}
+      </DisclosurePanel>
+    </Disclosure>
+  );
+}

web/src/types.ts

@@ -26,6 +26,7 @@ export interface Image {
     error: string | null;
   };
   time: number;
+  server: string | null;
 }
 
 interface VersionInfo {