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

src/app.tsx

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

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

src/hooks/use-reply-modal.ts

@@ -5,6 +5,7 @@ import useSelectedTextStore from '../stores/use-selected-text-store';
 const useReplyModal = () => {
   const [showReplyModal, setShowReplyModal] = useState(false);
   const [activeCid, setActiveCid] = useState<string | null>(null);
+  const [parentNumber, setParentNumber] = useState<number | null>(null);
   const [threadCid, setThreadCid] = useState<string | null>(null);
   const [subplebbitAddress, setSubplebbitAddress] = useState<string | null>(null);
   const { resetSelectedText, setSelectedText } = useSelectedTextStore();
@@ -16,6 +17,7 @@ const useReplyModal = () => {
   const closeModal = useCallback(() => {
     resetSelectedText();
     setActiveCid(null);
+    setParentNumber(null);
     setShowReplyModal(false);
   }, [resetSelectedText, setActiveCid, setShowReplyModal]);
 
@@ -24,7 +26,7 @@ const useReplyModal = () => {
     if (text) setSelectedText(`>${text}\n`);
   };
 
-  const openReplyModal = (parentCid: string, postCid: string, subplebbitAddress: string) => {
+  const openReplyModal = (parentCid: string, parentNum: number | undefined, postCid: string, subplebbitAddress: string) => {
     getSelectedText();
 
     if (isMobile) {
@@ -36,12 +38,13 @@ const useReplyModal = () => {
       return;
     }
     setActiveCid(parentCid);
+    setParentNumber(parentNum ?? null);
     setThreadCid(postCid);
     setShowReplyModal(true);
     setSubplebbitAddress(subplebbitAddress);
   };
 
-  return { activeCid, threadCid, closeModal, openReplyModal, scrollY, showReplyModal, subplebbitAddress };
+  return { activeCid, parentNumber, threadCid, closeModal, openReplyModal, scrollY, showReplyModal, subplebbitAddress };
 };
 
 export default useReplyModal;

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

@@ -4,16 +4,18 @@ import useSelectedTextStore from './use-selected-text-store';
 interface ReplyModalState {
   showReplyModal: boolean;
   activeCid: string | null;
+  parentNumber: number | null;
   threadCid: string | null;
   subplebbitAddress: string | null;
   scrollY: number;
   closeModal: () => void;
-  openReplyModal: (parentCid: string, postCid: string, subplebbitAddress: string) => void;
+  openReplyModal: (parentCid: string, parentNumber: number | undefined, postCid: string, subplebbitAddress: string) => void;
 }
 
 const useReplyModalStore = create<ReplyModalState>((set, get) => ({
   showReplyModal: false,
   activeCid: null,
+  parentNumber: null,
   threadCid: null,
   subplebbitAddress: null,
   scrollY: 0,
@@ -24,10 +26,11 @@ const useReplyModalStore = create<ReplyModalState>((set, get) => ({
     set({
       showReplyModal: false,
       activeCid: null,
+      parentNumber: null,
     });
   },
 
-  openReplyModal: (parentCid, postCid, subplebbitAddress) => {
+  openReplyModal: (parentCid, parentNumber, postCid, 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.');
@@ -46,6 +49,7 @@ const useReplyModalStore = create<ReplyModalState>((set, get) => ({
 
     set({
       activeCid: parentCid,
+      parentNumber: parentNumber ?? null,
       threadCid: postCid,
       showReplyModal: true,
       subplebbitAddress,