feat(notifications): add copyable request IDs

frontend/src/components/notifications/Notifications.tsx

@@ -1,18 +1,54 @@
 import { ReactNode } from "react";
 import { Id, toast, ToastContainer, ToastOptions, TypeOptions } from "react-toastify";
+import { faCopy, IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import { twMerge } from "tailwind-merge";
+
+import { CopyButton } from "../v2/CopyButton";
 
 export type TNotification = {
   title?: string;
   text: ReactNode;
   children?: ReactNode;
+  cta?: ReactNode;
+  copyActions?: { icon?: IconDefinition; value: string; name: string; label?: string }[];
 };
 
-export const NotificationContent = ({ title, text, children }: TNotification) => {
+export const NotificationContent = ({ title, text, children, cta, copyActions }: TNotification) => {
   return (
     <div className="msg-container">
       {title && <div className="text-md mb-1 font-medium">{title}</div>}
       <div className={title ? "text-sm text-neutral-400" : "text-md"}>{text}</div>
       {children && <div className="mt-2">{children}</div>}
+      {(cta || copyActions) && (
+        <div
+          className={twMerge(
+            "mt-2 flex h-7 w-full flex-row items-end gap-2",
+            cta ? "justify-between" : "justify-end"
+          )}
+        >
+          {cta}
+
+          {copyActions && (
+            <div className="flex h-7 flex-row items-center gap-2">
+              {copyActions.map((action) => (
+                <div className="flex flex-row items-center gap-2" key={`copy-${action.name}`}>
+                  {action.label && (
+                    <span className="ml-2 text-xs text-mineshaft-400">{action.label}</span>
+                  )}
+                  <CopyButton
+                    value={action.value}
+                    name={action.name}
+                    size="xs"
+                    variant="plain"
+                    color="text-mineshaft-400"
+                    icon={action.icon ?? faCopy}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };