minor visual adjustments to tags

2026-07-06 04:10:13 +00:00 · 2026-05-26 21:34:15 -07:00
parent 9eb55ba68c
commit 05e4ad3200
11 changed files with 263 additions and 151 deletions
--- a/src/components/label-overflow-badge.tsx
+++ b/src/components/label-overflow-badge.tsx
@@ -0,0 +1,97 @@
+import { cn } from "@app/lib/cn";
+import { useTranslations } from "next-intl";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+export type LabelOverflowItem = {
+    color: string;
+    name?: string;
+};
+
+const labelOverflowBadgeClassName =
+    "inline-flex h-auto shrink-0 items-center gap-1.5 rounded-full border border-input bg-background py-0 pl-1.5 pr-2 text-sm shadow-xs";
+
+export type LabelOverflowBadgeProps = {
+    labels: LabelOverflowItem[];
+    onClick?: () => void;
+    className?: string;
+    displayOnly?: boolean;
+};
+
+const MAX_OVERFLOW_COLORS = 3;
+
+export function LabelOverflowBadge({
+    labels,
+    onClick,
+    className,
+    displayOnly = false
+}: LabelOverflowBadgeProps) {
+    const t = useTranslations();
+
+    if (labels.length === 0) {
+        return null;
+    }
+
+    const displayColors = labels
+        .slice(0, MAX_OVERFLOW_COLORS)
+        .map((label) => label.color);
+
+    const overflowNames = labels
+        .map((label) => label.name)
+        .filter((name): name is string => Boolean(name));
+
+    const tooltipContent =
+        overflowNames.length > 0
+            ? overflowNames.join(", ")
+            : t("labelOverflowCount", { count: labels.length });
+
+    const content = (
+        <>
+            <span className="inline-flex items-center">
+                {displayColors.map((color, index) => (
+                    <span
+                        key={index}
+                        className={cn(
+                            "size-2 flex-none rounded-full bg-(--color) ring-1 ring-background",
+                            index > 0 && "-ml-1"
+                        )}
+                        style={{
+                            // @ts-expect-error css color
+                            "--color": color
+                        }}
+                    />
+                ))}
+            </span>
+            <span className="whitespace-nowrap text-muted-foreground">
+                {t("labelOverflowCount", { count: labels.length })}
+            </span>
+        </>
+    );
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                {displayOnly ? (
+                    <span
+                        className={cn(labelOverflowBadgeClassName, className)}
+                    >
+                        {content}
+                    </span>
+                ) : (
+                    <Button
+                        variant="outline"
+                        onClick={onClick}
+                        className={cn(
+                            labelOverflowBadgeClassName,
+                            "cursor-pointer",
+                            className
+                        )}
+                    >
+                        {content}
+                    </Button>
+                )}
+            </TooltipTrigger>
+            <TooltipContent>{tooltipContent}</TooltipContent>
+        </Tooltip>
+    );
+}