feat: show quote note id when loading

feat: try load quote note from other relays

packages/app/src/Components/Copy/Copy.tsx

@@ -22,7 +22,12 @@ export default function Copy({ text, maxSize = 32, className, showText, mask }:
       : displayText;
 
   return (
-    <div className={classNames("copy flex pointer g8 items-center", className)} onClick={() => copy(text)}>
+    <div
+      className={classNames("copy flex pointer g8 items-center", className)}
+      onClick={e => {
+        e.stopPropagation();
+        copy(text);
+      }}>
       {(showText ?? true) && <span className="copy-body">{trimmed}</span>}
       <span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
         {copied ? <Icon name="check" size={14} /> : <Icon name="copy-solid" size={14} />}

packages/app/src/Components/Event/Note/NoteQuote.tsx

@@ -1,8 +1,13 @@
-import { NostrLink } from "@snort/system";
+import { dedupe, sanitizeRelayUrl } from "@snort/shared";
+import { NostrLink, NostrPrefix } from "@snort/system";
 import { useEventFeed } from "@snort/system-react";
+import { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
+import AsyncButton from "@/Components/Button/AsyncButton";
+import Copy from "@/Components/Copy/Copy";
 import Note from "@/Components/Event/EventComponent";
-import PageSpinner from "@/Components/PageSpinner";
+import Spinner from "@/Components/Icons/Spinner";
 
 const options = {
   showFooter: false,
@@ -10,11 +15,52 @@ const options = {
 };
 
 export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: number }) {
-  const ev = useEventFeed(link);
+  const [tryLink, setLink] = useState<NostrLink>(link);
+  const [tryRelay, setTryRelay] = useState("");
+  const { formatMessage } = useIntl();
+
+  const ev = useEventFeed(tryLink);
   if (!ev)
     return (
-      <div className="note-quote flex items-center justify-center h-[110px]">
-        <PageSpinner />
+      <div className="note-quote flex flex-col gap-2">
+        <Spinner />
+        <div>
+          <FormattedMessage
+            defaultMessage="Looking for: {noteId}"
+            values={{
+              noteId: <Copy text={tryLink.encode()} />,
+            }}
+          />
+        </div>
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={tryRelay}
+            onChange={e => setTryRelay(e.target.value)}
+            placeholder={formatMessage({ defaultMessage: "Try another relay" })}
+          />
+          <AsyncButton
+            onClick={() => {
+              const u = sanitizeRelayUrl(tryRelay);
+              if (u) {
+                const relays = tryLink.relays ?? [];
+                relays.push(u);
+                setLink(
+                  new NostrLink(
+                    tryLink.type !== NostrPrefix.Address ? NostrPrefix.Event : NostrPrefix.Address,
+                    tryLink.id,
+                    tryLink.kind,
+                    tryLink.author,
+                    dedupe(relays),
+                    tryLink.marker,
+                  ),
+                );
+                setTryRelay("");
+              }
+            }}>
+            <FormattedMessage defaultMessage="Add" />
+          </AsyncButton>
+        </div>
       </div>
     );
   return <Note data={ev} className="note-quote" depth={(depth ?? 0) + 1} options={options} />;