feat: show replies count

packages/app/src/Element/Event/Note.tsx

@@ -1,6 +1,6 @@
 import "./Note.css";
 import React from "react";
-import { EventKind, TaggedNostrEvent } from "@snort/system";
+import { EventKind, NostrEvent, TaggedNostrEvent } from "@snort/system";
 import { NostrFileElement } from "Element/Event/NostrFileHeader";
 import ZapstrEmbed from "Element/Embed/ZapstrEmbed";
 import PubkeyList from "Element/Embed/PubkeyList";
@@ -20,6 +20,7 @@ export interface NoteProps {
   onClick?: (e: TaggedNostrEvent) => void;
   depth?: number;
   searchedValue?: string;
+  threadChains?: Map<string, Array<NostrEvent>>;
   options?: {
     showHeader?: boolean;
     showContextMenu?: boolean;

packages/app/src/Element/Event/NoteFooter.tsx

@@ -40,6 +40,7 @@ export interface NoteFooterProps {
   reposts: TaggedNostrEvent[];
   zaps: ParsedZap[];
   positive: TaggedNostrEvent[];
+  replies?: number;
   ev: TaggedNostrEvent;
 }
 
@@ -249,7 +250,7 @@ export default function NoteFooter(props: NoteFooterProps) {
         className={note.show ? "reacted" : ""}
         iconName="reply"
         title={formatMessage({ defaultMessage: "Reply" })}
-        value={0}
+        value={props.replies ?? 0}
         onClick={async () => handleReplyButtonClick()}
       />
     );

packages/app/src/Element/Event/NoteInner.tsx

@@ -23,6 +23,7 @@ import Reactions from "./Reactions";
 import HiddenNote from "./HiddenNote";
 import { NoteProps } from "./Note";
 import { useEventReactions } from "Hooks/useEventReactions";
+import { chainKey } from "Hooks/useThreadContext";
 
 export function NoteInner(props: NoteProps) {
   const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
@@ -306,7 +307,15 @@ export function NoteInner(props: NoteProps) {
             </div>
           )}
         </div>
-        {options.showFooter && <NoteFooter ev={ev} positive={reactions.positive} reposts={reposts} zaps={zaps} />}
+        {options.showFooter && (
+          <NoteFooter
+            ev={ev}
+            positive={reactions.positive}
+            reposts={reposts}
+            zaps={zaps}
+            replies={props.threadChains?.get(chainKey(ev))?.length}
+          />
+        )}
         <Reactions
           show={showReactions}
           setShow={setShowReactions}

packages/app/src/Element/Event/Thread.tsx

@@ -50,6 +50,7 @@ const Subthread = ({ active, notes, related, chains, onNavigate }: SubthreadProp
             key={a.id}
             related={related}
             onClick={onNavigate}
+            threadChains={chains}
           />
           <div className="line-container"></div>
         </div>
@@ -94,6 +95,7 @@ const ThreadNote = ({ active, note, isLast, isLastSubthread, related, chains, on
           key={note.id}
           related={related}
           onClick={onNavigate}
+          threadChains={chains}
         />
         <div className="line-container"></div>
       </div>
@@ -164,6 +166,7 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
           data={first}
           key={first.id}
           related={related}
+          threadChains={chains}
         />
         <div className="line-container"></div>
       </div>
@@ -196,6 +199,7 @@ const TierThree = ({ active, isLastSubthread, notes, related, chains, onNavigate
               key={r.id}
               related={related}
               onClick={onNavigate}
+              threadChains={chains}
             />
             <div className="line-container"></div>
           </div>
@@ -251,6 +255,7 @@ export function Thread(props: { onBack?: () => void; disableSpotlight?: boolean
           related={getLinkReactions(thread.reactions, NostrLink.fromEvent(note))}
           options={{ showReactionsLink: true, showMediaSpotlight: !props.disableSpotlight }}
           onClick={navigateThread}
+          threadChains={thread.chains}
         />
       );
     } else {