40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { Volume2, VolumeX } from 'lucide-react';
|
|
import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { useMuteList } from '@/hooks/useMuteList';
|
|
import { useMuteUser } from '@/hooks/useMuteUser';
|
|
import { useUnmuteUser } from '@/hooks/useUnmuteUser';
|
|
import { useTranslation } from '@/contexts/language';
|
|
|
|
/** Inline mute action for content cards. Renders nothing when logged out. */
|
|
export function MuteMenuItem({
|
|
pubkey,
|
|
className,
|
|
}: {
|
|
pubkey: string;
|
|
className?: string;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { user } = useCurrentUser();
|
|
const { data: muted } = useMuteList();
|
|
const mute = useMuteUser();
|
|
const unmute = useUnmuteUser();
|
|
if (!user || user.pubkey === pubkey) return null;
|
|
|
|
const isMuted = !!muted?.has(pubkey);
|
|
return (
|
|
<DropdownMenuItem
|
|
disabled={mute.isPending || unmute.isPending}
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (isMuted) unmute.mutate(pubkey);
|
|
else mute.mutate(pubkey);
|
|
}}
|
|
className={className}
|
|
>
|
|
{isMuted ? <Volume2 className="mr-2 h-4 w-4" /> : <VolumeX className="mr-2 h-4 w-4" />}
|
|
{isMuted ? t('walletUi.trust.unmute') : t('walletUi.trust.mute')}
|
|
</DropdownMenuItem>
|
|
);
|
|
}
|