feat(posts): add purge UI feedback for mods

Show Purged author/ID, red content message, and file-deleted media when
post.commentModeration.purged is true. Mirrors removal UI pattern.

src/components/comment-content/comment-content.tsx

@@ -71,6 +71,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
   const isMobile = useIsMobile();
 
   const { cid, content, deleted, edit, original, parentCid, postCid, pendingApproval, quotedCids, reason, removed, state, subplebbitAddress } = post || {};
+  const purged = post?.commentModeration?.purged;
   const banned = !!post?.author?.subplebbit?.banExpiresAt;
 
   const [showFullComment, setShowFullComment] = useState(false);
@@ -127,11 +128,13 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
     <blockquote className={`${styles.postMessage} ${!isReply && isMobile && styles.clampLines}`}>
       {isReply &&
         !hasFailedState &&
-        !(deleted || removed) &&
+        !(deleted || removed || purged) &&
         (filteredQuotedCids.length > 0
           ? filteredQuotedCids.map((cid: string) => <QuotedCidLink key={cid} cid={cid} postCid={postCid} />)
           : shouldShowReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} quotelinkNumber={parentNumber} />)}
-      {removed ? (
+      {purged ? (
+        <span className={styles.redEditMessage}>{capitalize(t('this_post_was_purged'))}</span>
+      ) : removed ? (
         reason ? (
           <>
             <span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>

src/components/comment-media/comment-media.tsx

@@ -20,13 +20,26 @@ interface MediaProps {
   linkHeight?: number;
   linkWidth?: number;
   parentCid?: string;
+  purged?: boolean;
   removed?: boolean;
   spoiler?: boolean;
   showThumbnail?: boolean;
   setShowThumbnail: (showThumbnail: boolean) => void;
 }
 
-const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isFloatingEmbed, isOutOfFeed, isReply, removed, spoiler, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({
+  commentMediaInfo,
+  deleted,
+  displayHeight,
+  displayWidth,
+  isFloatingEmbed,
+  isOutOfFeed,
+  isReply,
+  purged,
+  removed,
+  spoiler,
+  setShowThumbnail,
+}: MediaProps) => {
   const isMobile = useIsMobile();
   const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
 
@@ -133,7 +146,7 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
       )
     ) : null;
 
-  return deleted || removed ? (
+  return deleted || removed || purged ? (
     <img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='File deleted' />
   ) : spoiler ? (
     <img
@@ -381,6 +394,7 @@ const CommentMedia = ({
   linkHeight,
   linkWidth,
   parentCid,
+  purged,
   removed,
   showThumbnail,
   setShowThumbnail,
@@ -450,6 +464,7 @@ const CommentMedia = ({
                 isFloatingEmbed={isFloatingEmbed}
                 isOutOfFeed={isOutOfFeed}
                 deleted={deleted}
+                purged={purged}
                 removed={removed}
                 spoiler={spoiler}
                 setShowThumbnail={setShowThumbnail}

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

@@ -93,6 +93,7 @@ const PostInfo = ({
 }: PostProps & { directRepliesByParentCid?: Map<string, Comment[]> }) => {
   const { t } = useTranslation();
   const { author, cid, deleted, locked, pinned, parentCid, postCid, reason, removed, state, subplebbitAddress, timestamp } = post || {};
+  const purged = post?.commentModeration?.purged;
   const title = post?.title?.trim();
   const { address, shortAddress } = author || {};
   const displayName = author?.displayName?.trim();
@@ -222,7 +223,7 @@ const PostInfo = ({
 
   const handleUserAddressClick = useAuthorAddressClick();
   const numberOfPostsByAuthor = (() => {
-    if (!showUserID || deleted || removed || !shortAddress || !postCid || typeof document === 'undefined') {
+    if (!showUserID || deleted || removed || purged || !shortAddress || !postCid || typeof document === 'undefined') {
       return 0;
     }
 
@@ -239,7 +240,7 @@ const PostInfo = ({
       ? isReply
         ? alert(t('this_reply_was_deleted'))
         : alert(t('this_thread_was_deleted'))
-      : removed
+      : removed || purged
         ? isReply
           ? alert(t('this_reply_was_removed'))
           : alert(t('this_thread_was_removed'))
@@ -266,7 +267,7 @@ const PostInfo = ({
   return (
     <div className={styles.postInfo}>
       {isHidden ? parentCid && <span className={styles.hiddenReplyEditMenuSpacer} /> : <EditMenu post={post} />}
-      <span className={(hidden || ((removed || deleted) && !reason)) && parentCid ? styles.postDesktopHidden : ''}>
+      <span className={(hidden || ((removed || deleted || purged) && !reason)) && parentCid ? styles.postDesktopHidden : ''}>
         {title &&
           (title.length <= 75 ? (
             <span className={styles.subject}>{title} </span>
@@ -276,11 +277,13 @@ const PostInfo = ({
             </Tooltip>
           ))}
         <span className={styles.nameBlock}>
-          <span className={`${styles.name} ${authorRole && !(deleted || removed) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
+          <span className={`${styles.name} ${authorRole && !(deleted || removed || purged) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
             {deleted ? (
               capitalize(t('deleted'))
             ) : removed ? (
               capitalize(t('removed'))
+            ) : purged ? (
+              capitalize(t('purged'))
             ) : displayName ? (
               displayName.length <= 20 ? (
                 displayName
@@ -292,7 +295,7 @@ const PostInfo = ({
             ) : (
               capitalize(t('anonymous'))
             )}
-            {!(deleted || removed) && authorRole && (
+            {!(deleted || removed || purged) && authorRole && (
               <span className='capitalize'>
                 {' '}
                 ## Board {authorRole}{' '}
@@ -310,6 +313,8 @@ const PostInfo = ({
                 t('deleted')
               ) : removed ? (
                 t('removed')
+              ) : purged ? (
+                t('purged')
               ) : !cid && pseudonymityMode ? (
                 <span className={styles.pendingCid}>{hasFailedState ? capitalize(t('failed')) : capitalize(t('pending'))}</span>
               ) : (
@@ -481,7 +486,7 @@ const PostInfo = ({
             </span>
           )}
         </span>
-        {!(removed || deleted) && !isModQueue && <PostMenuDesktop postMenu={postMenuProps} />}
+        {!(removed || deleted || purged) && !isModQueue && <PostMenuDesktop postMenu={postMenuProps} />}
         {cid && parentCid && <ReplyBacklinks post={post} quotedByMap={quotedByMap} directRepliesByParentCid={directRepliesByParentCid} />}
         {cid && !parentCid && <OpBacklinks cid={cid} quotedByMap={quotedByMap} />}
       </span>
@@ -544,6 +549,7 @@ interface PostMediaProps {
   hasThumbnail: boolean;
   spoiler: boolean;
   deleted: boolean;
+  purged: boolean;
   removed: boolean;
   linkHeight: number;
   linkWidth: number;
@@ -559,6 +565,7 @@ const PostMedia = ({
   hasThumbnail,
   spoiler,
   deleted,
+  purged,
   removed,
   linkHeight,
   linkWidth,
@@ -663,6 +670,7 @@ const PostMedia = ({
           <CommentMedia
             commentMediaInfo={commentMediaInfo}
             deleted={deleted}
+            purged={purged}
             removed={removed}
             linkHeight={linkHeight}
             linkWidth={linkWidth}
@@ -697,6 +705,7 @@ const Reply = ({
   }
 
   const { author, cid, deleted, link, linkHeight, linkWidth, postCid, reason, removed, spoiler, subplebbitAddress, thumbnailUrl, parentCid } = post || {};
+  const purged = post?.commentModeration?.purged;
   const directories = useDirectories();
   const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : undefined;
 
@@ -726,12 +735,13 @@ const Reply = ({
           quotedByMap={quotedByMap}
           directRepliesByParentCid={directRepliesByParentCid}
         />
-        {link && !hidden && !(deleted || removed) && isValidURL(link) && (
+        {link && !hidden && !(deleted || removed || purged) && isValidURL(link) && (
           <PostMedia
             commentMediaInfo={commentMediaInfo}
             hasThumbnail={hasThumbnail}
             spoiler={spoiler}
             deleted={deleted}
+            purged={!!purged}
             removed={removed}
             linkHeight={linkHeight}
             linkWidth={linkWidth}
@@ -742,7 +752,7 @@ const Reply = ({
             isInModView={isInModView}
           />
         )}
-        {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
+        {!hidden && (!(removed || deleted || purged) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
       </div>
     </div>
   );
@@ -763,6 +773,7 @@ const PostDesktop = ({
 }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, content, deleted, link, linkHeight, linkWidth, pinned, postCid, removed, spoiler, state, subplebbitAddress, thumbnailUrl, parentCid } = post || {};
+  const purged = post?.commentModeration?.purged;
   const params = useParams();
   const location = useLocation();
   const navigationType = useNavigationType();
@@ -969,12 +980,13 @@ const PostDesktop = ({
               </div>
             </div>
           )}
-          {link && !isHidden && !(deleted || removed) && isValidURL(link) && (
+          {link && !isHidden && !(deleted || removed || purged) && isValidURL(link) && (
             <PostMedia
               commentMediaInfo={commentMediaInfo}
               hasThumbnail={hasThumbnail}
               spoiler={spoiler}
               deleted={deleted}
+              purged={!!purged}
               removed={removed}
               linkHeight={linkHeight}
               linkWidth={linkWidth}
@@ -1000,7 +1012,7 @@ const PostDesktop = ({
             quotedByMap={quotedByMap}
             directRepliesByParentCid={directRepliesByParentCid}
           />
-          {!isHidden && !content && !(deleted || removed) && <div className={styles.spacer} />}
+          {!isHidden && !content && !(deleted || removed || purged) && <div className={styles.spacer} />}
           {!isHidden && <CommentContent comment={post} />}
         </div>
         {!isHidden && !isInPendingPostView && showReplies && repliesCount > 0 && !isInPostPageView && (

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

@@ -59,6 +59,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
   const directories = useDirectories();
   const { author, cid, deleted, link, linkHeight, linkWidth, locked, parentCid, pinned, postCid, reason, removed, state, subplebbitAddress, timestamp, thumbnailUrl } =
     post || {};
+  const purged = post?.commentModeration?.purged;
   const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : undefined;
   const displayBoardPath =
     boardPath && subplebbitAddress
@@ -217,7 +218,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
       ? isReply
         ? alert(t('this_reply_was_deleted'))
         : alert(t('this_thread_was_deleted'))
-      : removed
+      : removed || purged
         ? isReply
           ? alert(t('this_reply_was_removed'))
           : alert(t('this_thread_was_removed'))
@@ -246,13 +247,15 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
     <>
       <div className={styles.postInfo}>
         <PostMenuMobile postMenu={postMenuProps} editMenuPost={post} />
-        <span className={(hidden || ((removed || deleted) && !reason)) && parentCid ? styles.postDesktopHidden : ''}>
+        <span className={(hidden || ((removed || deleted || purged) && !reason)) && parentCid ? styles.postDesktopHidden : ''}>
           <span className={styles.nameBlock}>
-            <span className={`${styles.name} ${authorRole && !(deleted || removed) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
+            <span className={`${styles.name} ${authorRole && !(deleted || removed || purged) && (authorRole === 'mod' ? styles.capcodeMod : styles.capcodeAdmin)}`}>
               {removed ? (
                 capitalize(t('removed'))
               ) : deleted ? (
                 capitalize(t('deleted'))
+              ) : purged ? (
+                capitalize(t('purged'))
               ) : displayName ? (
                 displayName.length <= 20 ? (
                   displayName
@@ -264,7 +267,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
               ) : (
                 capitalize(t('anonymous'))
               )}{' '}
-              {!(deleted || removed) && authorRole && (
+              {!(deleted || removed || purged) && authorRole && (
                 <span className='capitalize'>
                   {' '}
                   ## Board {authorRole}{' '}
@@ -285,6 +288,8 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
                   lowerCase(t('removed'))
                 ) : deleted ? (
                   lowerCase(t('deleted'))
+                ) : purged ? (
+                  lowerCase(t('purged'))
                 ) : !cid && pseudonymityMode ? (
                   <span className={styles.pendingCid}>{hasFailedState ? capitalize(t('failed')) : capitalize(t('pending'))}</span>
                 ) : (
@@ -423,7 +428,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
           )}
         </span>
       </div>
-      {(hasThumbnail || link) && !(deleted || removed) && <PostMediaContent key={cid} post={post} link={link} />}
+      {(hasThumbnail || link) && !(deleted || removed || purged) && <PostMediaContent key={cid} post={post} link={link} />}
     </>
   );
 };
@@ -431,6 +436,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
 const PostMediaContent = ({ post, link }: { post: any; link: string }) => {
   const [showThumbnail, setShowThumbnail] = useState(true);
   const { thumbnailUrl, linkWidth, linkHeight, spoiler, deleted, removed, parentCid } = post || {};
+  const purged = post?.commentModeration?.purged;
   const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
 
   return (
@@ -438,6 +444,7 @@ const PostMediaContent = ({ post, link }: { post: any; link: string }) => {
       <CommentMedia
         commentMediaInfo={commentMediaInfo}
         deleted={deleted}
+        purged={purged}
         removed={removed}
         linkHeight={linkHeight}
         linkWidth={linkWidth}
@@ -519,6 +526,7 @@ const Reply = ({
     post = editedComment;
   }
   const { author, cid, deleted, postCid, reason, removed, subplebbitAddress } = post || {};
+  const purged = post?.commentModeration?.purged;
   const directories = useDirectories();
   const boardPath = subplebbitAddress ? getBoardPath(subplebbitAddress, directories) : undefined;
   const location = useLocation();
@@ -536,7 +544,7 @@ const Reply = ({
           data-post-cid={postCid}
         >
           <PostInfoAndMedia post={post} postReplyCount={postReplyCount} roles={roles} threadNumber={threadNumber} />
-          {!hidden && (!(removed || deleted) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
+          {!hidden && (!(removed || deleted || purged) || ((removed || deleted) && reason)) && <CommentContent comment={post} />}
           <ReplyBacklinks post={post} quotedByMap={quotedByMap} directRepliesByParentCid={directRepliesByParentCid} />
         </div>
       </div>

src/views/post/post.tsx

@@ -110,6 +110,7 @@ export const Post = memo(
       prev?.pinned === next?.pinned &&
       prev?.removed === next?.removed &&
       prev?.deleted === next?.deleted &&
+      prev?.commentModeration?.purged === next?.commentModeration?.purged &&
       prevProps.showAllReplies === nextProps.showAllReplies &&
       prevProps.showReplies === nextProps.showReplies &&
       prevProps.targetReplyCid === nextProps.targetReplyCid &&