Add badge highlighting with animated border transitions, use className in BadgeProps

frontend/src/components/Badge.tsx

@@ -18,15 +18,15 @@ const Badge = ({
     <span
       id="badge-dismiss-dark"
       class={cn(
-        className,
-        "inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-zinc-800 bg-zinc-100 rounded dark:bg-zinc-700 dark:text-zinc-300"
+        "inline-flex align-middle items-center px-2 py-1 me-2 text-sm leading-none font-medium text-zinc-800 bg-zinc-100 rounded dark:bg-zinc-700 dark:text-zinc-300",
+        className
       )}
     >
       {children}
       <button
         type="button"
         onClick={onClick}
-        class="inline-flex items-center p-1 ms-1 text-sm text-zinc-400 bg-transparent rounded-sm hover:bg-zinc-200 hover:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-300"
+        class="inline-flex items-center ms-1 text-sm text-zinc-400 bg-transparent rounded-sm hover:bg-zinc-200 hover:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-300"
         data-dismiss-target="#badge-dismiss-dark"
         aria-label="Remove"
       >

frontend/src/components/Emboldened.tsx

@@ -6,7 +6,7 @@ type EmboldenedProps = {
   copyable?: boolean;
 };
 
-const Emboldened = ({ children, copyable }: EmboldenedProps) => {
+const Emboldened = ({ children, copyable, className }: EmboldenedProps) => {
   function copyToClipboard() {
     // Copy to clipboard
     navigator.clipboard.writeText(children.toString());
@@ -16,6 +16,7 @@ const Emboldened = ({ children, copyable }: EmboldenedProps) => {
     <span
       onClick={copyable ? copyToClipboard : undefined}
       className={cn(
+        className,
         "bg-zinc-900/40 rounded border border-zinc-700 py-0.5 px-1 font-mono text-teal-400",
         {
           "cursor-pointer": copyable,

frontend/src/components/StatefulDemo.tsx

@@ -1,7 +1,7 @@
 import Badge from "@/components/Badge";
 import Emboldened from "@/components/Emboldened";
 import { cn, plural, type ClassValue } from "@/util";
-import { useState } from "preact/hooks";
+import { useRef, useState } from "preact/hooks";
 
 type StatefulDemoProps = {
   class?: ClassValue;
@@ -24,6 +24,22 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
     downloads: Array.from({ length: 7 }).map(() => "0×" + randomBits(16)),
   });
 
+  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
+  const highlightedTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  function highlight(index: number) {
+    setHighlightedIndex(index);
+
+    if (highlightedTimeoutRef.current != null) {
+      clearTimeout(highlightedTimeoutRef.current);
+    }
+
+    highlightedTimeoutRef.current = setTimeout(() => {
+      highlightedTimeoutRef.current = null;
+      setHighlightedIndex(null);
+    }, 1000 * 10);
+  }
+
   return (
     <div class={cn(className, "px-5 leading-6")}>
       <p class="mt-3 mb-3">
@@ -43,10 +59,16 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
         ) : null}
       </p>
       <div class="flex flex-wrap justify-center gap-y-2.5">
-        {session?.downloads.map((download) => (
+        {session?.downloads.map((download, i) => (
           <Badge
-            className="grow-0"
+            className={cn(
+              "transition-colors border hover:border-zinc-500 duration-100 ease-in border-transparent",
+              {
+                "!border-zinc-300 dark:bg-zinc-600": i === highlightedIndex,
+              }
+            )}
             onClick={function onClick() {
+              highlight(i);
               const audio = new Audio("/notify.wav");
               audio.volume = 0.3;
               audio.play();