create copyable cell component to quickly copy the value of a table cell

frontend/src/components/RowList.tsx

@@ -12,11 +12,15 @@ import { useAppStore } from "@/stores/useAppStore";
 import { useUIStore } from "@/stores/useUIStore";
 import { formatDisplayValue } from "@/utils/formatDisplayValue";
 import { getRowId } from "@/utils/getRowId";
-import { ChevronUp, Key } from "lucide-react";
+import { Check, ChevronUp, Copy, Key } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@/utils/cn";
 import { useShallow } from "zustand/shallow";
 import { formatDisplayType } from "@/utils/formatDisplayType";
+import { Button } from "@/components/shadcn-ui/button";
+import { toast } from "sonner";
+import { formatCopyValue } from "@/utils/formatCopyValue";
+import type { RowResponse, TableFullResponse } from "@catwallon/pgview-types";
 
 const CELL_HEIGHT = 40;
 
@@ -144,25 +148,14 @@ export function RowList() {
                   }}
                 >
                   {Object.entries(row).map(([key, value]) => (
-                    <TableCell height={cellHeight} key={key}>
-                      <p
-                        className={
-                          isEmpty(value) || isNull(value)
-                            ? "text-muted-foreground italic"
-                            : ""
-                        }
-                      >
-                        {isEmpty(value)
-                          ? "empty"
-                          : isNull(value)
-                            ? "null"
-                            : table?.columns &&
-                              formatDisplayValue(
-                                table.columns.find((col) => col.name === key),
-                                value,
-                              )}
-                      </p>
-                    </TableCell>
+                    <CopyableCell
+                      cellHeight={cellHeight}
+                      column={table.columns.find((col) => col.name === key)}
+                      isEmpty={isEmpty(value)}
+                      isNull={isNull(value)}
+                      key={key}
+                      value={value}
+                    />
                   ))}
                 </TableRow>
               ))}
@@ -178,3 +171,67 @@ export function RowList() {
     </div>
   );
 }
+
+function CopyableCell({
+  cellHeight,
+  column,
+  isEmpty,
+  isNull,
+  value,
+}: {
+  cellHeight: number;
+  column: TableFullResponse["columns"][number] | undefined;
+  isEmpty: boolean;
+  isNull: boolean;
+  value: RowResponse[string];
+}) {
+  const [copied, setCopied] = useState(false);
+  const canCopy = !isNull && !isEmpty;
+
+  function handleCopy(e: React.MouseEvent<HTMLButtonElement>) {
+    e.stopPropagation();
+
+    if (!canCopy) {
+      return;
+    }
+
+    navigator.clipboard.writeText(formatCopyValue(column, value)).then(() => {
+      setCopied(true);
+      toast.success("Copied value");
+      window.setTimeout(() => setCopied(false), 1000);
+    });
+  }
+
+  return (
+    <TableCell height={cellHeight}>
+      <div className="group/cell flex min-w-0 items-center gap-2">
+        <p
+          className={cn(
+            "min-w-0 truncate",
+            (isEmpty || isNull) && "text-muted-foreground italic",
+          )}
+        >
+          {isEmpty
+            ? "empty"
+            : isNull
+              ? "null"
+              : formatDisplayValue(column, value)}
+        </p>
+        {canCopy && (
+          <Button
+            aria-label="Copy value"
+            className={cn(
+              "ml-auto size-6 shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100 focus-visible:opacity-100",
+              copied && "opacity-100",
+            )}
+            onClick={handleCopy}
+            size="icon-xs"
+            variant="ghost"
+          >
+            {copied ? <Check /> : <Copy />}
+          </Button>
+        )}
+      </div>
+    </TableCell>
+  );
+}

frontend/src/utils/formatCopyValue.ts

@@ -0,0 +1,18 @@
+import type { TableFullResponse } from "@catwallon/pgview-types";
+
+export function formatCopyValue(
+  col: TableFullResponse["columns"][number] | undefined,
+  value: unknown,
+): string {
+  const type = col?.type;
+
+  if (type === "json" || type === "jsonb") {
+    return JSON.stringify(value);
+  }
+
+  if (col?.isArray && Array.isArray(value)) {
+    return JSON.stringify(value);
+  }
+
+  return String(value);
+}