diff --git a/app/javascript/mastodon/features/account_timeline/components/account_name.tsx b/app/javascript/mastodon/features/account_timeline/components/account_name.tsx
index c90f5012de..a0296b5ed9 100644
--- a/app/javascript/mastodon/features/account_timeline/components/account_name.tsx
+++ b/app/javascript/mastodon/features/account_timeline/components/account_name.tsx
@@ -8,13 +8,16 @@ import classNames from 'classnames';
import Overlay from 'react-overlays/esm/Overlay';
import FollowerIcon from '@/images/icons/icon_follower.svg?react';
+import { showAlert } from '@/mastodon/actions/alerts';
import { Badge } from '@/mastodon/components/badge';
+import { Button } from '@/mastodon/components/button';
import { DisplayName } from '@/mastodon/components/display_name';
import { Icon } from '@/mastodon/components/icon';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { useRelationship } from '@/mastodon/hooks/useRelationship';
-import { useAppSelector } from '@/mastodon/store';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
import AtIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
import HelpIcon from '@/material-icons/400-24px/help.svg?react';
import DomainIcon from '@/material-icons/400-24px/language.svg?react';
@@ -30,6 +33,10 @@ const messages = defineMessages({
id: 'account.name_info',
defaultMessage: 'What does this mean?',
},
+ copied: {
+ id: 'copy_icon_button.copied',
+ defaultMessage: 'Copied to clipboard',
+ },
});
export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
@@ -64,14 +71,12 @@ export const AccountName: FC<{ accountId: string }> = ({ accountId }) => {
/>
)}
-
- @{username}@{domain}
-
-
+
+
);
};
@@ -90,6 +95,19 @@ const AccountNameHelp: FC<{
setOpen((prev) => !prev);
}, []);
+ const handle = `@${username}@${domain}`;
+
+ const dispatch = useAppDispatch();
+ const [copied, setCopied] = useState(false);
+ const handleCopy = useCallback(() => {
+ void navigator.clipboard.writeText(handle);
+ setCopied(true);
+ dispatch(showAlert({ message: messages.copied }));
+ setTimeout(() => {
+ setCopied(false);
+ }, 700);
+ }, [handle, dispatch]);
+
return (
<>