style(mod queue): flatten feed items, add View Thread button for replies

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

@@ -412,6 +412,9 @@ const PostInfo = ({
           )}
           {isModQueue && (
             <span className={styles.modQueueActions}>
+              <span className={styles.modQueueTypeField}>
+                {capitalize(t('type'))}: {capitalize(t(isReply ? 'reply' : 'post'))}
+              </span>
               {modQueueStatus === 'approved' ? (
                 <span className={styles.modQueueStatusApproved}>{t('approved')}</span>
               ) : modQueueStatus === 'rejected' ? (
@@ -425,6 +428,15 @@ const PostInfo = ({
                 <LoadingEllipsis string={t('publishing')} />
               ) : (
                 <>
+                  {isReply && boardPath && (post?.threadCid || post?.parentCid) && (
+                    <span className={styles.modQueueButtonWrapper}>
+                      [
+                      <Link to={`/${boardPath}/thread/${post.threadCid || post.parentCid}`} className={styles.modQueueActionButton}>
+                        {t('view_thread')}
+                      </Link>
+                      ]
+                    </span>
+                  )}
                   <span className={styles.modQueueButtonWrapper}>
                     [
                     <button className={styles.modQueueActionButton} onClick={onApprove} disabled={isPublishing}>

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

@@ -566,7 +566,7 @@ const PostMobile = ({
   onReject,
 }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, pinned, postCid, replyCount, state, subplebbitAddress } = post || {};
+  const { author, cid, parentCid, pinned, postCid, replyCount, state, subplebbitAddress } = post || {};
   const params = useParams();
   const location = useLocation();
   const navigationType = useNavigationType();
@@ -625,6 +625,7 @@ const PostMobile = ({
 
   const stateString = useStateString(post) || t('loading_post');
   const hasFailedState = state === 'failed';
+  const isReply = !!parentCid;
 
   // Filter out deleted replies with no children for both virtuoso and non-virtuoso rendering
   const filteredReplies = repliesForRender.filter((reply) => !(reply.deleted && (reply.replyCount === 0 || !reply.replyCount)));
@@ -732,8 +733,13 @@ const PostMobile = ({
               {!isInPostView && !isInPendingPostView && (showReplies || isModQueue) && (
                 <div className={styles.postLink}>
                   <span className={styles.info}>
-                    {replyCount > 0 && `${replyCount} Replies`}
+                    {[
-                    {linksCount > 0 && ` / ${linksCount} ${requirePostLinkIsMedia ? 'Images' : 'Links'}`}
+                      isModQueue ? `${capitalize(t('type'))}: ${capitalize(t(isReply ? 'reply' : 'post'))}` : null,
+                      replyCount > 0 ? `${replyCount} Replies` : null,
+                      linksCount > 0 ? `${linksCount} ${requirePostLinkIsMedia ? 'Images' : 'Links'}` : null,
+                    ]
+                      .filter(Boolean)
+                      .join(' / ')}
                   </span>
                   {isModQueue ? (
                     <div className={styles.modQueueActions}>
@@ -750,6 +756,11 @@ const PostMobile = ({
                         <LoadingEllipsis string={t('publishing')} />
                       ) : (
                         <>
+                          {isReply && boardPath && (post?.threadCid || post?.parentCid) && (
+                            <Link to={`/${boardPath}/thread/${post.threadCid || post.parentCid}`} className={`button ${styles.approveButton}`}>
+                              {t('view_thread')}
+                            </Link>
+                          )}
                           <button className={`button ${styles.approveButton}`} onClick={onApprove} disabled={isPublishing}>
                             {t('approve')}
                           </button>

src/views/mod-queue/mod-queue.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect, useCallback, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, Link } from 'react-router-dom';
-import { useFeed, Comment, usePublishCommentModeration, useEditedComment, useSubplebbit, useComment } from '@bitsocialhq/bitsocial-react-hooks';
+import { useFeed, Comment, usePublishCommentModeration, useEditedComment, useSubplebbit } from '@bitsocialhq/bitsocial-react-hooks';
 import { Virtuoso } from 'react-virtuoso';
 import styles from './mod-queue.module.css';
 import useModQueueStore from '../../stores/use-mod-queue-store';
@@ -432,30 +432,19 @@ const ModQueueFeedPost = ({ comment }: { comment: Comment }) => {
   const { editedComment } = useEditedComment({ comment });
   const displayComment = editedComment || comment;
   const { status, errorMessage, isPublishing, handleApprove, handleReject } = useModQueueActions(displayComment);
-  const { parentCid } = displayComment;
-
-  // Fetch parent comment if this is a reply
-  const parentComment = useComment({ commentCid: parentCid });
 
   return (
-    <>
+    <Post
-      {parentCid && parentComment && (
+      post={displayComment}
-        <div style={{ marginBottom: '10px', paddingLeft: '20px', borderLeft: '2px solid var(--mod-queue-alert-color, #ccc)' }}>
+      showAllReplies={false}
-          <Post post={parentComment} showAllReplies={false} showReplies={false} isModQueue={false} />
+      showReplies={false}
-        </div>
+      isModQueue={true}
-      )}
+      modQueueStatus={status}
-      <Post
+      modQueueError={errorMessage}
-        post={displayComment}
+      isPublishing={isPublishing}
-        showAllReplies={false}
+      onApprove={handleApprove}
-        showReplies={false}
+      onReject={handleReject}
-        isModQueue={true}
+    />
-        modQueueStatus={status}
-        modQueueError={errorMessage}
-        isPublishing={isPublishing}
-        onApprove={handleApprove}
-        onReject={handleReject}
-      />
-    </>
   );
 };
 

src/views/post/post.module.css

@@ -196,6 +196,10 @@
   margin-left: 8px;
 }
 
+.modQueueTypeField {
+  font-weight: 400;
+}
+
 .modQueueButtonWrapper {
   display: inline-flex;
 }