feat: enhance FollowButton

src/components/FollowButton/index.tsx

@@ -1,3 +1,14 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { useToast } from '@/hooks'
 import { useFollowList } from '@/providers/FollowListProvider'
@@ -12,6 +23,7 @@ export default function FollowButton({ pubkey }: { pubkey: string }) {
   const { pubkey: accountPubkey, checkLogin } = useNostr()
   const { followings, follow, unfollow } = useFollowList()
   const [updating, setUpdating] = useState(false)
+  const [hover, setHover] = useState(false)
   const isFollowing = useMemo(() => followings.includes(pubkey), [followings, pubkey])
 
   if (!accountPubkey || (pubkey && pubkey === accountPubkey)) return null
@@ -57,16 +69,41 @@ export default function FollowButton({ pubkey }: { pubkey: string }) {
   }
 
   return isFollowing ? (
-    <Button
-      className="w-20 min-w-20 rounded-full"
-      variant="secondary"
-      onClick={handleUnfollow}
-      disabled={updating}
-    >
-      {updating ? <Loader className="animate-spin" /> : t('Unfollow')}
-    </Button>
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          className="rounded-full min-w-28"
+          variant={hover ? 'destructive' : 'secondary'}
+          disabled={updating}
+          onMouseEnter={() => setHover(true)}
+          onMouseLeave={() => setHover(false)}
+        >
+          {updating ? (
+            <Loader className="animate-spin" />
+          ) : hover ? (
+            t('Unfollow')
+          ) : (
+            t('buttonFollowing')
+          )}
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{t('Unfollow')}?</AlertDialogTitle>
+          <AlertDialogDescription>
+            {t('Are you sure you want to unfollow this user?')}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
+          <AlertDialogAction onClick={handleUnfollow} variant="destructive">
+            {t('Unfollow')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   ) : (
-    <Button className="w-20 min-w-20 rounded-full" onClick={handleFollow} disabled={updating}>
+    <Button className="rounded-full min-w-28" onClick={handleFollow} disabled={updating}>
       {updating ? <Loader className="animate-spin" /> : t('Follow')}
     </Button>
   )