Add relay status badge, toast notifications, per-tab feed timestamps, relay UX improvements

- Relay status badge in feed header: shows connected/total relay count with
  color coding (green >75%, yellow 25-75%, red <25%), hover tooltip with
  per-relay status
- Toast notification system: transient messages for connection lost,
  reconnecting, relay reset, and back-online events
- Per-tab "last updated" relative timestamp in feed header (global,
  following, trending tracked independently)
- Consolidated all relay management into RelaysView (removed duplicate
  relay section from Settings); per-relay remove button on health cards
- Show all supported NIP badges on relay cards (was filtering to 11 notable)
- Tooltips on relay status dots explaining green/yellow/red/gray meaning
- Fix relay removal with trailing-slash URL normalization
- Fix stale health results lingering after relay removal
- Add acknowledgements section to README

src/components/feed/Feed.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { useFeedStore } from "../../stores/feed";
 import { useUserStore } from "../../stores/user";
 import { useMuteStore } from "../../stores/mute";
@@ -10,15 +10,33 @@ import { NoteCard } from "./NoteCard";
 import { ArticleCard } from "../article/ArticleCard";
 import { ComposeBox } from "./ComposeBox";
 import { SkeletonNoteList } from "../shared/Skeleton";
+import { RelayStatusBadge } from "./RelayStatusBadge";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 
+function timeAgo(ts: number): string {
+  const sec = Math.floor((Date.now() - ts) / 1000);
+  if (sec < 5) return "just now";
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  return `${hr}h ago`;
+}
+
 export function Feed() {
-  const { notes, loading, connected, error, connect, loadCachedFeed, loadFeed, trendingNotes, trendingLoading, loadTrendingFeed, focusedNoteIndex } = useFeedStore();
+  const { notes, loading, error, connect, loadCachedFeed, loadFeed, trendingNotes, trendingLoading, loadTrendingFeed, focusedNoteIndex, lastUpdated } = useFeedStore();
   const { loggedIn, follows } = useUserStore();
   const { mutedPubkeys, contentMatchesMutedKeyword } = useMuteStore();
   const { feedTab: tab, setFeedTab: setTab, feedLanguageFilter, setFeedLanguageFilter } = useUIStore();
   const [followNotes, setFollowNotes] = useState<NDKEvent[]>([]);
   const [followLoading, setFollowLoading] = useState(false);
+  const [, setTick] = useState(0);
+
+  // Tick every 10s to keep "last updated" relative time fresh
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 10000);
+    return () => clearInterval(id);
+  }, []);
 
   useEffect(() => {
     // Show cached notes immediately, then fetch fresh ones once connected
@@ -36,16 +54,18 @@ export function Feed() {
     }
   }, [tab, follows]);
 
-  const loadFollowFeed = async () => {
+  const loadFollowFeed = useCallback(async () => {
     setFollowLoading(true);
     try {
       await ensureConnected();
       const events = await diagWrapFetch("follow_fetch", () => fetchFollowFeed(follows));
       setFollowNotes(events);
+      const prev = useFeedStore.getState().lastUpdated;
+      useFeedStore.setState({ lastUpdated: { ...prev, following: Date.now() } });
     } finally {
       setFollowLoading(false);
     }
-  };
+  }, [follows]);
 
   const isFollowing = tab === "following";
   const isTrending = tab === "trending";
@@ -135,11 +155,9 @@ export function Feed() {
               <option key={s} value={s}>{s.toLowerCase()}</option>
             ))}
           </select>
-          {connected && (
-            <span className="text-success text-[11px] flex items-center gap-1">
-              <span className="w-1.5 h-1.5 rounded-full bg-success inline-block" />
-              connected
-            </span>
+          <RelayStatusBadge />
+          {lastUpdated[tab] && (
+            <span className="text-text-dim text-[10px]">{timeAgo(lastUpdated[tab])}</span>
           )}
           <button
             onClick={() => {

src/components/feed/RelayStatusBadge.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { useRelayStatus } from "../../hooks/useRelayStatus";
+
+function shortenUrl(url: string): string {
+  return url.replace(/^wss?:\/\//, "").replace(/\/$/, "");
+}
+
+export function RelayStatusBadge() {
+  const { connectedCount, totalCount, relays } = useRelayStatus();
+  const [hovered, setHovered] = useState(false);
+
+  const ratio = totalCount > 0 ? connectedCount / totalCount : 0;
+  const colorClass =
+    ratio > 0.75
+      ? "text-success"
+      : ratio > 0.25
+        ? "text-warning"
+        : "text-danger";
+  const dotClass =
+    ratio > 0.75
+      ? "bg-success"
+      : ratio > 0.25
+        ? "bg-warning"
+        : "bg-danger";
+
+  if (totalCount === 0) return null;
+
+  return (
+    <span
+      className={`relative ${colorClass} text-[11px] flex items-center gap-1 cursor-default`}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <span className={`w-1.5 h-1.5 rounded-full ${dotClass} inline-block`} />
+      {connectedCount}/{totalCount} relays
+
+      {hovered && (
+        <div className="absolute right-0 top-full mt-1 bg-bg-raised border border-border p-2 z-50 min-w-[200px] shadow-lg">
+          {relays
+            .sort((a, b) => (a.connected === b.connected ? 0 : a.connected ? -1 : 1))
+            .map((r) => (
+              <div key={r.url} className="flex items-center gap-2 py-0.5">
+                <span
+                  className={`w-1.5 h-1.5 rounded-full shrink-0 ${
+                    r.connected ? "bg-success" : "bg-danger"
+                  }`}
+                />
+                <span className="text-[11px] text-text-dim truncate">
+                  {shortenUrl(r.url)}
+                </span>
+              </div>
+            ))}
+        </div>
+      )}
+    </span>
+  );
+}

src/components/shared/RelaysView.tsx

@@ -27,12 +27,11 @@ function formatLatency(ms: number | null): string {
 }
 
 function NipBadges({ nips }: { nips: number[] }) {
-  const notable = [1, 4, 11, 17, 23, 25, 50, 57, 65, 96, 98];
-  const supported = notable.filter((n) => nips.includes(n));
-  if (supported.length === 0) return null;
+  if (nips.length === 0) return null;
+  const sorted = [...nips].sort((a, b) => a - b);
   return (
     <div className="flex flex-wrap gap-1 mt-1">
-      {supported.map((n) => (
+      {sorted.map((n) => (
         <span key={n} className="px-1 py-0 text-[9px] border border-border text-text-dim rounded-sm">
           NIP-{String(n).padStart(2, "0")}
         </span>
@@ -41,17 +40,20 @@ function NipBadges({ nips }: { nips: number[] }) {
   );
 }
 
-function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult; poolConnected: boolean }) {
+function RelayHealthCard({ result, poolConnected, onRemove }: { result: RelayHealthResult; poolConnected: boolean; onRemove: () => void }) {
   const [expanded, setExpanded] = useState(false);
   const nip11 = result.nip11;
 
   return (
-    <div className="border border-border">
+    <div className="border border-border group/card">
       <div
         className="flex items-center gap-3 px-3 py-2 text-[12px] cursor-pointer hover:bg-bg-hover transition-colors"
         onClick={() => setExpanded((v) => !v)}
       >
-        <span className={`w-2 h-2 rounded-full shrink-0 ${statusColor(result.status)}`} />
+        <span
+          className={`w-2 h-2 rounded-full shrink-0 ${statusColor(result.status)}`}
+          title={result.status === "online" ? "Online" : result.status === "slow" ? `Slow (${formatLatency(result.latencyMs)})` : "Offline — connection failed"}
+        />
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
             <span className="text-text truncate font-mono">{result.url}</span>
@@ -72,6 +74,12 @@ function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult;
           {poolConnected && (
             <span className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" title="NDK connected" />
           )}
+          <button
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover/card:opacity-100 transition-opacity"
+          >
+            remove
+          </button>
           <span className="text-text-dim text-[10px]">{expanded ? "▾" : "▸"}</span>
         </div>
       </div>
@@ -105,9 +113,6 @@ function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult;
               </div>
               {nip11.supported_nips && nip11.supported_nips.length > 0 && (
                 <div>
-                  <span className="text-text-dim text-[10px]">
-                    {nip11.supported_nips.length} NIPs supported
-                  </span>
                   <NipBadges nips={nip11.supported_nips} />
                 </div>
               )}
@@ -125,12 +130,21 @@ function RelayHealthCard({ result, poolConnected }: { result: RelayHealthResult;
 }
 
 /** Fallback row for relays not yet health-checked */
-function RelayPoolRow({ url, connected }: { url: string; connected: boolean }) {
+function RelayPoolRow({ url, connected, onRemove }: { url: string; connected: boolean; onRemove: () => void }) {
   return (
-    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px]">
-      <span className={`w-2 h-2 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`} />
+    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px] group">
+      <span
+        className={`w-2 h-2 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`}
+        title={connected ? "Connected" : "Not connected — awaiting health check"}
+      />
       <span className="text-text truncate flex-1 font-mono">{url}</span>
       <span className="text-text-dim text-[10px]">{connected ? "connected" : "—"}</span>
+      <button
+        onClick={onRemove}
+        className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+      >
+        remove
+      </button>
     </div>
   );
 }
@@ -142,6 +156,11 @@ export function RelaysView() {
   const poolRelays = Array.from(ndk.pool?.relays?.values() ?? []);
   const poolConnectedUrls = new Set(poolRelays.filter((r) => r.connected).map((r) => r.url));
 
+  const [input, setInput] = useState("");
+  const [addError, setAddError] = useState<string | null>(null);
+  const [removing, setRemoving] = useState(false);
+  const [republishing, setRepublishing] = useState(false);
+
   // Auto-check on first mount if no results yet
   useEffect(() => {
     if (results.length === 0 && !checking) {
@@ -154,15 +173,33 @@ export function RelaysView() {
   const offlineCount = results.filter((r) => r.status === "offline").length;
   const deadRelays = results.filter((r) => r.status === "offline");
 
-  const [removing, setRemoving] = useState(false);
-  const [republishing, setRepublishing] = useState(false);
+  const handleAddRelay = () => {
+    const url = input.trim();
+    if (!url) return;
+    if (!url.startsWith("ws://") && !url.startsWith("wss://")) {
+      setAddError("URL must start with ws:// or wss://");
+      return;
+    }
+    if (getStoredRelayUrls().includes(url)) {
+      setAddError("Already in list");
+      return;
+    }
+    addRelay(url);
+    setInput("");
+    setAddError(null);
+    checkAll();
+  };
+
+  const handleRemoveRelay = (url: string) => {
+    removeRelay(url);
+    checkAll();
+  };
 
   const handleRemoveDead = async () => {
     setRemoving(true);
     for (const r of deadRelays) {
       removeRelay(r.url);
     }
-    // Re-check remaining
     await checkAll();
     setRemoving(false);
   };
@@ -175,6 +212,11 @@ export function RelaysView() {
     setRepublishing(false);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") handleAddRelay();
+    if (e.key === "Escape") setInput("");
+  };
+
   // Merge: show health results first, then any pool relays not yet checked
   const checkedUrls = new Set(results.map((r) => r.url));
   const uncheckedPoolRelays = poolRelays.filter((r) => !checkedUrls.has(r.url));
@@ -221,30 +263,48 @@ export function RelaysView() {
         </div>
       </header>
 
+      {/* Add relay input */}
+      <div className="border-b border-border px-4 py-2 shrink-0">
+        <div className="flex gap-2">
+          <input
+            value={input}
+            onChange={(e) => { setInput(e.target.value); setAddError(null); }}
+            onKeyDown={handleKeyDown}
+            placeholder="wss://relay.example.com"
+            className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] font-mono focus:outline-none focus:border-accent/50 placeholder:text-text-dim"
+          />
+          <button
+            onClick={handleAddRelay}
+            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>
+          {loggedIn && !!getNDK().signer && (
+            <button
+              onClick={handleRepublish}
+              disabled={republishing}
+              className="px-3 py-1.5 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40 shrink-0"
+            >
+              {republishing ? "publishing…" : "publish list"}
+            </button>
+          )}
+        </div>
+        {addError && <p className="text-danger text-[11px] mt-1">{addError}</p>}
+      </div>
+
       {/* Actions bar — show when there are dead relays */}
       {deadRelays.length > 0 && (
         <div className="border-b border-border px-4 py-2 bg-danger/5 flex items-center justify-between shrink-0">
           <span className="text-danger text-[11px]">
             {deadRelays.length} relay{deadRelays.length > 1 ? "s" : ""} offline
           </span>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={handleRemoveDead}
-              disabled={removing}
-              className="px-3 py-1 text-[11px] border border-danger/30 text-danger hover:bg-danger/10 transition-colors disabled:opacity-40"
-            >
-              {removing ? "removing…" : "remove dead"}
-            </button>
-            {loggedIn && !!getNDK().signer && (
-              <button
-                onClick={handleRepublish}
-                disabled={republishing}
-                className="px-3 py-1 text-[11px] border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40"
-              >
-                {republishing ? "publishing…" : "republish list"}
-              </button>
-            )}
-          </div>
+          <button
+            onClick={handleRemoveDead}
+            disabled={removing}
+            className="px-3 py-1 text-[11px] border border-danger/30 text-danger hover:bg-danger/10 transition-colors disabled:opacity-40"
+          >
+            {removing ? "removing…" : "remove dead"}
+          </button>
         </div>
       )}
 
@@ -259,11 +319,17 @@ export function RelaysView() {
               key={result.url}
               result={result}
               poolConnected={poolConnectedUrls.has(result.url)}
+              onRemove={() => handleRemoveRelay(result.url)}
             />
           ))}
 
           {uncheckedPoolRelays.map((relay) => (
-            <RelayPoolRow key={relay.url} url={relay.url} connected={relay.connected} />
+            <RelayPoolRow
+              key={relay.url}
+              url={relay.url}
+              connected={relay.connected}
+              onRemove={() => handleRemoveRelay(relay.url)}
+            />
           ))}
         </div>
 

src/components/shared/SettingsView.tsx

@@ -4,7 +4,7 @@ import { writeTextFile } from "@tauri-apps/plugin-fs";
 import { useUserStore } from "../../stores/user";
 import { useMuteStore } from "../../stores/mute";
 import { useBookmarkStore } from "../../stores/bookmark";
-import { getNDK, getStoredRelayUrls, addRelay, removeRelay, publishRelayList } from "../../lib/nostr";
+import { getStoredRelayUrls } from "../../lib/nostr";
 import { useProfile } from "../../hooks/useProfile";
 import { NWCWizard } from "./NWCWizard";
 import { getNotificationSettings, saveNotificationSettings, ensurePermission } from "../../lib/notifications";
@@ -113,117 +113,6 @@ function MutedKeywordsSection() {
   );
 }
 
-function RelayRow({ url, onRemove }: { url: string; onRemove: () => void }) {
-  const ndk = getNDK();
-  const relay = ndk.pool?.relays.get(url);
-  const connected = relay?.connected ?? false;
-
-  return (
-    <div className="flex items-center gap-3 px-3 py-2 border border-border text-[12px] group">
-      <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${connected ? "bg-success" : "bg-text-dim"}`} />
-      <span className="text-text truncate flex-1 font-mono">{url}</span>
-      <button
-        onClick={onRemove}
-        className="text-text-dim hover:text-danger text-[10px] opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
-      >
-        remove
-      </button>
-    </div>
-  );
-}
-
-function RelaySection() {
-  const { loggedIn } = useUserStore();
-  const [relays, setRelays] = useState<string[]>(() => getStoredRelayUrls());
-  const [input, setInput] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [publishing, setPublishing] = useState(false);
-  const [publishedAt, setPublishedAt] = useState<number | null>(null);
-
-  const handleAdd = () => {
-    const url = input.trim();
-    if (!url) return;
-    if (!url.startsWith("ws://") && !url.startsWith("wss://")) {
-      setError("URL must start with ws:// or wss://");
-      return;
-    }
-    if (relays.includes(url)) {
-      setError("Already in list");
-      return;
-    }
-    addRelay(url);
-    setRelays(getStoredRelayUrls());
-    setInput("");
-    setError(null);
-  };
-
-  const handleRemove = (url: string) => {
-    removeRelay(url);
-    setRelays(getStoredRelayUrls());
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") handleAdd();
-    if (e.key === "Escape") setInput("");
-  };
-
-  const handlePublishRelayList = async () => {
-    setPublishing(true);
-    try {
-      await publishRelayList(getStoredRelayUrls());
-      setPublishedAt(Date.now());
-    } catch {
-      // ignore — publishing failure is non-critical
-    } finally {
-      setPublishing(false);
-    }
-  };
-
-  return (
-    <section>
-      <h2 className="text-text text-[11px] font-medium uppercase tracking-widest mb-2 text-text-dim">Relays</h2>
-      <div className="space-y-1 mb-3">
-        {relays.length === 0 && (
-          <p className="text-text-dim text-[12px] px-1">No relays configured.</p>
-        )}
-        {relays.map((url) => (
-          <RelayRow key={url} url={url} onRemove={() => handleRemove(url)} />
-        ))}
-      </div>
-      <div className="flex gap-2">
-        <input
-          value={input}
-          onChange={(e) => { setInput(e.target.value); setError(null); }}
-          onKeyDown={handleKeyDown}
-          placeholder="wss://relay.example.com"
-          className="flex-1 bg-bg border border-border px-3 py-1.5 text-text text-[12px] font-mono 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>}
-      {loggedIn && !!getNDK().signer && (
-        <div className="mt-3">
-          <button
-            onClick={handlePublishRelayList}
-            disabled={publishing}
-            className="text-[11px] px-3 py-1.5 border border-border text-text-muted hover:text-accent hover:border-accent/40 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            {publishing ? "publishing…" : publishedAt ? "published ✓" : "publish relay list to Nostr"}
-          </button>
-          <p className="text-text-dim text-[10px] mt-1">
-            Saves your relay list as a kind 10002 event (NIP-65) so other clients can find your notes.
-          </p>
-        </div>
-      )}
-    </section>
-  );
-}
-
 function IdentitySection() {
   const { npub, loggedIn } = useUserStore();
   const [copied, setCopied] = useState(false);
@@ -391,7 +280,6 @@ export function SettingsView() {
       <div className="flex-1 overflow-y-auto p-4 space-y-8">
         <WalletSection />
         <NotificationSection />
-        <RelaySection />
         <ExportSection />
         <IdentitySection />
         <MuteSection />

src/components/shared/ToastContainer.tsx

@@ -0,0 +1,35 @@
+import { useToastStore } from "../../stores/toast";
+
+const accentColor: Record<string, string> = {
+  info: "bg-accent",
+  warning: "bg-warning",
+  success: "bg-success",
+};
+
+export function ToastContainer() {
+  const { toasts, removeToast } = useToastStore();
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 items-end">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className="flex items-stretch min-w-[240px] max-w-[360px] bg-bg-raised border border-border shadow-lg"
+        >
+          <div className={`w-1 shrink-0 ${accentColor[toast.type]}`} />
+          <div className="flex items-center justify-between gap-2 px-3 py-2 flex-1">
+            <span className="text-[12px] text-text">{toast.message}</span>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="text-text-dim hover:text-text transition-colors text-[12px] shrink-0"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}