feat(notifications): add copyable request IDs

frontend/src/components/v2/CopyButton/CopyButton.tsx

@@ -0,0 +1,57 @@
+import { faCheck, faCopy, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { useTimedReset } from "@app/hooks";
+
+import { IconButton } from "../IconButton";
+import { Tooltip } from "../Tooltip";
+
+export type CopyButtonProps = {
+  value: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "solid" | "outline" | "plain" | "star" | "outline_bg";
+  color?: string;
+  name?: string;
+  icon?: IconDefinition;
+};
+
+export const CopyButton = ({
+  value,
+  size = "sm",
+  variant = "solid",
+  color,
+  name,
+  icon = faCopy
+}: CopyButtonProps) => {
+  const tooltipText = name ? `Copy ${name}` : "Copy to clipboard";
+
+  const [copyText, isCopying, setCopyText] = useTimedReset<string>({
+    initialState: tooltipText
+  });
+
+  async function handleCopyText() {
+    setCopyText("Copied");
+    navigator.clipboard.writeText(value);
+  }
+
+  return (
+    <div>
+      <Tooltip content={copyText} size={size === "xs" || size === "sm" ? "sm" : "md"}>
+        <IconButton
+          ariaLabel={tooltipText}
+          variant={variant}
+          className={twMerge("group relative", color)}
+          size={size}
+          onClick={() => {
+            handleCopyText();
+          }}
+        >
+          <FontAwesomeIcon icon={isCopying ? faCheck : icon} />
+        </IconButton>
+      </Tooltip>
+    </div>
+  );
+};
+
+CopyButton.displayName = "CopyButton";

frontend/src/components/v2/CopyButton/index.tsx

@@ -0,0 +1,2 @@
+export type { CopyButtonProps } from "./CopyButton";
+export { CopyButton } from "./CopyButton";