Add NIP-05 badges, hashtag pages, keyword muting, suggestion dismissal, notification poller

- Article cover: aspect-video replaces max-h-72 for consistent 16:9 - NIP-05 verification badge on note cards with 1-hour TTL cache - Dedicated hashtag feed pages (clicking #tag opens live feed, not search) - Keyword muting: word-boundary matching, applied across all feed views - Follow suggestion dismissal: persistent "don't suggest again" per person - Background notification poller (60s): mentions, zaps, new followers - All notification types independently toggleable in settings - Centralized notification firing (removed inline store notifications)
2026-05-08 05:09:12 -07:00 · 2026-03-20 12:09:11 +01:00
parent 989ed01dfc
commit 57630227e1
20 changed files with 499 additions and 35 deletions
--- a/src/components/article/ArticleView.tsx
+++ b/src/components/article/ArticleView.tsx
@@ -276,7 +276,7 @@ export function ArticleView() {
                  <img
                    src={image}
                    alt=""
-                    className="w-full max-h-72 object-cover rounded-sm"
+                    className="w-full aspect-video object-cover rounded-sm"
                    onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
                  />
                </div>
--- a/src/components/feed/Feed.tsx
+++ b/src/components/feed/Feed.tsx
@@ -13,7 +13,7 @@ import { NDKEvent } from "@nostr-dev-kit/ndk";
 export function Feed() {
  const { notes, loading, connected, error, connect, loadCachedFeed, loadFeed, trendingNotes, trendingLoading, loadTrendingFeed, focusedNoteIndex } = useFeedStore();
  const { loggedIn, follows } = useUserStore();
-  const { mutedPubkeys } = useMuteStore();
+  const { mutedPubkeys, contentMatchesMutedKeyword } = useMuteStore();
  const { feedTab: tab, setFeedTab: setTab, feedLanguageFilter, setFeedLanguageFilter } = useUIStore();
  const [followNotes, setFollowNotes] = useState<NDKEvent[]>([]);
  const [followLoading, setFollowLoading] = useState(false);
@@ -51,6 +51,7 @@ export function Feed() {

  const filteredNotes = activeNotes.filter((event) => {
    if (mutedPubkeys.includes(event.pubkey)) return false;
+    if (contentMatchesMutedKeyword(event.content)) 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
--- a/src/components/feed/HashtagFeed.tsx
+++ b/src/components/feed/HashtagFeed.tsx
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { useUIStore } from "../../stores/ui";
+import { fetchHashtagFeed } from "../../lib/nostr";
+import { NoteCard } from "./NoteCard";
+
+export function HashtagFeed() {
+  const { pendingHashtag, goBack } = useUIStore();
+  const tag = pendingHashtag ?? "";
+
+  const [notes, setNotes] = useState<NDKEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!tag) return;
+    setLoading(true);
+    setNotes([]);
+    fetchHashtagFeed(tag)
+      .then(setNotes)
+      .finally(() => setLoading(false));
+  }, [tag]);
+
+  return (
+    <div className="h-full flex flex-col">
+      <header className="border-b border-border px-4 py-2.5 flex items-center gap-3 shrink-0">
+        <button onClick={goBack} className="text-text-dim hover:text-text text-[11px] transition-colors">
+          ← back
+        </button>
+        <h2 className="text-text text-[14px] font-medium">#{tag}</h2>
+        {!loading && (
+          <span className="text-text-dim text-[11px]">{notes.length} note{notes.length !== 1 ? "s" : ""}</span>
+        )}
+      </header>
+
+      <div className="flex-1 overflow-y-auto">
+        {loading && (
+          <div className="px-4 py-8 text-text-dim text-[12px] text-center">Loading notes for #{tag}…</div>
+        )}
+
+        {!loading && notes.length === 0 && (
+          <div className="px-4 py-8 text-text-dim text-[12px] text-center">No notes found for #{tag}</div>
+        )}
+
+        {notes.map((event) => (
+          <NoteCard key={event.id} event={event} />
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/components/feed/NoteCard.tsx
+++ b/src/components/feed/NoteCard.tsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { useProfile } from "../../hooks/useProfile";
+import { useNip05Verified } from "../../hooks/useNip05Verified";
 import { useReactionCount } from "../../hooks/useReactionCount";
 import { useReplyCount } from "../../hooks/useReplyCount";
 import { useZapCount } from "../../hooks/useZapCount";
@@ -39,6 +40,7 @@ export function NoteCard({ event, focused }: NoteCardProps) {
  const name = profile?.displayName || profile?.name || shortenPubkey(event.pubkey);
  const avatar = profile?.picture;
  const nip05 = profile?.nip05;
+  const verified = useNip05Verified(event.pubkey, nip05);
  const time = event.created_at ? timeAgo(event.created_at) : "";

  const { loggedIn, pubkey: ownPubkey, follows, follow, unfollow } = useUserStore();
@@ -175,7 +177,9 @@ export function NoteCard({ event, focused }: NoteCardProps) {
              onClick={() => openProfile(event.pubkey)}
            >{name}</span>
            {nip05 && (
-              <span className="text-text-dim text-[10px] truncate max-w-40">{nip05}</span>
+              <span className={`text-[10px] truncate max-w-40 ${verified === "valid" ? "text-success" : "text-text-dim"}`}>
+                {verified === "valid" ? "✓ " : ""}{nip05}
+              </span>
            )}
            <span className="text-text-dim text-[11px] shrink-0">{time}</span>
            {/* Context menu — hidden until card hover, not shown for own notes */}
--- a/src/components/feed/NoteContent.tsx
+++ b/src/components/feed/NoteContent.tsx
@@ -194,7 +194,7 @@ interface NoteContentProps {
 }

 export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
-  const { openSearch } = useUIStore();
+  const { openHashtag } = useUIStore();
  const segments = parseContent(content);
  const images: string[] = segments.filter((s) => s.type === "image").map((s) => s.value);
  const videos: string[] = segments.filter((s) => s.type === "video").map((s) => s.value);
@@ -246,7 +246,7 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
            <span
              key={i}
              className="text-accent/80 cursor-pointer hover:text-accent"
-              onClick={(e) => { e.stopPropagation(); openSearch(`#${seg.value}`); }}
+              onClick={(e) => { e.stopPropagation(); openHashtag(seg.value); }}
            >
              {seg.display}
            </span>
@@ -441,7 +441,7 @@ export function NoteContent({ content, inline, mediaOnly }: NoteContentProps) {
          <span
            key={i}
            className="text-accent/80 cursor-pointer hover:text-accent"
-            onClick={(e) => { e.stopPropagation(); openSearch(`#${seg.value}`); }}
+            onClick={(e) => { e.stopPropagation(); openHashtag(seg.value); }}
          >
            {seg.display}
          </span>
--- a/src/components/notifications/NotificationsView.tsx
+++ b/src/components/notifications/NotificationsView.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useUserStore } from "../../stores/user";
+import { useMuteStore } from "../../stores/mute";
 import { useNotificationsStore } from "../../stores/notifications";
 import { NoteCard } from "../feed/NoteCard";
 import { SkeletonNoteList } from "../shared/Skeleton";
@@ -14,6 +15,10 @@ export function NotificationsView() {
    fetchNotifications,
    markAllRead,
  } = useNotificationsStore();
+  const { mutedPubkeys, contentMatchesMutedKeyword } = useMuteStore();
+  const filteredNotifications = notifications.filter(
+    (e) => !mutedPubkeys.includes(e.pubkey) && !contentMatchesMutedKeyword(e.content)
+  );

  // Capture lastSeenAt at mount time so unread highlights persist during this view session
  const prevLastSeenAtRef = useRef(lastSeenAt);
@@ -52,14 +57,14 @@ export function NotificationsView() {
          <SkeletonNoteList count={4} />
        )}

-        {!loading && notifications.length === 0 && (
+        {!loading && filteredNotifications.length === 0 && (
          <div className="px-4 py-12 text-center space-y-2">
            <p className="text-text-dim text-[13px]">No mentions yet.</p>
            <p className="text-text-dim text-[11px] opacity-60">When someone mentions you, it will appear here.</p>
          </div>
        )}

-        {notifications.map((event) => {
+        {filteredNotifications.map((event) => {
          const isUnread = (event.created_at ?? 0) > prevLastSeenAtRef.current;
          return (
            <div
--- a/src/components/search/SearchView.tsx
+++ b/src/components/search/SearchView.tsx
@@ -4,6 +4,8 @@ import { getStoredRelayUrls, fetchFollowSuggestions, fetchProfile, advancedSearc
 import { parseSearchQuery, describeSearch } from "../../lib/search";
 import { getNip50Relays } from "../../lib/nostr/relayInfo";
 import { useUserStore } from "../../stores/user";
+import { useMuteStore } from "../../stores/mute";
+import { useDismissedSuggestionsStore } from "../../stores/dismissedSuggestions";
 import { useUIStore } from "../../stores/ui";
 import { shortenPubkey } from "../../lib/utils";
 import { NoteCard } from "../feed/NoteCard";
@@ -159,6 +161,12 @@ export function SearchView() {
  }, []);

  const { loggedIn, follows } = useUserStore();
+  const { mutedPubkeys } = useMuteStore();
+  const { dismissedPubkeys, dismiss } = useDismissedSuggestionsStore();
+
+  const visibleSuggestions = suggestions.filter(
+    (s) => !dismissedPubkeys.includes(s.pubkey) && !mutedPubkeys.includes(s.pubkey) && !follows.includes(s.pubkey)
+  );

  // Load follow suggestions on mount (only for logged-in users with follows)
  useEffect(() => {
@@ -384,8 +392,8 @@ export function SearchView() {
            {suggestionsLoading && (
              <div className="px-4 py-6 text-text-dim text-[11px] text-center">Finding suggestions...</div>
            )}
-            {suggestions.map((s) => s.profile && (
-              <div key={s.pubkey} className="flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-bg-hover transition-colors">
+            {visibleSuggestions.map((s) => s.profile && (
+              <div key={s.pubkey} className="flex items-center gap-3 px-4 py-2.5 border-b border-border hover:bg-bg-hover transition-colors group/suggestion">
                <div className="shrink-0 cursor-pointer" onClick={() => useUIStore.getState().openProfile(s.pubkey)}>
                  {s.profile.picture ? (
                    <img src={s.profile.picture} alt="" className="w-9 h-9 rounded-sm object-cover bg-bg-raised"
@@ -409,9 +417,16 @@ export function SearchView() {
                  )}
                </div>
                <SuggestionFollowButton pubkey={s.pubkey} />
+                <button
+                  onClick={() => dismiss(s.pubkey)}
+                  className="text-text-dim hover:text-danger text-[14px] opacity-0 group-hover/suggestion:opacity-100 transition-opacity shrink-0 px-1"
+                  title="Don't suggest again"
+                >
+                  ×
+                </button>
              </div>
            ))}
-            {suggestionsLoaded && suggestions.length === 0 && (
+            {suggestionsLoaded && visibleSuggestions.length === 0 && (
              <div className="px-4 py-6 text-text-dim text-[11px] text-center">
                Follow more people to see suggestions here.
              </div>
--- a/src/components/shared/SettingsView.tsx
+++ b/src/components/shared/SettingsView.tsx
@@ -45,6 +45,74 @@ function MuteSection() {
  );
 }

+function MutedKeywordsSection() {
+  const { mutedKeywords, addKeyword, removeKeyword } = useMuteStore();
+  const [input, setInput] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const handleAdd = () => {
+    const trimmed = input.trim().toLowerCase();
+    if (trimmed.length < 2) {
+      setError("Minimum 2 characters");
+      return;
+    }
+    if (mutedKeywords.includes(trimmed)) {
+      setError("Already muted");
+      return;
+    }
+    addKeyword(trimmed);
+    setInput("");
+    setError(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") handleAdd();
+    if (e.key === "Escape") setInput("");
+  };
+
+  return (
+    <section>
+      <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">
+        Muted keywords {mutedKeywords.length > 0 && `(${mutedKeywords.length})`}
+      </h2>
+      <p className="text-text-dim text-[11px] mb-3">
+        Notes containing these words or phrases will be hidden from your feeds.
+      </p>
+      {mutedKeywords.length > 0 && (
+        <div className="space-y-1 mb-3">
+          {mutedKeywords.map((kw) => (
+            <div key={kw} className="flex items-center gap-3 px-3 py-2 border border-border text-[12px] group">
+              <span className="text-text truncate flex-1">{kw}</span>
+              <button
+                onClick={() => removeKeyword(kw)}
+                className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+              >
+                remove
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className="flex gap-2">
+        <input
+          value={input}
+          onChange={(e) => { setInput(e.target.value); setError(null); }}
+          onKeyDown={handleKeyDown}
+          placeholder="word or phrase to mute"
+          className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent/50 placeholder:text-text-dim"
+        />
+        <button
+          onClick={handleAdd}
+          className="px-3 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors shrink-0"
+        >
+          add
+        </button>
+      </div>
+      {error && <p className="text-danger text-[11px] mt-1">{error}</p>}
+    </section>
+  );
+}
+
 function RelayRow({ url, onRemove }: { url: string; onRemove: () => void }) {
  const ndk = getNDK();
  const relay = ndk.pool?.relays.get(url);
@@ -267,7 +335,7 @@ function ExportSection() {
 function NotificationSection() {
  const [settings, setSettings] = useState(getNotificationSettings);

-  const toggle = (key: "mentions" | "dms" | "zaps") => {
+  const toggle = (key: "mentions" | "dms" | "zaps" | "followers") => {
    const next = { ...settings, [key]: !settings[key] };
    setSettings(next);
    saveNotificationSettings(next);
@@ -275,10 +343,11 @@ function NotificationSection() {
    if (next[key]) ensurePermission().catch(() => {});
  };

-  const items: Array<{ key: "mentions" | "dms" | "zaps"; label: string }> = [
+  const items: Array<{ key: "mentions" | "dms" | "zaps" | "followers"; label: string }> = [
    { key: "mentions", label: "Mentions" },
    { key: "dms", label: "Direct messages" },
    { key: "zaps", label: "Zaps received" },
+    { key: "followers", label: "New followers" },
  ];

  return (
@@ -326,6 +395,7 @@ export function SettingsView() {
        <ExportSection />
        <IdentitySection />
        <MuteSection />
+        <MutedKeywordsSection />
      </div>
    </div>
  );
--- a/src/components/thread/ThreadView.tsx
+++ b/src/components/thread/ThreadView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { useUIStore } from "../../stores/ui";
 import { useUserStore } from "../../stores/user";
+import { useMuteStore } from "../../stores/mute";
 import { useProfile } from "../../hooks/useProfile";
 import { useReactionCount } from "../../hooks/useReactionCount";
 import { useZapCount } from "../../hooks/useZapCount";
@@ -145,6 +146,7 @@ function RootNote({ event }: { event: NDKEvent }) {
 export function ThreadView() {
  const { selectedNote, goBack } = useUIStore();
  const { loggedIn } = useUserStore();
+  const { mutedPubkeys, contentMatchesMutedKeyword } = useMuteStore();
  if (!selectedNote) { goBack(); return null; }
  const event = selectedNote;

@@ -239,7 +241,9 @@ export function ThreadView() {
          </div>
        )}

-        {replies.map((reply) => (
+        {replies
+          .filter((r) => !mutedPubkeys.includes(r.pubkey) && !contentMatchesMutedKeyword(r.content))
+          .map((reply) => (
          <NoteCard key={reply.id} event={reply} />
        ))}
      </div>