add PostOnHover to mobile view

src/components/PostOnHover.jsx

@@ -89,8 +89,8 @@ const PostOnHover = ({ cid, feed }) => {
                         {reply.replies?.pages?.topAll.comments
                           .sort((a, b) => a.timestamp - b.timestamp)
                           .map((reply, index) => (
-                          <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                            <div style={{display: 'inline-block'}}>
-                          <Link key={`link-${index}`} to={() => {}} 
+                            <Link to={() => {}} 
                               className="quote-link">
                               c/{reply.shortCid}</Link>
                               &nbsp;
@@ -184,6 +184,130 @@ const PostOnHover = ({ cid, feed }) => {
               </div>
             )}
           </div>
+          <div className="thread-mobile">
+            {reply.state === 'succeeded' ? (
+            <div className="reply-container">
+              <div className="post-reply post-reply-mobile">
+                <div className="post-info-mobile">
+                  <span className="name-block-mobile">
+                    {reply.author.displayName
+                    ? reply.author.displayName.length > 20
+                    ? <Fragment>
+                        <span className="name-mobile">
+                          {reply.author.displayName.slice(0, 20) + " (...)"}
+                        </span>
+                      </Fragment>
+                      : <span className="name-mobile">
+                        {reply.author.displayName}</span>
+                    : <span className="name-mobile">
+                      Anonymous</span>}
+                    &nbsp;
+                    <span className="poster-address-mobile address-mobile"
+                      id="reply-button" style={{cursor: "pointer"}}
+                    >
+                      (u/
+                        {reply.author?.shortAddress ?
+                          (
+                          <span className="highlight-address-mobile">
+                            {reply.author?.shortAddress}
+                          </span>
+                          ) : (
+                            <span>
+                              {account?.author?.shortAddress}
+                            </span>
+                          )
+                        }
+                      )&nbsp;
+                    </span>
+                    <br />
+                  </span>
+                  <span className="date-time-mobile post-number-mobile">
+                  {getDate(reply.timestamp)}&nbsp;
+                    <span>c/</span>
+                      <Link to={() => {}} id="reply-button"
+                      >{reply.shortCid}
+                      </Link>
+                  </span>
+                </div>
+                {reply.link ? (
+                  <div className="file-mobile">
+                      {replyMediaInfo?.url ? (
+                        replyMediaInfo.type === "webpage" ? (
+                          <div className="img-container">
+                            <span className="file-thumb-mobile">
+                              {reply.thumbnailUrl ? (
+                                <img 
+                                src={replyMediaInfo.thumbnail} alt="thumbnail" 
+                                style={{cursor: "pointer"}}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              ) : null}
+                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : replyMediaInfo.type === "image" ? (
+                          <div className="img-container">
+                            <span className="file-thumb-mobile">
+                              <img 
+                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                              style={{cursor: "pointer"}}
+                              onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
+                            </span>
+                          </div>
+                        ) : replyMediaInfo.type === "video" ? (
+                            <span className="file-thumb-mobile">
+                                <video 
+                                src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                                style={{ pointerEvents: "none" }}
+                                onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
+                            </span>
+                        ) : replyMediaInfo.type === "audio" ? (
+                            <span className="file-thumb-mobile">
+                              <audio 
+                              src={replyMediaInfo.url} alt={replyMediaInfo.type} 
+                              onError={(e) => e.target.src = fallbackImgUrl} />
+                              <div className="file-info-mobile">{replyMediaInfo.type}</div>
+                            </span>
+                        ) : null
+                      ) : null}
+                  </div>
+                ) : null}
+                {reply.content ? (
+                  reply.content?.length > 500 ?
+                  <Fragment>
+                    <blockquote className="post-message">
+                      <Link to={() => {}} className="quotelink">
+                        {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                      </Link>
+                      <Post content={reply.content?.slice(0, 500)} comment={reply} />
+                      <span className="ttl"> (...)
+                      <br />
+                      <EditLabel 
+                      commentCid={reply.cid}
+                      className="ttl"/>
+                      <br />
+                      Comment too long. Click the link to view. </span>
+                    </blockquote>
+                  </Fragment>
+                : <blockquote className="post-message">
+                    <Link to={() => {}} className="quotelink" >
+                      {`c/${shortParentCid}`}{shortParentCid === thread.shortCid ? " (OP)" : null}
+                    </Link>
+                    <Post content={reply.content} comment={reply} />
+                    <EditLabel 
+                    commentCid={reply.cid}
+                    className="ttl"/>
+                  </blockquote>)
+                : null}
+              </div>
+            </div>
+             ) : (
+              <div className="reply-container">
+                <span className="ellipsis">{stateString}</span>
+              </div>
+            )}
+          </div>
         </div>
       </BoardForm>
     </Container>

src/components/views/Board.jsx

@@ -81,9 +81,11 @@ const Board = () => {
   const postMenuCatalogRef = useRef(null);
   const backlinkRefs = useRef({});
   const quoteRefs = useRef({});
+  const backlinkRefsMobile = useRef({});
+  const quoteRefsMobile = useRef({});
   const postOnHoverRef = useRef(null);
 
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
   const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
   const stateString = useStateString(subplebbit);
@@ -1716,8 +1718,37 @@ const Board = () => {
                             <Fragment key={`fragment15-${index}`}>
                               <blockquote key={`mob-pm-${index}`} className="post-message">
                                 <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
+                                ref={el => {
+                                  quoteRefsMobile.current[shortParentCid] = el;
+                                }}
                                 onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                                onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                                onMouseOver={(event) => {
+                                  event.stopPropagation();
+                                  handleQuoteHover(reply, shortParentCid, () => {
+                                    if (shortParentCid === thread.shortCid) {
+                                      return;
+                                    } else {
+                                      setOutOfViewCid(reply.parentCid);
+                                      const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
+                                      const distanceToRight = window.innerWidth - rect.right;
+                                
+                                      if (distanceToRight < 200) {
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          right: window.innerWidth - rect.left - 10,
+                                          maxWidth: rect.left - 5
+                                        });
+
+                                      } else {
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                          maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                        });
+                                      }
+                                    }
+                                  });
+                                }}
                                 onMouseLeave={() => {
                                   removeHighlight();
                                   setOutOfViewCid(null);
@@ -1741,8 +1772,37 @@ const Board = () => {
                             </Fragment>
                           : <blockquote key={`mob-pm-${index}`} className="post-message">
                               <Link to={() => {}} key={`mob-r-pm-${index}`} className="quotelink" 
+                              ref={el => {
+                                quoteRefsMobile.current[shortParentCid] = el;
+                              }}
                               onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                              onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                              onMouseOver={(event) => {
+                                event.stopPropagation();
+                                handleQuoteHover(reply, shortParentCid, () => {
+                                  if (shortParentCid === thread.shortCid) {
+                                    return;
+                                  } else {
+                                    setOutOfViewCid(reply.parentCid);
+                                    const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
+                                    const distanceToRight = window.innerWidth - rect.right;
+                              
+                                    if (distanceToRight < 200) {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        right: window.innerWidth - rect.left - 10,
+                                        maxWidth: rect.left - 5
+                                      });
+
+                                    } else {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                        maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                      });
+                                    }
+                                  }
+                                });
+                              }}
                               onMouseLeave={() => {
                                 removeHighlight();
                                 setOutOfViewCid(null);
@@ -1763,10 +1823,35 @@ const Board = () => {
                               {reply.replies?.pages?.topAll.comments
                               .sort((a, b) => a.timestamp - b.timestamp)
                               .map((reply, index) => (
-                                <div key={`div-back${index}`} style={{display: 'inline-block'}}>
+                                <div key={`div-back${index}`} style={{display: 'inline-block'}} 
+                                ref={el => {
+                                  backlinkRefsMobile.current[reply.cid] = el;
+                                }}>
                                 <Link key={`ql-${index}`} to={() => {}}
                                 onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                                onMouseOver={(event) => {
+                                  event.stopPropagation();
+                                  handleQuoteHover(reply, reply.shortCid, () => {
+                                    setOutOfViewCid(reply.cid)
+                                    const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
+                                    const distanceToRight = window.innerWidth - rect.right;
+
+                                    if (distanceToRight < 200) {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        right: window.innerWidth - rect.left - 10,
+                                        maxWidth: rect.left - 5
+                                      });
+
+                                    } else {
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                        maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                      });
+                                    }
+                                  });
+                                }}
                                 onMouseLeave={() => {
                                   removeHighlight();
                                   setOutOfViewCid(null);

src/components/views/Catalog.jsx

@@ -78,7 +78,7 @@ const Catalog = () => {
   const [openMenuCid, setOpenMenuCid] = useState(null);
 
 
-  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'});
+  const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
   const { subplebbitAddress } = useParams();
   const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
   const account = useAccount();

src/components/views/Thread.jsx

@@ -98,6 +98,8 @@ const Thread = () => {
   const [outOfViewCid, setOutOfViewCid] = useState(null);
   const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
   const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
+  const backlinkRefsMobile = useRef({});
+  const quoteRefsMobile = useRef({});
   
 
   const comment = useComment({commentCid: selectedThread});
@@ -1519,8 +1521,37 @@ const Thread = () => {
                           ) : null}
                         <blockquote key={`mob-pm-${index}`} className="post-message-mobile">
                           <span style={{cursor: 'pointer'}} key={`mob-ql-${index}`} className="quotelink-mobile" 
+                            ref={el => {
+                              quoteRefsMobile.current[shortParentCid] = el;
+                            }}
                             onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
-                          onMouseOver={() => handleQuoteHover(reply, shortParentCid, (cid) => setOutOfViewCid(cid))}
+                            onMouseOver={(event) => {
+                              event.stopPropagation();
+                              handleQuoteHover(reply, shortParentCid, () => {
+                                if (shortParentCid === comment.shortCid) {
+                                  return;
+                                } else {
+                                  setOutOfViewCid(reply.parentCid);
+                                  const rect = quoteRefsMobile.current[shortParentCid].getBoundingClientRect();
+                                  const distanceToRight = window.innerWidth - rect.right;
+                            
+                                  if (distanceToRight < 200) {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      right: window.innerWidth - rect.left - 10,
+                                      maxWidth: rect.left - 5
+                                    });
+
+                                  } else {
+                                    setOutOfViewPosition({
+                                      top: rect.top + window.scrollY - rect.height / 2,
+                                      left: rect.left + rect.width + 5,
+                                      maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                    });
+                                  }
+                                }
+                              });
+                            }}
                             onMouseLeave={() => {
                               removeHighlight();
                               setOutOfViewCid(null);
@@ -1540,14 +1571,39 @@ const Thread = () => {
                           {reply.replies?.pages?.topAll.comments
                           .sort((a, b) => a.timestamp - b.timestamp)
                           .map((reply, index) => (
-                            <div key={`div-back${index}`} style={{display: 'inline-block'}}>
+                            <div key={`div-back${index}`} style={{display: 'inline-block'}} 
+                            ref={el => {
+                              backlinkRefsMobile.current[reply.cid] = el;
+                            }}>
                             <span style={{cursor: 'pointer'}} key={`ql-${index}`} className="quote-link" 
                             onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                            onMouseOver={() => handleQuoteHover(reply, reply.shortCid, (cid) => setOutOfViewCid(cid))}
+                            onMouseOver={(event) => {
+                              event.stopPropagation();
+                              handleQuoteHover(reply, reply.shortCid, () => {
+                                setOutOfViewCid(reply.cid)
+                                const rect = backlinkRefsMobile.current[reply.cid].getBoundingClientRect();
+                                const distanceToRight = window.innerWidth - rect.right;
+
+                                if (distanceToRight < 200) {
+                                  setOutOfViewPosition({
+                                    top: rect.top + window.scrollY - rect.height / 2,
+                                    right: window.innerWidth - rect.left - 10,
+                                    maxWidth: rect.left - 5
+                                  });
+
+                                } else {
+                                  setOutOfViewPosition({
+                                    top: rect.top + window.scrollY - rect.height / 2,
+                                    left: rect.left + rect.width + 5,
+                                    maxWidth: window.innerWidth - rect.left - rect.width + 5
+                                  });
+                                }
+                              });
+                            }}
                             onMouseLeave={() => {
                               removeHighlight();
                               setOutOfViewCid(null);
-                            }}>
+                            }} >
                               c/{reply.shortCid}</span>
                               &nbsp;
                             </div>