pass threadNumber to reply modal store

src/app.tsx

@@ -113,7 +113,7 @@ const GlobalLayout = () => {
     }
   }, [theme]);
 
-  const { activeCid, parentNumber, threadCid, subplebbitAddress, closeModal, showReplyModal, scrollY } = useReplyModalStore();
+  const { activeCid, parentNumber, threadNumber, threadCid, subplebbitAddress, closeModal, showReplyModal, scrollY } = useReplyModalStore();
 
   const location = useLocation();
   const isInSettingsView = location.pathname.endsWith('/settings');
@@ -126,6 +126,7 @@ const GlobalLayout = () => {
           closeModal={closeModal}
           parentCid={activeCid}
           parentNumber={parentNumber}
+          threadNumber={threadNumber}
           postCid={threadCid}
           scrollY={scrollY}
           showReplyModal={showReplyModal}

src/components/post-desktop/post-desktop.tsx

@@ -53,7 +53,7 @@ const useShowOmittedReplies = create<ShowOmittedRepliesState>((set) => ({
     })),
 }));
 
-const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
+const PostInfo = ({ post, postReplyCount = 0, roles, isHidden, threadNumber }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, deleted, locked, pinned, parentCid, postCid, reason, removed, state, subplebbitAddress, timestamp } = post || {};
   const title = post?.title?.trim();
@@ -94,7 +94,7 @@ const PostInfo = ({ post, postReplyCount = 0, roles, isHidden }: PostProps) => {
         ? isReply
           ? alert(t('this_reply_was_removed'))
           : alert(t('this_thread_was_removed'))
-        : openReplyModal && openReplyModal(cid, post?.number, postCid, subplebbitAddress);
+        : openReplyModal && openReplyModal(cid, post?.number, postCid, threadNumber, subplebbitAddress);
   };
 
   return (
@@ -325,7 +325,7 @@ const PostMedia = ({
   );
 };
 
-const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
+const Reply = ({ postReplyCount, reply, roles, threadNumber }: PostProps) => {
   let post = reply;
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: reply });
@@ -353,7 +353,7 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
     <div className={styles.replyDesktop}>
       <div className={styles.sideArrows}>{'>>'}</div>
       <div className={`${styles.reply} ${isRouteLinkToReply && styles.highlight}`} data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
-        <PostInfo post={post} postReplyCount={postReplyCount} roles={roles} isHidden={hidden} />
+        <PostInfo post={post} postReplyCount={postReplyCount} roles={roles} isHidden={hidden} threadNumber={threadNumber} />
         {link && !hidden && !(deleted || removed) && isValidURL(link) && (
           <PostMedia
             commentMediaInfo={commentMediaInfo}
@@ -469,7 +469,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
               isInSubscriptionsView={isInSubscriptionsView}
             />
           )}
-          <PostInfo isHidden={hidden} post={post} postReplyCount={replyCount} roles={roles} />
+          <PostInfo isHidden={hidden} post={post} postReplyCount={replyCount} roles={roles} threadNumber={post?.number} />
           {!isHidden && !content && !(deleted || removed) && <div className={styles.spacer} />}
           {!isHidden && <CommentContent comment={post} />}
         </div>
@@ -506,7 +506,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
             data={filteredReplies}
             itemContent={(index, reply) => (
               <div className={styles.replyContainer}>
-                <Reply reply={reply} roles={roles} postReplyCount={replyCount} />
+                <Reply reply={reply} roles={roles} postReplyCount={replyCount} threadNumber={post?.number} />
               </div>
             )}
             useWindowScroll={true}
@@ -525,7 +525,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
           replyCount <= 25 &&
           filteredReplies.map((reply, index) => (
             <div key={index} className={styles.replyContainer}>
-              <Reply reply={reply} roles={roles} postReplyCount={replyCount} />
+              <Reply reply={reply} roles={roles} postReplyCount={replyCount} threadNumber={post?.number} />
             </div>
           ))}
         {/* Non-virtualized rendering for board view (last 5 replies or show omitted) */}
@@ -537,7 +537,7 @@ const PostDesktop = ({ post, roles, showAllReplies, showReplies = true }: PostPr
           showReplies &&
           (showOmittedReplies[cid] ? filteredReplies : filteredReplies.slice(-5)).map((reply, index) => (
             <div key={index} className={styles.replyContainer}>
-              <Reply reply={reply} roles={roles} postReplyCount={replyCount} />
+              <Reply reply={reply} roles={roles} postReplyCount={replyCount} threadNumber={post?.number} />
             </div>
           ))}
       </div>

src/components/post-mobile/post-mobile.tsx

@@ -32,7 +32,7 @@ import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
 // Store scroll position for replies virtuoso across navigations
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
+const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: PostProps) => {
   const { t } = useTranslation();
   const defaultSubplebbits = useDefaultSubplebbits();
   const { author, cid, deleted, link, linkHeight, linkWidth, locked, parentCid, pinned, postCid, reason, removed, state, subplebbitAddress, timestamp, thumbnailUrl } =
@@ -78,7 +78,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles }: PostProps) => {
         ? isReply
           ? alert(t('this_reply_was_removed'))
           : alert(t('this_thread_was_removed'))
-        : openReplyModal && openReplyModal(cid, post?.number, postCid, subplebbitAddress);
+        : openReplyModal && openReplyModal(cid, post?.number, postCid, threadNumber, subplebbitAddress);
   };
 
   return (
@@ -249,7 +249,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
   );
 };
 
-const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
+const Reply = ({ postReplyCount, reply, roles, threadNumber }: PostProps) => {
   let post = reply;
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: reply });
@@ -273,7 +273,7 @@ const Reply = ({ postReplyCount, reply, roles }: PostProps) => {
           data-author-address={author?.shortAddress}
           data-post-cid={postCid}
         >
-          <PostInfoAndMedia post={post} postReplyCount={postReplyCount} roles={roles} />
+          <PostInfoAndMedia post={post} postReplyCount={postReplyCount} roles={roles} threadNumber={threadNumber} />
           {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
           <ReplyBacklinks post={reply} />
         </div>
@@ -359,7 +359,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
                 data-post-cid={postCid}
               >
                 {shouldShowSnow() && <img src='assets/xmashat.gif' className={styles.xmasHat} alt='' />}
-                <PostInfoAndMedia post={post} postReplyCount={replyCount} roles={roles} />
+                <PostInfoAndMedia post={post} postReplyCount={replyCount} roles={roles} threadNumber={post?.number} />
                 <CommentContent comment={post} />
               </div>
               {!isInPostView && !isInPendingPostView && showReplies && (
@@ -382,7 +382,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
                 data={filteredReplies}
                 itemContent={(index, reply) => (
                   <div className={styles.replyContainer}>
-                    <Reply postReplyCount={replyCount} reply={reply} roles={roles} />
+                    <Reply postReplyCount={replyCount} reply={reply} roles={roles} threadNumber={post?.number} />
                   </div>
                 )}
                 useWindowScroll={true}
@@ -401,7 +401,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
               replyCount <= 25 &&
               filteredReplies.map((reply, index) => (
                 <div key={index} className={styles.replyContainer}>
-                  <Reply postReplyCount={replyCount} reply={reply} roles={roles} />
+                  <Reply postReplyCount={replyCount} reply={reply} roles={roles} threadNumber={post?.number} />
                 </div>
               ))}
             {/* Non-virtualized rendering for board view (last 5 replies) */}
@@ -412,7 +412,7 @@ const PostMobile = ({ post, roles, showAllReplies, showReplies = true }: PostPro
               showReplies &&
               filteredReplies.slice(-5).map((reply, index) => (
                 <div key={index} className={styles.replyContainer}>
-                  <Reply postReplyCount={replyCount} reply={reply} roles={roles} />
+                  <Reply postReplyCount={replyCount} reply={reply} roles={roles} threadNumber={post?.number} />
                 </div>
               ))}
           </div>

src/components/reply-modal/reply-modal.tsx

@@ -25,13 +25,13 @@ interface ReplyModalProps {
   showReplyModal: boolean;
   parentCid: string;
   parentNumber: number | null;
-  postNumber: number | null;
+  threadNumber: number | null;
   postCid: string;
   scrollY: number;
   subplebbitAddress: string;
 }
 
-const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, postNumber, postCid, scrollY, subplebbitAddress }: ReplyModalProps) => {
+const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, threadNumber, postCid, scrollY, subplebbitAddress }: ReplyModalProps) => {
   const { t } = useTranslation();
   const { setPublishReplyOptions, publishReply, resetPublishReplyOptions, replyIndex } = usePublishReply({
     cid: parentCid,
@@ -260,7 +260,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, postN
       }}
     >
       <div className={`replyModalHandle ${styles.title}`} {...(!isMobile ? bind() : {})}>
-        {t('reply_to_no', { no: postNumber ?? '?' })}
+        {t('reply_to_no', { no: threadNumber ?? '?' })}
         <button
           className={styles.closeIcon}
           onClick={(e) => {

src/stores/use-reply-modal-store.ts

@@ -5,17 +5,19 @@ interface ReplyModalState {
   showReplyModal: boolean;
   activeCid: string | null;
   parentNumber: number | null;
+  threadNumber: number | null;
   threadCid: string | null;
   subplebbitAddress: string | null;
   scrollY: number;
   closeModal: () => void;
-  openReplyModal: (parentCid: string, parentNumber: number | undefined, postCid: string, subplebbitAddress: string) => void;
+  openReplyModal: (parentCid: string, parentNumber: number | undefined, postCid: string, threadNumber: number | undefined, subplebbitAddress: string) => void;
 }
 
 const useReplyModalStore = create<ReplyModalState>((set, get) => ({
   showReplyModal: false,
   activeCid: null,
   parentNumber: null,
+  threadNumber: null,
   threadCid: null,
   subplebbitAddress: null,
   scrollY: 0,
@@ -27,10 +29,11 @@ const useReplyModalStore = create<ReplyModalState>((set, get) => ({
       showReplyModal: false,
       activeCid: null,
       parentNumber: null,
+      threadNumber: null,
     });
   },
 
-  openReplyModal: (parentCid, parentNumber, postCid, subplebbitAddress) => {
+  openReplyModal: (parentCid, parentNumber, postCid, threadNumber, subplebbitAddress) => {
     // Don't update if already open with different parent
     if (get().activeCid && get().activeCid !== parentCid) {
       window.alert('Multiple quotes are not possible on 5chan for the time being, because of a protocol limitation. Please reply to one post at a time.');
@@ -50,6 +53,7 @@ const useReplyModalStore = create<ReplyModalState>((set, get) => ({
     set({
       activeCid: parentCid,
       parentNumber: parentNumber ?? null,
+      threadNumber: threadNumber ?? null,
       threadCid: postCid,
       showReplyModal: true,
       subplebbitAddress,

src/views/post/post.tsx

@@ -21,6 +21,7 @@ export interface PostProps {
   roles?: Role[];
   showAllReplies?: boolean;
   showReplies?: boolean;
+  threadNumber?: number;
 }
 
 export const Post = ({ post, showAllReplies = false, showReplies = true }: PostProps) => {