feat: limit badges to 2 with hover/click popover in UserListTable

apps/web/components/ui/LimitedBadges.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
+import { useCallback, useMemo, useState } from "react";
+
+const MAX_VISIBLE_BADGES = 2;
+
+type BadgeItem = {
+  label: string;
+  variant?:
+    | "default"
+    | "warning"
+    | "orange"
+    | "success"
+    | "green"
+    | "gray"
+    | "blue"
+    | "red"
+    | "error"
+    | "grayWithoutHover"
+    | "purple";
+  onClick?: () => void;
+};
+
+type LimitedBadgesProps = {
+  items: BadgeItem[];
+  maxVisible?: number;
+  className?: string;
+};
+
+function LimitedBadges({
+  items,
+  maxVisible = MAX_VISIBLE_BADGES,
+  className,
+}: LimitedBadgesProps): JSX.Element | null {
+  const [isOpen, setIsOpen] = useState(false);
+  const isMobile = useMediaQuery("(max-width: 768px)");
+
+  const { visibleItems, hiddenItems } = useMemo(
+    () => ({
+      visibleItems: items.slice(0, maxVisible),
+      hiddenItems: items.slice(maxVisible),
+    }),
+    [items, maxVisible]
+  );
+
+  const handleMouseEnter = useCallback(() => {
+    if (!isMobile) {
+      setIsOpen(true);
+    }
+  }, [isMobile]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (!isMobile) {
+      setIsOpen(false);
+    }
+  }, [isMobile]);
+
+  if (items.length === 0) return null;
+
+  const hasHiddenItems = hiddenItems.length > 0;
+
+  return (
+    <div className={`flex flex-wrap items-center gap-x-1 gap-y-1 ${className || ""}`}>
+      {visibleItems.map((item) => (
+        <Badge key={item.label} variant={item.variant || "gray"} onClick={item.onClick}>
+          {item.label}
+        </Badge>
+      ))}
+      {hasHiddenItems && (
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              color="minimal"
+              className="h-auto p-0 border-0 hover:border-0"
+              aria-label={`Show ${hiddenItems.length} more items`}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}>
+              <Badge variant="gray">+{hiddenItems.length}</Badge>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            side="bottom"
+            align="start"
+            className="w-fit p-2"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}>
+            <div className="flex flex-col gap-1">
+              {hiddenItems.map((item) => (
+                <span
+                  key={item.label}
+                  className="text-default cursor-pointer text-sm hover:text-emphasis"
+                  onClick={item.onClick}>
+                  {item.label}
+                </span>
+              ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}
+
+export { LimitedBadges };
+export type { BadgeItem };

apps/web/modules/insights/components/ResponseValueCell.tsx

@@ -1,60 +1,24 @@
-import { useId } from "react";
-
-import { Badge } from "@calcom/ui/components/badge";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-  HoverCardPortal,
-} from "@calcom/ui/components/hover-card";
+import { LimitedBadges } from "@calcom/web/components/ui/LimitedBadges";
 
 import { CellWithOverflowX } from "./CellWithOverflowX";
 
 export function ResponseValueCell({
   optionMap,
   values,
-  rowId,
 }: {
   optionMap: Record<string, string>;
   values: string[];
-  rowId: number;
-}) {
-  const cellId = useId();
+}): JSX.Element {
   if (values.length === 0) return <div className="h-6 w-[200px]" />;
 
   return (
     <CellWithOverflowX className="flex w-[200px] gap-1">
-      {values.length > 2 ? (
-        <>
-          {values.slice(0, 2).map((id: string, i: number) => (
-            <Badge key={`${cellId}-${i}-${rowId}`} variant="gray">
-              {optionMap[id] ?? id}
-            </Badge>
-          ))}
-          <HoverCard>
-            <HoverCardTrigger>
-              <Badge variant="gray">+{values.length - 2}</Badge>
-            </HoverCardTrigger>
-            <HoverCardPortal>
-              <HoverCardContent side="bottom" align="start" className="w-fit">
-                <div className="flex flex-col gap-1">
-                  {values.slice(2).map((id: string, i: number) => (
-                    <span key={`${cellId}-overflow-${i}-${rowId}`} className="text-default text-sm">
-                      {optionMap[id] ?? id}
-                    </span>
-                  ))}
-                </div>
-              </HoverCardContent>
-            </HoverCardPortal>
-          </HoverCard>
-        </>
-      ) : (
-        values.map((id: string, i: number) => (
-          <Badge key={`${cellId}-${i}-${rowId}`} variant="gray">
-            {optionMap[id] ?? id}
-          </Badge>
-        ))
-      )}
+      <LimitedBadges
+        items={values.map((id) => ({
+          label: optionMap[id] ?? id,
+          variant: "gray" as const,
+        }))}
+      />
     </CellWithOverflowX>
   );
 }

apps/web/modules/insights/hooks/useInsightsColumns.tsx

@@ -200,7 +200,6 @@ export const useInsightsColumns = ({
                   <ResponseValueCell
                     optionMap={optionMap}
                     values={Array.isArray(result.data) ? result.data : [result.data]}
-                    rowId={info.row.original.id}
                   />
                 )
               );