[Glitch] Add prominent share/copy button on profiles in web UI

Port 87696ea26e to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/copy_icon_button.jsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { useState, useCallback } from 'react';
+
+import { defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { useDispatch } from 'react-redux';
+
+import ContentCopyIcon from '@/material-icons/400-24px/content_copy.svg?react';
+import { showAlert } from 'flavours/glitch/actions/alerts';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+
+const messages = defineMessages({
+  copied: { id: 'copy_icon_button.copied', defaultMessage: 'Copied to clipboard' },
+});
+
+export const CopyIconButton = ({ title, value, className }) => {
+  const [copied, setCopied] = useState(false);
+  const dispatch = useDispatch();
+
+  const handleClick = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    dispatch(showAlert({ message: messages.copied }));
+    setTimeout(() => setCopied(false), 700);
+  }, [setCopied, value, dispatch]);
+
+  return (
+    <IconButton
+      className={classNames(className, copied ? 'copied' : 'copyable')}
+      title={title}
+      onClick={handleClick}
+      iconComponent={ContentCopyIcon}
+    />
+  );
+};
+
+CopyIconButton.propTypes = {
+  title: PropTypes.string,
+  value: PropTypes.string,
+  className: PropTypes.string,
+};