feat(copy-button): add toast notifications for copy success and error handling

Author: x0sina

dashboard/src/components/common/copy-button.tsx

@@ -2,8 +2,9 @@ import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { useClipboard } from '@/hooks/use-clipboard'
 import { Check, Copy, Link } from 'lucide-react'
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
 
 interface CopyButtonProps {
   value: string
@@ -12,22 +13,40 @@ interface CopyButtonProps {
   defaultMessage?: string
   icon?: 'copy' | 'link'
   onClick?: (e: React.MouseEvent) => void
+  showToast?: boolean
+  toastSuccessMessage?: string
+  toastErrorMessage?: string
 }
 
-export function CopyButton({ value, className, copiedMessage = 'Copied!', defaultMessage = 'Click to copy', icon = 'copy', onClick }: CopyButtonProps) {
+export function CopyButton({ value, className, copiedMessage = 'Copied!', defaultMessage = 'Click to copy', icon = 'copy', onClick, showToast = false, toastSuccessMessage, toastErrorMessage }: CopyButtonProps) {
   const { t } = useTranslation()
 
-  const { copy, copied } = useClipboard({ timeout: 1500 })
+  const { copy, copied, error } = useClipboard({ timeout: 1500 })
+  const shouldShowToast = useRef(false)
+
   const handleCopy = useCallback(
     async (e: React.MouseEvent) => {
       e.preventDefault()
       e.stopPropagation()
+      shouldShowToast.current = showToast
       await copy(value)
       onClick?.(e)
     },
-    [copy, value, onClick],
+    [copy, value, onClick, showToast],
   )
 
+  useEffect(() => {
+    if (!shouldShowToast.current) return
+
+    if (copied) {
+      toast.success(toastSuccessMessage ? t(toastSuccessMessage) : t(copiedMessage))
+      shouldShowToast.current = false
+    } else if (error) {
+      toast.error(toastErrorMessage ? t(toastErrorMessage) : t('copyFailed', { defaultValue: 'Failed to copy' }))
+      shouldShowToast.current = false
+    }
+  }, [copied, error, toastSuccessMessage, toastErrorMessage, copiedMessage, t])
+
   return (
     <Tooltip open={copied ? true : undefined}>
       <TooltipTrigger asChild>

dashboard/src/components/users/action-buttons.tsx

@@ -374,6 +374,9 @@ const ActionButtons: FC<ActionButtonsProps> = ({ user }) => {
             copiedMessage="usersTable.copied"
             defaultMessage="usersTable.copyLink"
             icon="link"
+            showToast={true}
+            toastSuccessMessage="usersTable.copied"
+            toastErrorMessage="copyFailed"
           />
           <Tooltip open={copied ? true : undefined}>
             <DropdownMenu>