feat: add badges to web UI to quickly show which version is running and which the user will upgrade to

This is an example of a bad, long commit message.

web/src/components/Badge.tsx

@@ -0,0 +1,14 @@
+import { ArrowRight } from "lucide-react";
+import { theme } from "../theme";
+
+export default function Badge({ from, to }: { from: string; to: string }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full bg-${theme}-50 px-2 py-1 text-xs font-medium text-${theme}-700 ring-1 ring-inset ring-${theme}-700/10 dark:bg-${theme}-400/10 dark:text-${theme}-400 dark:ring-${theme}-400/30`}
+    >
+      {from}
+      <ArrowRight className="size-3" />
+      {to}
+    </span>
+  );
+}

web/src/components/Image.tsx

@@ -18,6 +18,7 @@ import {
   TriangleAlert,
   X,
 } from "lucide-react";
+import Badge from "./Badge";
 
 const clickable_registries = [
   "registry-1.docker.io",
@@ -60,12 +61,20 @@ export default function Image({ data }: { data: Image }) {
         >
           <Box className={`size-6 shrink-0 text-${theme}-500`} />
           <span className="font-mono">{data.reference}</span>
+          <div className="ml-auto flex gap-2">
+            {data.result.info?.type === "version" ? (
+              <Badge
+                from={data.result.info.current_version}
+                to={data.result.info.new_version}
+              />
+            ) : null}
             <WithTooltip
               text={info.description}
-            className={`ml-auto size-6 shrink-0 ${info.color}`}
+              className={`size-6 shrink-0 ${info.color}`}
             >
               <info.icon />
             </WithTooltip>
+          </div>
         </li>
       </button>
       <Dialog open={open} onClose={setOpen} className="relative z-10">

web/tailwind.config.js

@@ -15,7 +15,7 @@ export default {
       variants: ["hover"],
     },
     {
-      pattern: /bg-(gray|neutral)-(900|950)/,
+      pattern: /bg-(gray|neutral)-(400|900|950)/,
       variants: ["dark"],
     },
     {
@@ -27,7 +27,7 @@ export default {
       variants: ["before:dark", "after:dark", "dark", "hover:dark"],
     },
     {
-      pattern: /text-(gray|neutral)-(50|300|200)/,
+      pattern: /text-(gray|neutral)-(50|300|200|400)/,
       variants: ["dark"],
     },
     {
@@ -68,5 +68,12 @@ export default {
       pattern: /border-(gray|neutral)-(700|800|900)/,
       variants: ["dark"],
     },
+    {
+      pattern: /ring-(gray|neutral)-700/,
+    },
+    {
+      pattern: /ring-(gray|neutral)-400/,
+      variants: ["dark"],
+    },
   ],
 };