add catalog popups to description and rules

src/components/styled/views/Catalog.styled.jsx

@@ -150,7 +150,7 @@ export const PostPreview = styled.div`
     font-size: 90%;
   }
 
-  .post-authorAdmin {
+  .post-author-admin {
     color: purple;
     font-weight: 700;
   }

src/components/views/Catalog.jsx

@@ -110,6 +110,7 @@ const CatalogPost = ({post}) => {
   useLayoutEffect(() => {
     const executeLayoutEffectLogic = () => {
       let ref;
+      
       if (isMediaShowed) {
         ref = imageRef.current; 
       } else {
@@ -348,18 +349,37 @@ const CatalogPost = ({post}) => {
 
   if (post.type === 'rules') {
     return (
-      <div className='thread'
+      <>
-      onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
         {isHoveringOnThread === 'rules' ? 
-        <div style={{left:"100%"}}
+          createPortal(
-        onMouseOver={() => setIsHoveringOnThread("")}
+            <PostPreview selectedStyle={selectedStyle}>
-        className={"thread_popup"}>
+              <div ref={popupRef}
-          <p className="thread_popup_content" style={{color:"white"}}>
+              className="post-preview"
-          <span className="thread_popup_title">Rules </span>
+              onMouseOver={() => handleMouseOnLeaveThread()}
-          by 
+              style={{
-          <span className="thread_popup_authorAdmin"> ## Board Admins </span> 
+              visibility: isCalculationDone ? 'visible' : 'hidden',
-          {getFormattedTime(subplebbit.createdAt)}</p>
+              left: 
-        </div> : null }   
+                isCalculationDone && spaceOnRight > 250 ? textRect.right + 5 :
+                isCalculationDone && spaceOnRight < 250 ? textRect.left - popupRect.width - 5
+                : 'auto',
+              top: popupPosition.top + 5,
+              }}>
+                <span className="post-subject" >
+                  Rules 
+                </span> by 
+                <span className="post-author-admin"> ## Board Admins </span>
+                <span className='post-ago'>
+                  {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
+                </span>
+              </div>
+            </PostPreview>, document.body
+          )
+        : null }
+        <div className='thread'
+        ref={el => { 
+          threadRefs.current['rules'] = el; 
+        }}
+        onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
           <BoardForm selectedStyle={selectedStyle} style={{all: 'unset'}} 
           onMouseOver={() => {
             setIsHoveringForMenu('rules');
@@ -424,50 +444,69 @@ const CatalogPost = ({post}) => {
               </PostMenuCatalog>, document.body
             )}
           </BoardForm>
-        <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}
+          <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/rules`}>
+            <div className="teaser" style={{maxHeight: '312px'}}>
+              <div style={{cursor: 'text'}}>
+                <span ref={textRef}
                 onMouseOver={() => {
+                  setIsHoveringOnThread('rules');
                   setIsHoveringForMenu('rules');
-          if (!hoverTimeoutId) {
+                  const rect = threadRefs.current['rules'].getBoundingClientRect();
-              const timeoutId = setTimeout(() => {
+                  setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
-                  setIsHoveringOnThread("rules");
-              }, 250);
-              setHoverTimeoutId(timeoutId);
-          }
                 }}
                 onMouseLeave={() => setIsHoveringForMenu(false)}>
-            <div className="teaser" style={{maxHeight: '312px'}}>
                   <b>Rules</b>
                   {": " + subplebbit.rules?.map((rule, index) => `${index + 1}. ${rule}`).join(' ')}
+                </span>
+              </div>
               </div>
             </Link>
         </div>
+      </>
     )
   } else if (post.type === 'description') {
     return (
       <>
-        <div className='thread'
-        onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
         {isHoveringOnThread === 'description' ? 
-          <div style={{left:"100%"}}
+          createPortal(
-          onMouseOver={() => setIsHoveringOnThread("")}
+            <PostPreview selectedStyle={selectedStyle}>
-          className={"thread_popup"}>
+              <div ref={popupRef}
-            <p className="thread_popup_content" style={{color:"white"}}>
+              className="post-preview"
-            <span className="thread_popup_title">Welcome to {subplebbit.title || subplebbit.address} </span> 
+              onMouseOver={() => handleMouseOnLeaveThread()}
-              by  
+              style={{
-            <span className="thread_popup_authorAdmin"> ## Board Admins </span> 
+              visibility: isCalculationDone ? 'visible' : 'hidden',
-              {getFormattedTime(subplebbit.createdAt)}</p>
+              left: 
-          </div> : null }
+                isCalculationDone && spaceOnRight > 250
+                ? subplebbit.suggestedAvatarUrl ? imageRect.right + 5 : textRect.right + 5 :
+                isCalculationDone && spaceOnRight < 250
+                ? subplebbit.suggestedAvatarUrl ? imageRect.left - popupRect.width - 5 : textRect.left - popupRect.width - 5
+                : 'auto',
+              top: popupPosition.top + 5,
+              }}>
+                <span className="post-subject" >
+                  Welcome to {subplebbit.title || subplebbit.address} 
+                </span> by 
+                <span className="post-author-admin"> ## Board Admins </span>
+                <span className='post-ago'>
+                  {thread.timestamp ? getFormattedTime(thread.timestamp) : null}
+                </span>
+              </div>
+            </PostPreview>, document.body
+          )
+        : null }
+        <div className='thread'
+        ref={el => { 
+          threadRefs.current['description'] = el; 
+        }}
+        onMouseLeave={()=>{handleMouseOnLeaveThread()}}>
           <Link style={{all: 'unset', cursor: 'pointer'}} to={`/p/${selectedAddress}/description`}>
             {subplebbit.suggested?.avatarUrl ? (
               <img className='card'
               onMouseOver={() => {
+                setIsHoveringOnThread('description');
                 setIsHoveringForMenu('description');
-                if (!hoverTimeoutId) {
+                const rect = threadRefs.current['description'].getBoundingClientRect();
-                    const timeoutId = setTimeout(() => {
+                setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
-                        setIsHoveringOnThread("description");
-                    }, 250);
-                    setHoverTimeoutId(timeoutId);
-                }
               }}
               onMouseLeave={() => setIsHoveringForMenu(false)}
               src={subplebbit.suggested.avatarUrl} alt="board avatar" />
@@ -578,19 +617,21 @@ const CatalogPost = ({post}) => {
             )}
           </BoardForm>
           <Link style={{all: "unset", cursor: "pointer"}} to={`/p/${selectedAddress}/description`} 
-            onClick={() => setSelectedThread("description")} onMouseOver={() => {
+            onClick={() => setSelectedThread("description")}>
+            <div className="teaser" style={{maxHeight: '170px'}}>
+              <div style={{cursor: 'text'}}>
+                <span ref={textRef}
+                onMouseOver={() => {
+                  setIsHoveringOnThread('description');
                   setIsHoveringForMenu('description');
-              if (!hoverTimeoutId) {
+                  const rect = threadRefs.current['description'].getBoundingClientRect();
-                  const timeoutId = setTimeout(() => {
+                  setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
-                      setIsHoveringOnThread("description");
-                  }, 250);
-                  setHoverTimeoutId(timeoutId);
-              }
                 }}
                 onMouseLeave={() => setIsHoveringForMenu(false)}>
-              <div className="teaser" style={{maxHeight: '170px'}}>
                   <b>Welcome to {subplebbit.title || subplebbit.address}!</b>
                   {": " + subplebbit.description}
+                </span>
+              </div>
             </div>
           </Link>
         </div>