Merge branch 'next'

.changeset/eighty-phones-switch.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Rebuild search view to use NIP-50

.changeset/shaggy-toys-explode.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add support for playing back stream recordings

.changeset/smart-students-peel.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Correctly handle replaceable events in timeline loader

src/classes/event-store.ts

@@ -0,0 +1,60 @@
+import { getEventUID } from "../helpers/nostr/event";
+import { NostrEvent } from "../types/nostr-event";
+import Subject from "./subject";
+
+type EventFilter = (event: NostrEvent) => boolean;
+export default class EventStore {
+  name?: string;
+  events = new Map<string, NostrEvent>();
+
+  constructor(name?: string) {
+    this.name = name;
+  }
+
+  getSortedEvents() {
+    return Array.from(this.events.values()).sort((a, b) => b.created_at - a.created_at);
+  }
+
+  onEvent = new Subject<NostrEvent>();
+  onClear = new Subject();
+
+  addEvent(event: NostrEvent) {
+    const id = getEventUID(event);
+    const existing = this.events.get(id);
+    if (!existing || event.created_at > existing.created_at) {
+      this.events.set(id, event);
+      this.onEvent.next(event);
+      return true;
+    }
+    return false;
+  }
+
+  clear() {
+    this.events.clear();
+    this.onClear.next(null);
+  }
+
+  connect(other: EventStore) {
+    other.onEvent.subscribe(this.addEvent, this);
+  }
+  disconnect(other: EventStore) {
+    other.onEvent.unsubscribe(this.addEvent, this);
+  }
+
+  getFirstEvent(nth = 0, filter?: EventFilter) {
+    const events = this.getSortedEvents();
+    const filteredEvents = filter ? events.filter(filter) : events;
+    for (let i = 0; i <= nth; i++) {
+      const event = filteredEvents[i];
+      if (event) return event;
+    }
+  }
+  getLastEvent(nth = 0, filter?: EventFilter) {
+    const events = this.getSortedEvents();
+    const filteredEvents = filter ? events.filter(filter) : events;
+    for (let i = nth; i >= 0; i--) {
+      const event = filteredEvents[filteredEvents.length - 1 - i];
+      if (event) return event;
+    }
+  }
+}

src/classes/thread-loader.ts

@@ -1,4 +1,4 @@
-import { getReferences } from "../helpers/nostr-event";
+import { getReferences } from "../helpers/nostr/event";
 import { NostrEvent } from "../types/nostr-event";
 import { NostrRequest } from "./nostr-request";
 import { NostrMultiSubscription } from "./nostr-multi-subscription";

src/classes/timeline-loader.ts

@@ -1,12 +1,13 @@
 import dayjs from "dayjs";
 import { utils } from "nostr-tools";
-import debug, { Debug, Debugger } from "debug";
+import { Debugger } from "debug";
 import { NostrEvent } from "../types/nostr-event";
 import { NostrQuery, NostrRequestFilter } from "../types/nostr-query";
 import { NostrRequest } from "./nostr-request";
 import { NostrMultiSubscription } from "./nostr-multi-subscription";
 import Subject, { PersistentSubject } from "./subject";
 import { logger } from "../helpers/debug";
+import EventStore from "./event-store";
 
 function addToQuery(filter: NostrRequestFilter, query: NostrQuery) {
   if (Array.isArray(filter)) {
@@ -28,11 +29,10 @@ class RelayTimelineLoader {
   private log: Debugger;
 
   loading = false;
-  events: NostrEvent[] = [];
+  events: EventStore;
   /** set to true when the next block produces 0 events */
   complete = false;
 
-  onEvent = new Subject<NostrEvent>();
   onBlockFinish = new Subject<void>();
 
   constructor(relay: string, query: NostrRequestFilter, name: string, log?: Debugger) {
@@ -41,19 +41,24 @@ class RelayTimelineLoader {
     this.name = name;
 
     this.log = log || logger.extend(name);
+    this.events = new EventStore(relay);
   }
 
   loadNextBlock() {
     this.loading = true;
     let query: NostrRequestFilter = addToQuery(this.query, { limit: this.blockSize });
-    if (this.events[this.events.length - 1]) {
-      query = addToQuery(query, { until: this.events[this.events.length - 1].created_at - 1 });
+    let oldestEvent = this.getLastEvent();
+    if (oldestEvent) {
+      query = addToQuery(query, { until: oldestEvent.created_at - 1 });
     }
 
     const request = new NostrRequest([this.relay], undefined, this.name + "-" + this.requestId++);
 
     let gotEvents = 0;
     request.onEvent.subscribe((e) => {
+      // if(oldestEvent && e.created_at<oldestEvent.created_at){
+      //   this.log('Got event older than oldest')
+      // }
       if (this.handleEvent(e)) {
         gotEvents++;
       }
@@ -68,23 +73,12 @@ class RelayTimelineLoader {
     request.start(query);
   }
 
-  private seenEvents = new Set<string>();
   private handleEvent(event: NostrEvent) {
-    if (!this.seenEvents.has(event.id)) {
-      this.seenEvents.add(event.id);
-      this.events = utils.insertEventIntoDescendingList(Array.from(this.events), event);
-      this.onEvent.next(event);
-      return true;
-    }
-    return false;
+    return this.events.addEvent(event);
   }
 
   getLastEvent(nth = 0, filter?: EventFilter) {
-    const events = filter ? this.events.filter(filter) : this.events;
-    for (let i = nth; i >= 0; i--) {
-      const event = events[events.length - 1 - i];
-      if (event) return event;
-    }
+    return this.events.getLastEvent(nth, filter);
   }
 }
 
@@ -93,7 +87,7 @@ export class TimelineLoader {
   query?: NostrRequestFilter;
   relays: string[] = [];
 
-  events = new PersistentSubject<NostrEvent[]>([]);
+  events: EventStore;
   timeline = new PersistentSubject<NostrEvent[]>([]);
   loading = new PersistentSubject(false);
   complete = new PersistentSubject(false);
@@ -110,20 +104,23 @@ export class TimelineLoader {
   constructor(name: string) {
     this.name = name;
     this.log = logger.extend("TimelineLoader:" + name);
+    this.events = new EventStore(name);
+
     this.subscription = new NostrMultiSubscription([], undefined, name);
     this.subscription.onEvent.subscribe(this.handleEvent, this);
+
+    // update the timeline when there are new events
+    this.events.onEvent.subscribe(this.updateTimeline, this);
+    this.events.onClear.subscribe(this.updateTimeline, this);
   }
 
-  private seenEvents = new Set<string>();
+  private updateTimeline() {
+    if (this.eventFilter) {
+      this.timeline.next(this.events.getSortedEvents().filter(this.eventFilter));
+    } else this.timeline.next(this.events.getSortedEvents());
+  }
   private handleEvent(event: NostrEvent) {
-    if (!this.seenEvents.has(event.id)) {
-      this.seenEvents.add(event.id);
-      this.events.next(utils.insertEventIntoDescendingList(Array.from(this.events.value), event));
-
-      if (!this.eventFilter || this.eventFilter(event)) {
-        this.timeline.next(utils.insertEventIntoDescendingList(Array.from(this.timeline.value), event));
-      }
-    }
+    this.events.addEvent(event);
   }
 
   private createLoaders() {
@@ -133,7 +130,7 @@ export class TimelineLoader {
       if (!this.relayTimelineLoaders.has(relay)) {
         const loader = new RelayTimelineLoader(relay, this.query, this.name, this.log.extend(relay));
         this.relayTimelineLoaders.set(relay, loader);
-        loader.onEvent.subscribe(this.handleEvent, this);
+        this.events.connect(loader.events);
         loader.onBlockFinish.subscribe(this.updateLoading, this);
         loader.onBlockFinish.subscribe(this.updateComplete, this);
       }
@@ -142,9 +139,9 @@ export class TimelineLoader {
   private removeLoaders(filter?: (loader: RelayTimelineLoader) => boolean) {
     for (const [relay, loader] of this.relayTimelineLoaders) {
       if (!filter || filter(loader)) {
-        loader?.onEvent.unsubscribe(this.handleEvent, this);
-        loader?.onBlockFinish.unsubscribe(this.updateLoading, this);
-        loader?.onBlockFinish.unsubscribe(this.updateComplete, this);
+        this.events.disconnect(loader.events);
+        loader.onBlockFinish.unsubscribe(this.updateLoading, this);
+        loader.onBlockFinish.unsubscribe(this.updateComplete, this);
         this.relayTimelineLoaders.delete(relay);
       }
     }
@@ -168,9 +165,8 @@ export class TimelineLoader {
     this.removeLoaders();
 
     this.query = query;
-    this.events.next([]);
+    this.events.clear();
     this.timeline.next([]);
-    this.seenEvents.clear();
 
     this.createLoaders();
     this.updateComplete();
@@ -181,9 +177,7 @@ export class TimelineLoader {
   }
   setFilter(filter?: (event: NostrEvent) => boolean) {
     this.eventFilter = filter;
-    if (this.eventFilter) {
-      this.timeline.next(this.events.value.filter(this.eventFilter));
-    }
+    this.updateTimeline();
   }
 
   setCursor(cursor: number) {
@@ -250,9 +244,8 @@ export class TimelineLoader {
   // TODO: this is only needed because the current logic dose not remove events when the relay they where fetched from is removed
   /** @deprecated */
   forgetEvents() {
-    this.events.next([]);
+    this.events.clear();
     this.timeline.next([]);
-    this.seenEvents.clear();
     this.subscription.forgetEvents();
   }
 }

src/components/debug-modals/note-debug-modal.tsx

@@ -1,7 +1,7 @@
 import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Flex } from "@chakra-ui/react";
 import { ModalProps } from "@chakra-ui/react";
 import { Bech32Prefix, hexToBech32 } from "../../helpers/nip19";
-import { getReferences } from "../../helpers/nostr-event";
+import { getReferences } from "../../helpers/nostr/event";
 import { NostrEvent } from "../../types/nostr-event";
 import RawJson from "./raw-json";
 import RawValue from "./raw-value";

src/components/layout/profile-link.tsx

@@ -3,7 +3,7 @@ import { Link as RouterLink, useLocation } from "react-router-dom";
 import { UserAvatar } from "../user-avatar";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip19";
-import { truncatedId } from "../../helpers/nostr-event";
+import { truncatedId } from "../../helpers/nostr/event";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 
 function ProfileButton() {

src/components/live-video-player.tsx

@@ -44,15 +44,6 @@ export function LiveVideoPlayer({
 
   return (
     <Flex justifyContent="center" alignItems="center" {...props} position="relative">
-      <Badge
-        position="absolute"
-        top="4"
-        left="4"
-        fontSize="1.2rem"
-        colorScheme={status === VideoStatus.Offline ? "red" : undefined}
-      >
-        {status}
-      </Badge>
       <video
         ref={video}
         playsInline={true}

src/components/note-link.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Link, LinkProps } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
-import { truncatedId } from "../helpers/nostr-event";
+import { truncatedId } from "../helpers/nostr/event";
 import { nip19 } from "nostr-tools";
 import { getSharableNoteId } from "../helpers/nip19";
 

src/components/note/buttons/quote-repost-button.tsx

@@ -3,7 +3,7 @@ import { IconButton } from "@chakra-ui/react";
 import { NostrEvent } from "../../../types/nostr-event";
 import { QuoteRepostIcon } from "../../icons";
 import { PostModalContext } from "../../../providers/post-modal-provider";
-import { buildQuoteRepost } from "../../../helpers/nostr-event";
+import { buildQuoteRepost } from "../../../helpers/nostr/event";
 import { useCurrentAccount } from "../../../hooks/use-current-account";
 
 export function QuoteRepostButton({ event }: { event: NostrEvent }) {

src/components/note/buttons/reply-button.tsx

@@ -3,7 +3,7 @@ import { IconButton } from "@chakra-ui/react";
 import { NostrEvent } from "../../../types/nostr-event";
 import { ReplyIcon } from "../../icons";
 import { PostModalContext } from "../../../providers/post-modal-provider";
-import { buildReply } from "../../../helpers/nostr-event";
+import { buildReply } from "../../../helpers/nostr/event";
 import { useCurrentAccount } from "../../../hooks/use-current-account";
 
 export function ReplyButton({ event }: { event: NostrEvent }) {

src/components/note/buttons/repost-button.tsx

@@ -15,7 +15,7 @@ import {
 } from "@chakra-ui/react";
 import { NostrEvent } from "../../../types/nostr-event";
 import { RepostIcon } from "../../icons";
-import { buildRepost } from "../../../helpers/nostr-event";
+import { buildRepost } from "../../../helpers/nostr/event";
 import { useCurrentAccount } from "../../../hooks/use-current-account";
 import { nostrPostAction } from "../../../classes/nostr-post-action";
 import clientRelaysService from "../../../services/client-relays";

src/components/note/index.tsx

@@ -17,7 +17,7 @@ import { NostrEvent } from "../../types/nostr-event";
 import { UserAvatarLink } from "../user-avatar-link";
 
 import { NoteMenu } from "./note-menu";
-import { NoteRelays } from "./note-relays";
+import { EventRelays } from "./note-relays";
 import { useIsMobile } from "../../hooks/use-is-mobile";
 import { UserLink } from "../user-link";
 import { UserDnsIdentityIcon } from "../user-dns-identity-icon";
@@ -90,7 +90,7 @@ export const Note = React.memo(({ event, variant = "outline" }: NoteProps) => {
                 target="_blank"
               />
             )}
-            <NoteRelays event={event} />
+            <EventRelays event={event} />
             <NoteMenu event={event} size="sm" variant="link" aria-label="More Options" />
           </CardFooter>
         </Card>

src/components/note/note-menu.tsx

@@ -24,7 +24,7 @@ import NoteDebugModal from "../debug-modals/note-debug-modal";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { useCallback, useState } from "react";
 import QuoteNote from "./quote-note";
-import { buildDeleteEvent } from "../../helpers/nostr-event";
+import { buildDeleteEvent } from "../../helpers/nostr/event";
 import signingService from "../../services/signing";
 import { nostrPostAction } from "../../classes/nostr-post-action";
 import clientRelaysService from "../../services/client-relays";

src/components/note/note-relays.tsx

@@ -1,18 +1,18 @@
 import { memo } from "react";
-import { IconButtonProps } from "@chakra-ui/react";
 import { getEventRelays } from "../../services/event-relays";
 import { NostrEvent } from "../../types/nostr-event";
 import useSubject from "../../hooks/use-subject";
 import { RelayIconStack } from "../relay-icon-stack";
 import { useIsMobile } from "../../hooks/use-is-mobile";
+import { getEventUID } from "../../helpers/nostr/event";
 
 export type NoteRelaysProps = {
   event: NostrEvent;
 };
 
-export const NoteRelays = memo(({ event }: NoteRelaysProps) => {
+export const EventRelays = memo(({ event }: NoteRelaysProps) => {
   const isMobile = useIsMobile();
-  const eventRelays = useSubject(getEventRelays(event.id));
+  const eventRelays = useSubject(getEventRelays(getEventUID(event)));
 
   return <RelayIconStack relays={eventRelays} direction="row-reverse" maxRelays={isMobile ? 4 : undefined} />;
 });

src/components/post-modal/index.tsx

@@ -17,7 +17,7 @@ import React, { useRef, useState } from "react";
 import { useList } from "react-use";
 import { nostrPostAction, PostResult } from "../../classes/nostr-post-action";
 import { normalizeToHex } from "../../helpers/nip19";
-import { getReferences } from "../../helpers/nostr-event";
+import { getReferences } from "../../helpers/nostr/event";
 import { matchHashtag, mentionNpubOrNote } from "../../helpers/regexp";
 import { useWriteRelayUrls } from "../../hooks/use-client-relays";
 import { useIsMobile } from "../../hooks/use-is-mobile";

src/components/timeline-page/generic-note-timeline/stream-note.tsx

@@ -23,7 +23,7 @@ import { useRegisterIntersectionEntity } from "../../../providers/intersection-o
 import { UserAvatar } from "../../user-avatar";
 import { UserLink } from "../../user-link";
 import StreamStatusBadge from "../../../views/streams/components/status-badge";
-import { NoteRelays } from "../../note/note-relays";
+import { EventRelays } from "../../note/note-relays";
 import { useAsync } from "react-use";
 
 export default function StreamNote({ event, ...props }: CardProps & { event: NostrEvent }) {
@@ -69,7 +69,7 @@ export default function StreamNote({ event, ...props }: CardProps & { event: Nos
       <CardFooter p="2" display="flex" gap="2" alignItems="center">
         <StreamStatusBadge stream={stream} />
         <Spacer />
-        <NoteRelays event={stream.event} />
+        <EventRelays event={stream.event} />
       </CardFooter>
     </Card>
   );

src/helpers/nostr/event.ts

@@ -1,12 +1,13 @@
 import dayjs from "dayjs";
-import { getEventRelays } from "../services/event-relays";
-import { DraftNostrEvent, isETag, isPTag, NostrEvent, RTag, Tag } from "../types/nostr-event";
-import { RelayConfig, RelayMode } from "../classes/relay";
-import accountService from "../services/account";
+import { getEventRelays } from "../../services/event-relays";
+import { DraftNostrEvent, isETag, isPTag, NostrEvent, RTag, Tag } from "../../types/nostr-event";
+import { RelayConfig, RelayMode } from "../../classes/relay";
+import accountService from "../../services/account";
 import { Kind, nip19 } from "nostr-tools";
-import { matchNostrLink } from "./regexp";
-import { getSharableNoteId } from "./nip19";
-import relayScoreboardService from "../services/relay-scoreboard";
+import { matchNostrLink } from "../regexp";
+import { getSharableNoteId } from "../nip19";
+import relayScoreboardService from "../../services/relay-scoreboard";
+import { getAddr } from "../../services/replaceable-event-requester";
 
 export function isReply(event: NostrEvent | DraftNostrEvent) {
   return event.kind === 1 && !!getReferences(event).replyId;
@@ -22,6 +23,14 @@ export function truncatedId(str: string, keep = 6) {
   return str.substring(0, keep) + "..." + str.substring(str.length - keep);
 }
 
+// used to get a unique Id for each event, should take into account replaceable events
+export function getEventUID(event: NostrEvent) {
+  if (event.kind >= 30000 && event.kind < 40000) {
+    return getAddr(event.kind, event.pubkey, event.tags.find((t) => t[0] === "d" && t[1])?.[1]);
+  }
+  return event.id;
+}
+
 /**
  * returns an array of tag indexes that are referenced in the content
  * either with the legacy #[0] syntax or nostr:xxxxx links

src/helpers/nostr/stream.ts

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import { DraftNostrEvent, NostrEvent, isPTag } from "../../types/nostr-event";
 import { unique } from "../array";
+import { getAddr } from "../../services/replaceable-event-requester";
 
 export const STREAM_KIND = 30311;
 export const STREAM_CHAT_MESSAGE_KIND = 1311;
@@ -18,7 +19,9 @@ export type ParsedStream = {
   ends?: number;
   identifier: string;
   tags: string[];
-  streaming: string;
+  streaming?: string;
+  recording?: string;
+  relays?: string[];
 };
 
 export function parseStreamEvent(stream: NostrEvent): ParsedStream {
@@ -28,16 +31,23 @@ export function parseStreamEvent(stream: NostrEvent): ParsedStream {
   const starts = stream.tags.find((t) => t[0] === "starts")?.[1];
   const endsTag = stream.tags.find((t) => t[0] === "ends")?.[1];
   const streaming = stream.tags.find((t) => t[0] === "streaming")?.[1];
+  const recording = stream.tags.find((t) => t[0] === "recording")?.[1];
   const identifier = stream.tags.find((t) => t[0] === "d")?.[1];
 
+  let relays = stream.tags.find((t) => t[0] === "relays");
+  // remove the first "relays" element
+  if (relays) {
+    relays = Array.from(relays);
+    relays.shift();
+  }
+
   const startTime = starts ? parseInt(starts) : stream.created_at;
-  const endTime = endsTag ? parseInt(endsTag) : dayjs(startTime).add(4, "hour").unix();
+  const endTime = endsTag ? parseInt(endsTag) : undefined;
 
   if (!identifier) throw new Error("missing identifier");
-  if (!streaming) throw new Error("missing streaming");
 
   let status = stream.tags.find((t) => t[0] === "status")?.[1] || "ended";
-  if (endTime > dayjs().unix()) {
+  if (endTime && endTime > dayjs().unix()) {
     status = "ended";
   }
 
@@ -55,6 +65,7 @@ export function parseStreamEvent(stream: NostrEvent): ParsedStream {
     event: stream,
     updated: stream.created_at,
     streaming,
+    recording,
     tags,
     title,
     summary,
@@ -63,11 +74,12 @@ export function parseStreamEvent(stream: NostrEvent): ParsedStream {
     starts: startTime,
     ends: endTime,
     identifier,
+    relays,
   };
 }
 
 export function getATag(stream: ParsedStream) {
-  return `${stream.event.kind}:${stream.author}:${stream.identifier}`;
+  return getAddr(stream.event.kind, stream.author, stream.identifier);
 }
 
 export function buildChatMessage(stream: ParsedStream, content: string) {

src/helpers/thread.ts

@@ -1,5 +1,5 @@
 import { NostrEvent } from "../types/nostr-event";
-import { EventReferences, getReferences } from "./nostr-event";
+import { EventReferences, getReferences } from "./nostr/event";
 
 export function countReplies(thread: ThreadItem): number {
   return thread.replies.reduce((c, item) => c + countReplies(item), 0) + thread.replies.length;

src/helpers/user-metadata.ts

@@ -1,6 +1,6 @@
 import { NostrEvent } from "../types/nostr-event";
 import { Bech32Prefix, normalizeToBech32 } from "./nip19";
-import { truncatedId } from "./nostr-event";
+import { truncatedId } from "./nostr/event";
 
 export type Kind0ParsedContent = {
   name?: string;

src/hooks/use-event-naddr.ts

@@ -4,10 +4,10 @@ import { nip19 } from "nostr-tools";
 import { getEventRelays } from "../services/event-relays";
 import relayScoreboardService from "../services/relay-scoreboard";
 
-export default function useEventNaddr(event: NostrEvent) {
+export default function useEventNaddr(event: NostrEvent, overrideRelays?: string[]) {
   return useMemo(() => {
     const identifier = event.tags.find((t) => t[0] === "d" && t[1])?.[1];
-    const relays = getEventRelays(event.id).value;
+    const relays = overrideRelays || getEventRelays(event.id).value;
     const ranked = relayScoreboardService.getRankedRelays(relays);
     const onlyTwo = ranked.slice(0, 2);
 

src/providers/notification-timeline.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, createContext, useContext, useEffect, useMemo } from "react";
-import { truncatedId } from "../helpers/nostr-event";
+import { truncatedId } from "../helpers/nostr/event";
 import { useReadRelayUrls } from "../hooks/use-client-relays";
 import { useCurrentAccount } from "../hooks/use-current-account";
 import { TimelineLoader } from "../classes/timeline-loader";

src/services/event-reactions.ts

@@ -2,7 +2,7 @@ import { Kind } from "nostr-tools";
 import { NostrRequest } from "../classes/nostr-request";
 import Subject from "../classes/subject";
 import { SuperMap } from "../classes/super-map";
-import { getReferences } from "../helpers/nostr-event";
+import { getReferences } from "../helpers/nostr/event";
 import { NostrEvent } from "../types/nostr-event";
 
 type eventId = string;

src/services/event-relays.ts

@@ -1,5 +1,6 @@
 import { Relay } from "../classes/relay";
 import { PersistentSubject } from "../classes/subject";
+import { getEventUID } from "../helpers/nostr/event";
 import { NostrEvent } from "../types/nostr-event";
 import relayPoolService from "./relay-pool";
 
@@ -14,14 +15,21 @@ export function getEventRelays(id: string) {
   return relays;
 }
 
-export function handleEventFromRelay(relay: Relay, event: NostrEvent) {
-  const relays = getEventRelays(event.id);
+function addRelay(id: string, relay: string) {
+  const relays = getEventRelays(id);
 
-  if (!relays.value.includes(relay.url)) {
-    relays.next(relays.value.concat(relay.url));
+  if (!relays.value.includes(relay)) {
+    relays.next(relays.value.concat(relay));
   }
 }
 
+export function handleEventFromRelay(relay: Relay, event: NostrEvent) {
+  const uid = getEventUID(event);
+
+  addRelay(uid, relay.url);
+  if (event.id !== uid) addRelay(event.id, relay.url);
+}
+
 relayPoolService.onRelayCreated.subscribe((relay) => {
   relay.onEvent.subscribe(({ body: event }) => {
     handleEventFromRelay(relay, event);

src/services/event-zaps.ts

@@ -2,7 +2,7 @@ import { Kind } from "nostr-tools";
 import { NostrRequest } from "../classes/nostr-request";
 import Subject from "../classes/subject";
 import { SuperMap } from "../classes/super-map";
-import { getReferences } from "../helpers/nostr-event";
+import { getReferences } from "../helpers/nostr/event";
 import { NostrEvent } from "../types/nostr-event";
 
 type eventId = string;

src/services/user-relays.ts

@@ -1,6 +1,6 @@
 import { isRTag, NostrEvent } from "../types/nostr-event";
 import { RelayConfig } from "../classes/relay";
-import { parseRTag } from "../helpers/nostr-event";
+import { parseRTag } from "../helpers/nostr/event";
 import { SuperMap } from "../classes/super-map";
 import Subject from "../classes/subject";
 import { normalizeRelayConfigs } from "../helpers/relay";

src/types/nostr-query.ts

@@ -18,6 +18,7 @@ export type NostrQuery = {
   since?: number;
   until?: number;
   limit?: number;
+  search?: string;
 };
 
 export type NostrRequestFilter = NostrQuery | NostrQuery[];

src/views/hashtag/index.tsx

@@ -18,7 +18,7 @@ import { CloseIcon } from "@chakra-ui/icons";
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppTitle } from "../../hooks/use-app-title";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
-import { isReply } from "../../helpers/nostr-event";
+import { isReply } from "../../helpers/nostr/event";
 import { CheckIcon, EditIcon } from "../../components/icons";
 import { NostrEvent } from "../../types/nostr-event";
 import RelaySelectionButton from "../../components/relay-selection/relay-selection-button";

src/views/home/following-tab.tsx

@@ -1,6 +1,6 @@
 import { Flex, FormControl, FormLabel, Switch } from "@chakra-ui/react";
 import { useSearchParams } from "react-router-dom";
-import { isReply, truncatedId } from "../../helpers/nostr-event";
+import { isReply, truncatedId } from "../../helpers/nostr/event";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { useUserContacts } from "../../hooks/use-user-contacts";
 import { useCallback } from "react";

src/views/home/global-tab.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { Flex, FormControl, FormLabel, Switch, useDisclosure } from "@chakra-ui/react";
-import { isReply } from "../../helpers/nostr-event";
+import { isReply } from "../../helpers/nostr/event";
 import { useAppTitle } from "../../hooks/use-app-title";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { NostrEvent } from "../../types/nostr-event";

src/views/messages/chat.tsx

@@ -16,7 +16,7 @@ import { DraftNostrEvent } from "../../types/nostr-event";
 import RequireCurrentAccount from "../../providers/require-current-account";
 import { Message } from "./message";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
-import { truncatedId } from "../../helpers/nostr-event";
+import { truncatedId } from "../../helpers/nostr/event";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import IntersectionObserverProvider from "../../providers/intersection-observer";

src/views/notifications/index.tsx

@@ -15,7 +15,7 @@ import { useNotificationTimeline } from "../../providers/notification-timeline";
 import { Kind, getEventHash } from "nostr-tools";
 import { parseZapEvent } from "../../helpers/zaps";
 import { readablizeSats } from "../../helpers/bolt11";
-import { getReferences } from "../../helpers/nostr-event";
+import { getReferences } from "../../helpers/nostr/event";
 
 const Kind1Notification = ({ event }: { event: NostrEvent }) => (
   <Card size="sm" variant="outline">

src/views/search/index.tsx

@@ -1,100 +1,129 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
+  Box,
   Button,
   Card,
   CardBody,
   CardFooter,
   CardHeader,
   Flex,
-  Heading,
   IconButton,
   Input,
-  Text,
+  Link,
+  SimpleGrid,
   useDisclosure,
 } from "@chakra-ui/react";
-import dayjs from "dayjs";
-import { useCallback, useEffect, useState } from "react";
 import { useSearchParams, Link as RouterLink, useNavigate } from "react-router-dom";
-import { useAsync } from "react-use";
-import { ClipboardIcon, LightningIcon, QrCodeIcon } from "../../components/icons";
-import { UserAvatarLink } from "../../components/user-avatar-link";
-import { UserDnsIdentityIcon } from "../../components/user-dns-identity-icon";
-import ZapModal from "../../components/zap-modal";
-import { truncatedId } from "../../helpers/nostr-event";
+import { ClipboardIcon, QrCodeIcon } from "../../components/icons";
 import QrScannerModal from "../../components/qr-scanner-modal";
 import { safeDecode } from "../../helpers/nip19";
-import { useInvoiceModalContext } from "../../providers/invoice-modal";
 import { matchHashtag } from "../../helpers/regexp";
+import RelaySelectionButton from "../../components/relay-selection/relay-selection-button";
+import RelaySelectionProvider, { useRelaySelectionRelays } from "../../providers/relay-selection-provider";
+import { useTimelineLoader } from "../../hooks/use-timeline-loader";
+import { Kind, nip19 } from "nostr-tools";
+import useSubject from "../../hooks/use-subject";
+import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
+import IntersectionObserverProvider from "../../providers/intersection-observer";
+import { NostrEvent } from "../../types/nostr-event";
+import { getUserDisplayName, parseKind0Event } from "../../helpers/user-metadata";
+import { UserAvatar } from "../../components/user-avatar";
+import { UserDnsIdentityIcon } from "../../components/user-dns-identity-icon";
+import TimelineActionAndStatus from "../../components/timeline-page/timeline-action-and-status";
+import { EventRelays } from "../../components/note/note-relays";
+import { EmbedableContent, embedUrls } from "../../helpers/embeds";
+import { embedNostrLinks, renderGenericUrl } from "../../components/embed-types";
+import { getEventRelays } from "../../services/event-relays";
+import relayScoreboardService from "../../services/relay-scoreboard";
 
-type relay = string;
-type NostrBandSearchResults = {
-  query: string;
-  page: number;
-  page_size: number;
-  nip05_count: number;
-  timeline: any[];
-  page_count: number;
-  result_count: number;
-  serp: any[];
-  people_count: number;
-  people: [
-    {
-      i: number;
-      pubkey: string;
-      name: string;
-      about: string;
-      picture: string;
-      nip05: string;
-      nip05_verified: boolean;
-      website: string;
-      display_name: string;
-      lud06: string;
-      lud16: string;
-      lud06_url: string;
-      first_tm: number;
-      last_tm: number;
-      last_tm_str: string;
-      followed_count: number;
-      following_count: number;
-      zappers: number;
-      zap_amount: number;
-      zapped_pubkeys: number;
-      zap_amount_sent: number;
-      zap_amount_processed: number;
-      zapped_pubkeys_processed: number;
-      zappers_processed: number;
-      twitter?: {
-        verified: boolean;
-        verify_event: string;
-        handle: string;
-        name: string;
-        bio: string;
-        picture: string;
-        followers: number;
-        tweet: string;
-      };
-      relays: number[];
+function buildDescriptionContent(description: string) {
+  let content: EmbedableContent = [description.trim()];
+
+  content = embedNostrLinks(content);
+  content = embedUrls(content, [renderGenericUrl]);
+
+  return content;
 }
-  ];
-  relays: Record<number | string, relay>;
-};
 
-export default function SearchView() {
+function ProfileResult({ event }: { event: NostrEvent }) {
+  const metadata = parseKind0Event(event);
+
+  const aboutContent = metadata.about && buildDescriptionContent(metadata.about);
+  const nprofile = useMemo(() => {
+    const relays = getEventRelays(event.id).value;
+    const ranked = relayScoreboardService.getRankedRelays(relays).slice(2);
+    return nip19.nprofileEncode({ pubkey: event.pubkey, relays: ranked });
+  }, [event.id]);
+
+  return (
+    <Card overflow="hidden" variant="outline" size="sm">
+      <CardHeader display="flex" gap="4" alignItems="flex-start">
+        <UserAvatar pubkey={event.pubkey} noProxy />
+        <Flex alignItems="center" gap="2" overflow="hidden">
+          <Link as={RouterLink} to={`/u/${nprofile}`} whiteSpace="nowrap" fontWeight="bold" fontSize="xl" isTruncated>
+            {getUserDisplayName(metadata, event.pubkey)}
+          </Link>
+          <UserDnsIdentityIcon pubkey={event.pubkey} onlyIcon />
+        </Flex>
+      </CardHeader>
+      <CardBody py={0} overflow="hidden" maxH="20rem">
+        {aboutContent && (
+          <Box whiteSpace="pre" isTruncated>
+            {aboutContent}
+          </Box>
+        )}
+      </CardBody>
+      <CardFooter>
+        <EventRelays event={event} />
+      </CardFooter>
+    </Card>
+  );
+}
+
+function SearchResults({ search }: { search: string }) {
+  const searchRelays = useRelaySelectionRelays();
+
+  const timeline = useTimelineLoader(
+    `search`,
+    searchRelays,
+    { search: search || "", kinds: [Kind.Metadata] },
+    { enabled: !!search }
+  );
+
+  const events = useSubject(timeline?.timeline) ?? [];
+
+  const callback = useTimelineCurserIntersectionCallback(timeline);
+
+  return (
+    <IntersectionObserverProvider callback={callback}>
+      <SimpleGrid minChildWidth="30rem" spacing="2">
+        {events.map((event) => (
+          <ProfileResult key={event.id} event={event} />
+        ))}
+      </SimpleGrid>
+
+      <TimelineActionAndStatus timeline={timeline} />
+    </IntersectionObserverProvider>
+  );
+}
+
+export function SearchPage() {
   const navigate = useNavigate();
-  const { isOpen: donateOpen, onOpen: openDonate, onClose: closeDonate } = useDisclosure();
-  const { isOpen: qrScannerOpen, onOpen: openScanner, onClose: closeScanner } = useDisclosure();
+  const qrScannerModal = useDisclosure();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [search, setSearch] = useState(searchParams.get("q") ?? "");
-  const { requestPay } = useInvoiceModalContext();
+  const [searchInput, setSearchInput] = useState(searchParams.get("q") ?? "");
+
+  const search = searchParams.get("q");
 
   // update the input value when search changes
   useEffect(() => {
-    setSearch(searchParams.get("q") ?? "");
+    setSearchInput(searchParams.get("q") ?? "");
   }, [searchParams]);
 
   const handleSearchText = (text: string) => {
     const cleanText = text.trim();
 
-    if (cleanText.startsWith("nostr:") || cleanText.startsWith("web+nostr:") || safeDecode(search)) {
+    if (cleanText.startsWith("nostr:") || cleanText.startsWith("web+nostr:") || safeDecode(text)) {
       navigate({ pathname: "/l/" + encodeURIComponent(text) }, { replace: true });
       return;
     }
@@ -115,92 +144,41 @@ export default function SearchView() {
   // set the search when the form is submitted
   const handleSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
-    handleSearchText(search);
+    handleSearchText(searchInput);
   };
 
-  // fetch search data from nostr.band
-  const { value: searchResults, loading } = useAsync(async () => {
-    if (!searchParams.has("q")) return;
-    return await fetch(`https://nostr.realsearch.cc/nostr?method=search&count=10&q=${searchParams.get("q")}`).then(
-      (res) => res.json() as Promise<NostrBandSearchResults>
-    );
-  }, [searchParams.get("q")]);
-
-  // handle data from qr code scanner
-  const handleQrCodeData = handleSearchText;
-
   return (
-    <Flex direction="column" overflowX="hidden" overflowY="auto" height="100%" p="2" gap="2">
-      <QrScannerModal isOpen={qrScannerOpen} onClose={closeScanner} onData={handleQrCodeData} />
+    <Flex direction="column" py="2" gap="2">
+      <QrScannerModal isOpen={qrScannerModal.isOpen} onClose={qrScannerModal.onClose} onData={handleSearchText} />
 
       <form onSubmit={handleSubmit}>
         <Flex gap="2">
-          <IconButton onClick={openScanner} icon={<QrCodeIcon />} aria-label="Qr Scanner" />
+          <IconButton onClick={qrScannerModal.onOpen} icon={<QrCodeIcon />} aria-label="Qr Scanner" />
           {!!navigator.clipboard.readText && (
             <IconButton onClick={readClipboard} icon={<ClipboardIcon />} aria-label="Read clipboard" />
           )}
-          <Input type="search" value={search} onChange={(e) => setSearch(e.target.value)} />
-          <Button type="submit" isLoading={loading}>
-            Search
-          </Button>
+          <Input type="search" value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
+          <Button type="submit">Search</Button>
+          <RelaySelectionButton />
         </Flex>
       </form>
 
-      {searchResults && (
-        <Flex gap="2" alignItems="center" justifyContent="center">
-          <Text>Find what you where looking for?</Text>
-          <Button leftIcon={<LightningIcon color="yellow.400" />} size="sm" onClick={openDonate} flexShrink={0}>
-            Support Creator
-          </Button>
-          {donateOpen && (
-            <ZapModal
-              isOpen={donateOpen}
-              pubkey="3356de61b39647931ce8b2140b2bab837e0810c0ef515bbe92de0248040b8bdd"
-              initialAmount={500}
-              initialComment="Thanks for creating nostr.band"
-              onClose={closeDonate}
-              onInvoice={async (invoice) => {
-                closeDonate();
-                await requestPay(invoice);
-              }}
-            />
-          )}
-        </Flex>
-      )}
-
-      <Flex direction="column" gap="2">
-        {searchResults?.people.map((person) => (
-          <Card key={person.pubkey} overflow="hidden" variant="outline" size="sm">
-            <CardHeader display="flex" gap="4" alignItems="flex-start">
-              <UserAvatarLink pubkey={person.pubkey} />
-              <Flex alignItems="center" gap="2">
-                <Heading size="md" overflow="hidden">
-                  {person.name || truncatedId(person.pubkey)}
-                </Heading>
-                <UserDnsIdentityIcon pubkey={person.pubkey} onlyIcon />
-              </Flex>
-              <Button
-                as={RouterLink}
-                variant="solid"
-                colorScheme="blue"
-                to={`/u/${person.pubkey}`}
-                size="sm"
-                ml="auto"
-                flexShrink={0}
-              >
-                View Profile
-              </Button>
-            </CardHeader>
-            <CardBody py={0}>
-              <Text>{person.about}</Text>
-            </CardBody>
-            <CardFooter display="flex" gap="2">
-              <Text>{person.followed_count} Followers</Text>
-              <Text>Created: {dayjs.unix(person.first_tm).toString()}</Text>
-            </CardFooter>
-          </Card>
-        ))}
-      </Flex>
+      {search && <SearchResults search={search} />}
     </Flex>
   );
 }
+
+// TODO: remove this when there is a good way to allow the user to select from a list of filtered relays that support NIP-50
+const searchRelays = ["wss://relay.nostr.band", "wss://search.nos.today"];
+export default function SearchView() {
+  // const { value: searchRelays = ["wss://relay.nostr.band"] } = useAsync(async () => {
+  //   const relays: string[] = await fetch("https://api.nostr.watch/v1/nip/50").then((res) => res.json());
+  //   return relays;
+  // });
+
+  return (
+    <RelaySelectionProvider overrideDefault={searchRelays}>
+      <SearchPage />
+    </RelaySelectionProvider>
+  );
+}

src/views/streams/components/stream-card.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react";
+import { useRef } from "react";
 import { ParsedStream } from "../../../helpers/nostr/stream";
 import {
   Badge,
@@ -9,44 +9,32 @@ import {
   Divider,
   Flex,
   Heading,
-  IconButton,
   Image,
   LinkBox,
   LinkOverlay,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
   Spacer,
   Text,
-  useDisclosure,
 } from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 import { UserAvatar } from "../../../components/user-avatar";
 import { UserLink } from "../../../components/user-link";
 import dayjs from "dayjs";
 import StreamStatusBadge from "./status-badge";
-import { CodeIcon } from "../../../components/icons";
-import RawValue from "../../../components/debug-modals/raw-value";
-import RawJson from "../../../components/debug-modals/raw-json";
-import { NoteRelays } from "../../../components/note/note-relays";
+import { EventRelays } from "../../../components/note/note-relays";
 import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
 import useEventNaddr from "../../../hooks/use-event-naddr";
+import StreamDebugButton from "./stream-debug-button";
 
 export default function StreamCard({ stream, ...props }: CardProps & { stream: ParsedStream }) {
-  const { title, identifier, image } = stream;
-  const devModal = useDisclosure();
+  const { title, image } = stream;
 
   // if there is a parent intersection observer, register this card
   const ref = useRef<HTMLDivElement | null>(null);
   useRegisterIntersectionEntity(ref, stream.event.id);
 
-  const naddr = useEventNaddr(stream.event);
+  const naddr = useEventNaddr(stream.event, stream.relays);
 
   return (
-    <>
     <Card {...props} ref={ref}>
       <LinkBox as={CardBody} p="2" display="flex" flexDirection="column" gap="2">
         {image && <Image src={image} alt={title} borderRadius="lg" />}
@@ -74,32 +62,9 @@ export default function StreamCard({ stream, ...props }: CardProps & { stream: P
       <CardFooter p="2" display="flex" gap="2" alignItems="center">
         <StreamStatusBadge stream={stream} />
         <Spacer />
-          <NoteRelays event={stream.event} />
-          <IconButton
-            icon={<CodeIcon />}
-            aria-label="show raw event"
-            onClick={devModal.onOpen}
-            variant="ghost"
-            size="sm"
-          />
+        <EventRelays event={stream.event} />
+        <StreamDebugButton stream={stream} variant="ghost" size="sm" />
       </CardFooter>
     </Card>
-
-      <Modal isOpen={devModal.isOpen} onClose={devModal.onClose} size="6xl">
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Raw event</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody p="4">
-            <Flex gap="2" direction="column">
-              <RawValue heading="Event Id" value={stream.event.id} />
-              <RawValue heading="naddr" value={naddr} />
-              <RawJson heading="Parsed" json={{ ...stream, event: "Omitted, see JSON below" }} />
-              <RawJson heading="JSON" json={stream.event} />
-            </Flex>
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
   );
 }

src/views/streams/components/stream-debug-button.tsx

@@ -0,0 +1,47 @@
+import {
+  Flex,
+  IconButton,
+  IconButtonProps,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { CodeIcon } from "../../../components/icons";
+import RawValue from "../../../components/debug-modals/raw-value";
+import RawJson from "../../../components/debug-modals/raw-json";
+import { ParsedStream } from "../../../helpers/nostr/stream";
+import useEventNaddr from "../../../hooks/use-event-naddr";
+
+export default function StreamDebugButton({
+  stream,
+  ...props
+}: { stream: ParsedStream } & Omit<IconButtonProps, "icon" | "aria-label">) {
+  const debugModal = useDisclosure();
+  const naddr = useEventNaddr(stream.event);
+
+  return (
+    <>
+      <IconButton icon={<CodeIcon />} aria-label="Show raw event" onClick={debugModal.onOpen} {...props} />
+
+      <Modal isOpen={debugModal.isOpen} onClose={debugModal.onClose} size="6xl">
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Raw event</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody p="4">
+            <Flex gap="2" direction="column">
+              <RawValue heading="Event Id" value={stream.event.id} />
+              <RawValue heading="naddr" value={naddr} />
+              <RawJson heading="Parsed" json={{ ...stream, event: "Omitted, see JSON below" }} />
+              <RawJson heading="JSON" json={stream.event} />
+            </Flex>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/views/streams/index.tsx

@@ -1,11 +1,11 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Flex, Select } from "@chakra-ui/react";
+import { useCallback, useMemo, useState } from "react";
+import { Flex, Select, SimpleGrid } from "@chakra-ui/react";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import IntersectionObserverProvider from "../../providers/intersection-observer";
 import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
 import useSubject from "../../hooks/use-subject";
 import StreamCard from "./components/stream-card";
-import { ParsedStream, STREAM_KIND, getATag, parseStreamEvent } from "../../helpers/nostr/stream";
+import { ParsedStream, STREAM_KIND, parseStreamEvent } from "../../helpers/nostr/stream";
 import { NostrEvent } from "../../types/nostr-event";
 import RelaySelectionButton from "../../components/relay-selection/relay-selection-button";
 import RelaySelectionProvider, { useRelaySelectionRelays } from "../../providers/relay-selection-provider";
@@ -15,8 +15,7 @@ import PeopleListProvider, { usePeopleListContext } from "../../components/peopl
 import TimelineActionAndStatus from "../../components/timeline-page/timeline-action-and-status";
 
 function StreamsPage() {
-  // hard code damus and snort relays for finding streams
-  const readRelays = useRelaySelectionRelays(); //useReadRelayUrls(["wss://relay.damus.io", "wss://relay.snort.social"]);
+  const relays = useRelaySelectionRelays();
   const [filterStatus, setFilterStatus] = useState<string>("live");
 
   const eventFilter = useCallback(
@@ -38,25 +37,22 @@ function StreamsPage() {
           { "#p": people, kinds: [STREAM_KIND] },
         ]
       : { kinds: [STREAM_KIND] };
-  const timeline = useTimelineLoader(`streams`, readRelays, query, { eventFilter });
+  const timeline = useTimelineLoader(`streams`, relays, query, { eventFilter });
 
-  useRelaysChanged(readRelays, () => timeline.reset());
+  useRelaysChanged(relays, () => timeline.reset());
 
   const callback = useTimelineCurserIntersectionCallback(timeline);
 
   const events = useSubject(timeline.timeline);
   const streams = useMemo(() => {
-    const parsedStreams: Record<string, ParsedStream> = {};
+    const parsedStreams: ParsedStream[] = [];
     for (const event of events) {
       try {
         const parsed = parseStreamEvent(event);
-        const aTag = getATag(parsed);
-        if (!parsedStreams[aTag] || parsed.event.created_at > parsedStreams[aTag].event.created_at) {
-          parsedStreams[aTag] = parsed;
-        }
+        parsedStreams.push(parsed);
       } catch (e) {}
     }
-    return Array.from(Object.values(parsedStreams)).sort((a, b) => (b.starts ?? 0) - (a.starts ?? 0));
+    return parsedStreams.sort((a, b) => (b.starts ?? 0) - (a.starts ?? 0));
   }, [events]);
 
   return (
@@ -70,12 +66,12 @@ function StreamsPage() {
         <RelaySelectionButton ml="auto" />
       </Flex>
       <IntersectionObserverProvider callback={callback}>
-        <Flex gap="2" wrap="wrap">
+        <SimpleGrid minChildWidth="25rem" spacing="2">
           {streams.map((stream) => (
-            <StreamCard key={stream.event.id} stream={stream} w="sm" />
+            <StreamCard key={stream.event.id} stream={stream} />
           ))}
+        </SimpleGrid>
         <TimelineActionAndStatus timeline={timeline} />
-        </Flex>
       </IntersectionObserverProvider>
     </Flex>
   );

src/views/streams/stream/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useScroll } from "react-use";
 import { Box, Button, ButtonGroup, Flex, Heading, Spacer, Spinner, Text } from "@chakra-ui/react";
 import { Link as RouterLink, useParams, Navigate, useSearchParams } from "react-router-dom";
@@ -6,7 +6,6 @@ import { nip19 } from "nostr-tools";
 import { Global, css } from "@emotion/react";
 
 import { ParsedStream, STREAM_KIND, parseStreamEvent } from "../../../helpers/nostr/stream";
-import { NostrRequest } from "../../../classes/nostr-request";
 import { useReadRelayUrls } from "../../../hooks/use-client-relays";
 import { unique } from "../../../helpers/array";
 import { LiveVideoPlayer } from "../../../components/live-video-player";
@@ -14,12 +13,15 @@ import StreamChat, { ChatDisplayMode } from "./stream-chat";
 import { UserAvatarLink } from "../../../components/user-avatar-link";
 import { UserLink } from "../../../components/user-link";
 import { useIsMobile } from "../../../hooks/use-is-mobile";
-import { AdditionalRelayProvider } from "../../../providers/additional-relay-context";
 import StreamSummaryContent from "../components/stream-summary-content";
 import { ArrowDownSIcon, ArrowUpSIcon, ExternalLinkIcon } from "../../../components/icons";
 import useSetColorMode from "../../../hooks/use-set-color-mode";
 import { CopyIconButton } from "../../../components/copy-icon-button";
-import { NoteRelays } from "../../../components/note/note-relays";
+import StreamDebugButton from "../components/stream-debug-button";
+import replaceableEventLoaderService from "../../../services/replaceable-event-requester";
+import useSubject from "../../../hooks/use-subject";
+import RelaySelectionButton from "../../../components/relay-selection/relay-selection-button";
+import RelaySelectionProvider from "../../../providers/relay-selection-provider";
 
 function StreamPage({ stream, displayMode }: { stream: ParsedStream; displayMode?: ChatDisplayMode }) {
   const isMobile = useIsMobile();
@@ -91,7 +93,12 @@ function StreamPage({ stream, displayMode }: { stream: ParsedStream; displayMode
       )}
       {!displayMode && (
         <Flex gap={isMobile ? "2" : "4"} direction="column" flexGrow={isMobile ? 0 : 1}>
-          <LiveVideoPlayer stream={stream.streaming} autoPlay poster={stream.image} maxH="100vh" />
+          <LiveVideoPlayer
+            stream={stream.streaming || stream.recording}
+            autoPlay={!!stream.streaming}
+            poster={stream.image}
+            maxH="100vh"
+          />
           <Flex gap={isMobile ? "2" : "4"} alignItems="center" p={isMobile ? "2" : 0}>
             <UserAvatarLink pubkey={stream.host} noProxy />
             <Box>
@@ -101,7 +108,8 @@ function StreamPage({ stream, displayMode }: { stream: ParsedStream; displayMode
               <Text>{stream.title}</Text>
             </Box>
             <Spacer />
-            <NoteRelays event={stream.event} />
+            <StreamDebugButton stream={stream} variant="ghost" />
+            <RelaySelectionButton />
             <Button as={RouterLink} to="/streams">
               Back
             </Button>
@@ -131,33 +139,40 @@ export default function StreamView() {
   if (!naddr) return <Navigate replace to="/streams" />;
 
   const readRelays = useReadRelayUrls();
-  const [stream, setStream] = useState<ParsedStream>();
-  const [relays, setRelays] = useState<string[]>([]);
+  const [streamRelays, setStreamRelays] = useState<string[]>([]);
 
-  useEffect(() => {
+  const subject = useMemo(() => {
     try {
       const parsed = nip19.decode(naddr);
       if (parsed.type !== "naddr") throw new Error("Invalid stream address");
       if (parsed.data.kind !== STREAM_KIND) throw new Error("Invalid stream kind");
 
-      const request = new NostrRequest(unique([...readRelays, ...(parsed.data.relays ?? [])]));
-      request.onEvent.subscribe((event) => {
-        setStream(parseStreamEvent(event));
-        if (parsed.data.relays) setRelays(parsed.data.relays);
-      });
-      request.start({ kinds: [parsed.data.kind], "#d": [parsed.data.identifier], authors: [parsed.data.pubkey] });
+      const addrRelays = parsed.data.relays ?? [];
+      return replaceableEventLoaderService.requestEvent(
+        unique([...readRelays, ...streamRelays, ...addrRelays]),
+        parsed.data.kind,
+        parsed.data.pubkey,
+        parsed.data.identifier,
+        true
+      );
     } catch (e) {
       console.log(e);
     }
-  }, [naddr]);
+  }, [naddr, streamRelays.join("|")]);
+
+  const streamEvent = useSubject(subject);
+  const stream = useMemo(() => streamEvent && parseStreamEvent(streamEvent), [streamEvent]);
+
+  // refetch the stream from the correct relays when its loaded to ensure we have the latest
+  useEffect(() => {
+    if (stream?.relays) setStreamRelays(stream.relays);
+  }, [stream?.relays]);
 
   if (!stream) return <Spinner />;
   return (
     // add snort and damus relays so zap.stream will always see zaps
-    <AdditionalRelayProvider
-      relays={unique([...relays, "wss://relay.snort.social", "wss://relay.damus.io", "wss://nos.lol"])}
-    >
+    <RelaySelectionProvider additionalDefaults={streamRelays}>
       <StreamPage stream={stream} displayMode={(params.get("displayMode") as ChatDisplayMode) ?? undefined} />
-    </AdditionalRelayProvider>
+    </RelaySelectionProvider>
   );
 }

src/views/streams/stream/stream-chat/index.tsx

@@ -34,11 +34,12 @@ import { useSigningContext } from "../../../../providers/signing-provider";
 import { useTimelineCurserIntersectionCallback } from "../../../../hooks/use-timeline-cursor-intersection-callback";
 import useSubject from "../../../../hooks/use-subject";
 import { useTimelineLoader } from "../../../../hooks/use-timeline-loader";
-import { truncatedId } from "../../../../helpers/nostr-event";
+import { truncatedId } from "../../../../helpers/nostr/event";
 import { css } from "@emotion/react";
 import TopZappers from "./top-zappers";
 import { parseZapEvent } from "../../../../helpers/zaps";
 import { Kind } from "nostr-tools";
+import { useRelaySelectionRelays } from "../../../../providers/relay-selection-provider";
 
 const hideScrollbar = css`
   scrollbar-width: 0;
@@ -57,13 +58,14 @@ export default function StreamChat({
   ...props
 }: CardProps & { stream: ParsedStream; actions?: React.ReactNode; displayMode?: ChatDisplayMode }) {
   const toast = useToast();
-  const contextRelays = useAdditionalRelayContext();
-  const readRelays = useReadRelayUrls(contextRelays);
+  const streamRelays = useRelaySelectionRelays();
   const hostReadRelays = useUserRelays(stream.host)
     .filter((r) => r.mode & RelayMode.READ)
     .map((r) => r.url);
 
-  const timeline = useTimelineLoader(`${truncatedId(stream.event.id)}-chat`, readRelays, {
+  const relays = useMemo(() => unique([...streamRelays, ...hostReadRelays]), [hostReadRelays, streamRelays]);
+
+  const timeline = useTimelineLoader(`${truncatedId(stream.identifier)}-chat`, streamRelays, {
     "#a": [getATag(stream)],
     kinds: [STREAM_CHAT_MESSAGE_KIND, Kind.Zap],
   });
@@ -92,7 +94,7 @@ export default function StreamChat({
       const draft = buildChatMessage(stream, values.content);
       const signed = await requestSignature(draft);
       if (!signed) throw new Error("Failed to sign");
-      nostrPostAction(unique([...contextRelays, ...hostReadRelays]), signed);
+      nostrPostAction(relays, signed);
       reset();
     } catch (e) {
       if (e instanceof Error) toast({ description: e.message, status: "error" });
@@ -181,7 +183,7 @@ export default function StreamChat({
           }}
           onClose={zapModal.onClose}
           initialComment={getValues().content}
-          additionalRelays={contextRelays}
+          additionalRelays={relays}
         />
       )}
     </>

src/views/user/about.tsx

@@ -30,7 +30,7 @@ import { EmbedableContent, embedUrls } from "../../helpers/embeds";
 import { ArrowDownSIcon, ArrowUpSIcon, AtIcon, ExternalLinkIcon, KeyIcon, LightningIcon } from "../../components/icons";
 import { normalizeToBech32 } from "../../helpers/nip19";
 import { Bech32Prefix } from "../../helpers/nip19";
-import { truncatedId } from "../../helpers/nostr-event";
+import { truncatedId } from "../../helpers/nostr/event";
 import { CopyIconButton } from "../../components/copy-icon-button";
 import { QrIconButton } from "./components/share-qr-button";
 import { UserDnsIdentityIcon } from "../../components/user-dns-identity-icon";
@@ -100,8 +100,8 @@ export default function UserAboutTab() {
           alignItems={isMobile ? "flex-start" : "flex-end"}
         >
           <UserAvatar pubkey={pubkey} size={isMobile ? "lg" : "xl"} noProxy />
-          <Box>
-            <Heading>{getUserDisplayName(metadata, pubkey)}</Heading>
+          <Box overflow="hidden">
+            <Heading isTruncated>{getUserDisplayName(metadata, pubkey)}</Heading>
             <UserDnsIdentityIcon pubkey={pubkey} />
           </Box>
         </Flex>
@@ -115,19 +115,7 @@ export default function UserAboutTab() {
           position="absolute"
         />
       </Box>
-      {aboutContent && (
-        <Text whiteSpace="pre-wrap" px="2">
-          {aboutContent.map((part, i) =>
-            typeof part === "string" ? (
-              <Text as="span" key={"part-" + i}>
-                {part}
-              </Text>
-            ) : (
-              React.cloneElement(part, { key: "part-" + i })
-            )
-          )}
-        </Text>
-      )}
+      {aboutContent && <Box whiteSpace="pre">{aboutContent}</Box>}
 
       <Flex gap="2" px="2" direction="column">
         {metadata?.lud16 && (

src/views/user/components/header.tsx

@@ -31,7 +31,9 @@ export default function Header({
     <Flex direction="column" gap="2" px="2" pt="2">
       <Flex gap="2" alignItems="center">
         <UserAvatar pubkey={pubkey} size="sm" noProxy mr="2" />
-        <Heading size="md">{getUserDisplayName(metadata, pubkey)}</Heading>
+        <Heading size="md" isTruncated>
+          {getUserDisplayName(metadata, pubkey)}
+        </Heading>
         <UserDnsIdentityIcon pubkey={pubkey} onlyIcon={isMobile} />
         <Spacer />
         {isSelf && (

src/views/user/components/user-card.tsx

@@ -1,5 +1,5 @@
-import { Box, Flex, FlexProps, Heading, Input, Link } from "@chakra-ui/react";
-import { Link as ReactRouterLink } from "react-router-dom";
+import { Flex, FlexProps, Heading, Link } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
 
 import { useUserMetadata } from "../../../hooks/use-user-metadata";
 import { getUserDisplayName } from "../../../helpers/user-metadata";
@@ -28,7 +28,7 @@ export const UserCard = ({ pubkey, relay, ...props }: UserCardProps) => {
     >
       <UserAvatar pubkey={pubkey} />
       <Flex direction="column" flex={1} overflow="hidden">
-        <Link as={ReactRouterLink} to={`/u/${normalizeToBech32(pubkey, Bech32Prefix.Pubkey)}`}>
+        <Link as={RouterLink} to={`/u/${normalizeToBech32(pubkey, Bech32Prefix.Pubkey)}`}>
           <Heading size="sm" whiteSpace="nowrap" isTruncated>
             {getUserDisplayName(metadata, pubkey)}
           </Heading>

src/views/user/components/user-profile-menu.tsx

@@ -10,7 +10,7 @@ import { RelayMode } from "../../../classes/relay";
 import UserDebugModal from "../../../components/debug-modals/user-debug-modal";
 import { useCopyToClipboard } from "react-use";
 import { useSharableProfileId } from "../../../hooks/use-shareable-profile-id";
-import { truncatedId } from "../../../helpers/nostr-event";
+import { truncatedId } from "../../../helpers/nostr/event";
 
 export const UserProfileMenu = ({
   pubkey,

src/views/user/followers.tsx

@@ -6,7 +6,7 @@ import { UserCard, UserCardProps } from "./components/user-card";
 import { useAdditionalRelayContext } from "../../providers/additional-relay-context";
 import { useReadRelayUrls } from "../../hooks/use-client-relays";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
-import { truncatedId } from "../../helpers/nostr-event";
+import { truncatedId } from "../../helpers/nostr/event";
 import useSubject from "../../hooks/use-subject";
 import { useTimelineCurserIntersectionCallback } from "../../hooks/use-timeline-cursor-intersection-callback";
 import IntersectionObserverProvider, { useRegisterIntersectionEntity } from "../../providers/intersection-observer";

src/views/user/likes.tsx

@@ -2,7 +2,7 @@ import { useRef } from "react";
 import { useOutletContext } from "react-router-dom";
 import { Box, Flex, SkeletonText, Spacer, Text } from "@chakra-ui/react";
 import { Kind } from "nostr-tools";
-import { getReferences, truncatedId } from "../../helpers/nostr-event";
+import { getReferences, truncatedId } from "../../helpers/nostr/event";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { NostrEvent } from "../../types/nostr-event";
 import { useAdditionalRelayContext } from "../../providers/additional-relay-context";

src/views/user/notes.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { Flex, FormControl, FormLabel, Spacer, Switch, useDisclosure } from "@chakra-ui/react";
 import { useOutletContext } from "react-router-dom";
 import { Kind } from "nostr-tools";
-import { isReply, isRepost, truncatedId } from "../../helpers/nostr-event";
+import { isReply, isRepost, truncatedId } from "../../helpers/nostr/event";
 import { useAdditionalRelayContext } from "../../providers/additional-relay-context";
 import { RelayIconStack } from "../../components/relay-icon-stack";
 import { NostrEvent } from "../../types/nostr-event";

src/views/user/reports.tsx

@@ -2,7 +2,7 @@ import { Flex, Text } from "@chakra-ui/react";
 import { useOutletContext } from "react-router-dom";
 import { NoteLink } from "../../components/note-link";
 import { UserLink } from "../../components/user-link";
-import { filterTagsByContentRefs, truncatedId } from "../../helpers/nostr-event";
+import { filterTagsByContentRefs, truncatedId } from "../../helpers/nostr/event";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { isETag, isPTag, NostrEvent } from "../../types/nostr-event";
 import { useAdditionalRelayContext } from "../../providers/additional-relay-context";

src/views/user/streams.tsx

@@ -1,6 +1,6 @@
 import { Flex } from "@chakra-ui/react";
 import { useOutletContext } from "react-router-dom";
-import { truncatedId } from "../../helpers/nostr-event";
+import { truncatedId } from "../../helpers/nostr/event";
 import { useAdditionalRelayContext } from "../../providers/additional-relay-context";
 import TimelineActionAndStatus from "../../components/timeline-page/timeline-action-and-status";
 import IntersectionObserverProvider from "../../providers/intersection-observer";

src/views/user/zaps.tsx

@@ -8,7 +8,7 @@ import { NoteLink } from "../../components/note-link";
 import { UserAvatarLink } from "../../components/user-avatar-link";
 import { UserLink } from "../../components/user-link";
 import { readablizeSats } from "../../helpers/bolt11";
-import { truncatedId } from "../../helpers/nostr-event";
+import { truncatedId } from "../../helpers/nostr/event";
 import { isProfileZap, isNoteZap, parseZapEvent, totalZaps } from "../../helpers/zaps";
 import { useTimelineLoader } from "../../hooks/use-timeline-loader";
 import { NostrEvent } from "../../types/nostr-event";