implement PostOnHover component

src/components/views/Subscriptions.jsx

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect, useMemo, useState, useRef } from 'react';
+import React, { Fragment, useEffect, useLayoutEffect, useMemo, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -13,6 +14,7 @@ import ImageBanner from '../ImageBanner';
 import OfflineIndicator from '../OfflineIndicator';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
+import PostOnHover from '../PostOnHover';
 import ReplyModal from '../modals/ReplyModal';
 import SettingsModal from '../modals/SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
@@ -47,12 +49,17 @@ const Subscriptions = () => {
 
   const threadMenuRefs = useRef({});
   const replyMenuRefs = useRef({});
+  const threadBacklinkRefs = useRef({});
+  const postOnHoverRef = useRef(null);
 
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const [rotatedStates, setRotatedStates] = useState({});
   const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
+  const [outOfViewCid, setOutOfViewCid] = useState(null);
+  const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
+  const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
 
   const [errorMessage, setErrorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
@@ -187,6 +194,14 @@ const Subscriptions = () => {
     navigate(`/p/${selected}`);
   };
 
+  
+  useLayoutEffect(() => {
+    if (postOnHoverRef.current) {
+        const rect = postOnHoverRef.current.getBoundingClientRect();
+        setPostOnHoverHeight(rect.height);
+    }
+  }, [outOfViewCid]);
+  
 
   return (
     <>
@@ -522,12 +537,28 @@ const Subscriptions = () => {
                               {thread.replies?.pages?.topAll.comments
                                 .sort((a, b) => a.timestamp - b.timestamp)
                                 .map((reply, index) => (
-                                  <div key={`div-${index}`} style={{display: 'inline-block'}}>
+                                  <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                  ref={el => {
+                                    threadBacklinkRefs.current[reply.cid] = el;
+                                  }}>
                                   <Link key={`ql-${index}`}
                                   to={() => {}} className="quote-link" 
                                   onClick={(event) => handleQuoteClick(reply, null, event)}
-                                  onMouseOver={(event) => handleQuoteHover(reply, null, event)}
-                                  onMouseLeave={removeHighlight}>
+                                  onMouseOver={(event) => {
+                                    event.stopPropagation();
+                                    handleQuoteHover(reply, null, () => {
+                                      setOutOfViewCid(reply.cid);
+                                      const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                      setOutOfViewPosition({
+                                        top: rect.top + window.scrollY - rect.height / 2,
+                                        left: rect.left + rect.width + 5,
+                                      });
+                                    });
+                                  }}
+                                  onMouseLeave={() => {
+                                    removeHighlight();
+                                    setOutOfViewCid(null);
+                                  }}>
                                     c/{reply.shortCid}</Link>
                                     &nbsp;
                                   </div>
@@ -707,16 +738,32 @@ const Subscriptions = () => {
                                     ) : null}
                                 </ul>
                               </div>
-                              <div id="backlink-id" className="backlink">
+                              <div key={`bi-${index}`} id="backlink-id" className="backlink">
                                 {reply.replies?.pages?.topAll.comments
                                   .sort((a, b) => a.timestamp - b.timestamp)
                                   .map((reply, index) => (
-                                    <div key={`div-${index}`} style={{display: 'inline-block'}}>
-                                    <Link to={() => {}} key={`ql-${index}`}
-                                      className="quote-link" 
-                                      onClick={(event) => handleQuoteClick(reply, reply.shortCid, event)}
-                                      onMouseOver={(event) => handleQuoteHover(reply, reply.shortCid, event)}
-                                      onMouseLeave={removeHighlight}>
+                                    <div key={`div-${index}`} style={{display: 'inline-block'}} 
+                                    ref={el => {
+                                      threadBacklinkRefs.current[reply.cid] = el;
+                                    }}>
+                                    <Link key={`ql-${index}`}
+                                    to={() => {}} className="quote-link" 
+                                    onClick={(event) => handleQuoteClick(reply, null, event)}
+                                    onMouseOver={(event) => {
+                                      event.stopPropagation();
+                                      handleQuoteHover(reply, null, () => {
+                                        setOutOfViewCid(reply.cid);
+                                        const rect = threadBacklinkRefs.current[reply.cid].getBoundingClientRect();
+                                        setOutOfViewPosition({
+                                          top: rect.top + window.scrollY - rect.height / 2,
+                                          left: rect.left + rect.width + 5,
+                                        });
+                                      });
+                                    }}
+                                    onMouseLeave={() => {
+                                      removeHighlight();
+                                      setOutOfViewCid(null);
+                                    }}>
                                       c/{reply.shortCid}</Link>
                                       &nbsp;
                                     </div>
@@ -1164,6 +1211,23 @@ const Subscriptions = () => {
               />
             )}
           </div>
+          {createPortal(
+            <div
+            ref={postOnHoverRef}
+              style={{
+                display: outOfViewCid ? "block" : "none",
+                position: "absolute",
+                top: outOfViewPosition.top - postOnHoverHeight / 2 + 10,
+                left: outOfViewPosition.left, 
+              }}
+              >
+                <PostOnHover
+                  cid={outOfViewCid}
+                  feed={feed}
+                />
+              </div>
+            , document.body
+          )}
         </BoardForm>
         <Footer selectedStyle={selectedStyle}>
           <Break id="break" selectedStyle={selectedStyle} style={{