Merge branch 'development' into resolve-conflicts

src/components/modals/SettingsModal.jsx

@@ -165,9 +165,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     }
 
     const invalidUrls = [
-      ...gatewayUrls || defaultGatewayUrls,
+      ...(Array.isArray(gatewayUrls) ? gatewayUrls : (Array.isArray(defaultGatewayUrls) ? defaultGatewayUrls : [])),
-      ...(ipfsClientsOptions || []),
+      ...(Array.isArray(ipfsClientsOptions) ? ipfsClientsOptions : []),
-      ...pubsubClientsOptions || defaultPubsubHttpClientsOptions,
+      ...(Array.isArray(pubsubClientsOptions) ? pubsubClientsOptions : (Array.isArray(defaultPubsubHttpClientsOptions) ? defaultPubsubHttpClientsOptions : [])),
     ].filter((url) => !isValidURL(url));
 
     if (invalidUrls.length > 0) {
@@ -244,9 +244,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     setNewErrorMessage(null);
     setNewSuccessMessage(null);
 
-    gatewayRef.current.value = defaultGatewayUrls.join('\n');
+    gatewayRef.current.value = defaultGatewayUrls ? defaultGatewayUrls.join('\n') : "";
     ipfsRef.current.value = "";
-    pubsubRef.current.value = defaultPubsubHttpClientsOptions.join('\n');
+    pubsubRef.current.value = defaultPubsubHttpClientsOptions ? defaultPubsubHttpClientsOptions.join('\n') : "";
     dataPathRef.current.value = "";
 
     try {

src/components/views/All.jsx

@@ -97,6 +97,7 @@ const All = () => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
@@ -991,6 +992,32 @@ const All = () => {
                                       </li>
                                     ) : null
                                   }
+                                  <li 
+                                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                    View on »
+                                    <ul className="dropdown-menu post-menu-catalog"
+                                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                      <li onClick={() => handleOptionClick(thread.cid)}>
+                                        <a 
+                                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebbit</a>
+                                      </li>
+                                      {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                                        <a
+                                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Seedit</a>
+                                      </li> */}
+                                      <li onClick={() => handleOptionClick(thread.cid)}>
+                                        <a
+                                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebones</a>
+                                      </li>
+                                    </ul>
+                                  </li>
                                 </ul>
                               </div>
                               </PostMenuCatalog>, document.body
@@ -1294,6 +1321,32 @@ const All = () => {
                                       </li>
                                     ) : null
                                   }
+                                  <li 
+                                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                    View on »
+                                    <ul className="dropdown-menu post-menu-catalog"
+                                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                      <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a 
+                                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebbit</a>
+                                      </li>
+                                      {/* <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a
+                                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Seedit</a>
+                                      </li> */}
+                                      <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a
+                                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebones</a>
+                                      </li>
+                                    </ul>
+                                  </li>
                                 </ul>
                               </div>
                               </PostMenuCatalog>, document.body

src/components/views/AllCatalog.jsx

@@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
 import { Virtuoso } from 'react-virtuoso';
-import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -32,236 +32,26 @@ const { version } = packageJson
 let lastVirtuosoStates = {}
 
 
-const AllCatalog = () => {
+const CatalogPost = ({post}) => {
   const {
-    setCaptchaResponse,
-    setChallengesArray,
-    defaultSubplebbits,
     editedComment,
+    setDeletePost,
     setIsAuthorDelete,
+    captchaResponse, setCaptchaResponse,
+    setIsModerationOpen,
+    setChallengesArray,
     setIsAuthorEdit,
     setIsCaptchaOpen,
-    isModerationOpen, setIsModerationOpen,
+    setIsEditModalOpen,
-    isSettingsOpen, setIsSettingsOpen,
     setModeratingCommentCid,
+    setOriginalCommentContent,
+    setPendingComment,
     setResolveCaptchaPromise,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
-    setSelectedTitle,
   } = useGeneralStore(state => state);
 
-
-  const threadMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
-  const postMenuCatalogRef = useRef(null);
-  const virtuosoRef = useRef();
-
-  const account = useAccount();
-  const navigate = useNavigate();
-  const [, setNewErrorMessage] = useError();
-  const [, setNewSuccessMessage] = useSuccess();
-
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
-
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [originalCommentContent, setOriginalCommentContent] = useState(null);
-  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-  const [deletePost, setDeletePost] = useState(false);
-  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-  const [commentCid, setCommentCid] = useState(null);
-  const [moderatorPermissions, setModeratorPermissions] = useState({});
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-
-  const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
-  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: addresses, sortType: 'active' });
-  const { subplebbits } = useSubplebbits({ subplebbitAddresses: addresses, sortType: 'active' });
-  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
-
-  const stateString = useFeedStateString(subplebbits);
-
-  const columnWidth = 180;
-  const windowWidth = useWindowWidth();
-  const columnCount = Math.floor(windowWidth / columnWidth);
-  const rows = useFeedRows(selectedFeed, columnCount);
-
-
-  useEffect(() => {
-    let permissions = {};
-
-    selectedFeed.forEach(thread => {
-      const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
-
-      if (subplebbit && subplebbit.roles) {
-        const role = subplebbit.roles[account?.author.address]?.role;
-
-        if (role === 'moderator' || role === 'admin' || role === 'owner') {
-          permissions[thread.subplebbitAddress] = true;
-        } else {
-          permissions[thread.subplebbitAddress] = false;
-        }
-      }
-    });
-
-    setModeratorPermissions(permissions);
-  }, [account?.author.address, selectedFeed, subplebbits]);
-
-
-  // mobile navbar scroll effect
-  useEffect(() => {
-    const debouncedHandleScroll = debounce(() => {
-      const currentScrollPos = window.pageYOffset;
-      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-      setPrevScrollPos(currentScrollPos);
-    }, 50);
-
-    window.addEventListener('scroll', debouncedHandleScroll);
-
-    return () => window.removeEventListener('scroll', debouncedHandleScroll);
-  }, [prevScrollPos, visible]);
-
-
-  const tryLoadMore = async () => {
-    try { loadMore() }
-    catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)) }
-  };
-
-
-  const onChallengeVerification = (challengeVerification) => {
-    if (challengeVerification.challengeSuccess === true) {
-      setNewSuccessMessage('Challenge Success');
-    }
-    else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-      console.log('challenge failed', challengeVerification);
-    }
-  };
-
-
-  const onChallenge = async (challenges, comment) => {
-    let challengeAnswers = [];
-    try {
-      challengeAnswers = await getChallengeAnswersFromUser(challenges)
-    }
-    catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-    if (challengeAnswers) {
-      await comment.publishChallengeAnswers(challengeAnswers)
-    }
-  };
-
-
-  const getChallengeAnswersFromUser = async (challenges) => {
-    setChallengesArray(challenges);
-
-    return new Promise((resolve, reject) => {
-      const imageString = challenges?.challenges[0].challenge;
-      const imageSource = `data:image/png;base64,${imageString}`;
-      const challengeImg = new Image();
-      challengeImg.src = imageSource;
-
-      challengeImg.onload = () => {
-        setIsCaptchaOpen(true);
-
-        const handleKeyDown = async (event) => {
-          if (event.key === 'Enter') {
-            const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
-            resolve(currentCaptchaResponse);
-            setIsCaptchaOpen(false);
-            document.removeEventListener('keydown', handleKeyDown);
-            event.preventDefault();
-          }
-        };
-
-        setCaptchaResponse('');
-        document.addEventListener('keydown', handleKeyDown);
-
-        setResolveCaptchaPromise(resolve);
-      };
-
-      challengeImg.onerror = () => {
-        reject(setNewErrorMessage('Could not load challenges'));
-      };
-    });
-  };
-
-  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-    commentCid: commentCid,
-    content: editedComment || undefined,
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-
-
-  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
-
-
-  useEffect(() => {
-    setPublishCommentEditOptions((prevOptions) => ({
-      ...prevOptions,
-      commentCid: commentCid,
-      content: editedComment || undefined,
-    }));
-  }, [commentCid, editedComment]);
-
-
-  useEffect(() => {
-    if (editedComment !== '') {
-      setTriggerPublishCommentEdit(true);
-    }
-  }, [editedComment, setIsAuthorEdit]);
-
-
-  useEffect(() => {
-    let isActive = true;
-    if (publishCommentEditOptions && triggerPublishCommentEdit) {
-      (async () => {
-        await publishCommentEdit();
-        if (isActive) {
-          setTriggerPublishCommentEdit(false);
-        }
-      })();
-    }
-
-    return () => {
-      isActive = false;
-    };
-  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
-
-
-  // mobile navbar board select functionality
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === 'subscriptions') {
-      navigate(`/p/subscriptions`);
-      return;
-    } else if (selected === 'all') {
-      navigate(`/p/all`);
-      return;
-    }
-
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/p/${selected}`);
-  };
-
-  // desktop navbar board select functionality
-  const handleClickTitle = (title, address) => {
-    setSelectedTitle(title);
-    setSelectedAddress(address);
-    setSelectedFeed(feed.filter(feed => feed.title === title));
-  };
-
-
-  const CatalogPost = ({ post }) => {
   const thread = post;
   const commentMediaInfo = getCommentMediaInfo(thread);
   const linkCount = countLinks(thread);
@@ -269,7 +59,34 @@ const AllCatalog = () => {
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
-    const isModerator = moderatorPermissions[thread.subplebbitAddress];
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
+  const [isModerator, setIsModerator] = useState(false);
+
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+
+  const account = useAccount();
+  const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
+  const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+
+
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) { 
+      const role = subplebbit.roles[account?.author.address]?.role;
+  
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles]);
+
 
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
@@ -338,6 +155,116 @@ const AllCatalog = () => {
     setIsEditModalOpen(true);
   }
 
+
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+        setNewSuccessMessage('Challenge Success');
+    } 
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+
+
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+  
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+
+
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment, setIsAuthorEdit]);
+
+  
+  useEffect(() => {
+    let isActive = true;
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        if (isActive) {
+          setTriggerPublishCommentEdit(false);
+        }
+      })();
+    }
+
+    return () => {
+      isActive = false;
+    };
+  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
+
+
   return (
     <div key={`thread-`} className="thread" 
     onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
@@ -360,8 +287,7 @@ const AllCatalog = () => {
             src={commentMediaInfo.url} alt={commentMediaInfo.type} 
             onError={(e) => {
               e.target.src = fallbackImgUrl
-                  e.target.onerror = null;
+              e.target.onerror = null;}}  />
-                }} />
           ) : null}
           {commentMediaInfo?.type === "video" ? (
               <video className="card" key={`fti-`} 
@@ -378,7 +304,7 @@ const AllCatalog = () => {
           ) : null}
         </Link>
       ) : null}
-        <div key={`ti-`} className={`thread-icons`} >
+      <div key={`ti-`} className="thread-icons" >
       {(commentMediaInfo && (
         commentMediaInfo.type === 'image' || 
         commentMediaInfo.type === 'video' || 
@@ -386,12 +312,12 @@ const AllCatalog = () => {
         commentMediaInfo.thumbnail))) ? (                          
           <OfflineIndicator 
           address={thread.subplebbitAddress} 
-              className={`thread-icon offline-icon `}
+          className="thread-icon offline-icon"
           tooltipPlace="top" />
         ) : (
           <OfflineIndicator 
           address={thread.subplebbitAddress} 
-              className={`thread-icon ${linkCount > 0 ? "offline-icon-no-link-shifted" : "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
+          className="thread-icon offline-icon-no-link"
           tooltipPlace="top" />
       )}
       </div>
@@ -406,11 +332,9 @@ const AllCatalog = () => {
             </>
           ) : null}
         <PostMenu 
-              style={{
+          style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
-                display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
           position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                zIndex: '999'
+          zIndex: '999'}}
-              }}
           key={`pmb-`} 
           title="Post menu"
           ref={el => { 
@@ -434,11 +358,9 @@ const AllCatalog = () => {
           <PostMenuCatalog selectedStyle={selectedStyle} 
             ref={el => {postMenuCatalogRef.current = el}}
             onClick={(event) => event.stopPropagation()}
-              style={{
+            style={{position: "absolute", 
-                position: "absolute",
             top: menuPosition.top + 7, 
-                left: menuPosition.left
+            left: menuPosition.left}}>
-              }}>
             <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
             style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
             >
@@ -514,6 +436,32 @@ const AllCatalog = () => {
                     </li>
                   ) : null
                 }
+                <li 
+                onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                  View on »
+                  <ul className="dropdown-menu post-menu-catalog"
+                    style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                    <li onClick={() => handleOptionClick(thread.cid)}>
+                      <a 
+                      href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                      target="_blank" rel="noreferrer"
+                      >Plebbit</a>
+                    </li>
+                    {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                      <a
+                      href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                      target="_blank" rel="noreferrer"
+                      >Seedit</a>
+                    </li> */}
+                    <li onClick={() => handleOptionClick(thread.cid)}>
+                      <a
+                      href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                      target="_blank" rel="noreferrer"
+                      >Plebones</a>
+                    </li>
+                  </ul>
+                </li>
               </ul>
             </div>
           </PostMenuCatalog>, document.body
@@ -539,6 +487,80 @@ const AllCatalog = () => {
   return <div>{posts}</div>
 }
 
+
+const AllCatalog = () => {
+  const {
+    defaultSubplebbits,
+    isModerationOpen, setIsModerationOpen,
+    isSettingsOpen, setIsSettingsOpen,
+    originalCommentContent,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    setSelectedTitle,
+  } = useGeneralStore(state => state);
+
+  const virtuosoRef = useRef();
+
+  const navigate = useNavigate();
+
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
+  const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'});
+  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+
+  const stateString = useFeedStateString(subplebbits);
+
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(selectedFeed, columnCount);
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+  // desktop navbar board select functionality
+  const handleClickTitle = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+    setSelectedFeed(feed.filter(feed => feed.title === title));
+  };
+
+
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {
@@ -585,7 +607,7 @@ const AllCatalog = () => {
           <span className="boardList">
             [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -634,7 +656,7 @@ const AllCatalog = () => {
                         <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                         >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
                       ))}
-                  </select>
+                  </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
                     'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
@@ -666,7 +688,7 @@ const AllCatalog = () => {
           <hr />
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -706,7 +728,7 @@ const AllCatalog = () => {
               itemContent={(index, row) => <CatalogRow index={index} row={row} />}
               useWindowScroll={true}
               components={{ Footer: () => hasMore ? <CatalogLoader /> : null}}
-              endReached={tryLoadMore}
+              endReached={loadMore}
               ref={virtuosoRef}
               restoreStateFrom={lastVirtuosoState}
               initialScrollTop={lastVirtuosoState?.scrollTop}
@@ -726,7 +748,7 @@ const AllCatalog = () => {
             marginTop: "2px",
           }}>
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -743,7 +765,7 @@ const AllCatalog = () => {
             <span className="boardList">
               [
                 <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-                /
+                 / 
                 <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
               ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (

src/components/views/Board.jsx

@@ -125,6 +125,7 @@ const Board = () => {
   const [selectedFeed, setSelectedFeed] = useState(feed);
   const [deletePost, setDeletePost] = useState(false);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
@@ -1651,6 +1652,32 @@ const Board = () => {
                                             </li>
                                           ) : null
                                         }
+                                        <li 
+                                        onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                        onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                          View on »
+                                          <ul className="dropdown-menu post-menu-catalog"
+                                            style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                            <li onClick={() => handleOptionClick(thread.cid)}>
+                                              <a 
+                                              href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                                              target="_blank" rel="noreferrer"
+                                              >Plebbit</a>
+                                            </li>
+                                            {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                                              <a
+                                              href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                                              target="_blank" rel="noreferrer"
+                                              >Seedit</a>
+                                            </li> */}
+                                            <li onClick={() => handleOptionClick(thread.cid)}>
+                                              <a
+                                              href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                                              target="_blank" rel="noreferrer"
+                                              >Plebones</a>
+                                            </li>
+                                          </ul>
+                                        </li>
                                       </ul>
                                     </div>
                                     </PostMenuCatalog>, document.body
@@ -1948,6 +1975,32 @@ const Board = () => {
                                               </li>
                                             ) : null
                                           }
+                                          <li 
+                                          onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                          onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                            View on »
+                                            <ul className="dropdown-menu post-menu-catalog"
+                                              style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                              <li onClick={() => handleOptionClick(reply.cid)}>
+                                                <a 
+                                                href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                                target="_blank" rel="noreferrer"
+                                                >Plebbit</a>
+                                              </li>
+                                              {/* <li onClick={() => handleOptionClick(reply.cid)}>
+                                                <a
+                                                href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                                target="_blank" rel="noreferrer"
+                                                >Seedit</a>
+                                              </li> */}
+                                              <li onClick={() => handleOptionClick(reply.cid)}>
+                                                <a
+                                                href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${reply.cid}`}
+                                                target="_blank" rel="noreferrer"
+                                                >Plebones</a>
+                                              </li>
+                                            </ul>
+                                          </li>
                                         </ul>
                                       </div>
                                       </PostMenuCatalog>, document.body

src/components/views/Catalog.jsx

@@ -35,411 +35,27 @@ const {version} = packageJson
 let lastVirtuosoStates = {}
 
 
-const Catalog = () => {
+const CatalogPost = ({post}) => {
   const {
-    captchaResponse, setCaptchaResponse,
-    setChallengesArray,
-    defaultSubplebbits,
     editedComment,
+    setDeletePost,
     setIsAuthorDelete,
+    captchaResponse, setCaptchaResponse,
+    selectedAddress,
+    setIsModerationOpen,
+    setChallengesArray,
     setIsAuthorEdit,
     setIsCaptchaOpen,
-    isModerationOpen, setIsModerationOpen,
+    setIsEditModalOpen,
-    isSettingsOpen, setIsSettingsOpen,
+    isModerator,
     setModeratingCommentCid,
+    setOriginalCommentContent,
     setPendingComment,
-    setPendingCommentIndex,
     setResolveCaptchaPromise,
-    selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
-    selectedTitle, setSelectedTitle,
-    showPostForm,
-    showPostFormLink,
   } = useGeneralStore(state => state);
 
-  const { anonymousMode } = useAnonModeStore();
-  
-  const nameRef = useRef();
-  const subjectRef = useRef();
-  const commentRef = useRef();
-  const linkRef = useRef();
-  const threadMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
-  const postMenuCatalogRef = useRef(null);
-  const selectedThreadCidRef = useRef(null);
-  const virtuosoRef = useRef();
-
-  const navigate = useNavigate();
-  
-  const [, setNewErrorMessage] = useError();
-  const [, setNewSuccessMessage] = useSuccess();
-  
-  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
-  const [isModerator, setIsModerator] = useState(false);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [originalCommentContent, setOriginalCommentContent] = useState(null);
-  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-  const [deletePost, setDeletePost] = useState(false);
-  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-  const [commentCid, setCommentCid] = useState(null);
-  const [executeAnonMode, setExecuteAnonMode] = useState(false);
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-
-  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
-
-  const account = useAccount();
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
-  const { subplebbitAddress } = useParams();
-  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
-  const stateString = useStateString(subplebbit);
-  let feedWithDescriptionAndRules = [...feed];
-
-  if (subplebbit.rules) {
-    feedWithDescriptionAndRules.unshift({ type: 'rules', content: subplebbit.rules });
-  }
-
-  if (subplebbit.description) {
-    feedWithDescriptionAndRules.unshift({ type: 'description', content: subplebbit.description });
-  }
-
-  const columnWidth = 180;
-  const windowWidth = useWindowWidth();
-  const columnCount = Math.floor(windowWidth / columnWidth);
-  const rows = useFeedRows(feedWithDescriptionAndRules, columnCount);
-
-  useEffect(() => {
-    if (subplebbit.roles !== undefined) { 
-      const role = subplebbit.roles[account?.author.address]?.role;
-  
-      if (role === 'moderator' || role === 'admin' || role === 'owner') {
-        setIsModerator(true);
-      } else {
-        setIsModerator(false);
-      }
-    }
-  }, [account?.author.address, subplebbit.roles]);
-
-
-  useEffect(() => {
-    setSelectedAddress(subplebbitAddress);
-  }, [subplebbitAddress, setSelectedAddress]);
-
-
-  const errorString = useMemo(() => {
-    if (subplebbit?.state === 'failed') {
-      let errorString = 'Failed fetching board "' + selectedAddress + '".';
-      if (subplebbit.error) {
-        errorString += `: ${subplebbit.error.toString().slice(0, 300)}`
-      }
-      return errorString
-    }
-  }, [subplebbit?.state, subplebbit?.error, selectedAddress])
-
-
-  useEffect(() => {
-    if (errorString) {
-      setNewErrorMessage(errorString);
-    }
-  }, [errorString, setNewErrorMessage]);
-
-  
-  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
-
-
-  useEffect(() => {
-    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
-    if (subplebbitAddress) {
-      setSelectedAddress(subplebbitAddress);
-    } else if (subplebbit?.address) {
-      setSelectedAddress(subplebbit.address)
-    }
-    if (selectedSubplebbit) {
-      setSelectedTitle(selectedSubplebbit.title);
-    } else if (subplebbit?.title) {
-      setSelectedTitle(subplebbit.title);
-    }
-  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
-
-  // mobile navbar scroll effect
-  useEffect(() => {
-    const debouncedHandleScroll = debounce(() => {
-      const currentScrollPos = window.pageYOffset;
-      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-      setPrevScrollPos(currentScrollPos);
-    }, 50);
-  
-    window.addEventListener('scroll', debouncedHandleScroll);
-  
-    return () => window.removeEventListener('scroll', debouncedHandleScroll);
-  }, [prevScrollPos, visible]);
-
-
-  const onChallengeVerification = (challengeVerification) => {
-    if (challengeVerification.challengeSuccess === true) {
-      if (challengeVerification.publication?.cid !== undefined) {
-        navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
-        console.log('challenge success');
-      } else {
-        setNewSuccessMessage('Challenge Success');
-      }
-    }
-    else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-      console.log('challenge failed', challengeVerification);
-    }
-  };
-
-
-  const onChallenge = async (challenges, comment) => {
-    setPendingComment(comment);
-    let challengeAnswers = [];
-    
-    try {
-      challengeAnswers = await getChallengeAnswersFromUser(challenges)
-    }
-    catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-    if (challengeAnswers) {
-      await comment.publishChallengeAnswers(challengeAnswers)
-    }
-  };
-  
-
-  useEffect(() => {
-    setPublishCommentOptions((prevPublishCommentOptions) => ({
-      ...prevPublishCommentOptions,
-      subplebbitAddress: selectedAddress,
-    }));
-  }, [selectedAddress]);
-  
-
-  const [publishCommentOptions, setPublishCommentOptions] = useState({
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-  
-
-  const { publishComment, index } = usePublishComment(publishCommentOptions);
-
-  useEffect(() => {
-    if (index !== undefined) {
-      setPendingCommentIndex(index);
-      navigate(`/profile/c/`);
-    }
-  }, [index, navigate, setPendingCommentIndex]);
-
-  
-  const resetFields = useCallback(() => {
-    if (nameRef.current) {
-      nameRef.current.value = '';
-    }
-    if (subjectRef.current) {
-      subjectRef.current.value = '';
-    }
-    if (commentRef.current) {
-      commentRef.current.value = '';
-    }
-    if (linkRef.current) {
-      linkRef.current.value = '';
-    }
-  }, []);
-
-
-  const handleSubmit = async (event) => {
-    event.preventDefault();
-    
-    if (subjectRef.current.value === "") {
-      setNewErrorMessage('Subject field is mandatory');
-      return;
-    }
-
-    setPublishCommentOptions((prevPublishCommentOptions) => ({
-      ...prevPublishCommentOptions,
-      author: {
-        displayName: nameRef.current.value || undefined,
-        address: account?.author.address,
-      },
-      title: subjectRef.current.value || undefined,
-      content: commentRef.current.value || undefined,
-      link: linkRef.current.value || undefined,
-    }));
-
-    setTriggerPublishComment(true);
-  };
-
-
-  const updateSigner = useCallback(async () => {
-    if (anonymousMode) {
-      setExecuteAnonMode(true);
-  
-      let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
-      let signer;
-  
-      if (!storedSigners[selectedThreadCidRef]) {
-        signer = await account?.plebbit.createSigner();
-        storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
-        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
-      } else {
-        const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
-          
-        try {
-          signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
-        } catch (error) {
-          console.log(error);
-        }
-      }
-        
-      setPublishCommentOptions(prevPublishCommentOptions => {
-        const newPublishCommentOptions = {
-          ...prevPublishCommentOptions,
-          signer,
-          author: {
-            ...prevPublishCommentOptions.author,
-            address: signer?.address,
-          },
-        };
-  
-        if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
-          return newPublishCommentOptions;
-        }
-  
-        return prevPublishCommentOptions;
-      });
-    }
-  }, [selectedThreadCidRef, anonymousMode, account]);
-  
-  useEffect(() => {
-    updateSigner();
-  }, [updateSigner]);
-
-
-  useEffect(() => {
-    if (publishCommentOptions && triggerPublishComment) {
-      (async () => {
-        await publishComment();
-        resetFields();
-      })();
-      setTriggerPublishComment(false);
-      setExecuteAnonMode(false);
-    }
-  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
-  
-  
-  const getChallengeAnswersFromUser = async (challenges) => {
-    setChallengesArray(challenges);
-    
-    return new Promise((resolve, reject) => {
-      const imageString = challenges?.challenges[0].challenge;
-      const imageSource = `data:image/png;base64,${imageString}`;
-      const challengeImg = new Image();
-      challengeImg.src = imageSource;
-  
-      challengeImg.onload = () => {
-        setIsCaptchaOpen(true);
-  
-        const handleKeyDown = async (event) => {
-          if (event.key === 'Enter') {
-            const currentCaptchaResponse = captchaResponse;
-            resolve(currentCaptchaResponse);
-            setIsCaptchaOpen(false);
-            document.removeEventListener('keydown', handleKeyDown);
-            event.preventDefault();
-          }
-        };
-
-        setCaptchaResponse('');
-        document.addEventListener('keydown', handleKeyDown);
-        
-        setResolveCaptchaPromise(resolve);
-      };
-  
-      challengeImg.onerror = () => {
-        reject(setNewErrorMessage('Could not load challenges'));
-      };
-    });
-  };
-
-
-  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-    commentCid: commentCid,
-    content: editedComment || undefined,
-    subplebbitAddress: selectedAddress || subplebbitAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-  
-  
-  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
-
-
-  useEffect(() => {
-    setPublishCommentEditOptions((prevOptions) => ({
-      ...prevOptions,
-      commentCid: commentCid,
-      content: editedComment || undefined,
-    }));
-  }, [commentCid, editedComment]);
-
-
-  useEffect(() => {
-    if (editedComment !== '') {
-      setTriggerPublishCommentEdit(true);
-    }
-  }, [editedComment]);
-
-  
-  useEffect(() => {
-    if (publishCommentEditOptions && triggerPublishCommentEdit) {
-      (async () => {
-        await publishCommentEdit();
-        setTriggerPublishCommentEdit(false);
-      })();
-    }
-  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
-
-  // mobile navbar board select functionality
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === 'subscriptions') {
-      navigate(`/p/subscriptions`);
-      return;
-    } else if (selected === 'all') {
-      navigate(`/p/all`);
-      return;
-    }
-
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/p/${selected}`);
-  };
-
-  const handleSubscribe = async () => {
-    try {
-      if (subscribed === false) {
-        await subscribe(selectedAddress);
-      } else if (subscribed === true) {
-        await unsubscribe(selectedAddress);
-      }
-    } catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-  };
-
-
-  const CatalogPost = ({post}) => {
   const thread = post;
   const commentMediaInfo = getCommentMediaInfo(thread);
   const linkCount = countLinks(thread);
@@ -447,6 +63,23 @@ const Catalog = () => {
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
+
+  const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+  const { subplebbitAddress } = useParams();
+
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
+
+  const account = useAccount();
+
 
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
@@ -458,6 +91,7 @@ const Catalog = () => {
     setOpenMenuCid(null);
   };
 
+
   useEffect(() => {
     if (openMenuCid !== null) {
       document.addEventListener('click', handleOutsideClick);
@@ -470,6 +104,7 @@ const Catalog = () => {
     };
   }, [openMenuCid, handleOutsideClick]);
 
+
   const handleAuthorDeleteClick = (comment) => {
     handleOptionClick(comment.cid);
 
@@ -516,6 +151,110 @@ const Catalog = () => {
   }
 
 
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+        setNewSuccessMessage('Challenge Success');
+    }
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+
+
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress || subplebbitAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+  
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+
+
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment]);
+
+  
+  useEffect(() => {
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        setTriggerPublishCommentEdit(false);
+      })();
+    }
+  }, [publishCommentEditOptions, triggerPublishCommentEdit, publishCommentEdit]);
+
+  
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+        
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+  
+
+
   if (post.type === 'rules') {
     return (
       <div className='thread'
@@ -580,7 +319,7 @@ const Catalog = () => {
         <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}>
             <div className="teaser">
               <b>Rules</b>
-                {": " + subplebbit.rules.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
+              {": " + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
             </div>
           </Link>
       </div>
@@ -893,6 +632,32 @@ const Catalog = () => {
                       </li>
                     ) : null
                   }
+                  <li 
+                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                    View on »
+                    <ul className="dropdown-menu post-menu-catalog"
+                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                      <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a 
+                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Plebbit</a>
+                      </li>
+                      {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a
+                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Seedit</a>
+                      </li> */}
+                      <li onClick={() => handleOptionClick(thread.cid)}>
+                        <a
+                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                        target="_blank" rel="noreferrer"
+                        >Plebones</a>
+                      </li>
+                    </ul>
+                  </li>
                 </ul>
               </div>
             </PostMenuCatalog>, document.body
@@ -919,6 +684,362 @@ const Catalog = () => {
   return <div>{posts}</div>
 }
 
+
+const Catalog = () => {
+  const {
+    captchaResponse, setCaptchaResponse,
+    setChallengesArray,
+    defaultSubplebbits,
+    setIsCaptchaOpen,
+    isModerationOpen, setIsModerationOpen,
+    setIsModerator,
+    isSettingsOpen, setIsSettingsOpen,
+    originalCommentContent,
+    setPendingComment,
+    setPendingCommentIndex,
+    setResolveCaptchaPromise,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    selectedTitle, setSelectedTitle,
+    showPostForm,
+    showPostFormLink,
+  } = useGeneralStore(state => state);
+
+  const { anonymousMode } = useAnonModeStore();
+  
+  const nameRef = useRef();
+  const subjectRef = useRef();
+  const commentRef = useRef();
+  const linkRef = useRef();
+  const selectedThreadCidRef = useRef(null);
+  const virtuosoRef = useRef();
+
+  const navigate = useNavigate();
+  
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+  
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [executeAnonMode, setExecuteAnonMode] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
+  useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
+
+  const account = useAccount();
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
+  const { subplebbitAddress } = useParams();
+  const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
+  const stateString = useStateString(subplebbit);
+  let feedWithDescriptionAndRules = [...feed];
+
+  
+  if (subplebbit.rules) {
+    feedWithDescriptionAndRules.unshift({ type: 'rules', content: subplebbit.rules });
+  }
+  
+  if (subplebbit.description) {
+    feedWithDescriptionAndRules.unshift({ type: 'description', content: subplebbit.description });
+  }
+  
+
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(feedWithDescriptionAndRules, columnCount);
+
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) { 
+      const role = subplebbit.roles[account?.author.address]?.role;
+  
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles, setIsModerator]);
+
+
+  useEffect(() => {
+    setSelectedAddress(subplebbitAddress);
+  }, [subplebbitAddress, setSelectedAddress]);
+
+
+  const errorString = useMemo(() => {
+    if (subplebbit?.state === 'failed') {
+      let errorString = 'Failed fetching board "' + selectedAddress + '".';
+      if (subplebbit.error) {
+        errorString += `: ${subplebbit.error.toString().slice(0, 300)}`
+      }
+      return errorString
+    }
+  }, [subplebbit?.state, subplebbit?.error, selectedAddress])
+
+
+  useEffect(() => {
+    if (errorString) {
+      setNewErrorMessage(errorString);
+    }
+  }, [errorString, setNewErrorMessage]);
+
+  
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
+
+
+  useEffect(() => {
+    const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
+    if (subplebbitAddress) {
+      setSelectedAddress(subplebbitAddress);
+    } else if (subplebbit?.address) {
+      setSelectedAddress(subplebbit.address)
+    }
+    if (selectedSubplebbit) {
+      setSelectedTitle(selectedSubplebbit.title);
+    } else if (subplebbit?.title) {
+      setSelectedTitle(subplebbit.title);
+    }
+  }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits, subplebbit?.address, subplebbit?.title]);
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+      if (challengeVerification.publication?.cid !== undefined) {
+        navigate(`/p/${subplebbitAddress}/c/${challengeVerification.publication?.cid}`);
+        console.log('challenge success');
+      } else {
+        setNewSuccessMessage('Challenge Success');
+      }
+    }
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+  
+
+  useEffect(() => {
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      subplebbitAddress: selectedAddress,
+    }));
+  }, [selectedAddress]);
+  
+
+  const [publishCommentOptions, setPublishCommentOptions] = useState({
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+
+  const { publishComment, index } = usePublishComment(publishCommentOptions);
+
+  useEffect(() => {
+    if (index !== undefined) {
+      setPendingCommentIndex(index);
+      navigate(`/profile/c/${index}`);
+    }
+  }, [index, navigate, setPendingCommentIndex]);
+
+  
+  const resetFields = useCallback(() => {
+    if (nameRef.current) {
+      nameRef.current.value = '';
+    }
+    if (subjectRef.current) {
+      subjectRef.current.value = '';
+    }
+    if (commentRef.current) {
+      commentRef.current.value = '';
+    }
+    if (linkRef.current) {
+      linkRef.current.value = '';
+    }
+  }, []);
+
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    
+    if (subjectRef.current.value === "") {
+      setNewErrorMessage('Subject field is mandatory');
+      return;
+    }
+
+    setPublishCommentOptions((prevPublishCommentOptions) => ({
+      ...prevPublishCommentOptions,
+      author: {
+        displayName: nameRef.current.value || undefined,
+        address: account?.author.address,
+      },
+      title: subjectRef.current.value || undefined,
+      content: commentRef.current.value || undefined,
+      link: linkRef.current.value || undefined,
+    }));
+
+    setTriggerPublishComment(true);
+  };
+
+
+  const updateSigner = useCallback(async () => {
+    if (anonymousMode) {
+      setExecuteAnonMode(true);
+  
+      let storedSigners = JSON.parse(localStorage.getItem('storedSigners')) || {};
+      let signer;
+  
+      if (!storedSigners[selectedThreadCidRef]) {
+        signer = await account?.plebbit.createSigner();
+        storedSigners[selectedThreadCidRef] = { privateKey: signer?.privateKey, address: signer?.address };
+        localStorage.setItem('storedSigners', JSON.stringify(storedSigners));
+      } else {
+        const signerPrivateKey = storedSigners[selectedThreadCidRef].privateKey;
+          
+        try {
+          signer = await account?.plebbit.createSigner({type: 'ed25519', privateKey: signerPrivateKey});
+        } catch (error) {
+          console.log(error);
+        }
+      }
+        
+      setPublishCommentOptions(prevPublishCommentOptions => {
+        const newPublishCommentOptions = {
+          ...prevPublishCommentOptions,
+          signer,
+          author: {
+            ...prevPublishCommentOptions.author,
+            address: signer?.address,
+          },
+        };
+  
+        if (JSON.stringify(prevPublishCommentOptions) !== JSON.stringify(newPublishCommentOptions)) {
+          return newPublishCommentOptions;
+        }
+  
+        return prevPublishCommentOptions;
+      });
+    }
+  }, [selectedThreadCidRef, anonymousMode, account]);
+  
+  useEffect(() => {
+    updateSigner();
+  }, [updateSigner]);
+
+
+  useEffect(() => {
+    if (publishCommentOptions && triggerPublishComment) {
+      (async () => {
+        await publishComment();
+        resetFields();
+      })();
+      setTriggerPublishComment(false);
+      setExecuteAnonMode(false);
+    }
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
+  
+  
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+        
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+  const handleSubscribe = async () => {
+    try {
+      if (subscribed === false) {
+        await subscribe(selectedAddress);
+      } else if (subscribed === true) {
+        await unsubscribe(selectedAddress);
+      }
+    } catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+  };
+
+
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {

src/components/views/NotFound.jsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useRef }  from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
-import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled';
 import packageJson from '../../../package.json'
@@ -8,31 +7,28 @@ const {version} = packageJson
 
 
 const NotFound = () => {
-  const { 
-    bodyStyle, setBodyStyle,
-    selectedStyle, setSelectedStyle,
-  } = useGeneralStore(state => state);
-
-  const prevStyle = useRef(selectedStyle);
-  const prevBodyStyle = useRef(bodyStyle);
-
-  // prevent dark mode
   useEffect(() => {
-    const currentPrevStyle = prevStyle.current;
+    const yotsubaBodyStyle = {
-    const currentPrevBodyStyle = prevBodyStyle.current;
-
-    setBodyStyle({
       background: "#ffe url(assets/fade.png) top repeat-x",
       color: "maroon",
-      fontFamily: "Helvetica, Arial, sans-serif"
+      fontFamily: "Arial, Helvetica, sans-serif"
-    });
+    };
-    setSelectedStyle("Yotsuba");
+    const originalBodyStyles = {
+      background: document.body.style.background,
+      color: document.body.style.color,
+      fontFamily: document.body.style.fontFamily
+    };
+
+    for (const [key, value] of Object.entries(yotsubaBodyStyle)) {
+      document.body.style[key] = value;
+    }
 
     return () => {
-      setSelectedStyle(currentPrevStyle);
+      for (const [key, value] of Object.entries(originalBodyStyles)) {
-      setBodyStyle(currentPrevBodyStyle);
+        document.body.style[key] = value;
+      }
     };
-  }, [setBodyStyle, setSelectedStyle]);
+  }, []);
 
   return (
     <>

src/components/views/Subscriptions.jsx

@@ -97,6 +97,7 @@ const Subscriptions = () => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
@@ -1002,6 +1003,32 @@ const Subscriptions = () => {
                                       </li>
                                     ) : null
                                   }
+                                  <li 
+                                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                    View on »
+                                    <ul className="dropdown-menu post-menu-catalog"
+                                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                      <li onClick={() => handleOptionClick(thread.cid)}>
+                                        <a 
+                                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebbit</a>
+                                      </li>
+                                      {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                                        <a
+                                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Seedit</a>
+                                      </li> */}
+                                      <li onClick={() => handleOptionClick(thread.cid)}>
+                                        <a
+                                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebones</a>
+                                      </li>
+                                    </ul>
+                                  </li>
                                 </ul>
                               </div>
                               </PostMenuCatalog>, document.body
@@ -1305,6 +1332,32 @@ const Subscriptions = () => {
                                       </li>
                                     ) : null
                                   }
+                                  <li 
+                                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                    View on »
+                                    <ul className="dropdown-menu post-menu-catalog"
+                                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                      <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a 
+                                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebbit</a>
+                                      </li>
+                                      {/* <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a
+                                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Seedit</a>
+                                      </li> */}
+                                      <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a
+                                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebones</a>
+                                      </li>
+                                    </ul>
+                                  </li>
                                 </ul>
                               </div>
                               </PostMenuCatalog>, document.body

src/components/views/SubscriptionsCatalog.jsx

@@ -5,7 +5,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { confirmAlert } from 'react-confirm-alert';
 import { Tooltip } from 'react-tooltip';
 import { Virtuoso } from 'react-virtuoso';
-import { useAccount, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useFeed, usePublishCommentEdit, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import { Container, NavBar, Header, Break, PostMenu, BoardForm } from '../styled/views/Board.styled';
 import { Threads, PostMenuCatalog } from '../styled/views/Catalog.styled';
@@ -32,227 +32,26 @@ const { version } = packageJson
 let lastVirtuosoStates = {}
 
 
-const SubscriptionsCatalog = () => {
+const CatalogPost = ({post}) => {
   const {
-    setCaptchaResponse,
-    setChallengesArray,
-    defaultSubplebbits,
     editedComment,
+    setDeletePost,
     setIsAuthorDelete,
+    captchaResponse, setCaptchaResponse,
+    setIsModerationOpen,
+    setChallengesArray,
     setIsAuthorEdit,
     setIsCaptchaOpen,
-    isModerationOpen, setIsModerationOpen,
+    setIsEditModalOpen,
-    isSettingsOpen, setIsSettingsOpen,
     setModeratingCommentCid,
+    setOriginalCommentContent,
+    setPendingComment,
     setResolveCaptchaPromise,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
-    setSelectedTitle,
   } = useGeneralStore(state => state);
 
-  const threadMenuRefs = useRef({});
-  const postMenuRef = useRef(null);
-  const postMenuCatalogRef = useRef(null);
-  const virtuosoRef = useRef();
-
-  const account = useAccount();
-  const navigate = useNavigate();
-  const [, setNewErrorMessage] = useError();
-  const [, setNewSuccessMessage] = useSuccess();
-
-  const [prevScrollPos, setPrevScrollPos] = useState(0);
-  const [visible, setVisible] = useState(true);
-
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [originalCommentContent, setOriginalCommentContent] = useState(null);
-  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
-  const [deletePost, setDeletePost] = useState(false);
-  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
-  const [commentCid, setCommentCid] = useState(null);
-  const [moderatorPermissions, setModeratorPermissions] = useState({});
-  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
-
-  const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
-  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
-  const { subplebbits } = useSubplebbits({ subplebbitAddresses: account?.subscriptions, sortType: 'active' });
-
-  const stateString = useFeedStateString(subplebbits);
-
-  const columnWidth = 180;
-  const windowWidth = useWindowWidth();
-  const columnCount = Math.floor(windowWidth / columnWidth);
-  const rows = useFeedRows(feed, columnCount);
-
-
-  useEffect(() => {
-    let permissions = {};
-
-    selectedFeed.forEach(thread => {
-      const subplebbit = subplebbits.find(s => s && s.address === thread.subplebbitAddress);
-
-      if (subplebbit && subplebbit.roles) {
-        const role = subplebbit.roles[account?.author.address]?.role;
-
-        if (role === 'moderator' || role === 'admin' || role === 'owner') {
-          permissions[thread.subplebbitAddress] = true;
-        } else {
-          permissions[thread.subplebbitAddress] = false;
-        }
-      }
-    });
-
-    setModeratorPermissions(permissions);
-  }, [account?.author.address, selectedFeed, subplebbits]);
-
-
-  // mobile navbar scroll effect
-  useEffect(() => {
-    const debouncedHandleScroll = debounce(() => {
-      const currentScrollPos = window.pageYOffset;
-      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
-      setPrevScrollPos(currentScrollPos);
-    }, 50);
-
-    window.addEventListener('scroll', debouncedHandleScroll);
-
-    return () => window.removeEventListener('scroll', debouncedHandleScroll);
-  }, [prevScrollPos, visible]);
-
-
-  const onChallengeVerification = (challengeVerification) => {
-    if (challengeVerification.challengeSuccess === true) {
-      setNewSuccessMessage('Challenge Success');
-    }
-    else if (challengeVerification.challengeSuccess === false) {
-      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
-      console.log('challenge failed', challengeVerification);
-    }
-  };
-
-
-  const onChallenge = async (challenges, comment) => {
-    let challengeAnswers = [];
-    try {
-      challengeAnswers = await getChallengeAnswersFromUser(challenges)
-    }
-    catch (error) {
-      setNewErrorMessage(error.message); console.log(error);
-    }
-    if (challengeAnswers) {
-      await comment.publishChallengeAnswers(challengeAnswers)
-    }
-  };
-
-
-  const getChallengeAnswersFromUser = async (challenges) => {
-    setChallengesArray(challenges);
-
-    return new Promise((resolve, reject) => {
-      const imageString = challenges?.challenges[0].challenge;
-      const imageSource = `data:image/png;base64,${imageString}`;
-      const challengeImg = new Image();
-      challengeImg.src = imageSource;
-
-      challengeImg.onload = () => {
-        setIsCaptchaOpen(true);
-
-        const handleKeyDown = async (event) => {
-          if (event.key === 'Enter') {
-            const currentCaptchaResponse = useGeneralStore.getState().captchaResponse;
-            resolve(currentCaptchaResponse);
-            setIsCaptchaOpen(false);
-            document.removeEventListener('keydown', handleKeyDown);
-            event.preventDefault();
-          }
-        };
-
-        setCaptchaResponse('');
-        document.addEventListener('keydown', handleKeyDown);
-
-        setResolveCaptchaPromise(resolve);
-      };
-
-      challengeImg.onerror = () => {
-        reject(setNewErrorMessage('Could not load challenges'));
-      };
-    });
-  };
-
-  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
-    commentCid: commentCid,
-    content: editedComment || undefined,
-    subplebbitAddress: selectedAddress,
-    onChallenge,
-    onChallengeVerification,
-    onError: (error) => {
-      setNewErrorMessage(error.message); console.log(error);
-    },
-  });
-
-
-  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
-
-
-  useEffect(() => {
-    setPublishCommentEditOptions((prevOptions) => ({
-      ...prevOptions,
-      commentCid: commentCid,
-      content: editedComment || undefined,
-    }));
-  }, [commentCid, editedComment]);
-
-
-  useEffect(() => {
-    if (editedComment !== '') {
-      setTriggerPublishCommentEdit(true);
-    }
-  }, [editedComment, setIsAuthorEdit]);
-
-
-  useEffect(() => {
-    let isActive = true;
-    if (publishCommentEditOptions && triggerPublishCommentEdit) {
-      (async () => {
-        await publishCommentEdit();
-        if (isActive) {
-          setTriggerPublishCommentEdit(false);
-        }
-      })();
-    }
-
-    return () => {
-      isActive = false;
-    };
-  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
-
-  // desktop navbar board select functionality
-  const handleClickTitle = (title, address) => {
-    setSelectedTitle(title);
-    setSelectedAddress(address);
-    setSelectedFeed(feed.filter(feed => feed.title === title));
-  };
-
-  // mobile navbar board select functionality
-  const handleSelectChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === 'subscriptions') {
-      navigate(`/p/subscriptions`);
-      return;
-    } else if (selected === 'all') {
-      navigate(`/p/all`);
-      return;
-    }
-
-    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
-    setSelectedTitle(selectedTitle);
-    setSelectedAddress(selected);
-    navigate(`/p/${selected}`);
-  };
-
-
-  const CatalogPost = ({ post }) => {
   const thread = post;
   const commentMediaInfo = getCommentMediaInfo(thread);
   const linkCount = countLinks(thread);
@@ -260,7 +59,34 @@ const SubscriptionsCatalog = () => {
   const [isHoveringOnThread, setIsHoveringOnThread] = useState(false);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
   const [openMenuCid, setOpenMenuCid] = useState(null);
-    const isModerator = moderatorPermissions[thread.subplebbitAddress];
+  const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false);
+  const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
+  const [commentCid, setCommentCid] = useState(null);
+  const [isModerator, setIsModerator] = useState(false);
+
+  const [, setNewErrorMessage] = useError();
+  const [, setNewSuccessMessage] = useSuccess();
+
+  const account = useAccount();
+  const subplebbit = useSubplebbit({subplebbitAddress: thread.subplebbitAddress});
+  const threadMenuRefs = useRef({});
+  const postMenuRef = useRef(null);
+  const postMenuCatalogRef = useRef(null);
+
+
+  useEffect(() => {
+    if (subplebbit.roles !== undefined) { 
+      const role = subplebbit.roles[account?.author.address]?.role;
+  
+      if (role === 'moderator' || role === 'admin' || role === 'owner') {
+        setIsModerator(true);
+      } else {
+        setIsModerator(false);
+      }
+    }
+  }, [account?.author.address, subplebbit.roles]);
+
 
   const handleOutsideClick = useCallback((e) => {
     if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) {
@@ -329,6 +155,116 @@ const SubscriptionsCatalog = () => {
     setIsEditModalOpen(true);
   }
 
+
+
+  const onChallengeVerification = (challengeVerification) => {
+    if (challengeVerification.challengeSuccess === true) {
+        setNewSuccessMessage('Challenge Success');
+    } 
+    else if (challengeVerification.challengeSuccess === false) {
+      setNewErrorMessage(`Challenge Failed, reason: ${challengeVerification.reason}. Errors: ${challengeVerification.errors}`);
+      console.log('challenge failed', challengeVerification);
+    }
+  };
+
+
+  const onChallenge = async (challenges, comment) => {
+    setPendingComment(comment);
+    let challengeAnswers = [];
+    try {
+      challengeAnswers = await getChallengeAnswersFromUser(challenges)
+    }
+    catch (error) {
+      setNewErrorMessage(error.message); console.log(error);
+    }
+    if (challengeAnswers) {
+      await comment.publishChallengeAnswers(challengeAnswers)
+    }
+  };
+
+
+  const getChallengeAnswersFromUser = async (challenges) => {
+    setChallengesArray(challenges);
+    
+    return new Promise((resolve, reject) => {
+      const imageString = challenges?.challenges[0].challenge;
+      const imageSource = `data:image/png;base64,${imageString}`;
+      const challengeImg = new Image();
+      challengeImg.src = imageSource;
+  
+      challengeImg.onload = () => {
+        setIsCaptchaOpen(true);
+  
+        const handleKeyDown = async (event) => {
+          if (event.key === 'Enter') {
+            const currentCaptchaResponse = captchaResponse;
+            resolve(currentCaptchaResponse);
+            setIsCaptchaOpen(false);
+            document.removeEventListener('keydown', handleKeyDown);
+            event.preventDefault();
+          }
+        };
+
+        setCaptchaResponse('');
+        document.addEventListener('keydown', handleKeyDown);
+
+        setResolveCaptchaPromise(resolve);
+      };
+  
+      challengeImg.onerror = () => {
+        reject(setNewErrorMessage('Could not load challenges'));
+      };
+    });
+  };
+
+  const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({
+    commentCid: commentCid,
+    content: editedComment || undefined,
+    subplebbitAddress: selectedAddress,
+    onChallenge,
+    onChallengeVerification,
+    onError: (error) => {
+      setNewErrorMessage(error.message); console.log(error);
+    },
+  });
+  
+  
+  const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
+
+
+  useEffect(() => {
+    setPublishCommentEditOptions((prevOptions) => ({
+      ...prevOptions,
+      commentCid: commentCid,
+      content: editedComment || undefined,
+    }));
+  }, [commentCid, editedComment]);
+
+
+  useEffect(() => {
+    if (editedComment !== '') {
+      setTriggerPublishCommentEdit(true);
+    }
+  }, [editedComment, setIsAuthorEdit]);
+
+  
+  useEffect(() => {
+    let isActive = true;
+    if (publishCommentEditOptions && triggerPublishCommentEdit) {
+      (async () => {
+        await publishCommentEdit();
+        if (isActive) {
+          setTriggerPublishCommentEdit(false);
+        }
+      })();
+    }
+
+    return () => {
+      isActive = false;
+    };
+  }, [triggerPublishCommentEdit, publishCommentEdit, publishCommentEditOptions]);
+
+
   return (
     <div key={`thread-`} className="thread" 
     onMouseOver={() => {setIsHoveringOnThread(thread.cid)}} 
@@ -351,8 +287,7 @@ const SubscriptionsCatalog = () => {
             src={commentMediaInfo.url} alt={commentMediaInfo.type} 
             onError={(e) => {
               e.target.src = fallbackImgUrl
-                  e.target.onerror = null;
+              e.target.onerror = null;}}  />
-                }} />
           ) : null}
           {commentMediaInfo?.type === "video" ? (
               <video className="card" key={`fti-`} 
@@ -377,12 +312,12 @@ const SubscriptionsCatalog = () => {
         commentMediaInfo.thumbnail))) ? (                          
           <OfflineIndicator 
           address={thread.subplebbitAddress} 
-              className={`thread-icon offline-icon`}
+          className="thread-icon offline-icon"
           tooltipPlace="top" />
         ) : (
           <OfflineIndicator 
           address={thread.subplebbitAddress} 
-              className={`thread-icon ${linkCount> 0?"offline-icon-no-link-shifted": "offline-icon-no-link"} ${isHoveringOnThread === thread.cid ? 'offline-icon-no-link-hovered' : ''}`}
+          className="thread-icon offline-icon-no-link"
           tooltipPlace="top" />
       )}
       </div>
@@ -397,11 +332,9 @@ const SubscriptionsCatalog = () => {
             </>
           ) : null}
         <PostMenu 
-              style={{
+          style={{ display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
-                display: isHoveringOnThread === thread.cid ? 'inline-block' : 'none',
           position: 'absolute', lineHeight: '1em', marginTop: '-1px', outline: 'none',
-                zIndex: '999'
+          zIndex: '999'}}
-              }}
           key={`pmb-`} 
           title="Post menu"
           ref={el => { 
@@ -425,11 +358,9 @@ const SubscriptionsCatalog = () => {
           <PostMenuCatalog selectedStyle={selectedStyle} 
             ref={el => {postMenuCatalogRef.current = el}}
             onClick={(event) => event.stopPropagation()}
-              style={{
+            style={{position: "absolute", 
-                position: "absolute",
             top: menuPosition.top + 7, 
-                left: menuPosition.left
+            left: menuPosition.left}}>
-              }}>
             <div className={`post-menu-thread post-menu-thread-${thread.cid}`}
             style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
             >
@@ -505,6 +436,32 @@ const SubscriptionsCatalog = () => {
                     </li>
                   ) : null
                 }
+                <li 
+                onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                  View on »
+                  <ul className="dropdown-menu post-menu-catalog"
+                    style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                    <li onClick={() => handleOptionClick(thread.cid)}>
+                      <a 
+                      href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                      target="_blank" rel="noreferrer"
+                      >Plebbit</a>
+                    </li>
+                    {/* <li onClick={() => handleOptionClick(thread.cid)}>
+                      <a
+                      href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${thread.cid}`}
+                      target="_blank" rel="noreferrer"
+                      >Seedit</a>
+                    </li> */}
+                    <li onClick={() => handleOptionClick(thread.cid)}>
+                      <a
+                      href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${thread.cid}`}
+                      target="_blank" rel="noreferrer"
+                      >Plebones</a>
+                    </li>
+                  </ul>
+                </li>
               </ul>
             </div>
           </PostMenuCatalog>, document.body
@@ -530,6 +487,82 @@ const SubscriptionsCatalog = () => {
   return <div>{posts}</div>
 }
 
+
+const SubscriptionsCatalog = () => {
+  const {
+    defaultSubplebbits,
+    isModerationOpen, setIsModerationOpen,
+    isSettingsOpen, setIsSettingsOpen,
+    originalCommentContent,
+    selectedAddress, setSelectedAddress,
+    selectedStyle,
+    setSelectedTitle,
+  } = useGeneralStore(state => state);
+
+  const virtuosoRef = useRef();
+
+  const account = useAccount();
+  const navigate = useNavigate();
+
+  const [prevScrollPos, setPrevScrollPos] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [deletePost, setDeletePost] = useState(false);
+  const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
+
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
+  const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
+  const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
+
+  const stateString = useFeedStateString(subplebbits);
+
+  const columnWidth = 180;
+  const windowWidth = useWindowWidth();
+  const columnCount = Math.floor(windowWidth / columnWidth);
+  const rows = useFeedRows(selectedFeed, columnCount);
+
+
+  // mobile navbar scroll effect
+  useEffect(() => {
+    const debouncedHandleScroll = debounce(() => {
+      const currentScrollPos = window.pageYOffset;
+      setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10);
+      setPrevScrollPos(currentScrollPos);
+    }, 50);
+  
+    window.addEventListener('scroll', debouncedHandleScroll);
+  
+    return () => window.removeEventListener('scroll', debouncedHandleScroll);
+  }, [prevScrollPos, visible]);
+
+
+  // desktop navbar board select functionality
+  const handleClickTitle = (title, address) => {
+    setSelectedTitle(title);
+    setSelectedAddress(address);
+    setSelectedFeed(feed.filter(feed => feed.title === title));
+  };
+
+  // mobile navbar board select functionality
+  const handleSelectChange = (event) => {
+    const selected = event.target.value;
+
+    if (selected === 'subscriptions') {
+      navigate(`/p/subscriptions`);
+      return;
+    } else if (selected === 'all') {
+      navigate(`/p/all`);
+      return;
+    }
+
+    const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
+    setSelectedTitle(selectedTitle);
+    setSelectedAddress(selected);
+    navigate(`/p/${selected}`);
+  };
+
+
   useEffect(() => {
     const setLastVirtuosoState = () => {
       virtuosoRef.current?.getState((snapshot) => {
@@ -576,7 +609,7 @@ const SubscriptionsCatalog = () => {
           <span className="boardList">
             [
               <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link>
-              /
+               / 
               <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link>
             ]&nbsp;[
             {defaultSubplebbits.map((subplebbit, index) => (
@@ -625,7 +658,7 @@ const SubscriptionsCatalog = () => {
                         <option key={`option-${subplebbit.address}`} value={subplebbit.address}
                         >{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
                       ))}
-                  </select>
+                  </select> 
                   <span id="button-span" style={{cursor: 'pointer'}} onClick={
                   () => alert(
                     'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
@@ -665,7 +698,7 @@ const SubscriptionsCatalog = () => {
           <hr />
           <span className="style-changer">
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>
@@ -725,7 +758,7 @@ const SubscriptionsCatalog = () => {
             marginTop: "2px",
           }}>
             Style:
-
+             
             <select id="style-selector" onChange={handleStyleChange} value={selectedStyle}>
               <option value="Yotsuba">Yotsuba</option>
               <option value="Yotsuba-B">Yotsuba B</option>

src/components/views/Thread.jsx

@@ -104,6 +104,7 @@ const Thread = () => {
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
   const [isModerator, setIsModerator] = useState(false);
   const [commentCid, setCommentCid] = useState(null);
   const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
@@ -1125,6 +1126,32 @@ const Thread = () => {
                                   </li>
                                 ) : null
                               }
+                              <li 
+                              onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                              onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                View on »
+                                <ul className="dropdown-menu post-menu-catalog"
+                                  style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                  <li onClick={() => handleOptionClick(comment.cid)}>
+                                    <a 
+                                    href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${comment.cid}`}
+                                    target="_blank" rel="noreferrer"
+                                    >Plebbit</a>
+                                  </li>
+                                  {/* <li onClick={() => handleOptionClick(comment.cid)}>
+                                    <a
+                                    href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${comment.cid}`}
+                                    target="_blank" rel="noreferrer"
+                                    >Seedit</a>
+                                  </li> */}
+                                  <li onClick={() => handleOptionClick(comment.cid)}>
+                                    <a
+                                    href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${comment.cid}`}
+                                    target="_blank" rel="noreferrer"
+                                    >Plebones</a>
+                                  </li>
+                                </ul>
+                              </li>
                             </ul>
                           </div>
                           </PostMenuCatalog>, document.body
@@ -1386,6 +1413,32 @@ const Thread = () => {
                                       </li>
                                     ) : null
                                   }
+                                  <li 
+                                  onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
+                                  onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
+                                    View on »
+                                    <ul className="dropdown-menu post-menu-catalog"
+                                      style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
+                                      <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a 
+                                        href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebbit</a>
+                                      </li>
+                                      {/* <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a
+                                        href={`https://seedit.eth.limo/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Seedit</a>
+                                      </li> */}
+                                      <li onClick={() => handleOptionClick(reply.cid)}>
+                                        <a
+                                        href={`https://plebones.netlify.app/#/p/${selectedAddress}/c/${reply.cid}`}
+                                        target="_blank" rel="noreferrer"
+                                        >Plebones</a>
+                                      </li>
+                                    </ul>
+                                  </li>
                                 </ul>
                               </div>
                               </PostMenuCatalog>, document.body

src/hooks/stores/useGeneralStore.js

@@ -20,6 +20,9 @@ const useGeneralStore = create((set) => ({
   defaultSubplebbits: [],
   setDefaultSubplebbits: (subplebbits) => set({ defaultSubplebbits: subplebbits }),
 
+  deletePost: false,
+  setDeletePost: (deletePost) => set({ deletePost }),
+
   editedComment: '',
   setEditedComment: (comment) => set({ editedComment: comment }),
 
@@ -40,6 +43,12 @@ const useGeneralStore = create((set) => ({
   isCaptchaOpen: false,
   setIsCaptchaOpen: (isOpen) => set({ isCaptchaOpen: isOpen }),
 
+  isEditModalOpen: false,
+  setIsEditModalOpen: (isOpen) => set({ isEditModalOpen: isOpen }),
+
+  isModerator: false,
+  setIsModerator: (isModerator) => set({ isModerator }),
+
   isModerationOpen: false,
   setIsModerationOpen: (isOpen) => set({ isModerationOpen: isOpen }),
 
@@ -52,6 +61,9 @@ const useGeneralStore = create((set) => ({
   moderatingCommentCid: '',
   setModeratingCommentCid: (cid) => set({ moderatingCommentCid: cid }),
 
+  originalCommentContent: null,
+  setOriginalCommentContent: (content) => set({ originalCommentContent: content }),
+
   pendingComment: '',
   setPendingComment: (comment) => set({ pendingComment: comment }),
 

yarn.lock

@@ -3410,9 +3410,9 @@
     form-data "^3.0.0"
 
 "@types/node@*", "@types/node@>=13.7.0":
-  version "20.4.7"
+  version "20.4.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.7.tgz#74d323a93f1391a63477b27b9aec56669c98b2ab"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.8.tgz#b5dda19adaa473a9bf0ab5cbd8f30ec7d43f5c85"
-  integrity sha512-bUBrPjEry2QUTsnuEjzjbS7voGWCc30W0qzgMf90GPeDGFRakvrz47ju+oqDAKCXLUCe39u57/ORMl/O/04/9g==
+  integrity sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==
 
 "@types/node@18.15.13":
   version "18.15.13"
@@ -6745,13 +6745,13 @@ eslint-config-react-app@7.0.1, eslint-config-react-app@^7.0.1:
     eslint-plugin-testing-library "^5.0.1"
 
 eslint-import-resolver-node@^0.3.7:
-  version "0.3.7"
+  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.8.tgz#be719e72f5e96dcef7a60f74147c842db0c74b06"
-  integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==
+  integrity sha512-tEe+Pok22qIGaK3KoMP+N96GVDS66B/zreoVVmiavLvRUEmGRtvb4B8wO9jwnb8d2lvHtrkhZ7UD73dWBVnf/Q==
   dependencies:
     debug "^3.2.7"
-    is-core-module "^2.11.0"
+    is-core-module "^2.13.0"
-    resolve "^1.22.1"
+    resolve "^1.22.4"
 
 eslint-module-utils@^2.8.0:
   version "2.8.0"
@@ -6848,9 +6848,9 @@ eslint-plugin-react@^7.27.1:
     string.prototype.matchall "^4.0.8"
 
 eslint-plugin-testing-library@^5.0.1:
-  version "5.11.0"
+  version "5.11.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.0.tgz#0bad7668e216e20dd12f8c3652ca353009163121"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz#5b46cdae96d4a78918711c0b4792f90088e62d20"
-  integrity sha512-ELY7Gefo+61OfXKlQeXNIDVVLPcvKTeiQOoMZG9TeuWa7Ln4dUNRv8JdRWBQI9Mbb427XGlVB1aa1QPZxBJM8Q==
+  integrity sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==
   dependencies:
     "@typescript-eslint/utils" "^5.58.0"
 
@@ -8592,10 +8592,10 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.2.0"
 
-is-core-module@^2.11.0, is-core-module@^2.12.0, is-core-module@^2.12.1, is-core-module@^2.5.0, is-core-module@^2.9.0:
+is-core-module@^2.12.1, is-core-module@^2.13.0, is-core-module@^2.5.0, is-core-module@^2.9.0:
-  version "2.12.1"
+  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.1.tgz#0c0b6885b6f80011c71541ce15c8d66cf5a4f9fd"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
-  integrity sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==
+  integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
   dependencies:
     has "^1.0.3"
 
@@ -12813,21 +12813,12 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
   integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
 
-resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1, resolve@^1.22.2:
+resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.2, resolve@^1.22.3, resolve@^1.22.4:
-  version "1.22.2"
+  version "1.22.4"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.4.tgz#1dc40df46554cdaf8948a486a10f6ba1e2026c34"
-  integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
+  integrity sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==
   dependencies:
-    is-core-module "^2.11.0"
+    is-core-module "^2.13.0"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
-
-resolve@^1.22.3:
-  version "1.22.3"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.3.tgz#4b4055349ffb962600972da1fdc33c46a4eb3283"
-  integrity sha512-P8ur/gp/AmbEzjr729bZnLjXK5Z+4P0zhIJgBgzqRih7hL7BOukHGtSTA3ACMY467GRFz3duQsi0bDZdR7DKdw==
-  dependencies:
-    is-core-module "^2.12.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"