refactor: use post number instead of shortCid in reply modal and quote previews

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

@@ -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, postCid, subplebbitAddress);
+        : openReplyModal && openReplyModal(cid, post?.number, postCid, subplebbitAddress);
   };
 
   return (

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

@@ -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, postCid, subplebbitAddress);
+        : openReplyModal && openReplyModal(cid, post?.number, postCid, subplebbitAddress);
   };
 
   return (

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

@@ -3,7 +3,6 @@ import { useLocation, useParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subplebbits';
-import Plebbit from '@plebbit/plebbit-js';
 import { formatMarkdown } from '../../lib/utils/post-utils';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
@@ -25,12 +24,14 @@ interface ReplyModalProps {
   closeModal: () => void;
   showReplyModal: boolean;
   parentCid: string;
+  parentNumber: number | null;
+  postNumber: number | null;
   postCid: string;
   scrollY: number;
   subplebbitAddress: string;
 }
 
-const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, subplebbitAddress }: ReplyModalProps) => {
+const ReplyModal = ({ closeModal, showReplyModal, parentCid, parentNumber, postNumber, postCid, scrollY, subplebbitAddress }: ReplyModalProps) => {
   const { t } = useTranslation();
   const { setPublishReplyOptions, publishReply, resetPublishReplyOptions, replyIndex } = usePublishReply({
     cid: parentCid,
@@ -178,7 +179,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
     }
   }, []);
 
-  const contentPrefix = `>>${parentCid && Plebbit.getShortCid({ cid: parentCid })}\n`;
+  const contentPrefix = `>>${parentNumber ?? '?'}\n`;
 
   // enable spellcheck after the prefix is set
   useEffect(() => {
@@ -259,7 +260,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
       }}
     >
       <div className={`replyModalHandle ${styles.title}`} {...(!isMobile ? bind() : {})}>
-        {t('reply_to_cid', { cid: `CID:${parentCid && Plebbit.getShortCid({ cid: parentCid })}`, interpolation: { escapeValue: false } })}
+        {t('reply_to_no', { no: postNumber ?? '?' })}
         <button
           className={styles.closeIcon}
           onClick={(e) => {

src/components/reply-quote-preview/reply-quote-preview.tsx

@@ -144,7 +144,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
         onClick={(e) => handleClick(e, backlinkReply?.cid, backlinkReply?.subplebbitAddress)}
       >
         {'>>'}
-        {backlinkReply?.shortCid}
+        {backlinkReply?.number ?? '?'}
       </Link>
       {hoveredCid === backlinkReply?.cid &&
         outOfViewCid === backlinkReply?.cid &&
@@ -172,7 +172,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
         onMouseLeave={() => handleMouseLeave(quotelinkReply?.cid)}
         onClick={(e) => handleClick(e, quotelinkReply?.cid, quotelinkReply?.subplebbitAddress)}
       >
-        {quotelinkReply?.shortCid && `>>${quotelinkReply?.shortCid}`}
+        {`>>${quotelinkReply?.number ?? '?'}`}
         {quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
       </Link>
       <br />
@@ -251,9 +251,9 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
         onMouseOver={() => handleMouseOver(backlinkReply?.cid)}
         onMouseLeave={() => handleMouseLeave(backlinkReply?.cid)}
       >
-        {backlinkReply?.shortCid && `>>${backlinkReply?.shortCid}`}
+        {`>>${backlinkReply?.number ?? '?'}`}
       </span>
-      {backlinkReply?.shortCid &&
+      {backlinkReply?.number &&
         (() => {
           const backlinkBoardPath = backlinkReply?.subplebbitAddress ? getBoardPath(backlinkReply.subplebbitAddress, defaultSubplebbits) : undefined;
           const backlinkRoute = backlinkReply?.cid ? (backlinkBoardPath ? `/${backlinkBoardPath}/thread/${backlinkReply.cid}` : `/thread/${backlinkReply.cid}`) : '#';
@@ -285,10 +285,10 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
         onMouseOver={() => handleMouseOver(quotelinkReply?.cid)}
         onMouseLeave={() => handleMouseLeave(quotelinkReply?.cid)}
       >
-        {quotelinkReply?.shortCid && `>>${quotelinkReply?.shortCid}`}
+        {`>>${quotelinkReply?.number ?? '?'}`}
         {quotelinkReply?.author?.address === account?.author?.address && ' (You)'}
       </span>
-      {quotelinkReply?.shortCid &&
+      {quotelinkReply?.number &&
         (() => {
           const quotelinkBoardPath = quotelinkReply?.subplebbitAddress ? getBoardPath(quotelinkReply.subplebbitAddress, defaultSubplebbits) : undefined;
           const quotelinkRoute = quotelinkReply?.cid