From 4858ceadc98ee367c1d81a59dce67a4c78b3df10 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 28 Aug 2024 11:15:04 +0200
Subject: [PATCH 01/16] fix(edit menu): modal position would bug out when
 resizing textarea to edit post content

---
 src/components/edit-menu/edit-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx
index 2cfe0e3c..c2de0971 100644
--- a/src/components/edit-menu/edit-menu.tsx
+++ b/src/components/edit-menu/edit-menu.tsx
@@ -90,7 +90,7 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
     placement: 'bottom-start',
     open: isEditMenuOpen,
     onOpenChange: setIsEditMenuOpen,
-    middleware: [offset(2), flip({ fallbackAxisSideDirection: 'end' }), shift()],
+    middleware: [offset(2), shift()],
     whileElementsMounted: autoUpdate,
   });
 

From 30220af7c0e491b9e376fb37e705c21ada8c7476 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 28 Aug 2024 14:23:16 +0200
Subject: [PATCH 02/16] Update edit-menu.tsx

---
 src/components/edit-menu/edit-menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx
index c2de0971..663dbc85 100644
--- a/src/components/edit-menu/edit-menu.tsx
+++ b/src/components/edit-menu/edit-menu.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
+import { autoUpdate, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';

From e04eb3bb5cc08371ba31a8024c0937f17dceebc7 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 28 Aug 2024 21:50:31 +0200
Subject: [PATCH 03/16] don't help user format markdown when editing content
 that was already published

---
 src/components/edit-menu/edit-menu.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx
index 663dbc85..9cc5f34d 100644
--- a/src/components/edit-menu/edit-menu.tsx
+++ b/src/components/edit-menu/edit-menu.tsx
@@ -114,11 +114,6 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
     setIsEditMenuOpen(false);
   };
 
-  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const formattedContent = formatMarkdown(e.target.value);
-    setPublishCommentEditOptions((state) => ({ ...state, content: formattedContent }));
-  };
-
   return (
     <>
       <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(cid && getReferenceProps())}>
@@ -146,7 +141,11 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
                   </div>
                   {isContentEditorOpen && (
                     <div>
-                      <textarea className={styles.editTextarea} defaultValue={publishCommentEditOptions.content ?? ''} onChange={handleContentChange} />
+                      <textarea
+                        className={styles.editTextarea}
+                        defaultValue={publishCommentEditOptions.content ?? ''}
+                        onChange={(e) => setPublishCommentEditOptions((state) => ({ ...state, content: e.target.value }))}
+                      />
                     </div>
                   )}
                 </>

From 21f75c1db1c340bceedf2a224d43b5a59a6de60f Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 28 Aug 2024 21:51:03 +0200
Subject: [PATCH 04/16] don't help user format markdown if content already
 contains correct empty line syntax

---
 src/lib/utils/post-utils.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/utils/post-utils.ts b/src/lib/utils/post-utils.ts
index e0d008ad..01dcee51 100644
--- a/src/lib/utils/post-utils.ts
+++ b/src/lib/utils/post-utils.ts
@@ -24,10 +24,16 @@ export function getTextColorForBackground(rgb: string): string {
 export const formatMarkdown = (content: string): string => {
   let md = content;
   if (md) {
-    // Replace single newline with "/n&nbsp;/n" if followed by a newline
-    md = md.replace(/\n(?=\n)/g, '\n&nbsp;\n');
-    // Replace single newline with double newline if between two characters
-    md = md.replace(/\n(?=\S)/g, '\n\n');
+    // Check if the content already contains valid Markdown patterns
+    const alreadyFormattedPattern = /\n&nbsp;\n/;
+
+    // help the user by formatting the content if it's not already formatted
+    if (!alreadyFormattedPattern.test(md)) {
+      // Replace single newline with "/n&nbsp;/n" if followed by a newline
+      md = md.replace(/\n(?=\n)/g, '\n&nbsp;\n');
+      // Replace single newline with double newline if between two characters
+      md = md.replace(/\n(?=\S)/g, '\n\n');
+    }
   }
   return md;
 };

From 4e390a9fc573610ae76249b9126a42d85b442a87 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 28 Aug 2024 22:05:20 +0200
Subject: [PATCH 05/16] fix(theme): theme changed incorrectly in pending post
 page

---
 src/components/edit-menu/edit-menu.tsx  |  1 -
 src/hooks/use-initial-theme.ts          | 37 +++++++++++++++++++++----
 src/hooks/use-theme.ts                  |  4 +--
 src/views/pending-post/pending-post.tsx |  3 ++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx
index 9cc5f34d..e8520eaa 100644
--- a/src/components/edit-menu/edit-menu.tsx
+++ b/src/components/edit-menu/edit-menu.tsx
@@ -4,7 +4,6 @@ import { autoUpdate, FloatingFocusManager, offset, shift, useClick, useDismiss,
 import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
-import { formatMarkdown } from '../../lib/utils/post-utils';
 import useChallengesStore from '../../stores/use-challenges-store';
 import _ from 'lodash';
 import useIsMobile from '../../hooks/use-is-mobile';
diff --git a/src/hooks/use-initial-theme.ts b/src/hooks/use-initial-theme.ts
index 2d494102..2bf46d28 100644
--- a/src/hooks/use-initial-theme.ts
+++ b/src/hooks/use-initial-theme.ts
@@ -4,10 +4,13 @@ import useThemeStore from '../stores/use-theme-store';
 import useDefaultSubplebbits from './use-default-subplebbits';
 import { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView } from '../lib/utils/view-utils';
 import { nsfwTags } from '../views/home/home';
+import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 
-const useInitialTheme = () => {
+const useInitialTheme = (pendingPostSubplebbitAddress?: string) => {
   const location = useLocation();
-  const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
+  const { subplebbitAddress: paramsSubplebbitAddress, accountCommentIndex } = useParams<{ subplebbitAddress: string; accountCommentIndex?: string }>();
+  const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
+  const pendingPost = useAccountComment({ commentIndex });
   const getTheme = useThemeStore((state) => state.getTheme);
   const currentTheme = useThemeStore((state) => state.currentTheme);
   const subplebbits = useDefaultSubplebbits();
@@ -22,13 +25,23 @@ const useInitialTheme = () => {
     let theme = 'yotsuba';
 
     if (isInPendingPostView) {
-      theme = currentTheme || 'yotsuba';
+      const subplebbitAddress = pendingPostSubplebbitAddress || pendingPost?.subplebbitAddress;
+      if (subplebbitAddress) {
+        const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+        if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+          theme = getTheme('nsfw', false) || 'yotsuba';
+        } else {
+          theme = getTheme('sfw', false) || 'yotsuba-b';
+        }
+      } else {
+        theme = currentTheme || 'yotsuba';
+      }
     } else if (isInAllView || isInSubscriptionsView) {
       theme = getTheme('sfw', false) || 'yotsuba-b'; // Add 'false' parameter
     } else if (isInHomeView || isInNotFoundView) {
       theme = 'yotsuba';
-    } else if (subplebbitAddress) {
-      const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+    } else if (paramsSubplebbitAddress) {
+      const subplebbit = subplebbits.find((s) => s.address === paramsSubplebbitAddress);
       if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
         theme = getTheme('nsfw', false) || 'yotsuba'; // Add 'false' parameter
       } else {
@@ -37,7 +50,19 @@ const useInitialTheme = () => {
     }
 
     return theme;
-  }, [isInPendingPostView, isInAllView, isInSubscriptionsView, isInHomeView, isInNotFoundView, subplebbitAddress, getTheme, currentTheme, subplebbits]);
+  }, [
+    isInPendingPostView,
+    isInAllView,
+    isInSubscriptionsView,
+    isInHomeView,
+    isInNotFoundView,
+    paramsSubplebbitAddress,
+    getTheme,
+    currentTheme,
+    subplebbits,
+    pendingPostSubplebbitAddress,
+    pendingPost,
+  ]);
 
   return initialTheme;
 };
diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
index a19c65da..e5fea198 100644
--- a/src/hooks/use-theme.ts
+++ b/src/hooks/use-theme.ts
@@ -15,7 +15,7 @@ const updateThemeClass = (newTheme: string) => {
   }
 };
 
-const useTheme = (): [string, (theme: string) => void] => {
+const useTheme = (pendingPostSubplebbitAddress?: string): [string, (theme: string) => void] => {
   const location = useLocation();
   const params = useParams<{ subplebbitAddress: string }>();
   const setThemeStore = useThemeStore((state) => state.setTheme);
@@ -23,7 +23,7 @@ const useTheme = (): [string, (theme: string) => void] => {
   const loadThemes = useThemeStore((state) => state.loadThemes);
   const subplebbits = useDefaultSubplebbits();
 
-  const initialTheme = useInitialTheme();
+  const initialTheme = useInitialTheme(pendingPostSubplebbitAddress);
   const [currentTheme, setCurrentTheme] = useState(initialTheme);
 
   const getCurrentTheme = useCallback(() => {
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
index 4348938a..fae00bdf 100644
--- a/src/views/pending-post/pending-post.tsx
+++ b/src/views/pending-post/pending-post.tsx
@@ -4,6 +4,7 @@ import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { isSettingsView } from '../../lib/utils/view-utils';
 import { Post } from '../post';
 import SettingsModal from '../../components/settings-modal';
+import useTheme from '../../hooks/use-theme';
 
 const PendingPost = () => {
   const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
@@ -14,6 +15,8 @@ const PendingPost = () => {
   const params = useParams();
   const isInSettingsView = isSettingsView(location.pathname, params);
 
+  useTheme(post?.subplebbitAddress);
+
   useEffect(() => window.scrollTo(0, 0), []);
 
   useEffect(() => {

From 068c30a3222877c816b22601920c0d03a18b7c18 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 12:47:22 +0200
Subject: [PATCH 06/16] fix(post): don't show link if comment is removed or
 deleted

---
 src/components/post-desktop/post-desktop.tsx | 8 ++++----
 src/components/post-mobile/post-mobile.tsx   | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index ff75da19..633b1902 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -376,7 +376,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
     post = editedComment;
   }
 
-  const { author, cid, link, postCid, subplebbitAddress } = post || {};
+  const { author, cid, deleted, link, postCid, removed, subplebbitAddress } = post || {};
   const isRouteLinkToReply = useLocation().pathname.startsWith(`/p/${subplebbitAddress}/c/${cid}`);
   const { hidden } = useHide({ cid });
 
@@ -390,7 +390,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
         data-post-cid={postCid}
       >
         <PostInfo openReplyModal={openReplyModal} post={post} postReplyCount={postReplyCount} roles={roles} />
-        {link && !hidden && isValidURL(link) && <PostMedia post={post} />}
+        {link && !hidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
         {!hidden && <PostMessage post={post} />}
       </div>
     </div>
@@ -399,7 +399,7 @@ const Reply = ({ openReplyModal, postReplyCount, reply, roles }: PostProps) => {
 
 const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies = true }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, content, link, pinned, postCid, state, subplebbitAddress } = post || {};
+  const { author, cid, content, deleted, link, pinned, postCid, removed, state, subplebbitAddress } = post || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const params = useParams();
   const location = useLocation();
@@ -445,7 +445,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
           </span>
         )}
         <div data-cid={cid} data-author-address={author?.shortAddress} data-post-cid={postCid}>
-          {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
+          {link && !isHidden && !(deleted || removed) && isValidURL(link) && <PostMedia post={post} />}
           <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} postReplyCount={replyCount} roles={roles} />
           {!isHidden && !content && <div className={styles.spacer} />}
           {!isHidden && content && <PostMessage post={post} />}
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index d4b4737b..fa5ff617 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -162,7 +162,9 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
           )}
         </span>
       </div>
-      {(hasThumbnail || link) && <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />}
+      {(hasThumbnail || link) && !(deleted || removed) && (
+        <CommentMedia commentMediaInfo={commentMediaInfo} post={post} showThumbnail={showThumbnail} setShowThumbnail={setShowThumbnail} />
+      )}
     </>
   );
 };

From 5c846fcdc8a23ead278868c92bc6c9443ea231c8 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 12:51:22 +0200
Subject: [PATCH 07/16] fix(home): "use catalog" button didn't work for some
 addresses

---
 src/views/home/boards-box/boards-box.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/views/home/boards-box/boards-box.tsx b/src/views/home/boards-box/boards-box.tsx
index 81902c00..a02d18f7 100644
--- a/src/views/home/boards-box/boards-box.tsx
+++ b/src/views/home/boards-box/boards-box.tsx
@@ -9,11 +9,10 @@ import { nsfwTags } from '../home';
 import BoxModal from '../box-modal';
 import useIsSubplebbitOffline from '../../../hooks/use-is-subplebbit-offline';
 
-const Board = ({ subplebbit, subplebbits }: { subplebbit: Subplebbit; subplebbits: any }) => {
+const Board = ({ subplebbit, subplebbits, useCatalog }: { subplebbit: Subplebbit; subplebbits: any; useCatalog?: boolean }) => {
   const { t } = useTranslation();
   const { address, title, tags } = subplebbit || {};
   const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
-  const { useCatalog } = useHomeFiltersStore();
 
   const boardLink = useCatalog ? `/p/${address}/catalog` : `/p/${address}`;
 
@@ -37,6 +36,8 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
   const accountSubplebbitAddresses = Object.keys(accountSubplebbits);
   const { showNsfwBoardsOnly, showWorksafeBoardsOnly } = useHomeFiltersStore();
 
+  const { useCatalog } = useHomeFiltersStore();
+
   const filterSubs = (subs: Subplebbit[], includeTags: string[], excludeTags: string[] = []) =>
     subs.filter((sub) => includeTags.every((tag) => sub.tags?.includes(tag)) && excludeTags.every((tag) => !sub.tags?.includes(tag)));
 
@@ -72,10 +73,10 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
           <h3>Multiboards</h3>
           <div className={styles.list}>
             <div className={styles.subplebbit}>
-              <Link to='/p/all'>{multisubMetadata?.title || 'All'}</Link>
+              <Link to={useCatalog ? '/p/all/catalog' : '/p/all'}>{multisubMetadata?.title || 'All'}</Link>
             </div>
             <div className={styles.subplebbit}>
-              <Link to='/p/subscriptions'>Subscriptions</Link>
+              <Link to={useCatalog ? '/p/subscriptions/catalog' : '/p/subscriptions'}>Subscriptions</Link>
             </div>
           </div>
           {plebbitSubs.length > 0 && (
@@ -139,7 +140,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
             {subscriptions.length > 0
               ? subscriptions.map((address: string, index: number) => (
                   <div className={styles.subplebbit} key={index}>
-                    <Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
+                    <Link to={useCatalog ? `/p/${address}/catalog` : `/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
                   </div>
                 ))
               : t('not_subscribed')}
@@ -149,7 +150,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
             {accountSubplebbitAddresses.length > 0
               ? accountSubplebbitAddresses.map((address: string, index: number) => (
                   <div className={styles.subplebbit} key={index}>
-                    <Link to={`/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
+                    <Link to={useCatalog ? `/p/${address}/catalog` : `/p/${address}`}>p/{address && Plebbit.getShortAddress(address)}</Link>
                   </div>
                 ))
               : t('not_moderating')}

From 74ddae0ed7a9fc9b1724355d076dbdb13107c861 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 12:56:09 +0200
Subject: [PATCH 08/16] fix(post): "c/" was clickable while post is pending

---
 src/components/post-desktop/post-desktop.tsx | 35 +++++++++-----------
 src/components/post-mobile/post-mobile.tsx   | 35 +++++++++-----------
 2 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 633b1902..f35f2fe1 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -153,25 +153,22 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
             <Link to={`/p/${subplebbitAddress}`}>p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}</Link>{' '}
           </span>
         )}
-        {!(isDescription || isRules) && (
-          <span className={styles.postNumLink}>
-            {cid ? (
-              <>
-                <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
-                  c/
-                </Link>
-                <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}>
-                  {shortCid}
-                </span>
-              </>
-            ) : (
-              <>
-                <span style={{ cursor: 'pointer' }}>c/</span>
-                <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
-              </>
-            )}
-          </span>
-        )}
+        {!(isDescription || isRules) &&
+          (cid ? (
+            <span className={styles.postNumLink}>
+              <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
+                c/
+              </Link>
+              <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}>
+                {shortCid}
+              </span>
+            </span>
+          ) : (
+            <>
+              <span>c/</span>
+              <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
+            </>
+          ))}
         {pinned && (
           <span className={`${styles.stickyIconWrapper} ${!locked && styles.addPaddingBeforeReply}`}>
             <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index fa5ff617..3d6bfcf6 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -141,25 +141,22 @@ const PostInfoAndMedia = ({ openReplyModal, post, postReplyCount = 0, roles }: P
             </div>
           )}
           <Tooltip children={<span>{getFormattedDate(timestamp)}</span>} content={getFormattedTimeAgo(timestamp)} />{' '}
-          {!(isDescription || isRules) && (
-            <span className={styles.postNumLink}>
-              {cid ? (
-                <>
-                  <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
-                    c/
-                  </Link>
-                  <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}>
-                    {shortCid.slice(0, -4)}
-                  </span>
-                </>
-              ) : (
-                <>
-                  <span style={{ cursor: 'pointer' }}>c/</span>
-                  <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
-                </>
-              )}
-            </span>
-          )}
+          {!(isDescription || isRules) &&
+            (cid ? (
+              <span className={styles.postNumLink}>
+                <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')} onClick={(e) => !cid && e.preventDefault()}>
+                  c/
+                </Link>
+                <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid, postCid, subplebbitAddress)}>
+                  {shortCid.slice(0, -4)}
+                </span>
+              </span>
+            ) : (
+              <>
+                <span>c/</span>
+                <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
+              </>
+            ))}
         </span>
       </div>
       {(hasThumbnail || link) && !(deleted || removed) && (

From cdee29e94ffa7cb616aacd34719114d384e60278 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 14:18:20 +0200
Subject: [PATCH 09/16] feat(pending post): show board navigation, stats and
 post form

---
 src/app.tsx                                    | 12 +++++++-----
 src/components/board-buttons/board-buttons.tsx |  8 +++-----
 src/views/pending-post/pending-post.tsx        |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index ffba5fae..ce795174 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,7 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
+import { useAccountComment } from '@plebbit/plebbit-react-hooks';
 import { isAllView, isSubscriptionsView } from './lib/utils/view-utils';
 import useIsMobile from './hooks/use-is-mobile';
+import useTheme from './hooks/use-theme';
+import { timeFilterNames } from './hooks/use-time-filter';
 import styles from './app.module.css';
 import Board from './views/board';
 import Catalog from './views/catalog';
@@ -16,8 +19,6 @@ import ChallengeModal from './components/challenge-modal';
 import PostForm from './components/post-form';
 import SubplebbitStats from './components/subplebbit-stats';
 import TopBar from './components/topbar';
-import { timeFilterNames } from './hooks/use-time-filter';
-import useTheme from './hooks/use-theme';
 
 const BoardLayout = () => {
   const { accountCommentIndex, subplebbitAddress, timeFilterName } = useParams();
@@ -25,8 +26,9 @@ const BoardLayout = () => {
   const isMobile = useIsMobile();
   const isInAllView = isAllView(location.pathname, useParams());
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
+  const pendingPost = useAccountComment({ commentIndex: accountCommentIndex ? parseInt(accountCommentIndex) : undefined });
 
-  const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(parseInt(accountCommentIndex)) && parseInt(accountCommentIndex) >= 0);
+  const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(Number(accountCommentIndex)) && Number(accountCommentIndex) >= 0);
 
   if (!isValidAccountCommentIndex || (timeFilterName && !timeFilterNames.includes(timeFilterName))) {
     return <NotFound />;
@@ -42,13 +44,13 @@ const BoardLayout = () => {
       <TopBar />
       <BoardHeader />
       {isMobile
-        ? (subplebbitAddress || isInAllView || isInSubscriptionsView) && (
+        ? (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && (
             <>
               <PostForm key={key} />
               <MobileBoardButtons />
             </>
           )
-        : (subplebbitAddress || isInAllView || isInSubscriptionsView) && (
+        : (subplebbitAddress || isInAllView || isInSubscriptionsView || pendingPost?.subplebbitAddress) && (
             <>
               <PostForm key={key} />
               {!(isInAllView || isInSubscriptionsView) && <SubplebbitStats />}
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index e6a319be..064672eb 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/src/components/board-buttons/board-buttons.tsx
@@ -267,11 +267,9 @@ export const DesktopBoardButtons = () => {
             <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
             ] [
             <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]
-            {isInPostView && (
-              <span className={styles.rightSideButtons}>
-                <PostPageStats />
-              </span>
-            )}
+            <span className={styles.rightSideButtons}>
+              <PostPageStats />
+            </span>
           </>
         ) : (
           <>
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
index fae00bdf..72980b28 100644
--- a/src/views/pending-post/pending-post.tsx
+++ b/src/views/pending-post/pending-post.tsx
@@ -28,7 +28,7 @@ const PendingPost = () => {
   return (
     <>
       {isInSettingsView && <SettingsModal />}
-      <Post post={post} showReplies={false} />
+      <Post post={post} />
     </>
   );
 };

From 0cb386cf662a570c3dd5772ec50bdbba56243618 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 14:25:47 +0200
Subject: [PATCH 10/16] fix(pending post): "[Reply]" button and post menu
 shouldn't be clickable

---
 src/components/post-desktop/post-desktop.tsx          |  1 +
 .../post-menu-desktop/post-menu-desktop.tsx           | 11 +++++++++--
 .../post-mobile/post-menu-mobile/post-menu-mobile.tsx | 11 +++++++++--
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index f35f2fe1..972d2e41 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -184,6 +184,7 @@ const PostInfo = ({ openReplyModal, post, postReplyCount = 0, roles, isHidden }:
             [
             <Link
               to={isInAllView && isDescription ? '/p/all/description' : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}
+              onClick={(e) => !cid && e.preventDefault()}
             >
               {_.capitalize(t('reply'))}
             </Link>
diff --git a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index c943afec..6e53427f 100644
--- a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+++ b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -165,6 +165,12 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
   const headingId = useId();
 
+  const handleMenuClick = () => {
+    if (cid) {
+      setMenuBtnRotated((prev) => !prev);
+    }
+  };
+
   const handleClose = () => setMenuBtnRotated(false);
 
   return (
@@ -173,13 +179,14 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
         <span
           className={isInCatalogView ? styles.postMenuBtnCatalog : styles.postMenuBtn}
           title='Post menu'
-          onClick={() => setMenuBtnRotated((prev) => !prev)}
-          style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }}
+          onClick={handleMenuClick}
+          style={{ transform: menuBtnRotated && cid ? 'rotate(90deg)' : 'rotate(0deg)' }}
         >
           ▶
         </span>
       </span>
       {menuBtnRotated &&
+        cid &&
         createPortal(
           <FloatingFocusManager context={context} modal={false}>
             <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
diff --git a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index 5756654f..9764cbb8 100644
--- a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -148,16 +148,23 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
   const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);
   const headingId = useId();
 
+  const handleMenuClick = () => {
+    if (cid) {
+      setIsMenuOpen((prev) => !prev);
+    }
+  };
+
   const handleClose = () => setIsMenuOpen(false);
 
   const isInBoardView = isBoardView(useLocation().pathname, useParams());
 
   return (
     <>
-      <span className={styles.postMenuBtn} title='Post menu' onClick={() => setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
+      <span className={styles.postMenuBtn} title='Post menu' onClick={handleMenuClick} ref={refs.setReference} {...getReferenceProps()}>
         ...
       </span>
       {isMenuOpen &&
+        cid &&
         createPortal(
           <FloatingFocusManager context={context} modal={false}>
             <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
@@ -171,7 +178,7 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
           </FloatingFocusManager>,
           document.body,
         )}
-      {(isAccountMod || isAccountCommentAuthor) && (
+      {(isAccountMod || isAccountCommentAuthor) && cid && (
         <span className={styles.checkbox}>
           <EditMenu isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} post={post} />
         </span>

From d482d3246744b0d7701888fa0ce18433d7798381 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 14:37:47 +0200
Subject: [PATCH 11/16] feat(board stats): remember hide/show choice per
 subplebbit

---
 .../subplebbit-stats/subplebbit-stats.tsx     | 15 ++++++-----
 .../use-subplebbit-stats-visibility-store.ts  | 27 +++++++++++++++++++
 2 files changed, 35 insertions(+), 7 deletions(-)
 create mode 100644 src/stores/use-subplebbit-stats-visibility-store.ts

diff --git a/src/components/subplebbit-stats/subplebbit-stats.tsx b/src/components/subplebbit-stats/subplebbit-stats.tsx
index 4b527b46..cba3f1f3 100644
--- a/src/components/subplebbit-stats/subplebbit-stats.tsx
+++ b/src/components/subplebbit-stats/subplebbit-stats.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
-import styles from './subplebbit-stats.module.css';
 import { Trans, useTranslation } from 'react-i18next';
+import { useAccountComment, useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
+import useSubplebbitStatsVisibilityStore from '../../stores/use-subplebbit-stats-visibility-store';
 import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
+import styles from './subplebbit-stats.module.css';
 
 const SubplebbitStats = () => {
   const { t } = useTranslation();
@@ -16,7 +16,8 @@ const SubplebbitStats = () => {
   const { address, createdAt } = subplebbit || {};
 
   const stats = useSubplebbitStats({ subplebbitAddress: address });
-  const [showStats, setShowStats] = useState(true);
+  const { hiddenStats, toggleVisibility } = useSubplebbitStatsVisibilityStore();
+  const isHidden = hiddenStats[address];
 
   const location = useLocation();
   const isInDescriptionView = isDescriptionView(location.pathname, params);
@@ -44,7 +45,7 @@ const SubplebbitStats = () => {
             </td>
           </tr>
         </thead>
-        {showStats && (
+        {!isHidden && (
           <tbody>
             <tr>
               <td>
@@ -93,8 +94,8 @@ const SubplebbitStats = () => {
           <tr>
             <td colSpan={2}>
               [
-              <span className={styles.hideButton} onClick={() => setShowStats(!showStats)}>
-                {showStats ? t('hide') : t('show_stats')}
+              <span className={styles.hideButton} onClick={() => toggleVisibility(address)}>
+                {isHidden ? t('show_stats') : t('hide')}
               </span>
               ]
             </td>
diff --git a/src/stores/use-subplebbit-stats-visibility-store.ts b/src/stores/use-subplebbit-stats-visibility-store.ts
new file mode 100644
index 00000000..c8f334cd
--- /dev/null
+++ b/src/stores/use-subplebbit-stats-visibility-store.ts
@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface SubplebbitStatsVisibilityState {
+  hiddenStats: { [subplebbitAddress: string]: boolean };
+  toggleVisibility: (subplebbitAddress: string) => void;
+}
+
+const useSubplebbitStatsVisibilityStore = create<SubplebbitStatsVisibilityState>()(
+  persist(
+    (set) => ({
+      hiddenStats: {},
+      toggleVisibility: (subplebbitAddress) =>
+        set((state) => ({
+          hiddenStats: {
+            ...state.hiddenStats,
+            [subplebbitAddress]: !state.hiddenStats[subplebbitAddress],
+          },
+        })),
+    }),
+    {
+      name: 'subplebbit-stats-visibility',
+    },
+  ),
+);
+
+export default useSubplebbitStatsVisibilityStore;

From 9543f16f683d2d90041edab895a571d30a30baae Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 15:00:21 +0200
Subject: [PATCH 12/16] fix(edit menu): couldn't edit post content if post was
 just published

---
 src/components/edit-menu/edit-menu.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx
index e8520eaa..70c8464e 100644
--- a/src/components/edit-menu/edit-menu.tsx
+++ b/src/components/edit-menu/edit-menu.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { autoUpdate, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
@@ -101,6 +101,13 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
 
   const headingId = useId();
 
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: cid,
+    }));
+  }, [cid]);
+
   const _publishCommentEdit = async () => {
     try {
       await publishCommentEdit();

From 3d2d510259b0e7ac4bcfecdff872d928a550709c Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Thu, 29 Aug 2024 17:48:34 +0200
Subject: [PATCH 13/16] fix(post form): user could post empty comment using
 spaces

---
 src/components/post-form/post-form.tsx     | 14 +++++++++-----
 src/components/reply-modal/reply-modal.tsx |  6 +++---
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index ad27de6f..321a54f2 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -180,8 +180,12 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     }
   }, [anonMode, getNewSigner, account, setSubmitStore, displayName]);
 
-  const onPublishPost = async () => {
-    if (!title && !content && !link) {
+  const onPublishPost = () => {
+    const currentTitle = subjectRef.current?.value.trim() || '';
+    const currentContent = textRef.current?.value.trim() || '';
+    const currentUrl = urlRef.current?.value.trim() || '';
+
+    if (!currentTitle && !currentContent && !currentUrl) {
       alert(`Cannot post empty comment`);
       return;
     }
@@ -248,10 +252,10 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   };
 
   const onPublishReply = () => {
-    const currentContent = textRef.current?.value || '';
-    const currentUrl = urlRef.current?.value || '';
+    const currentContent = textRef.current?.value.trim() || '';
+    const currentUrl = urlRef.current?.value.trim() || '';
 
-    if (!currentContent.trim() && !currentUrl) {
+    if (!currentContent && !currentUrl) {
       alert(`Cannot post empty comment`);
       return;
     }
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index bac1bc9e..1bae61b3 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -66,10 +66,10 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
   }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode, displayName]);
 
   const onPublishReply = () => {
-    const currentContent = textRef.current?.value || '';
-    const currentUrl = urlRef.current?.value || '';
+    const currentContent = textRef.current?.value.slice(contentPrefix.length).trim() || '';
+    const currentUrl = urlRef.current?.value.trim() || '';
 
-    if (!currentContent.trim() && !currentUrl) {
+    if (!currentContent && !currentUrl) {
       alert(`Cannot post empty comment`);
       return;
     }

From f79e3c351254943f5a4a506f34c875abf2769ce3 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 30 Aug 2024 12:08:53 +0200
Subject: [PATCH 14/16] Update use-publish-reply.ts

---
 src/hooks/use-publish-reply.ts | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/hooks/use-publish-reply.ts b/src/hooks/use-publish-reply.ts
index 192d1603..5d1329ec 100644
--- a/src/hooks/use-publish-reply.ts
+++ b/src/hooks/use-publish-reply.ts
@@ -87,7 +87,7 @@ const useReplyStore = create<ReplyState>((set) => ({
 
 const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress: string }) => {
   const parentCid = cid;
-  const { author, displayName, signer, content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
+  const { author, signer, content, link, spoiler, publishCommentOptions } = useReplyStore((state) => ({
     author: state.author[parentCid],
     displayName: state.displayName[parentCid],
     signer: state.signer[parentCid],
@@ -107,17 +107,29 @@ const useReply = ({ cid, subplebbitAddress }: { cid: string; subplebbitAddress:
       const newOptions: Partial<SetReplyStoreData> = {
         subplebbitAddress,
         parentCid,
-        content: options.content || content,
-        displayName: options.displayName || displayName,
-        link: options.link || link,
+        content: options.content ?? content,
+        link: options.link ?? link,
         spoiler: options.spoiler ?? spoiler,
-        author: anonMode ? signer?.author || options.author || author || { displayName } : undefined,
         signer: anonMode ? signer || options.signer : undefined,
       };
 
+      if ('displayName' in options) {
+        newOptions.displayName = options.displayName;
+      }
+
+      if (anonMode) {
+        const currentAuthor = signer?.author || author || {};
+        newOptions.author = {
+          ...currentAuthor,
+          ...('displayName' in options && { displayName: options.displayName }),
+        };
+      } else {
+        newOptions.author = undefined;
+      }
+
       setReplyStore(newOptions as SetReplyStoreData);
     },
-    [subplebbitAddress, parentCid, author, displayName, signer, content, link, spoiler, setReplyStore, anonMode],
+    [subplebbitAddress, parentCid, author, signer, content, link, spoiler, setReplyStore, anonMode],
   );
 
   const resetPublishReplyOptions = useCallback(() => resetReplyStore(parentCid), [parentCid, resetReplyStore]);

From 45eccb7a466c63aee038fc36eb24056649ae3545 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 30 Aug 2024 12:09:31 +0200
Subject: [PATCH 15/16] Update post-form.tsx

---
 src/components/post-form/post-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index 321a54f2..ccc0e3e4 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -125,7 +125,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
   const author = account?.author || {};
   const { displayName } = author || {};
   const [url, setUrl] = useState('');
-  const { title, content, link, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
+  const { link, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
   const { index, publishComment } = usePublishComment(publishCommentOptions);
 
   const textRef = useRef<HTMLTextAreaElement>(null);

From a698b222f8a22bf3a4e5850cd5328b81cebbbdfa Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 30 Aug 2024 12:19:18 +0200
Subject: [PATCH 16/16] fix(use-replies): a reply to a newly-published reply
 wouldn't render until propagated

---
 src/hooks/use-replies.ts | 41 ++++++++++++++++++++++++++++++----------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/hooks/use-replies.ts b/src/hooks/use-replies.ts
index c4f1ac43..0426f009 100644
--- a/src/hooks/use-replies.ts
+++ b/src/hooks/use-replies.ts
@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useState, useEffect } from 'react';
 import { Comment, useAccountComments } from '@plebbit/plebbit-react-hooks';
 import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
 
@@ -9,24 +9,45 @@ const useReplies = (comment: Comment) => {
   // generate a Set of CIDs from flattened replies for quick lookup
   const replyCids = useMemo(() => new Set(flattenedReplies.map((reply) => reply?.cid)), [flattenedReplies]);
 
-  // filter against the original comment's CID and all CIDs in flattened replies
-  const filter = useCallback(
-    (accountComment: Comment) => {
-      const parentCid = accountComment.parentCid;
-      return parentCid === (comment?.cid || 'n/a') || replyCids.has(parentCid);
+  const [filteredAccountComments, setFilteredAccountComments] = useState<Comment[]>([]);
+
+  const getPostCid = useCallback(
+    (accountComment: Comment, allComments: Comment[]): string | null => {
+      if (accountComment.parentCid === comment?.cid) {
+        return comment?.cid;
+      }
+      const parent = allComments.find((c) => c.cid === accountComment.parentCid);
+      if (!parent) {
+        return null;
+      }
+      return getPostCid(parent, allComments);
     },
-    [comment?.cid, replyCids],
+    [comment?.cid],
   );
 
-  const { accountComments } = useAccountComments({ filter });
+  const { accountComments } = useAccountComments();
+
+  useEffect(() => {
+    const filterComments = (comments: Comment[]) => {
+      return comments.filter((accountComment) => {
+        const parentCid = accountComment.parentCid;
+        if (parentCid === (comment?.cid || 'n/a') || replyCids.has(parentCid)) {
+          return true;
+        }
+        return getPostCid(accountComment, comments) === comment?.cid;
+      });
+    };
+
+    setFilteredAccountComments(filterComments(accountComments));
+  }, [accountComments, comment?.cid, replyCids, getPostCid]);
 
   // the account's replies have a delay before getting published, so get them locally from accountComments instead
   const accountRepliesNotYetPublished = useMemo(() => {
     const replies = flattenedReplies || [];
     const replyCids = new Set(replies.map((reply: Comment) => reply?.cid));
     // filter out the account comments already in comment.replies, so they don't appear twice
-    return accountComments.filter((accountReply) => !replyCids.has(accountReply?.cid));
-  }, [flattenedReplies, accountComments]);
+    return filteredAccountComments.filter((accountReply) => !replyCids.has(accountReply?.cid));
+  }, [flattenedReplies, filteredAccountComments]);
 
   const repliesAndNotYetPublishedReplies = useMemo(() => {
     const repliesSortedByPinnedAndTimestamp = [...accountRepliesNotYetPublished.reverse(), ...(flattenedReplies || [])];