refactor(ui): replace HeroUI Snippet with CodeSnippet component (#10319)

ui/components/ui/code-snippet/code-snippet.tsx

@@ -21,6 +21,10 @@ interface CodeSnippetProps {
   icon?: ReactNode;
   /** Function to format the displayed text (value is still copied as-is) */
   formatter?: (value: string) => string;
+  /** Enable multiline display (disables truncation, enables word wrap) */
+  multiline?: boolean;
+  /** Custom aria-label for the copy button */
+  ariaLabel?: string;
 }
 
 export const CodeSnippet = ({
@@ -30,6 +34,8 @@ export const CodeSnippet = ({
   hideCopyButton = false,
   icon,
   formatter,
+  multiline = false,
+  ariaLabel = "Copy to clipboard",
 }: CodeSnippetProps) => {
   const [copied, setCopied] = useState(false);
 
@@ -46,7 +52,7 @@ export const CodeSnippet = ({
       type="button"
       onClick={handleCopy}
       className="text-text-neutral-secondary hover:text-text-neutral-primary shrink-0 cursor-pointer transition-colors"
-      aria-label="Copy to clipboard"
+      aria-label={ariaLabel}
     >
       {copied ? (
         <Check className="h-3.5 w-3.5" />
@@ -66,7 +72,7 @@ export const CodeSnippet = ({
           "hover:bg-bg-neutral-tertiary text-text-neutral-secondary hover:text-text-neutral-primary shrink-0 cursor-pointer rounded-md p-1 transition-colors",
           className,
         )}
-        aria-label="Copy to clipboard"
+        aria-label={ariaLabel}
       >
         {copied ? (
           <Check className="h-3.5 w-3.5" />
@@ -80,19 +86,26 @@ export const CodeSnippet = ({
   return (
     <div
       className={cn(
-        "bg-bg-neutral-tertiary text-text-neutral-primary border-border-neutral-tertiary flex h-6 w-fit min-w-0 items-center gap-1.5 rounded-full border-2 px-2 py-0.5 text-xs",
+        "bg-bg-neutral-tertiary text-text-neutral-primary border-border-neutral-tertiary flex w-fit min-w-0 items-center gap-1.5 border-2 px-2 py-0.5 text-xs",
+        multiline ? "h-auto rounded-lg" : "h-6 rounded-full",
         className,
       )}
     >
       {icon && (
         <span className="text-text-neutral-secondary shrink-0">{icon}</span>
       )}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <code className="min-w-0 flex-1 truncate">{displayValue}</code>
-        </TooltipTrigger>
-        <TooltipContent side="top">{value}</TooltipContent>
-      </Tooltip>
+      {multiline ? (
+        <span className="min-w-0 flex-1 break-all whitespace-pre-wrap">
+          {displayValue}
+        </span>
+      ) : (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="min-w-0 flex-1 truncate">{displayValue}</span>
+          </TooltipTrigger>
+          <TooltipContent side="top">{value}</TooltipContent>
+        </Tooltip>
+      )}
       {!hideCopyButton && <CopyButton />}
     </div>
   );

ui/components/ui/entities/index.ts

@@ -3,4 +3,3 @@ export * from "./entity-info";
 export * from "./get-provider-logo";
 export * from "./info-field";
 export * from "./scan-status";
-export * from "./snippet-chip";

ui/components/ui/entities/snippet-chip.tsx

@@ -1,51 +0,0 @@
-import { Snippet } from "@heroui/snippet";
-import { cn } from "@heroui/theme";
-import { Tooltip } from "@heroui/tooltip";
-import React from "react";
-
-import { CopyIcon, DoneIcon } from "@/components/icons";
-
-interface SnippetChipProps {
-  value: string;
-  ariaLabel?: string;
-  icon?: React.ReactNode;
-  hideCopyButton?: boolean;
-  formatter?: (value: string) => string;
-  className?: string;
-}
-export const SnippetChip = ({
-  value,
-  hideCopyButton = false,
-  ariaLabel = `Copy ${value} to clipboard`,
-  icon,
-  formatter,
-  className,
-  ...props
-}: SnippetChipProps) => {
-  return (
-    <Snippet
-      className={cn("h-6", className)}
-      classNames={{
-        content: "min-w-0 overflow-hidden",
-        pre: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
-        base: "border-border-neutral-tertiary bg-bg-neutral-tertiary rounded-lg border py-1",
-      }}
-      size="sm"
-      hideSymbol
-      copyIcon={<CopyIcon size={16} />}
-      checkIcon={<DoneIcon size={16} />}
-      hideCopyButton={hideCopyButton}
-      codeString={value}
-      {...props}
-    >
-      <div className="flex min-w-0 items-center gap-2" aria-label={ariaLabel}>
-        {icon}
-        <Tooltip content={value} placement="top" size="sm">
-          <span className="min-w-0 flex-1 truncate text-xs">
-            {formatter ? formatter(value) : value}
-          </span>
-        </Tooltip>
-      </div>
-    </Snippet>
-  );
-};

ui/components/ui/table/data-table-pagination.tsx

@@ -191,7 +191,7 @@ export function DataTablePagination({
 
           {/* Page info and navigation */}
           <div className="flex items-center gap-3">
-            <span className="text-text-neutral-secondary text-xs font-medium">
+            <span className="text-text-neutral-secondary hidden text-xs font-medium sm:inline">
               Page {currentPage} of {totalPages}
             </span>
             <div className="flex items-center gap-3">