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";

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -13,6 +13,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   position?: "top" | "bottom" | "left" | "right";
   isDisabled?: boolean;
   center?: boolean;
+  size?: "sm" | "md";
 };
 
 export const Tooltip = ({
@@ -26,6 +27,7 @@ export const Tooltip = ({
   asChild = true,
   isDisabled,
   position = "top",
+  size = "md",
   ...props
 }: TooltipProps) =>
   // just render children if tooltip content is empty
@@ -43,7 +45,7 @@ export const Tooltip = ({
         sideOffset={5}
         {...props}
         className={twMerge(
-          `z-50 max-w-[15rem] select-none rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-sm font-light text-bunker-200 shadow-md 
+          `z-50 max-w-[15rem] select-none border border-mineshaft-600 bg-mineshaft-800 font-light text-bunker-200 shadow-md 
         data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
         data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
         data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
@@ -51,6 +53,8 @@ export const Tooltip = ({
       `,
           isDisabled && "!hidden",
           center && "text-center",
+          size === "sm" && "rounded-sm py-1 px-2 text-xs",
+          size === "md" && "rounded-md py-2 px-4 text-sm",
           className
         )}
       >