Skip to content

Adds a copy button and truncation to title #1476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mbeaulne merged 1 commit into from
Dec 5, 2025
Merged

Adds a copy button and truncation to title #1476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion src/components/layout/AppMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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">
Expand Down
93 changes: 93 additions & 0 deletions src/components/shared/CopyText/CopyText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link
Collaborator

@camielvs camielvs Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

obviously we only want to copy strings and not jsx elements, but something about children: string instead of children: ReactNode feels weird to me. I won't block on this, but I did want to flag it because it seems somewhat like an antipattern

Copy link
Collaborator Author

@Mbeaulne Mbeaulne Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-12-05 at 4.29.37 PM.png

I think its fine because the result of anything but a string will throw a type error

Copy link
Collaborator

@camielvs camielvs Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did see this also, which is why I'm not blocking. That doesn't make it feel any less weird though 😅

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}
Copy link
Collaborator

@camielvs camielvs Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a red flag to me. A null variant button? Hmmmm. That suggests to me there's a major gap in our coverage of button styles. I think I'd rather see a new variant added than a custom button made in-place via 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>

);
};
15 changes: 15 additions & 0 deletions src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down