feat(post): clicking "+" button next to "omitted replies" message shows all replies

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

@@ -23,9 +23,20 @@ import PostMenuDesktop from './post-menu-desktop';
 import ReplyQuotePreview from '../reply-quote-preview';
 import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
+import { create } from 'zustand';
 import _ from 'lodash';
 
-const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
+interface ShowOmittedRepliesState {
+  showOmittedReplies: boolean;
+  setShowOmittedReplies: (showOmittedReplies: boolean) => void;
+}
+
+const useShowOmittedReplies = create<ShowOmittedRepliesState>((set) => ({
+  showOmittedReplies: false,
+  setShowOmittedReplies: (showOmittedReplies: boolean) => set({ showOmittedReplies }),
+}));
+
+const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp } = post || {};
   const title = post?.title?.trim();
@@ -36,6 +47,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const stateString = useStateString(post);
   const isReply = parentCid;
+  const { showOmittedReplies } = useShowOmittedReplies();
 
   const params = useParams();
   const location = useLocation();
@@ -49,7 +61,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
 
   const handleUserAddressClick = useAuthorAddressClick();
-  let numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
+  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
 
   return (
     <div className={styles.postInfo}>
@@ -87,13 +99,13 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
                 <span
                   title='Highlight posts by this user address'
                   className={styles.userAddress}
-                  onClick={() => handleUserAddressClick(shortAddress || accountShortAddress)}
+                  onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
                 >
                   {shortAddress || accountShortAddress}
                 </span>
               }
               content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
-              showTooltip={isInPostPageView}
+              showTooltip={isInPostPageView || showOmittedReplies || postReplyCount < 6}
             />
             ){' '}
           </>
@@ -279,7 +291,7 @@ const PostMessage = ({ post }: PostProps) => {
   );
 };
 
-const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
+const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
   let post = reply;
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: reply });
@@ -287,7 +299,7 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
     post = editedComment;
   }
 
-  const { cid, content, link, subplebbitAddress } = post || {};
+  const { author, cid, content, link, postCid, subplebbitAddress } = post || {};
   const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
   const { hidden } = useHide({ cid });
 
@@ -297,9 +309,10 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
       <div
         className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
         data-cid={cid}
-        data-author-address={post?.author?.shortAddress}
+        data-author-address={author?.shortAddress}
+        data-post-cid={postCid}
       >
-        <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
+        <PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
         {link && !hidden && isValidURL(link) && <PostMedia post={post} />}
         {content && !hidden && <PostMessage post={post} />}
       </div>
@@ -308,7 +321,8 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
 };
 
 const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
-  const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
+  const { t } = useTranslation();
+  const { author, cid, content, link, pinned, postCid, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const params = useParams();
   const location = useLocation();
@@ -323,6 +337,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
   const totallinksCount = useCountLinksInReplies(post);
   const repliesCount = pinned ? replyCount : replyCount - 5;
   const linksCount = pinned ? totallinksCount : totallinksCount - visiblelinksCount;
+  const { showOmittedReplies, setShowOmittedReplies } = useShowOmittedReplies();
 
   // scroll to reply if pathname is reply permalink (backlink)
   const replyRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -348,7 +363,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
             <span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
           </span>
         )}
-        <div data-cid={cid} data-author-address={post?.author?.shortAddress}>
+        <div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
           {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
           <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
           {!isHidden && !content && <div className={styles.spacer} />}
@@ -356,10 +371,13 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
         </div>
         {!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
           <span className={styles.summary}>
-            <span className={styles.expandButtonWrapper}>
-              <span className={styles.expandButton} />
-            </span>
-            {linksCount > 0 ? (
+            <span
+              className={`${showOmittedReplies ? styles.hideOmittedReplies : styles.showOmittedReplies} ${styles.omittedRepliesButtonWrapper}`}
+              onClick={() => setShowOmittedReplies(!showOmittedReplies)}
+            />
+            {showOmittedReplies ? (
+              t('showing_all_replies')
+            ) : linksCount > 0 ? (
               <Trans
                 i18nKey={'replies_and_links_omitted'}
                 shouldUnescape={true}
@@ -378,9 +396,9 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
           !isRules &&
           replies &&
           showReplies &&
-          (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
+          (showAllReplies || showOmittedReplies ? replies : replies.slice(-5)).map((reply, index) => (
             <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
-              <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
+              <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} postReplyCount={replyCount} />
             </div>
           ))}
       </div>

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

@@ -21,9 +21,9 @@ import Tooltip from '../tooltip';
 import { PostProps } from '../../views/post/post';
 import _ from 'lodash';
 
-const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
+const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, link, locked, parentCid, pinned, shortCid, state, subplebbitAddress, timestamp } = post || {};
+  const { author, cid, link, locked, parentCid, pinned, postCid, shortCid, state, subplebbitAddress, timestamp } = post || {};
   const title = post?.title?.trim();
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const { address, shortAddress } = author || {};
@@ -49,7 +49,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   const stateString = useStateString(post);
 
   const handleUserAddressClick = useAuthorAddressClick();
-  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
+  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`).length;
 
   return (
     <>
@@ -79,13 +79,13 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
                   <span
                     title='Highlight posts by this user address'
                     className={styles.userAddress}
-                    onClick={() => handleUserAddressClick(shortAddress || accountShortAddress)}
+                    onClick={() => handleUserAddressClick(shortAddress || accountShortAddress, postCid)}
                   >
                     {shortAddress || accountShortAddress}
                   </span>
                 }
                 content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
-                showTooltip={isInPostPageView}
+                showTooltip={isInPostPageView || postReplyCount < 6}
               />
               ){' '}
             </>
@@ -234,14 +234,14 @@ const PostMessageMobile = ({ post }: PostProps) => {
   );
 };
 
-const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
+const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
   let post = reply;
   // handle pending mod or author edit
   const { editedComment } = useEditedComment({ comment: reply });
   if (editedComment) {
     post = editedComment;
   }
-  const { cid, content, subplebbitAddress } = post || {};
+  const { author, cid, content, postCid, subplebbitAddress } = post || {};
   const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
   const { hidden } = useHide({ cid });
 
@@ -251,9 +251,10 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
         <div
           className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
           data-cid={cid}
-          data-author-address={post?.author?.shortAddress}
+          data-author-address={author?.shortAddress}
+          data-post-cid={postCid}
         >
-          <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
+          <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
           {content && !hidden && <PostMessageMobile post={post} />}
           <ReplyBacklinks post={reply} />
         </div>
@@ -264,7 +265,7 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
 
 const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
   const { t } = useTranslation();
-  const { cid, content, pinned, replyCount, subplebbitAddress } = post || {};
+  const { author, cid, content, pinned, postCid, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const params = useParams();
   const location = useLocation();
@@ -306,8 +307,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
           )}
           <div className={showReplies ? styles.thread : styles.quotePreview}>
             <div className={styles.postContainer}>
-              <div className={styles.postOp} data-cid={cid} data-author-address={post?.author?.shortAddress}>
-                <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
+              <div className={styles.postOp} data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
+                <PostInfoAndMedia openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
                 {content && <PostMessageMobile post={post} />}
               </div>
               {!isInPostView && !isInPendingPostView && showReplies && (
@@ -333,7 +334,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
               showReplies &&
               (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
                 <div key={index} className={styles.replyContainer} ref={(el) => (replyRefs.current[index] = el)}>
-                  <Reply openReplyModal={openReplyModal} reply={reply} roles={roles} />
+                  <Reply openReplyModal={openReplyModal} postReplyCount={replyCount} reply={reply} roles={roles} />
                 </div>
               ))}
           </div>

src/hooks/use-author-address-click.ts

@@ -1,11 +1,7 @@
-import { useParams } from 'react-router-dom';
-
 const useAuthorAddressClick = () => {
-  const { commentCid } = useParams<{ commentCid: string }>();
-
-  const handleUserAddressClick = (shortAddress: string) => {
+  const handleUserAddressClick = (shortAddress: string, postCid: string) => {
     // Select the elements corresponding to the clicked short address
-    const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"]`);
+    const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"][data-post-cid="${postCid}"]`);
 
     // Check if the clicked address is already highlighted
     const isAlreadyHighlighted = Array.from(elements).some((element) => element.classList.contains('highlight'));
@@ -21,7 +17,7 @@ const useAuthorAddressClick = () => {
 
     // Highlight the new elements, excluding the element matching the cid if it is the OP post
     elements.forEach((element) => {
-      if (element.getAttribute('data-cid') !== commentCid) {
+      if (element.getAttribute('data-cid') !== element.getAttribute('data-post-cid')) {
         element.classList.add('highlight');
       }
     });

src/themes.css

@@ -103,7 +103,6 @@
   --post-menu-desktop-btn-opacity: 0.8;
   --post-menu-desktop-button-color-hover: red;
   --post-greentext-color: #789922;
-  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -309,7 +308,6 @@
   --post-menu-desktop-btn-opacity: 0.8;
   --post-menu-desktop-button-color-hover: #d00;
   --post-greentext-color: #789922;
-  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -496,7 +494,6 @@
   --post-menu-desktop-btn-opacity: 0.8;
   --post-menu-desktop-button-color-hover: red;
   --post-greentext-color: #789922;
-  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png");
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -679,7 +676,6 @@
   --post-menu-desktop-btn-opacity: 0.8;
   --post-menu-desktop-button-color-hover: #d00;
   --post-greentext-color: #789922;
-  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-blue.png");
   
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -867,7 +863,6 @@
   --post-menu-desktop-btn-opacity: 0.8;
   --post-menu-desktop-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
-  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-dark.png");
 
   /* post form */
   --post-form-toggle-font-size: 22px;
@@ -1069,7 +1064,6 @@
   --post-menu-desktop-btn-opacity: 0.8;
   --post-menu-desktop-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
-  --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-photon.png");
 
   /* post mobile */
   --post-mobile-background-color: #eee;

src/views/post/post.module.css

@@ -179,14 +179,13 @@
   color: var(--post-mobile-abbr-text-color);
 }
 
-.postDesktop .summary .expandButtonWrapper {
+.postDesktop .summary .omittedRepliesButtonWrapper {
   position: absolute;
   top: 8px;
   left: 2px;
 }
 
-.postDesktop .summary .expandButton {
-  background-image: var(--post-replies-expand-button-background-image);
+.postDesktop .summary .omittedRepliesButtonWrapper {
   background-repeat: no-repeat;
   background-position: center;
   width: 18px;
@@ -196,6 +195,14 @@
   cursor: pointer;
 }
 
+.postDesktop .summary .hideOmittedReplies {
+  background-image: var(--post-hide-button-background-image);
+}
+
+.postDesktop .summary .showOmittedReplies {
+  background-image: var(--post-unhide-button-background-image);
+}
+
 .postDesktop .summary a {
   color: var(--post-link-text-color);
   text-decoration: var(--post-content-link-text-decoration);

src/views/post/post.tsx

@@ -17,6 +17,7 @@ export interface PostProps {
   index?: number;
   isHidden?: boolean;
   post?: any;
+  postReplyCount?: number;
   reply?: any;
   roles?: Role[];
   showAllReplies?: boolean;