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>
+  );
+}