show pending relays in publish log

src/classes/nostr-publish-action.ts

@@ -6,7 +6,7 @@ import createDefer from "./deferred";
 import { PersistentSubject } from "./subject";
 import ControlledObservable from "./controlled-observable";
 
-type Result = { relay: AbstractRelay; success: boolean; message: string };
+export type PublishResult = { relay: AbstractRelay; success: boolean; message: string };
 
 export default class NostrPublishAction {
   id = nanoid();
@@ -14,14 +14,15 @@ export default class NostrPublishAction {
   relays: string[];
   event: NostrEvent;
 
-  results = new PersistentSubject<Result[]>([]);
+  results = new PersistentSubject<PublishResult[]>([]);
+  completePromise = createDefer();
 
-  onResult = new ControlledObservable<Result>();
-  onComplete = createDefer<Result[]>();
+  /** @deprecated */
+  onResult = new ControlledObservable<PublishResult>();
 
   private remaining = new Set<AbstractRelay>();
 
-  constructor(label: string, relays: Iterable<string>, event: NostrEvent, timeout: number = 5000) {
+  constructor(label: string, relays: Iterable<string>, event: NostrEvent, timeout: number = 10_000) {
     this.label = label;
     this.relays = Array.from(relays);
     this.event = event;
@@ -42,12 +43,15 @@ export default class NostrPublishAction {
   }
 
   private handleResult(id: string, success: boolean, message: string, relay: AbstractRelay) {
-    const result: Result = { relay, success, message };
-    this.results.next([...this.results.value, result]);
+    const result: PublishResult = { relay, success, message };
+    this.results.next([...this.results.value.filter((r) => r.relay !== relay), result]);
     this.onResult.next(result);
 
     this.remaining.delete(relay);
-    if (this.remaining.size === 0) this.onComplete.resolve(this.results.value);
+
+    if (this.remaining.size === 0) {
+      this.completePromise.resolve();
+    }
   }
 
   private handleTimeout() {

src/components/publish-details.tsx

@@ -1,7 +1,18 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, FlexProps, Link, Progress } from "@chakra-ui/react";
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Box,
+  Flex,
+  FlexProps,
+  Link,
+  Progress,
+  Spinner,
+} from "@chakra-ui/react";
 import { Link as RouterLink } from "react-router-dom";
 
-import NostrPublishAction from "../classes/nostr-publish-action";
+import NostrPublishAction, { PublishResult } from "../classes/nostr-publish-action";
 import useSubject from "../hooks/use-subject";
 import { RelayPaidTag } from "../views/relays/components/relay-card";
 import { EmbedEvent } from "./embed-event";
@@ -10,27 +21,52 @@ export type PostResultsProps = {
   pub: NostrPublishAction;
 };
 
+function PublishResultRow({ result }: { result: PublishResult }) {
+  return (
+    <Alert status={result.success ? "success" : "warning"}>
+      <AlertIcon />
+      <Box>
+        <AlertTitle>
+          <Link as={RouterLink} to={`/r/${encodeURIComponent(result.relay.url)}`}>
+            {result.relay.url}
+          </Link>
+          <RelayPaidTag url={result.relay.url} />
+        </AlertTitle>
+        {result.message && <AlertDescription>{result.message}</AlertDescription>}
+      </Box>
+    </Alert>
+  );
+}
+
 export function PublishDetails({ pub }: PostResultsProps & Omit<FlexProps, "children">) {
   const results = useSubject(pub.results);
 
+  const relayResults: Record<string, PublishResult | undefined> = {};
+  for (const url of pub.relays) {
+    relayResults[url] = results.find((r) => r.relay.url === url);
+  }
+
   return (
     <Flex direction="column" gap="2">
       <EmbedEvent event={pub.event} />
       <Progress value={(results.length / pub.relays.length) * 100} size="lg" hasStripe />
-      {results.map(({ success, message, relay }) => (
-        <Alert key={relay.url} status={success ? "success" : "warning"}>
-          <AlertIcon />
-          <Box>
-            <AlertTitle>
-              <Link as={RouterLink} to={`/r/${encodeURIComponent(relay.url)}`}>
-                {relay.url}
-              </Link>
-              <RelayPaidTag url={relay.url} />
-            </AlertTitle>
-            {message && <AlertDescription>{message}</AlertDescription>}
-          </Box>
-        </Alert>
-      ))}
+      {Object.entries(relayResults).map(([url, result]) =>
+        result ? (
+          <PublishResultRow key={url} result={result} />
+        ) : (
+          <Alert status="info">
+            <Spinner mr="2" />
+            <Box>
+              <AlertTitle>
+                <Link as={RouterLink} to={`/r/${encodeURIComponent(url)}`}>
+                  {url}
+                </Link>
+                <RelayPaidTag url={url} />
+              </AlertTitle>
+            </Box>
+          </Alert>
+        ),
+      )}
     </Flex>
   );
 }

src/components/publish-log.tsx

@@ -64,7 +64,7 @@ function PublishAction({ pub }: { pub: NostrPublishAction }) {
         <PublishActionStatusTag ml="auto" pub={pub} />
       </Flex>
       {details.isOpen && (
-        <Modal isOpen onClose={details.onClose} size="xl">
+        <Modal isOpen onClose={details.onClose} size="2xl">
           <ModalOverlay />
           <ModalContent>
             <ModalHeader pt="4" px="4" pb="0">