style(post): collapse reply if it's deleted or removed

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

@@ -202,7 +202,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
           </span>
         )}
       </span>
-      <PostMenuDesktop post={post} />
+      {!(removed || deleted) && <PostMenuDesktop post={post} />}
       {cid &&
         parentCid &&
         replies &&
@@ -298,7 +298,7 @@ const PostMessage = ({ post }: PostProps) => {
 
   return (
     <blockquote className={`${styles.postMessage} ${isRules && styles.rulesMessage}`}>
-      {isReply && !(removed || deleted) && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
+      {isReply && state !== 'failed' && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
       {removed ? (
         reason ? (
           <>
@@ -397,14 +397,14 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
     <div className={styles.replyDesktop}>
       <div className={styles.sideArrows}>{'>>'}</div>
       <div
-        className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
+        className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${(hidden || removed || deleted) && styles.postDesktopHidden}`}
         data-cid={cid}
         data-author-address={author?.shortAddress}
         data-post-cid={postCid}
       >
         <PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
         {link && !hidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
-        {!hidden && <PostMessage post={post} />}
+        {!(hidden || removed || deleted) && <PostMessage post={post} />}
       </div>
     </div>
   );

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

@@ -130,7 +130,7 @@ const BlockBoardButton = ({ address }: { address: string }) => {
 };
 
 const PostMenuMobile = ({ post }: { post: Comment }) => {
-  const { author, cid, isDescription, isRules, link, parentCid, postCid, subplebbitAddress } = post || {};
+  const { author, cid, deleted, isDescription, isRules, link, parentCid, postCid, removed, subplebbitAddress } = post || {};
   const { isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: author?.address, subplebbitAddress });
   const commentMediaInfo = getCommentMediaInfo(post);
   const { thumbnail, type, url } = commentMediaInfo || {};
@@ -159,6 +159,8 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
   const isInBoardView = isBoardView(useLocation().pathname, useParams());
 
   return (
+    <>
+      {!(deleted || removed) && (
         <>
           <span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}>
             ...
@@ -178,6 +180,8 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
               </FloatingFocusManager>,
               document.body,
             )}
+        </>
+      )}
       {(isAccountMod || isAccountCommentAuthor) && cid && (
         <span className={styles.checkbox}>
           <EditMenu post={post} />

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

@@ -314,7 +314,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
   if (editedComment) {
     post = editedComment;
   }
-  const { author, cid, postCid, subplebbitAddress } = post || {};
+  const { author, cid, deleted, postCid, removed, subplebbitAddress } = post || {};
   const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
   const { hidden } = useHide({ cid });
 
@@ -322,13 +322,13 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
     <div className={styles.replyMobile}>
       <div className={styles.reply}>
         <div
-          className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
+          className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${(hidden || deleted || removed) && styles.postDesktopHidden}`}
           data-cid={cid}
           data-author-address={author?.shortAddress}
           data-post-cid={postCid}
         >
           <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
-          {!hidden && <PostMessageMobile post={post} />}
+          {!hidden && !deleted && !removed && <PostMessageMobile post={post} />}
           <ReplyBacklinks post={reply} />
         </div>
       </div>