feat: support choosing between public and private mute

src/components/MuteButton/index.tsx

@@ -1,29 +1,43 @@
 import { Button } from '@/components/ui/button'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
 import { useToast } from '@/hooks'
 import { useMuteList } from '@/providers/MuteListProvider'
 import { useNostr } from '@/providers/NostrProvider'
-import { Loader } from 'lucide-react'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { BellOff, Loader } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 export default function MuteButton({ pubkey }: { pubkey: string }) {
   const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
   const { toast } = useToast()
   const { pubkey: accountPubkey, checkLogin } = useNostr()
-  const { mutePubkeys, mutePubkey, unmutePubkey } = useMuteList()
+  const { mutePubkeys, changing, mutePubkeyPrivately, mutePubkeyPublicly, unmutePubkey } =
+    useMuteList()
   const [updating, setUpdating] = useState(false)
   const isMuted = useMemo(() => mutePubkeys.includes(pubkey), [mutePubkeys, pubkey])
 
   if (!accountPubkey || (pubkey && pubkey === accountPubkey)) return null
 
-  const handleMute = async (e: React.MouseEvent) => {
+  const handleMute = async (e: React.MouseEvent, isPrivate = true) => {
     e.stopPropagation()
     checkLogin(async () => {
       if (isMuted) return
 
       setUpdating(true)
       try {
-        await mutePubkey(pubkey)
+        if (isPrivate) {
+          await mutePubkeyPrivately(pubkey)
+        } else {
+          await mutePubkeyPublicly(pubkey)
+        }
       } catch (error) {
         toast({
           title: t('Mute failed'),
@@ -56,23 +70,76 @@ export default function MuteButton({ pubkey }: { pubkey: string }) {
     })
   }
 
-  return isMuted ? (
-    <Button
-      className="w-20 min-w-20 rounded-full"
-      variant="secondary"
-      onClick={handleUnmute}
-      disabled={updating}
-    >
-      {updating ? <Loader className="animate-spin" /> : t('Unmute')}
-    </Button>
-  ) : (
+  if (isMuted) {
+    return (
+      <Button
+        className="w-20 min-w-20 rounded-full"
+        variant="secondary"
+        onClick={handleUnmute}
+        disabled={updating || changing}
+      >
+        {updating ? <Loader className="animate-spin" /> : t('Unmute')}
+      </Button>
+    )
+  }
+
+  const trigger = (
     <Button
       variant="destructive"
       className="w-20 min-w-20 rounded-full"
-      onClick={handleMute}
-      disabled={updating}
+      disabled={updating || changing}
     >
       {updating ? <Loader className="animate-spin" /> : t('Mute')}
     </Button>
   )
+
+  if (isSmallScreen) {
+    return (
+      <Drawer>
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent>
+          <div className="py-2">
+            <Button
+              className="w-full p-6 justify-start text-destructive text-lg gap-4 [&_svg]:size-5 focus:text-destructive"
+              variant="ghost"
+              onClick={(e) => handleMute(e, true)}
+              disabled={updating || changing}
+            >
+              {updating ? <Loader className="animate-spin" /> : t('Mute user privately')}
+            </Button>
+            <Button
+              className="w-full p-6 justify-start text-destructive text-lg gap-4 [&_svg]:size-5 focus:text-destructive"
+              variant="ghost"
+              onClick={(e) => handleMute(e, false)}
+              disabled={updating || changing}
+            >
+              {updating ? <Loader className="animate-spin" /> : t('Mute user publicly')}
+            </Button>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem
+          onClick={(e) => handleMute(e, true)}
+          className="text-destructive focus:text-destructive"
+        >
+          <BellOff />
+          {t('Mute user privately')}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={(e) => handleMute(e, false)}
+          className="text-destructive focus:text-destructive"
+        >
+          <BellOff />
+          {t('Mute user publicly')}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
 }