V3

Many many many changes, honestly just read the release notes

web/src/components/CodeBlock.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, useState } from "react";
+import { theme } from "../theme";
+import { Clipboard, ClipboardCheck } from "lucide-react";
+
+export function CodeBlock({
+  children,
+  enableCopy,
+}: {
+  children: ReactNode;
+  enableCopy?: boolean;
+}) {
+  const [copySuccess, setCopySuccess] = useState(false);
+  const handleCopy = (text: string) => {
+    return () => {
+      navigator.clipboard.writeText(text).then(() => {
+        setCopySuccess(true);
+        setTimeout(() => {
+          setCopySuccess(false);
+        }, 3000);
+      });
+    };
+  };
+
+  return (
+    <div
+      className={`group relative flex w-full items-center rounded-lg bg-${theme}-100 px-3 py-2 font-mono text-${theme}-700 dark:bg-${theme}-950 dark:text-${theme}-300`}
+    >
+      <p className="overflow-scroll">{children}</p>
+      {enableCopy &&
+        navigator.clipboard &&
+        (copySuccess ? (
+          <ClipboardCheck
+            className={`absolute right-3 size-7 bg-${theme}-100 py-1 pl-2 dark:bg-${theme}-950`}
+          />
+        ) : (
+          <button
+            className={`duration-50 absolute right-3 bg-${theme}-100 py-1 pl-2 opacity-0 transition-opacity group-hover:opacity-100 dark:bg-${theme}-950`}
+            onClick={handleCopy(`docker pull ${children}`)}
+          >
+            <Clipboard className="size-5" />
+          </button>
+        ))}
+    </div>
+  );
+}

web/src/components/Image.tsx

@@ -1,46 +1,224 @@
+import { useState } from "react";
 import {
-  IconCircleArrowUpFilled,
-  IconCircleCheckFilled,
-  IconCube,
-  IconHelpCircleFilled,
-} from "@tabler/icons-react";
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
 import { WithTooltip } from "./Tooltip";
+import type { Image } from "../types";
+import { theme } from "../theme";
+import { CodeBlock } from "./CodeBlock";
+import {
+  Box,
+  CircleArrowUp,
+  CircleCheck,
+  HelpCircle,
+  Timer,
+  TriangleAlert,
+  X,
+} from "lucide-react";
 
-export default function Image({
-  name,
-  status,
-}: {
-  name: string;
-  status: boolean | null;
-}) {
+const clickable_registries = [
+  "registry-1.docker.io",
+  "ghcr.io",
+  "quay.io",
+  "gcr.io",
+]; // Not all registries redirect to an info page when visiting the image reference in a browser (e.g. Gitea and derivatives), so we only enable clicking those who do.
+
+export default function Image({ data }: { data: Image }) {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const new_reference =
+    data.result.info?.type == "version"
+      ? data.reference.split(":")[0] + ":" + data.result.info.new_tag
+      : data.reference;
+  const info = getInfo(data)!;
+  let url: string | null = null;
+  if (clickable_registries.includes(data.parts.registry)) {
+    switch (data.parts.registry) {
+      case "registry-1.docker.io":
+        url = `https://hub.docker.com/r/${data.parts.repository}`;
+        break;
+      default:
+        url = `https://${data.parts.registry}/${data.parts.repository}`;
+        break;
+    }
+  }
   return (
-    <li className="break-all">
-      <IconCube className="size-6 shrink-0" />
-      {name}
-      {status == false && (
-        <WithTooltip
-          text="Up to date"
-          className="text-green-500 ml-auto size-6 shrink-0"
+    <>
+      <button onClick={handleOpen} className="w-full">
+        <li
+          className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-900/50 transition-colors duration-200`}
         >
-          <IconCircleCheckFilled />
-        </WithTooltip>
-      )}
-      {status == true && (
-        <WithTooltip
-          text="Update available"
-          className="text-blue-500 ml-auto size-6 shrink-0"
-        >
-          <IconCircleArrowUpFilled />
-        </WithTooltip>
-      )}
-      {status == null && (
-        <WithTooltip
-          text="Unknown"
-          className="text-gray-500 ml-auto size-6 shrink-0"
-        >
-          <IconHelpCircleFilled />
-        </WithTooltip>
-      )}
-    </li>
+          <Box className={`size-6 shrink-0 text-${theme}-500`} />
+          <span className="font-mono">{data.reference}</span>
+          <WithTooltip
+            text={info.description}
+            className={`ml-auto size-6 shrink-0 ${info.color}`}
+          >
+            <info.icon />
+          </WithTooltip>
+        </li>
+      </button>
+      <Dialog open={open} onClose={setOpen} className="relative z-10">
+        <DialogBackdrop
+          transition
+          className={`fixed inset-0 bg-${theme}-500 dark:bg-${theme}-950 !bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in`}
+        />
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center text-center sm:items-center sm:p-0">
+            <DialogPanel
+              transition
+              className={`relative transform overflow-hidden rounded-t-lg bg-white dark:border dark:border-${theme}-800 md:rounded-lg dark:bg-${theme}-900 w-full text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 md:max-w-xl lg:max-w-2xl dark:text-white`}
+            >
+              <div
+                className={`flex flex-col gap-3 px-6 py-4 text-${theme}-600 dark:text-${theme}-400`}
+              >
+                <div className="mb-4 flex items-center gap-3">
+                  <Box className={`size-6 shrink-0 text-${theme}-500`} />
+                  <DialogTitle className="font-mono text-black dark:text-white">
+                    {url ? (
+                      <>
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className={`group w-fit text-black hover:underline dark:text-white`}
+                        >
+                          <span>
+                            {data.reference}
+                            <svg
+                              viewBox="0 0 12 12"
+                              fill="none"
+                              height="1cap"
+                              xmlns="http://www.w3.org/2000/svg"
+                              className="ml-1 inline transition-all duration-100 group-hover:rotate-45"
+                            >
+                              <path
+                                d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
+                                fill="currentColor"
+                              ></path>
+                            </svg>
+                          </span>
+                        </a>
+                      </>
+                    ) : (
+                      data.reference
+                    )}
+                  </DialogTitle>
+                  <button onClick={handleClose} className="ml-auto">
+                    <X
+                      className={`size-6 shrink-0 text-${theme}-500 transition-colors duration-200 hover:text-black dark:hover:text-white`}
+                    />
+                  </button>
+                </div>
+                <div className="flex items-center gap-3">
+                  <info.icon className={`size-6 shrink-0 ${info.color}`} />
+                  {info.description}
+                </div>
+                <div className="flex items-center gap-3">
+                  <Timer className="size-6 shrink-0 text-gray-500" />
+                  <span>
+                    Checked in <b>{data.time}</b> ms
+                  </span>
+                </div>
+                {data.result.error && (
+                  <div className="break-before mt-4 flex items-center gap-3 overflow-hidden rounded-md bg-yellow-400/10 px-3 py-2">
+                    <TriangleAlert className="size-6 shrink-0 text-yellow-500" />
+                    {data.result.error}
+                  </div>
+                )}
+                {data.result.has_update && (
+                  <div className="mt-4 flex flex-col gap-1">
+                    Pull command
+                    <CodeBlock enableCopy>
+                      docker pull {new_reference}
+                    </CodeBlock>
+                  </div>
+                )}
+                <div className="flex flex-col gap-1">
+                  {data.result.info?.type == "digest" && (
+                    <>
+                      {data.result.info.local_digests.length > 1
+                        ? "Local digests"
+                        : "Local digest"}
+                      <CodeBlock enableCopy>
+                        {data.result.info.local_digests.join("\n")}
+                      </CodeBlock>
+                      {data.result.info.remote_digest && (
+                        <div className="flex flex-col gap-1">
+                          Remote digest
+                          <CodeBlock enableCopy>
+                            {data.result.info.remote_digest}
+                          </CodeBlock>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              </div>
+            </DialogPanel>
+          </div>
+        </div>
+      </Dialog>
+    </>
   );
 }
+
+function getInfo(data: Image):
+  | {
+      color: string;
+      icon: typeof HelpCircle;
+      description: string;
+    }
+  | undefined {
+  switch (data.result.has_update) {
+    case null:
+      return {
+        color: "text-gray-500",
+        icon: HelpCircle,
+        description: "Unknown",
+      };
+    case false:
+      return {
+        color: "text-green-500",
+        icon: CircleCheck,
+        description: "Up to date",
+      };
+    case true:
+      if (data.result.info?.type === "version") {
+        switch (data.result.info.version_update_type) {
+          case "major":
+            return {
+              color: "text-red-500",
+              icon: CircleArrowUp,
+              description: "Major update",
+            };
+          case "minor":
+            return {
+              color: "text-yellow-500",
+              icon: CircleArrowUp,
+              description: "Minor update",
+            };
+          case "patch":
+            return {
+              color: "text-blue-500",
+              icon: CircleArrowUp,
+              description: "Patch update",
+            };
+        }
+      } else if (data.result.info?.type === "digest") {
+        return {
+          color: "text-blue-500",
+          icon: CircleArrowUp,
+          description: "Update available",
+        };
+      }
+  }
+}

web/src/components/LastChecked.tsx

@@ -1,6 +1,11 @@
 import { intlFormatDistance } from "date-fns/intlFormatDistance";
+import { theme } from "../theme";
 
 export function LastChecked({ datetime }: { datetime: string }) {
   const date = intlFormatDistance(new Date(datetime), new Date());
-  return <h3>Last checked {date}</h3>;
+  return (
+    <h3 className={`text-${theme}-600 dark:text-${theme}-500`}>
+      Last checked {date}
+    </h3>
+  );
 }

web/src/components/Loading.tsx

@@ -1,31 +1,41 @@
-import { IconLoader2 } from "@tabler/icons-react";
 import { Data } from "../types";
 import Logo from "./Logo";
 import { theme } from "../theme";
+import { LoaderCircle } from "lucide-react";
 
 export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
   fetch(
     process.env.NODE_ENV === "production"
-      ? "/json"
-      : `http://${window.location.hostname}:8000/json`,
-  ).then((response) => response.json().then((data) => {onLoad(data as Data)}));
+      ? "/api/v3/json"
+      : `http://${window.location.hostname}:8000/api/v3/json`,
+  ).then((response) =>
+    response.json().then((data) => {
+      onLoad(data as Data);
+    }),
+  );
   return (
     <div
-      className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
+      className={`flex min-h-screen justify-center bg-${theme}-50 dark:bg-${theme}-950`}
     >
-      <div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full absolute overflow-hidden">
-        <div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
+      <div className="absolute mx-auto h-full w-full max-w-[80rem] overflow-hidden px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
           <div className="flex items-center gap-1">
-            <h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
+            <h1 className="text-5xl font-bold lg:text-6xl dark:text-white">
               Cup
             </h1>
             <Logo />
           </div>
           <div
-            className={`h-full flex justify-center
-            items-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
+            className={`flex flex-col h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
           >
-            Loading <IconLoader2 className="animate-spin" />
+            <div className="flex gap-1 mb-8">
+              Loading <LoaderCircle className="animate-spin" />
+            </div>
+            <p>
+              If this takes more than a few seconds, there was probably a
+              problem fetching the data. Please try reloading the page and
+              report a bug if the problem persists.
+            </p>
           </div>
         </div>
       </div>

web/src/components/RefreshButton.tsx

@@ -1,11 +1,10 @@
-import { MouseEvent } from "react";
+import { useState } from "react";
 import { WithTooltip } from "./Tooltip";
 
 export default function RefreshButton() {
-  const refresh = (event: MouseEvent) => {
-    const btn = event.currentTarget as HTMLButtonElement;
-    btn.disabled = true;
-
+  const [disabled, setDisabled] = useState(false);
+  const refresh = () => {
+    setDisabled(true);
     const request = new XMLHttpRequest();
     request.onload = () => {
       if (request.status === 200) {
@@ -15,14 +14,14 @@ export default function RefreshButton() {
     request.open(
       "GET",
       process.env.NODE_ENV === "production"
-        ? "/refresh"
-        : `http://${window.location.hostname}:8000/refresh`,
+        ? "/api/v3/refresh"
+        : `http://${window.location.hostname}:8000/api/v3/refresh`,
     );
     request.send();
   };
   return (
     <WithTooltip text="Reload">
-      <button className="group" onClick={refresh}>
+      <button className="group shrink-0" onClick={refresh} disabled={disabled}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="24"
@@ -33,7 +32,7 @@ export default function RefreshButton() {
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
-          className="group-disabled:animate-spin"
+          className="size-6 group-disabled:animate-spin"
         >
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <path d="M4,11A8.1,8.1 0 0 1 19.5,9M20,5v4h-4" />

web/src/components/Search.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, useState } from "react";
 import { theme } from "../theme";
-import { IconSearch, IconX } from "@tabler/icons-react";
+import { SearchIcon, X } from "lucide-react";
 
 export default function Search({
   onChange,
@@ -23,27 +23,30 @@ export default function Search({
     onChange("");
   };
   return (
-    <div className={`w-full px-6 text-${theme}-500`}>
+    <div className={`w-full px-6 text-black dark:text-white`}>
       <div
-        className={`flex items-center w-full rounded-md border border-${theme}-300 dark:border-${theme}-700 px-2 gap-1 bg-${theme}-200 dark:bg-${theme}-800 flex-nowrap peer`}
+        className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`}
       >
-        <IconSearch className="size-5" />
+        <SearchIcon className={`size-5 text-${theme}-600 dark:text-${theme}-400`} />
         <div className="w-full">
           <input
-            className={`w-full h-10 text-sm text-${theme}-600 dark:text-${theme}-400 focus:outline-none peer bg-transparent placeholder:text-${theme}-500`}
+            className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}
             placeholder="Search"
             onChange={handleChange}
             value={searchQuery}
           ></input>
         </div>
         {showClear && (
-          <button onClick={handleClear} className={`hover:text-${theme}-600 dark:hover:text-${theme}-400`}>
-            <IconX className="size-5" />
+          <button
+            onClick={handleClear}
+            className={`hover:text-${theme}-600 dark:hover:text-${theme}-400 transition-colors duration-200`}
+          >
+            <X className="size-5" />
           </button>
         )}
       </div>
       <div
-        className="relative -translate-y-[8px] h-[8px] border-b-blue-600 border-b-2 w-0 peer-has-[:focus]:w-full transition-all duration-200 rounded-md left-1/2 -translate-x-1/2"
+        className="relative left-1/2 h-[8px] w-0 -translate-x-1/2 -translate-y-[8px] rounded-md border-b-2 border-b-blue-600 transition-all duration-200 peer-has-[:focus]:w-full"
         style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
       ></div>
     </div>

web/src/components/Server.tsx

@@ -0,0 +1,38 @@
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { theme } from "../theme";
+import { ChevronDown } from "lucide-react";
+
+export function Server({
+  name,
+  children,
+}: {
+  name: string;
+  children: React.ReactNode;
+}) {
+  if (name.length === 0) name = "Local images";
+  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>
+        <ChevronDown
+          className={`size-5 duration-300 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`}
+        />
+      </DisclosureButton>
+      <DisclosurePanel
+        className={`dark:divide-${theme}-900 divide-y dark:text-white`}
+        as="ul"
+        transition
+      >
+        {children}
+      </DisclosurePanel>
+    </Disclosure>
+  );
+}

web/src/components/Statistic.tsx

@@ -1,48 +1,73 @@
-import {
-  IconCircleArrowUpFilled,
-  IconCircleCheckFilled,
-  IconEyeFilled,
-  IconHelpCircleFilled,
-} from "@tabler/icons-react";
+import { CircleArrowUp, CircleCheck, Eye, HelpCircle } from "lucide-react";
 import { theme } from "../theme";
+import { Data } from "../types";
+
+const metricsToShow = [
+  "monitored_images",
+  "up_to_date",
+  "updates_available",
+  "unknown",
+];
 
 export default function Statistic({
   name,
-  value,
+  metrics,
 }: {
-  name: string;
-  value: number;
+  name: keyof Data["metrics"];
+  metrics: Data["metrics"];
 }) {
-  name = name.replaceAll("_", " ");
-  name = name.slice(0, 1).toUpperCase() + name.slice(1); // Capitalize name
+  if (!metricsToShow.includes(name)) return null;
+  const displayName = name.replaceAll("_", " ");
   return (
     <div
-      className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`}
+      className={`before:bg-${theme}-200 before:dark:bg-${theme}-900 after:bg-${theme}-200 after:dark:bg-${theme}-900 gi`}
     >
-      <div className="xl:px-8 px-6 py-4 gap-y-2 gap-x-4 justify-between align-baseline flex flex-col h-full">
+      <div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32">
         <dt
-          className={`text-${theme}-500 dark:text-${theme}-400 leading-6 font-medium`}
+          className={`text-${theme}-500 dark:text-${theme}-400 text-sm font-semibold uppercase leading-6`}
         >
-          {name}
+          {displayName}
         </dt>
-        <div className="flex gap-1 justify-between items-center">
-          <dd className="text-black dark:text-white tracking-tight leading-10 font-medium text-3xl w-full">
-            {value}
+        <div className="flex items-center justify-between gap-1">
+          <dd className="w-full text-3xl font-medium leading-10 tracking-tight text-black dark:text-white">
+            {metrics[name]}
           </dd>
-          {name == "Monitored images" && (
-            <IconEyeFilled className="size-6 text-black dark:text-white shrink-0" />
+          {name === "monitored_images" && (
+            <Eye className="size-6 shrink-0 text-black dark:text-white" />
           )}
-          {name == "Up to date" && (
-            <IconCircleCheckFilled className="size-6 text-green-500 shrink-0" />
+          {name === "up_to_date" && (
+            <CircleCheck className="size-6 shrink-0 text-green-500" />
           )}
-          {name == "Update available" && (
-            <IconCircleArrowUpFilled className="size-6 text-blue-500 shrink-0" />
-          )}
-          {name == "Unknown" && (
-            <IconHelpCircleFilled className="size-6 text-gray-500 shrink-0" />
+          {name === "updates_available" && getUpdatesAvailableIcon(metrics)}
+          {name === "unknown" && (
+            <HelpCircle className="size-6 shrink-0 text-gray-500" />
           )}
         </div>
       </div>
     </div>
   );
 }
+
+function getUpdatesAvailableIcon(metrics: Data["metrics"]) {
+  const filteredMetrics = Object.entries(metrics).filter(
+    ([key]) => !metricsToShow.includes(key),
+  );
+  const maxMetric = filteredMetrics.reduce((max, current) => {
+    if (Number(current[1]) > Number(max[1])) {
+      return current;
+    }
+    return max;
+  }, filteredMetrics[0])[0];
+  let color = "";
+  switch (maxMetric) {
+    case "major_updates":
+      color = "text-red-500";
+      break;
+    case "minor_updates":
+      color = "text-yellow-500";
+      break;
+    default:
+      color = "text-blue-500";
+  }
+  return <CircleArrowUp className={`size-6 shrink-0 ${color}`} />;
+}

web/src/components/Tooltip.tsx

@@ -11,7 +11,7 @@ const TooltipContent = forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      `z-50 overflow-hidden rounded-md border border-${theme}-200 bg-white px-3 py-1.5 text-sm text-${theme}-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-${theme}-800 dark:bg-${theme}-950 dark:text-${theme}-50`,
+      `z-50 overflow-hidden rounded-md border border-${theme}-200 dark:border-${theme}-800 bg-white px-3 py-1.5 text-sm text-${theme}-950 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-${theme}-800 dark:bg-${theme}-950 dark:text-${theme}-50`,
       className,
     )}
     {...props}