Adds a copy button and truncation to title

Author: Mbeaulne

src/components/layout/AppMenu.tsx

@@ -3,6 +3,7 @@ import { Link } from "@tanstack/react-router";
 import logo from "/public/Tangle_white.png";
 import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
 import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
+import { CopyText } from "@/components/shared/CopyText/CopyText";
 import ImportPipeline from "@/components/shared/ImportPipeline";
 import { InlineStack } from "@/components/ui/layout";
 import { useComponentSpec } from "@/providers/ComponentSpecProvider";
@@ -35,7 +36,12 @@ const AppMenu = () => {
               className="h-8 filter cursor-pointer shrink-0"
             />
           </Link>
-          <span className="text-white text-md font-bold ml-22">{title}</span>
+
+          {title && (
+            <CopyText className="text-white text-md font-bold truncate max-w-lg ml-22">
+              {title}
+            </CopyText>
+          )}
         </InlineStack>
 
         <InlineStack blockAlign="center">

src/components/shared/CopyText/CopyText.tsx

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { InlineStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
+import { copyToClipboard } from "@/utils/string";
+
+const ICON_DURATION_MS = 500;
+
+interface CopyTextProps {
+  children: string;
+  className?: string;
+  showButton?: boolean;
+}
+
+export const CopyText = ({
+  children,
+  className,
+  showButton = true,
+}: CopyTextProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(children);
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setIsCopied(true);
+    timerRef.current = setTimeout(() => setIsCopied(false), ICON_DURATION_MS);
+  }, [children]);
+
+  const handleButtonClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      handleCopy();
+    },
+    [handleCopy],
+  );
+
+  if (!showButton && !isCopied)
+    return <Text className={className}>{children}</Text>;
+
+  return (
+    <div
+      className="group cursor-pointer"
+      onClick={handleCopy}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      title={children}
+    >
+      <InlineStack gap="1" blockAlign="center" wrap="nowrap">
+        <Text
+          className={cn(
+            "transition-all duration-150",
+            className,
+            isCopied && "scale-[1.01] text-emerald-400!",
+          )}
+        >
+          {children}
+        </Text>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "h-4 w-4 shrink-0 transition-opacity duration-200",
+            isCopied ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+          )}
+          onClick={handleButtonClick}
+        >
+          <span className="relative h-3 w-3">
+            <Icon
+              name="Check"
+              size="sm"
+              className={cn(
+                "absolute inset-0 text-emerald-400 transition-all duration-200",
+                isCopied
+                  ? "rotate-0 scale-100 opacity-100"
+                  : "-rotate-90 scale-0 opacity-0",
+              )}
+            />
+            <Icon
+              name="Copy"
+              size="sm"
+              className={cn(
+                "absolute inset-0 text-muted-foreground transition-all duration-200",
+                isHovered && !isCopied
+                  ? "rotate-0 scale-100 opacity-100"
+                  : "rotate-90 scale-0 opacity-0",
+              )}
+            />
+          </span>
+        </Button>
+      </InlineStack>
+    </div>
+  );
+};