fix(post): move failed publish notice into comment body (#1066)

Align the failed notice and delete action with the existing post card and footer controls.

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

@@ -169,6 +169,12 @@ const renderContent = async (comment: TestComment) => {
   });
 };
 
+const renderContentWithProps = async (props: { comment: TestComment; prependContent?: React.ReactNode }) => {
+  await act(async () => {
+    root.render(createElement(CommentContent, props as any));
+  });
+};
+
 const queryMarkdownText = () => Array.from(container.querySelectorAll('[data-testid="markdown"]')).map((node) => node.textContent ?? '');
 
 describe('CommentContent', () => {
@@ -217,6 +223,35 @@ describe('CommentContent', () => {
     expect(previews[0]?.textContent).toBe('quoted-2');
   });
 
+  it('renders prepended content before reply quote previews and markdown', async () => {
+    testState.commentsByCid = {
+      'quoted-1': { cid: 'quoted-1', number: 11 },
+    };
+    testState.postNumbers = {
+      'quoted-1': 11,
+    };
+
+    await renderContentWithProps({
+      comment: {
+        cid: 'reply-1',
+        content: 'body',
+        parentCid: 'quoted-1',
+        postCid: 'post-1',
+      },
+      prependContent: createElement('span', { 'data-testid': 'prepend' }, 'failed notice'),
+    });
+
+    const blockquote = container.querySelector('blockquote');
+    const prepend = container.querySelector('[data-testid="prepend"]');
+    const preview = container.querySelector('[data-testid="reply-quote-preview"]');
+    const markdown = container.querySelector('[data-testid="markdown"]');
+
+    expect(blockquote?.firstChild).toBe(prepend);
+    expect(preview?.textContent).toBe('quoted-1');
+    expect(markdown?.textContent).toBe('body');
+    expect(blockquote?.querySelectorAll('br')).toHaveLength(1);
+  });
+
   it('truncates long comments outside the post view and expands them on demand', async () => {
     const longComment = 'x'.repeat(1105);
 

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

@@ -1,4 +1,4 @@
-import { Fragment, useMemo, useState } from 'react';
+import { Fragment, type ReactNode, useMemo, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { Comment, useComment } from '@bitsocialnet/bitsocial-react-hooks';
@@ -62,7 +62,7 @@ const useScopedCidToNumber = (cids: string[]) => {
   return cidToNumber;
 };
 
-const CommentContent = ({ comment: post }: { comment: Comment }) => {
+const CommentContent = ({ comment: post, prependContent }: { comment: Comment; prependContent?: ReactNode }) => {
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
@@ -126,6 +126,12 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
 
   return (
     <blockquote className={`${styles.postMessage} ${!isReply && isMobile && styles.clampLines}`}>
+      {prependContent && (
+        <>
+          {prependContent}
+          <br />
+        </>
+      )}
       {isReply &&
         !hasFailedState &&
         !(deleted || removed || purged) &&

src/components/failed-publish-notice.tsx

@@ -0,0 +1,32 @@
+import styles from '../views/post/post.module.css';
+import useIsMobile from '../hooks/use-is-mobile';
+
+interface FailedPublishNoticeProps {
+  isDeleting: boolean;
+  onDelete: () => void;
+}
+
+const FailedPublishNotice = ({ isDeleting, onDelete }: FailedPublishNoticeProps) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <span className={styles.failedPublishNotice}>
+      This post failed to publish, it's not visible to other users.{' '}
+      {isMobile && (
+        <>
+          <br />
+          <br />
+        </>
+      )}
+      <span className={styles.failedDeletePostAction}>
+        [
+        <button type='button' className={styles.failedDeletePostButton} disabled={isDeleting} onClick={onDelete}>
+          Delete Post
+        </button>
+        ]
+      </span>
+    </span>
+  );
+};
+
+export default FailedPublishNotice;

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

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
-import { Comment, deleteComment, useEditedComment, useReplies, useAccount, useAccountComment } from '@bitsocialnet/bitsocial-react-hooks';
+import { Comment, useEditedComment, useReplies, useAccount, useAccountComment } from '@bitsocialnet/bitsocial-react-hooks';
 import getShortAddress from '../../lib/get-short-address';
 import styles from '../../views/post/post.module.css';
 import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
@@ -27,6 +27,7 @@ import { useBoardPseudonymityMode } from '../../hooks/use-board-pseudonymity-mod
 import CommentContent from '../comment-content';
 import CommentMedia from '../comment-media';
 import EditMenu from '../edit-menu/edit-menu';
+import FailedPublishNotice from '../failed-publish-notice';
 import { canEmbed } from '../embed';
 import LoadingEllipsis from '../loading-ellipsis';
 import PostMenuDesktop from './post-menu-desktop';
@@ -50,6 +51,7 @@ import useFreshReplies from '../../hooks/use-fresh-replies';
 import { BOARD_REPLIES_PREVIEW_FETCH_SIZE, BOARD_REPLIES_PREVIEW_VISIBLE_COUNT, REPLIES_PER_PAGE } from '../../lib/constants';
 import { computeOmittedCount, filterRepliesForDisplay, getPreviewDisplayReplies, getTotalReplyCount } from '../../lib/utils/replies-preview-utils';
 import { getThreadTopNavigationState, scrollThreadContainerToTop } from '../../lib/utils/thread-scroll-utils';
+import useDeleteFailedPost from '../../hooks/use-delete-failed-post';
 
 const { addChallenge } = useChallengesStore.getState();
 
@@ -102,7 +104,6 @@ const PostInfo = ({
   const displayName = author?.displayName?.trim();
   const authorRole = roles?.[address]?.role?.replace('moderator', 'mod');
   const hasFailedState = state === 'failed';
-  const canDeleteFailedPost = hasFailedState && typeof post?.index === 'number';
   const isReply = parentCid;
   const { showOmittedReplies } = useShowOmittedReplies();
   const directories = useDirectories();
@@ -166,8 +167,6 @@ const PostInfo = ({
   });
 
   const [initiatedPendingAction, setInitiatedPendingAction] = useState<'approve' | 'reject' | null>(null);
-  const [isDeletingFailedPost, setIsDeletingFailedPost] = useState(false);
-
   const handlePendingApprove = useCallback(async () => {
     const confirm = window.confirm(t('double_confirm'));
     if (!confirm) {
@@ -250,23 +249,6 @@ const PostInfo = ({
         : openReplyModal && openReplyModal(cid, post?.number, postCid, threadNumber, subplebbitAddress);
   };
 
-  const onDeleteFailedPost = () => {
-    if (isDeletingFailedPost || !canDeleteFailedPost) {
-      return;
-    }
-
-    setIsDeletingFailedPost(true);
-    deleteComment(post?.cid || post.index)
-      .then(() => {
-        setIsDeletingFailedPost(false);
-      })
-      .catch((error) => {
-        console.error('Failed to delete failed post:', error);
-        alert(`Failed to delete post: ${error instanceof Error ? error.message : 'Unknown error'}`);
-        setIsDeletingFailedPost(false);
-      });
-  };
-
   const threadRoute = cid ? (boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`) : undefined;
   const threadTopNavigationState = !isReply ? getThreadTopNavigationState(cid) : undefined;
 
@@ -501,15 +483,6 @@ const PostInfo = ({
               )}
             </span>
           )}
-          {canDeleteFailedPost && (
-            <span className={styles.failedPublishNotice}>
-              this post failed to publish, it's not visible to other users [{' '}
-              <button type='button' className={styles.failedDeletePostButton} disabled={isDeletingFailedPost} onClick={onDeleteFailedPost}>
-                Delete Post
-              </button>{' '}
-              ]
-            </span>
-          )}
         </span>
         {!(removed || deleted || purged) && !isModQueue && <PostMenuDesktop postMenu={postMenuProps} />}
         {cid && parentCid && <ReplyBacklinks post={post} quotedByMap={quotedByMap} directRepliesByParentCid={directRepliesByParentCid} />}
@@ -746,6 +719,8 @@ const Reply = ({
 
   const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
+  const { canDeleteFailedPost, isDeletingFailedPost, onDeleteFailedPost } = useDeleteFailedPost(post);
+  const failedPublishNotice = canDeleteFailedPost ? <FailedPublishNotice isDeleting={isDeletingFailedPost} onDelete={onDeleteFailedPost} /> : undefined;
 
   return (
     <div className={styles.replyDesktop}>
@@ -777,7 +752,9 @@ const Reply = ({
             isInModView={isInModView}
           />
         )}
-        {!hidden && (!(removed || deleted || purged) || ((removed || deleted) && reason) || purged) && <CommentContent comment={post} />}
+        {!hidden && (!(removed || deleted || purged) || ((removed || deleted) && reason) || purged) && (
+          <CommentContent comment={post} prependContent={failedPublishNotice} />
+        )}
       </div>
     </div>
   );
@@ -888,6 +865,8 @@ const PostDesktop = ({
 
   const stateString = useStateString(post) || t('downloading_board');
   const hasFailedState = state === 'failed';
+  const { canDeleteFailedPost, isDeletingFailedPost, onDeleteFailedPost } = useDeleteFailedPost(post);
+  const failedPublishNotice = canDeleteFailedPost ? <FailedPublishNotice isDeleting={isDeletingFailedPost} onDelete={onDeleteFailedPost} /> : undefined;
 
   const commentMediaInfo = useCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -1027,7 +1006,7 @@ const PostDesktop = ({
             directRepliesByParentCid={directRepliesByParentCid}
           />
           {!isHidden && !content && !(deleted || removed || purged) && <div className={styles.spacer} />}
-          {!isHidden && <CommentContent comment={post} />}
+          {!isHidden && <CommentContent comment={post} prependContent={failedPublishNotice} />}
         </div>
         {!isHidden && !isInPendingPostView && showReplies && repliesCount > 0 && !isInPostPageView && (
           <span className={styles.summary}>

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

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
-import { Comment, deleteComment, useEditedComment, useReplies, useAccount, usePublishCommentModeration, useAccountComment } from '@bitsocialnet/bitsocial-react-hooks';
+import { Comment, useEditedComment, useReplies, useAccount, usePublishCommentModeration, useAccountComment } from '@bitsocialnet/bitsocial-react-hooks';
 import getShortAddress from '../../lib/get-short-address';
 import styles from '../../views/post/post.module.css';
 import { shouldShowSnow } from '../../lib/snow';
@@ -25,6 +25,7 @@ import { useCurrentTime } from '../../hooks/use-current-time';
 import { useBoardPseudonymityMode } from '../../hooks/use-board-pseudonymity-mode';
 import CommentContent from '../comment-content';
 import CommentMedia from '../comment-media';
+import FailedPublishNotice from '../failed-publish-notice';
 import LoadingEllipsis from '../loading-ellipsis';
 import PostMenuMobile from './post-menu-mobile';
 import ReplyQuotePreview from '../reply-quote-preview';
@@ -45,6 +46,7 @@ import { BOARD_REPLIES_PREVIEW_FETCH_SIZE, BOARD_REPLIES_PREVIEW_VISIBLE_COUNT,
 import { filterRepliesForDisplay, getPreviewDisplayReplies } from '../../lib/utils/replies-preview-utils';
 import { getRenderableMobileBacklinks } from '../../lib/utils/reply-backlink-utils';
 import { getThreadTopNavigationState, scrollThreadContainerToTop } from '../../lib/utils/thread-scroll-utils';
+import useDeleteFailedPost from '../../hooks/use-delete-failed-post';
 
 const { addChallenge } = useChallengesStore.getState();
 
@@ -193,7 +195,6 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
   const isOverThreshold = isAwaitingApproval && timeWaiting > alertThresholdSeconds;
 
   const hasFailedState = state === 'failed';
-  const canDeleteFailedPost = hasFailedState && typeof post?.index === 'number';
   const postMenuProps = selectPostMenuProps(post);
 
   const pseudonymityMode = useBoardPseudonymityMode(subplebbitAddress);
@@ -229,24 +230,6 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
         : openReplyModal && openReplyModal(cid, post?.number, postCid, threadNumber, subplebbitAddress);
   };
 
-  const [isDeletingFailedPost, setIsDeletingFailedPost] = useState(false);
-  const onDeleteFailedPost = () => {
-    if (isDeletingFailedPost || !canDeleteFailedPost) {
-      return;
-    }
-
-    setIsDeletingFailedPost(true);
-    deleteComment(post?.cid || post.index)
-      .then(() => {
-        setIsDeletingFailedPost(false);
-      })
-      .catch((error) => {
-        console.error('Failed to delete failed post:', error);
-        alert(`Failed to delete post: ${error instanceof Error ? error.message : 'Unknown error'}`);
-        setIsDeletingFailedPost(false);
-      });
-  };
-
   const threadRoute = cid ? (boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`) : undefined;
   const threadTopNavigationState = !isReply ? getThreadTopNavigationState(cid) : undefined;
 
@@ -431,15 +414,6 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
               </div>
             )}
           </span>
-          {canDeleteFailedPost && (
-            <span className={styles.failedPublishNotice}>
-              this post failed to publish, it's not visible to other users [{' '}
-              <button type='button' className={styles.failedDeletePostButton} disabled={isDeletingFailedPost} onClick={onDeleteFailedPost}>
-                Delete Post
-              </button>{' '}
-              ]
-            </span>
-          )}
         </span>
       </div>
       {(hasThumbnail || link) && !(deleted || removed || purged) && <PostMediaContent key={cid} post={post} link={link} />}
@@ -525,6 +499,8 @@ const Reply = ({
   const route = boardPath ? `/${boardPath}/thread/${cid}` : `/thread/${cid}`;
   const isRouteLinkToReply = cid ? location.pathname.startsWith(route) : false;
   const { hidden } = useHide({ cid });
+  const { canDeleteFailedPost, isDeletingFailedPost, onDeleteFailedPost } = useDeleteFailedPost(post);
+  const failedPublishNotice = canDeleteFailedPost ? <FailedPublishNotice isDeleting={isDeletingFailedPost} onDelete={onDeleteFailedPost} /> : undefined;
 
   return (
     <div className={styles.replyMobile}>
@@ -536,7 +512,9 @@ const Reply = ({
           data-post-cid={postCid}
         >
           <PostInfoAndMedia post={post} postReplyCount={postReplyCount} roles={roles} threadNumber={threadNumber} />
-          {!hidden && (!(removed || deleted || purged) || ((removed || deleted) && reason) || purged) && <CommentContent comment={post} />}
+          {!hidden && (!(removed || deleted || purged) || ((removed || deleted) && reason) || purged) && (
+            <CommentContent comment={post} prependContent={failedPublishNotice} />
+          )}
           <ReplyBacklinks post={post} quotedByMap={quotedByMap} directRepliesByParentCid={directRepliesByParentCid} />
         </div>
       </div>
@@ -606,6 +584,8 @@ const PostMobile = ({
   const stateString = useStateString(post) || t('loading_post');
   const hasFailedState = state === 'failed';
   const isReply = !!parentCid;
+  const { canDeleteFailedPost, isDeletingFailedPost, onDeleteFailedPost } = useDeleteFailedPost(post);
+  const failedPublishNotice = canDeleteFailedPost ? <FailedPublishNotice isDeleting={isDeletingFailedPost} onDelete={onDeleteFailedPost} /> : undefined;
 
   // Author-deleted replies are hidden from thread replies; moderator removals still render their placeholder.
   const filteredReplies = filterRepliesForDisplay(freshRepliesForRender);
@@ -708,7 +688,7 @@ const PostMobile = ({
               >
                 {shouldShowSnow() && <img src='assets/xmashat.gif' className={styles.xmasHat} alt='' />}
                 <PostInfoAndMedia post={post} postReplyCount={replyCount} roles={roles} threadNumber={post?.number} />
-                <CommentContent comment={post} />
+                <CommentContent comment={post} prependContent={failedPublishNotice} />
                 <ReplyBacklinks post={post} quotedByMap={quotedByMap} directRepliesByParentCid={directRepliesByParentCid} />
               </div>
               {!isInPostView && !isInPendingPostView && (showReplies || isModQueue) && (

src/hooks/use-delete-failed-post.ts

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+import { deleteComment } from '@bitsocialnet/bitsocial-react-hooks';
+
+const useDeleteFailedPost = (post?: { cid?: string; index?: number; state?: string }) => {
+  const [isDeletingFailedPost, setIsDeletingFailedPost] = useState(false);
+
+  const canDeleteFailedPost = post?.state === 'failed' && typeof post?.index === 'number';
+
+  const onDeleteFailedPost = useCallback(() => {
+    if (isDeletingFailedPost || !canDeleteFailedPost) {
+      return;
+    }
+
+    const targetComment = post?.cid ?? post?.index;
+    if (typeof targetComment === 'undefined') {
+      return;
+    }
+
+    setIsDeletingFailedPost(true);
+    deleteComment(targetComment)
+      .then(() => {
+        setIsDeletingFailedPost(false);
+      })
+      .catch((error) => {
+        console.error('Failed to delete failed post:', error);
+        alert(`Failed to delete post: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        setIsDeletingFailedPost(false);
+      });
+  }, [canDeleteFailedPost, isDeletingFailedPost, post?.cid, post?.index]);
+
+  return {
+    canDeleteFailedPost,
+    isDeletingFailedPost,
+    onDeleteFailedPost,
+  };
+};
+
+export default useDeleteFailedPost;

src/views/post/post.module.css

@@ -595,28 +595,31 @@
 
 .failedPublishNotice {
   display: block;
-  margin-top: 4px;
   color: red;
   font-weight: 700;
 }
 
+.failedDeletePostAction {
+  color: var(--button-desktop-text-color);
+  font-weight: 400;
+}
+
 .failedDeletePostButton {
   all: unset;
-  color: red;
+  font: inherit;
+  text-transform: capitalize;
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
   cursor: pointer;
-  font-weight: 700;
-  text-decoration: underline;
-  text-transform: uppercase;
 }
 
 .failedDeletePostButton:hover:not(:disabled) {
-  color: #b30000;
+  color: var(--button-desktop-text-color-hover);
 }
 
 .failedDeletePostButton:disabled {
-  cursor: wait;
+  opacity: 0.5;
-  opacity: 0.7;
+  cursor: not-allowed;
-  text-decoration: none;
 }
 
 .grayEditMessage {