add counter for omitted replies and links in replies

src/components/post/post.module.css

@@ -153,6 +153,33 @@
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
+.postDesktop .summary {
+  padding-top: 10px;
+  color: var(--post-mobile-abbr-text-color);
+}
+
+.postDesktop .summary .expandButton {
+  background-image: var(--post-replies-expand-button-background-image);
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  image-rendering: pixelated;
+  margin: 0 3px -4px 2px;
+  cursor: pointer;
+}
+
+.postDesktop .summary a {
+  color: var(--post-link-text-color);
+  text-decoration: var(--post-content-link-text-decoration);
+}
+
+.postDesktop .summary a:hover {
+  color: var(--post-link-text-color-hover);
+  text-decoration: var(--post-content-link-text-decoration-hover);
+}
+
 .postMobile hr {
   padding-bottom: 30px;
 }

src/components/post/post.tsx

@@ -4,13 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
+import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useReplies from '../../hooks/use-replies';
 import styles from './post.module.css';
 import Markdown from '../markdown';
 import Media from '../media';
 
-import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
-
 const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
   const { t } = useTranslation();
   const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
@@ -95,7 +94,7 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
 
 const PostDesktop = ({ post }: Comment) => {
   const { t } = useTranslation();
-  const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
   const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title;
   const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content;
@@ -105,6 +104,10 @@ const PostDesktop = ({ post }: Comment) => {
   const [showThumbnail, setShowThumbnail] = useState(true);
 
   const replies = useReplies(post);
+  const visibleLinkCount = useCountLinksInReplies(post, 5);
+  const totalLinkCount = useCountLinksInReplies(post);
+  const repliesCount = pinned ? replyCount : replyCount - 5;
+  const linkCount = pinned ? totalLinkCount : totalLinkCount - visibleLinkCount;
 
   return (
     <div className={styles.postDesktop}>
@@ -193,6 +196,15 @@ const PostDesktop = ({ post }: Comment) => {
           )}
         </blockquote>
       )}
+      {(replies.length > 5 || pinned) && (
+        <span className={styles.summary}>
+          <span className={styles.expandButton} />
+          <span>
+            {repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '}
+          </span>
+          <Link to={`/p/${subplebbitAddress}/c/${cid}`}>Click here</Link> to view.
+        </span>
+      )}
       {!pinned &&
         replies.map((reply, index) => (
           <div key={reply.cid} className={styles.replyContainer}>
@@ -251,7 +263,7 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => {
 const PostMobile = ({ post }: Comment) => {
   const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
-  const linkCount = countLinksInCommentReplies(post);
+  const linkCount = useCountLinksInReplies(post);
   const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title;
   const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content;
 

src/hooks/use-count-links-in-replies.ts

@@ -0,0 +1,20 @@
+import { useMemo } from 'react';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
+
+const useCountLinksInReplies = (comment: Comment, firstXReplies?: number) => {
+  let linkCount = 0;
+  const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]);
+
+  const repliesToConsider = firstXReplies !== undefined ? flattenedReplies.slice(0, firstXReplies) : flattenedReplies;
+
+  for (let reply of repliesToConsider) {
+    if (reply.link) {
+      linkCount++;
+    }
+  }
+
+  return linkCount;
+};
+
+export default useCountLinksInReplies;

src/lib/utils/comment-utils.ts

@@ -1,19 +0,0 @@
-import { Comment } from '@plebbit/plebbit-react-hooks';
-
-export const countLinksInCommentReplies = (comment: Comment) => {
-  let linkCount = 0;
-
-  if (comment.replyCount > 0) {
-    for (let reply of comment.replies.pages.topAll.comments) {
-      if (reply.link) {
-        linkCount++;
-      }
-
-      if (reply.replyCount > 0) {
-        linkCount += countLinksInCommentReplies(reply);
-      }
-    }
-  }
-
-  return linkCount;
-};

src/themes.css

@@ -78,6 +78,7 @@
   --post-menu-button-color: #000080;
   --post-menu-button-color-hover: red;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
 
   /* post mobile */
   --post-mobile-background-color: #f5e9e1;
@@ -189,6 +190,9 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
+
+  /* post mobile */
   --post-mobile-background-color: #d6daf0;
   --post-mobile-info-border-bottom: 1px solid #b7c5d9;
   --post-mobile-info-background-color: #c9cde8;
@@ -275,6 +279,9 @@
   --post-menu-button-color: #000080;
   --post-menu-button-color-hover: red;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png");
+
+  /* post mobile */
   --post-mobile-background-color: #f5e9e1;
   --post-mobile-info-border-bottom: 1px solid #d9bfb7;
   --post-mobile-info-background-color: #ead6ca;
@@ -374,6 +381,7 @@
   --post-menu-button-color: #34345c;
   --post-menu-button-color-hover: #d00;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png");
 
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);
 
@@ -455,6 +463,7 @@
   --post-menu-button-color: #5F89AC;
   --post-menu-button-color-hover: #81a2be;
   --post-greentext-color: #b5bd68;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png");
 
   --post-thumbnail-background-color: rgba(255, 255, 255, 0.01);
 
@@ -531,6 +540,7 @@
   --post-menu-button-color: #FF6600;
   --post-menu-button-color-hover: #FF3300;
   --post-greentext-color: #789922;
+  --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png");
 
   --post-thumbnail-background-color: rgba(0, 0, 0, 0.05);