Adds a copy button and truncation to title

Author: Mbeaulne

src/components/layout/AppMenu.tsx

@@ -1,6 +1,7 @@
 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 { Link } from "@/components/ui/link";
@@ -34,7 +35,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,93 @@
+import { type MouseEvent, useCallback, 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";
+
+interface CopyTextProps {
+  children: string;
+  className?: string;
+}
+
+export const CopyText = ({ children, className }: CopyTextProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    copyToClipboard(children);
+    setIsCopied(true);
+  }, [children]);
+
+  const handleButtonClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      handleCopy();
+    },
+    [handleCopy],
+  );
+
+  const handleAnimationEnd = useCallback(() => {
+    setIsCopied(false);
+  }, []);
+
+  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={null}
+          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">
+            {isCopied ? (
+              <span
+                key="check"
+                className="absolute inset-0 animate-revert-copied"
+                onAnimationEnd={handleAnimationEnd}
+              >
+                <Icon name="Check" size="sm" className="text-emerald-400" />
+              </span>
+            ) : (
+              <Icon
+                key="copy"
+                name="Copy"
+                size="sm"
+                className={cn(
+                  "absolute inset-0 text-muted-foreground transition-all duration-200",
+                  isHovered
+                    ? "rotate-0 scale-100 opacity-100"
+                    : "rotate-90 scale-0 opacity-0",
+                )}
+              />
+            )}
+          </span>
+        </Button>
+      </InlineStack>
+    </div>
+
+  );
+};

src/styles/global.css

@@ -144,6 +144,21 @@ code {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Custom animations */
+  --animate-revert-copied: revert-copied 0.5s ease-in-out forwards;
+
+  @keyframes revert-copied {
+    0%,
+    80% {
+      opacity: 1;
+      transform: rotate(0deg) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(-90deg) scale(0);
+    }
+  }
 }
 
 @layer base {