feat: add "hidden threads" counter and button in catalog and board view, store and hook

src/components/board-buttons/board-buttons.module.css

@@ -17,6 +17,15 @@
   padding-bottom: 20px;
 }
 
+.showBlockedButton {
+  color: var(--button-desktop-text-color);
+}
+
+.showBlockedButton:hover {
+  color: var(--button-desktop-text-color-hover);
+  cursor: pointer;
+}
+
 @media (max-width: 640px) {
   .desktopBoardButtons {
     display: none;

src/components/board-buttons/board-buttons.tsx

@@ -3,10 +3,12 @@ import { Link, useLocation, useParams } from 'react-router-dom';
 import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
 import styles from './board-buttons.module.css';
 import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useBlockedComments from '../../hooks/use-blocked-comments';
+import useBlockedCommentsStore from '../../stores/useBlockedCommentsStore';
 
 interface BoardButtonsProps {
   isInAllView?: boolean;
-  address: string | undefined;
+  address?: string | undefined;
   isInCatalogView?: boolean;
   isInSubscriptionsView?: boolean;
 }
@@ -105,6 +107,9 @@ export const DesktopBoardButtons = () => {
   const isInPostView = isPostPageView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname);
 
+  const { showBlockedComments, setShowBlockedComments } = useBlockedCommentsStore();
+  const blockedComments = useBlockedComments(params?.subplebbitAddress);
+
   return (
     <div className={styles.desktopBoardButtons}>
       <hr />
@@ -120,6 +125,16 @@ export const DesktopBoardButtons = () => {
         <>
           [<OptionsButton />] [
           <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInCatalogView={isInCatalogView} isInSubscriptionsView={isInSubscriptionsView} />]
+          {blockedComments?.length > 0 && (
+            <span className={styles.blockedAddresses}>
+              {' '}
+              — Hidden threads: <strong>{blockedComments.length}</strong> [
+              <span className={styles.showBlockedButton} onClick={() => setShowBlockedComments(!showBlockedComments)}>
+                {showBlockedComments ? 'Back' : 'Show'}
+              </span>
+              ]
+            </span>
+          )}
           {!(isInAllView || isInSubscriptionsView) && (
             <span className={styles.subscribeButton}>
               [<SubscribeButton address={subplebbitAddress} />]

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

@@ -15,7 +15,6 @@ interface MediaProps {
   linkWidth?: number;
   showThumbnail?: boolean;
   setShowThumbnail: (showThumbnail: boolean) => void;
-  toggleExpanded?: () => void;
 }
 
 const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {

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

@@ -20,7 +20,7 @@ import PostMenuDesktop from './post-menu-desktop/';
 import { PostProps } from '../post';
 import _ from 'lodash';
 
-const PostInfo = ({ openReplyModal, post, roles, isBlocked }: PostProps) => {
+const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
@@ -44,7 +44,7 @@ const PostInfo = ({ openReplyModal, post, roles, isBlocked }: PostProps) => {
 
   return (
     <div className={styles.postInfo}>
-      {!isBlocked && (
+      {!isHidden && (
         <span className={styles.checkbox}>
           <input type='checkbox' />
         </span>
@@ -92,7 +92,7 @@ const PostInfo = ({ openReplyModal, post, roles, isBlocked }: PostProps) => {
             <img src='/assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
           </span>
         )}
-        {!isInPostView && !isReply && !isBlocked && (
+        {!isInPostView && !isReply && !isHidden && (
           <span className={styles.replyButton}>
             [
             <Link
@@ -216,13 +216,14 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
   const { cid, content, link, pinned, replyCount, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
 
-  const { blocked, unblock, block } = useBlock({ address: cid });
-
   const params = useParams();
   const location = useLocation();
   const isInPendingPostView = isPendingPostView(location.pathname, params);
   const isInPostPageView = isPostPageView(location.pathname, params);
 
+  const { blocked, unblock, block } = useBlock({ address: cid });
+  const isHidden = blocked && !isInPostPageView;
+
   const replies = useReplies(post);
   const visiblelinksCount = useCountLinksInReplies(post, 5);
   const totallinksCount = useCountLinksInReplies(post);
@@ -234,17 +235,17 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
       <div className={styles.hrWrapper}>
         <hr />
       </div>
-      <div className={blocked ? styles.postDesktopBlocked : ''}>
+      <div className={isHidden ? styles.postDesktopBlocked : ''}>
         {!isInPostPageView && !isDescription && !isRules && (
           <span className={styles.hideButtonWrapper}>
             <span className={`${styles.hideButton} ${blocked ? styles.unhideThread : styles.hideThread}`} onClick={blocked ? unblock : block} />
           </span>
         )}
-        {link && !blocked && isValidURL(link) && <PostMedia post={post} />}
+        {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
-        <PostInfo isBlocked={blocked} openReplyModal={openReplyModal} post={post} roles={roles} />
+        <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
-        {!blocked && !content && <div className={styles.spacer} />}
+        {!isHidden && !content && <div className={styles.spacer} />}
-        {!blocked && content && <PostMessage post={post} />}
+        {!isHidden && content && <PostMessage post={post} />}
-        {!blocked && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
+        {!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
           <span className={styles.summary}>
             <span className={styles.expandButtonWrapper}>
               <span className={styles.expandButton} />
@@ -261,7 +262,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
             )}
           </span>
         )}
-        {!blocked &&
+        {!isHidden &&
           !(pinned && !isInPostPageView) &&
           !isInPendingPostView &&
           !isDescription &&

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

@@ -141,7 +141,13 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
             <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
               {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
               {!isInPostPageView && !isDescription && !isRules && (
-                <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
+                <div
+                  className={styles.postMenuItem}
+                  onClick={() => {
+                    blocked ? unblock() : block();
+                    handleClose();
+                  }}
+                >
                   {blocked ? 'Unhide' : 'Hide'} {postCid === cid ? 'thread' : 'post'}
                 </div>
               )}

src/components/post/post.tsx

@@ -6,7 +6,7 @@ import PostMobile from './post-mobile';
 
 export interface PostProps {
   index?: number;
-  isBlocked?: boolean;
+  isHidden?: boolean;
   post?: any;
   reply?: any;
   roles?: Role[];

src/hooks/use-blocked-comments.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { Comment, useAccount, useComments } from '@plebbit/plebbit-react-hooks';
+
+const useBlockedComments = (subplebbitAddress?: string): Comment[] => {
+  const account = useAccount();
+
+  const commentCids = useMemo(() => {
+    return Object.entries(account.blockedAddresses)
+      .filter(([address, isBlocked]) => {
+        const isValidCommentCid = !address || /^Qm[a-zA-Z0-9]{44}$/.test(address);
+        return isBlocked && isValidCommentCid;
+      })
+      .map(([address]) => address);
+  }, [account]);
+
+  const { comments } = useComments({ commentCids });
+
+  const filteredComments = useMemo(() => {
+    const validComments = comments.filter((comment): comment is Comment => comment !== undefined);
+
+    if (!subplebbitAddress) {
+      return validComments;
+    }
+
+    return validComments.filter((comment: Comment) => comment.subplebbitAddress === subplebbitAddress);
+  }, [comments, subplebbitAddress]);
+
+  return filteredComments;
+};
+
+export default useBlockedComments;

src/stores/useBlockedCommentsStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface StoreState {
+  showBlockedComments: boolean;
+  setShowBlockedComments: (show: boolean) => void;
+  resetShowBlockedComments: () => void;
+}
+
+const useStore = create<StoreState>((set) => ({
+  showBlockedComments: false,
+  setShowBlockedComments: (show) => set({ showBlockedComments: show }),
+  resetShowBlockedComments: () => set({ showBlockedComments: false }),
+}));
+
+export default useStore;

src/views/board/board.tsx

@@ -5,6 +5,8 @@ import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useTranslation } from 'react-i18next';
 import styles from './board.module.css';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useBlockedCommentsStore from '../../stores/useBlockedCommentsStore';
+import useBlockedComments from '../../hooks/use-blocked-comments';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import useReplyModal from '../../hooks/use-reply-modal';
@@ -42,6 +44,19 @@ const Board = () => {
   const sortType = 'active';
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
 
+  const { resetShowBlockedComments, showBlockedComments, setShowBlockedComments } = useBlockedCommentsStore();
+  const blockedComments = useBlockedComments(subplebbitAddress);
+
+  useEffect(() => {
+    resetShowBlockedComments();
+  }, [subplebbitAddress, resetShowBlockedComments]);
+
+  useEffect(() => {
+    if (blockedComments.length === 0) {
+      setShowBlockedComments(false);
+    }
+  }, [blockedComments, setShowBlockedComments]);
+
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { createdAt, description, rules, shortAddress, state, suggested } = subplebbit || {};
   const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : subplebbit?.title;
@@ -96,7 +111,7 @@ const Board = () => {
     <div className={styles.content}>
       {location.pathname.endsWith('/settings') && <SettingsModal />}
       {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
-      {feed.length > 0 && (
+      {feed.length > 0 && !showBlockedComments && (
         <>
           {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
           {((description && description.length > 0) || isInAllView) && (
@@ -111,23 +126,27 @@ const Board = () => {
           )}
         </>
       )}
-      <Virtuoso
+      {showBlockedComments ? (
-        increaseViewportBy={{ bottom: 1200, top: 1200 }}
+        blockedComments.map((comment) => <Post key={comment.cid} post={comment} />)
-        totalCount={feed?.length || 0}
+      ) : (
-        data={feed}
+        <Virtuoso
-        itemContent={(index, post) => {
+          increaseViewportBy={{ bottom: 1200, top: 1200 }}
-          const { deleted, locked, removed } = post || {};
+          totalCount={feed?.length || 0}
-          const isThreadClosed = deleted || locked || removed;
+          data={feed}
+          itemContent={(index, post) => {
+            const { deleted, locked, removed } = post || {};
+            const isThreadClosed = deleted || locked || removed;
 
-          return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
+            return <Post index={index} post={post} openReplyModal={isThreadClosed ? () => alert(t('thread_closed_alert')) : openReplyModal} />;
-        }}
+          }}
-        useWindowScroll={true}
+          useWindowScroll={true}
-        components={{ Footer }}
+          components={{ Footer }}
-        endReached={loadMore}
+          endReached={loadMore}
-        ref={virtuosoRef}
+          ref={virtuosoRef}
-        restoreStateFrom={lastVirtuosoState}
+          restoreStateFrom={lastVirtuosoState}
-        initialScrollTop={lastVirtuosoState?.scrollTop}
+          initialScrollTop={lastVirtuosoState?.scrollTop}
-      />
+        />
+      )}
     </div>
   );
 };

src/views/catalog/catalog.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { useAccount, Subplebbit, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useBlockedCommentsStore from '../../stores/useBlockedCommentsStore';
+import useBlockedComments from '../../hooks/use-blocked-comments';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 import useFeedStateString from '../../hooks/use-feed-state-string';
 import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
@@ -16,7 +18,7 @@ import _ from 'lodash';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
-const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit) => {
+const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subplebbit: Subplebbit, includeDescriptionAndRules: boolean) => {
   const { t } = useTranslation();
   const { address, createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {};
   const { avatarUrl } = suggested || {};
@@ -29,7 +31,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
     if (!isFeedLoaded) {
       return []; // prevent rules and description from appearing while feed is loading
     }
-    if (!description && !rules && !isInAllView) {
+    if (!includeDescriptionAndRules || (!description && !rules && !isInAllView)) {
       return feed;
     }
     const _feed = [...feed];
@@ -59,7 +61,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
       });
     }
     return _feed;
-  }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub]);
+  }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub, includeDescriptionAndRules]);
 
   // Memoize rows calculation, ensuring it updates on changes to the modified feed or column count
   const rows = useMemo(() => {
@@ -102,8 +104,25 @@ const Catalog = () => {
   // eslint-disable-next-line
   const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
 
+  const blockedComments = useBlockedComments(subplebbitAddress);
+  const blockedCommentsAddresses = useMemo(() => blockedComments.map((comment) => comment.cid), [blockedComments]);
+
   const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage });
 
+  const filteredFeed = useMemo(() => feed.filter((comment) => !blockedCommentsAddresses.includes(comment.cid)), [feed, blockedCommentsAddresses]);
+
+  const { resetShowBlockedComments, showBlockedComments, setShowBlockedComments } = useBlockedCommentsStore();
+
+  useEffect(() => {
+    resetShowBlockedComments();
+  }, [subplebbitAddress, resetShowBlockedComments]);
+
+  useEffect(() => {
+    if (blockedComments.length === 0) {
+      setShowBlockedComments(false);
+    }
+  }, [blockedComments, setShowBlockedComments]);
+
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { shortAddress, state, title } = subplebbit || {};
   const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
@@ -121,7 +140,7 @@ const Catalog = () => {
 
   const Footer = () => {
     let footerContent;
-    if (feed.length === 0) {
+    if ((showBlockedComments ? blockedComments : filteredFeed).length === 0) {
       footerContent = t('no_posts');
     }
     if (hasMore || subplebbitAddresses.length === 0) {
@@ -130,10 +149,9 @@ const Catalog = () => {
     return <div className={styles.footer}>{footerContent}</div>;
   };
 
-  const isFeedloaded = feed.length > 0 || state === 'failed';
+  const isFeedLoaded = (showBlockedComments ? blockedComments : filteredFeed).length > 0 || state === 'failed';
 
-  // split feed into rows
+  const rows = useFeedRows(columnCount, showBlockedComments ? blockedComments : filteredFeed, isFeedLoaded, subplebbit, !showBlockedComments);
-  const rows = useFeedRows(columnCount, feed, isFeedloaded, subplebbit);
 
   // save the last Virtuoso state to restore it when navigating back
   const virtuosoRef = useRef<VirtuosoHandle | null>(null);