Add mute/ignore user + anti-spam (roadmap #5, NIP-51)

- fetchMuteList / publishMuteList in nostr client (kind 10000)
- mute store: mutedPubkeys persisted to localStorage + synced to relay;
  mute/unmute publish kind 10000 best-effort; fetchMuteList merges relay
  list with local mutes on login
- fetchMuteList called after every login (nsec + pubkey)
- Feed: muted pubkeys filtered from both Global and Following tabs
- NoteCard: ⋯ context menu (appears on hover, hidden for own notes)
  with mute / unmute action; backdrop click closes menu
- ProfileView: mute / unmute button in the action row (next to follow)
- SettingsView: MuteSection lists muted accounts with name + avatar;
  hover to reveal unmute button; hidden when mute list is empty

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jure
2026-03-10 18:23:30 +01:00
parent 926a7cbdae
commit 42fe32f584
8 changed files with 168 additions and 4 deletions

View File

@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { useFeedStore } from "../../stores/feed";
import { useUserStore } from "../../stores/user";
import { useMuteStore } from "../../stores/mute";
import { fetchFollowFeed, getNDK } from "../../lib/nostr";
import { NoteCard } from "./NoteCard";
import { ComposeBox } from "./ComposeBox";
@@ -11,6 +12,7 @@ type FeedTab = "global" | "following";
export function Feed() {
const { notes, loading, connected, error, connect, loadCachedFeed, loadFeed } = useFeedStore();
const { loggedIn, follows } = useUserStore();
const { mutedPubkeys } = useMuteStore();
const [tab, setTab] = useState<FeedTab>("global");
const [followNotes, setFollowNotes] = useState<NDKEvent[]>([]);
@@ -43,6 +45,7 @@ export function Feed() {
const isLoading = isFollowing ? followLoading : loading;
const filteredNotes = activeNotes.filter((event) => {
if (mutedPubkeys.includes(event.pubkey)) return false;
const c = event.content.trim();
if (!c || c.startsWith("{") || c.startsWith("[")) return false;
// Filter out notes that look like base64 blobs or relay protocol messages

View File

@@ -3,6 +3,7 @@ import { NDKEvent } from "@nostr-dev-kit/ndk";
import { useProfile } from "../../hooks/useProfile";
import { useReactionCount } from "../../hooks/useReactionCount";
import { useUserStore } from "../../stores/user";
import { useMuteStore } from "../../stores/mute";
import { useUIStore } from "../../stores/ui";
import { timeAgo, shortenPubkey } from "../../lib/utils";
import { publishReaction, publishReply, getNDK } from "../../lib/nostr";
@@ -20,7 +21,9 @@ export function NoteCard({ event }: NoteCardProps) {
const nip05 = profile?.nip05;
const time = event.created_at ? timeAgo(event.created_at) : "";
const { loggedIn } = useUserStore();
const { loggedIn, pubkey: ownPubkey } = useUserStore();
const { mutedPubkeys, mute, unmute } = useMuteStore();
const isMuted = mutedPubkeys.includes(event.pubkey);
const { openProfile, openThread, currentView } = useUIStore();
const likedKey = "wrystr_liked";
const getLiked = () => {
@@ -37,6 +40,7 @@ export function NoteCard({ event }: NoteCardProps) {
const [replySent, setReplySent] = useState(false);
const replyRef = useRef<HTMLTextAreaElement>(null);
const [showZap, setShowZap] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const handleLike = async () => {
if (!loggedIn || liked || liking) return;
@@ -80,7 +84,7 @@ export function NoteCard({ event }: NoteCardProps) {
};
return (
<article className="border-b border-border px-4 py-3 hover:bg-bg-hover transition-colors duration-100">
<article className="border-b border-border px-4 py-3 hover:bg-bg-hover transition-colors duration-100 group/card">
<div className="flex gap-3">
{/* Avatar */}
<div className="shrink-0 cursor-pointer" onClick={() => openProfile(event.pubkey)}>
@@ -112,6 +116,30 @@ export function NoteCard({ event }: NoteCardProps) {
<span className="text-text-dim text-[10px] truncate max-w-40">{nip05}</span>
)}
<span className="text-text-dim text-[11px] shrink-0">{time}</span>
{/* Context menu — hidden until card hover, not shown for own notes */}
{loggedIn && event.pubkey !== ownPubkey && (
<div className="relative ml-auto">
<button
onClick={() => setMenuOpen((v) => !v)}
className="text-text-dim hover:text-text text-[14px] px-1 leading-none opacity-0 group-hover/card:opacity-100 transition-opacity"
>
</button>
{menuOpen && (
<>
<div className="fixed inset-0 z-[9]" onClick={() => setMenuOpen(false)} />
<div className="absolute right-0 top-5 bg-bg-raised border border-border shadow-lg z-10 w-32">
<button
onClick={() => { setMenuOpen(false); isMuted ? unmute(event.pubkey) : mute(event.pubkey); }}
className="w-full text-left px-3 py-2 text-[11px] text-text-muted hover:text-danger hover:bg-bg-hover transition-colors"
>
{isMuted ? `unmute` : `mute`}
</button>
</div>
</>
)}
</div>
)}
</div>
<div