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
This commit is contained in:
Jure
2026-03-23 11:28:53 +01:00
parent c9a92b9b47
commit ac4e39fcbf
12 changed files with 337 additions and 166 deletions

View File

@@ -0,0 +1,37 @@
import { useState, useEffect } from "react";
import { getNDK } from "../lib/nostr";
interface RelayInfo {
url: string;
connected: boolean;
}
interface RelayStatus {
connectedCount: number;
totalCount: number;
relays: RelayInfo[];
}
function readPool(): RelayStatus {
const ndk = getNDK();
const relays = Array.from(ndk.pool?.relays?.values() ?? []).map((r) => ({
url: r.url,
connected: r.connected,
}));
return {
connectedCount: relays.filter((r) => r.connected).length,
totalCount: relays.length,
relays,
};
}
export function useRelayStatus(): RelayStatus {
const [status, setStatus] = useState<RelayStatus>(readPool);
useEffect(() => {
const id = setInterval(() => setStatus(readPool()), 5000);
return () => clearInterval(id);
}, []);
return status;
}