feat: add floating quote preview to mobile replies

src/components/post/post-desktop/post-desktop.tsx

@@ -1,10 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useBlock, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
-import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
 import { getFormattedDate } from '../../../lib/utils/time-utils';
@@ -20,75 +18,10 @@ import LoadingEllipsis from '../../loading-ellipsis';
 import Markdown from '../../markdown';
 import PostMenuDesktop from './post-menu-desktop/';
 import EditMenu from '../edit-menu/edit-menu';
-import Post, { PostProps } from '../post';
+import ReplyQuotePreview from '../reply-quote-preview';
+import { PostProps } from '../post';
 import _ from 'lodash';
 
-const ReplyLink = ({
-  reply,
-  subplebbitAddress,
-  hoveredCid,
-  setHoveredCid,
-}: {
-  reply: Comment;
-  subplebbitAddress: string;
-  hoveredCid: string | null;
-  setHoveredCid: (cid: string | null) => void;
-}) => {
-  const placementRef = useRef<Placement>('right');
-  const availableWidthRef = useRef<number>(0);
-
-  const { refs, floatingStyles, update } = useFloating({
-    placement: placementRef.current,
-    middleware: [
-      shift({ padding: 10 }),
-      offset({ mainAxis: placementRef.current === 'right' ? 8 : 4 }),
-      size({
-        apply({ availableWidth, elements }) {
-          availableWidthRef.current = availableWidth;
-          if (availableWidth >= 250) {
-            elements.floating.style.maxWidth = `${availableWidth - 12}px`;
-          } else if (placementRef.current === 'right') {
-            placementRef.current = 'left';
-          }
-        },
-      }),
-    ],
-    whileElementsMounted: autoUpdate,
-  });
-
-  useEffect(() => {
-    const handleResize = () => {
-      const availableWidth = availableWidthRef.current;
-      if (availableWidth >= 250) {
-        placementRef.current = 'right';
-      } else {
-        placementRef.current = 'left';
-      }
-      update();
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [update]);
-
-  return (
-    <span className={styles.backlink}>
-      <Link to={`/p/${subplebbitAddress}/c/${reply?.cid}`} ref={refs.setReference} onMouseOver={() => setHoveredCid(reply?.cid)} onMouseLeave={() => setHoveredCid(null)}>
-        c/{reply?.shortCid}
-      </Link>
-      {hoveredCid === reply?.cid &&
-        createPortal(
-          <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
-            <Post post={reply} showReplies={false} />
-          </div>,
-          document.body,
-        )}
-    </span>
-  );
-};
-
 const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
   const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
@@ -113,8 +46,6 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
   const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
 
-  const [hoveredCid, setHoveredCid] = useState<string | null>(null);
-
   return (
     <div className={styles.postInfo}>
       {!isHidden && <EditMenu commentCid={cid} isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} />}
@@ -177,12 +108,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
       {replyCount > 0 &&
         parentCid &&
         replies &&
-        replies.map(
+        replies.map((reply: Comment, index: number) => reply?.parentCid === cid && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />)}
-          (reply: Comment, index: number) =>
-            reply?.parentCid === cid && (
-              <ReplyLink key={index} reply={reply} subplebbitAddress={subplebbitAddress} hoveredCid={hoveredCid} setHoveredCid={setHoveredCid} />
-            ),
-        )}
     </div>
   );
 };
@@ -251,16 +177,11 @@ const PostMessage = ({ post }: PostProps) => {
     <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
   );
 
+  const quotelinkReply = useComment({ commentCid: parentCid });
+
   return (
     <blockquote className={styles.postMessage}>
-      {isReply && isReplyingToReply && (
+      {isReply && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
-        <>
-          <Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
-            {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
-          </Link>
-          <br />
-        </>
-      )}
       {removed ? (
         <span className={styles.removedContent}>({t('this_post_was_removed')})</span>
       ) : deleted ? (

src/components/post/post-mobile/post-mobile.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { Comment, useAccount } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -13,6 +13,7 @@ import useStateString from '../../../hooks/use-state-string';
 import CommentMedia from '../../comment-media';
 import LoadingEllipsis from '../../loading-ellipsis';
 import Markdown from '../../markdown';
+import ReplyQuotePreview from '../reply-quote-preview';
 import PostMenuMobile from './post-menu-mobile';
 import { PostProps } from '../post';
 import _ from 'lodash';
@@ -100,7 +101,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
 };
 
 const ReplyBacklinks = ({ post }: PostProps) => {
-  const { cid, parentCid, replyCount, subplebbitAddress } = post || {};
+  const { cid, parentCid, replyCount } = post || {};
   const replies = useReplies(post);
 
   return (
@@ -108,20 +109,14 @@ const ReplyBacklinks = ({ post }: PostProps) => {
     parentCid &&
     replies && (
       <div className={styles.mobileReplyBacklinks}>
-        {replies.map(
+        {replies.map((reply: Comment, index: number) => reply?.parentCid === cid && <ReplyQuotePreview key={index} isBacklinkReply={true} backlinkReply={reply} />)}
-          (reply: Comment, index: number) =>
-            reply?.parentCid === cid && (
-              <span key={index} className={styles.backlink}>
-                <Link to={`/p/${subplebbitAddress}/c/${reply?.cid}`}>c/{reply?.shortCid}</Link>
-              </span>
-            ),
-        )}
       </div>
     )
   );
 };
 
 const PostMessageMobile = ({ post }: PostProps) => {
+  const { t } = useTranslation();
   const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
 
   const params = useParams();
@@ -139,21 +134,16 @@ const PostMessageMobile = ({ post }: PostProps) => {
     <div className={`${styles.stateString} ${styles.ellipsis}`}>{stateString !== 'Failed' ? <LoadingEllipsis string={stateString} /> : stateString}</div>
   );
 
+  const quotelinkReply = useComment({ commentCid: parentCid });
+
   return (
     content && (
       <blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}>
-        {isReply && isReplyingToReply && (
+        {isReply && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
-          <>
-            <Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
-              {`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
-            </Link>
-            <br />
-          </>
-        )}
         {removed ? (
-          <span className={styles.removedContent}>(THIS POST WAS REMOVED)</span>
+          <span className={styles.removedContent}>({t('this_post_was_removed')})</span>
         ) : deleted ? (
-          <span className={styles.removedContent}>User deleted this post.</span>
+          <span className={styles.removedContent}>{t('user_deleted_this_post')}</span>
         ) : (
           <Markdown content={displayContent} />
         )}
@@ -205,10 +195,12 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
 
   return (
     <div className={styles.postMobile}>
-      <div className={styles.hrWrapper}>
+      {showAllReplies && (
-        <hr />
+        <div className={styles.hrWrapper}>
-      </div>
+          <hr />
-      <div className={styles.thread}>
+        </div>
+      )}
+      <div className={showAllReplies ? styles.thread : styles.quotePreview}>
         <div className={styles.postContainer}>
           <div className={styles.postOp}>
             <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />

src/components/post/post.module.css

@@ -211,6 +211,10 @@
   padding-bottom: 30px;
 }
 
+.quotePreview {
+  padding: 3px;
+}
+
 .postMobile .postContainer {
   background-color: var(--post-mobile-background-color);
 }
@@ -272,7 +276,6 @@
 .postMobile .postMessage {
   padding: 10px;
   font-size: var(--post-mobile-content-font-size);
-  word-break: break-all;
 }
 
 .postMobile .postLink {
@@ -338,6 +341,7 @@
 .quoteLink:hover {
   color: var(--post-quotelink-text-color-hover);
   text-decoration: var(--post-quotelink-text-decoration-hover);
+  cursor: pointer;
 }
 
 .replyMobile {
@@ -389,23 +393,28 @@
 }
 
 .removedContent {
+  text-transform: uppercase;
   font-weight: 700;
   color: red;
 }
 
-.backlink {
+.backlink, .backlinkHash {
   font-size: 0.8em;
+}
+
+.backlink {
   padding-left: 5px;
 }
 
-.backlink a {
+.backlink, .backlinkHash {
   color: var(--post-backlink-text-color);
   text-decoration: var(--post-backlink-text-decoration);
 }
 
-.backlink a:hover {
+.backlink:hover, .backlinkHash:hover {
   color: var(--post-backlink-text-color-hover);
   text-decoration: var(--post-backlink-text-decoration-hover);
+  cursor: pointer;
 }
 
 .mobileReplyBacklinks {
@@ -425,8 +434,6 @@
   border: var(--quote-preview-border);
   border-right: var(--quote-preview-border-right);
   border-bottom: var(--quote-preview-border-bottom);
-  padding-right: 7px;
-  padding-left: 2px;
 }
 
 .postDesktop .replyQuotePreviewSpacer {
@@ -434,6 +441,10 @@
 }
 
 @media (max-width: 640px) {
+  .replyQuotePreview {
+    margin-right: 10px;
+  }
+
   .postDesktop {
     display: none;
   }
@@ -444,6 +455,11 @@
 }
 
 @media (min-width: 640px) {
+  .replyQuotePreview {
+    padding-right: 7px;
+    padding-left: 2px;
+  }
+
   .postMobile {
     display: none;
   }

src/components/post/reply-quote-preview/index.ts

@@ -0,0 +1 @@
+export { default } from './reply-quote-preview';

src/components/post/reply-quote-preview/reply-quote-preview.tsx

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Link } from 'react-router-dom';
+import { Comment } from '@plebbit/plebbit-react-hooks';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import { useFloating, offset, shift, size, autoUpdate, Placement } from '@floating-ui/react';
+import useIsMobile from '../../../hooks/use-is-mobile';
+import styles from '../post.module.css';
+import Post from '../post';
+
+interface ReplyQuotePreviewProps {
+  isBacklinkReply?: boolean;
+  backlinkReply?: Comment;
+  isQuotelinkReply?: boolean;
+  quotelinkReply?: Comment;
+}
+
+const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
+  const [hoveredCid, setHoveredCid] = useState<string | null>(null);
+  const placementRef = useRef<Placement>('right');
+  const availableWidthRef = useRef<number>(0);
+
+  const { refs, floatingStyles, update } = useFloating({
+    placement: placementRef.current,
+    middleware: [
+      shift({ padding: 10 }),
+      offset({ mainAxis: placementRef.current === 'right' ? 8 : 4 }),
+      size({
+        apply({ availableWidth, elements }) {
+          availableWidthRef.current = availableWidth;
+          if (availableWidth >= 250) {
+            elements.floating.style.maxWidth = `${availableWidth - 12}px`;
+          } else if (placementRef.current === 'right') {
+            placementRef.current = 'left';
+          }
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      const availableWidth = availableWidthRef.current;
+      if (availableWidth >= 250) {
+        placementRef.current = 'right';
+      } else {
+        placementRef.current = 'left';
+      }
+      update();
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [update]);
+
+  const replyBacklink = (
+    <>
+      <Link
+        className={styles.backlink}
+        to={`/p/${backlinkReply?.subplebbitAddress}/c/${backlinkReply?.cid}`}
+        ref={refs.setReference}
+        onMouseOver={() => setHoveredCid(backlinkReply?.cid)}
+        onMouseLeave={() => setHoveredCid(null)}
+      >
+        c/{backlinkReply?.shortCid}
+      </Link>
+      {hoveredCid === backlinkReply?.cid &&
+        createPortal(
+          <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
+            <Post post={backlinkReply} showReplies={false} />
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+
+  const replyQuotelink = (
+    <>
+      <Link
+        to={`/p/${quotelinkReply?.subplebbitAddress}/c/${quotelinkReply?.cid}`}
+        ref={refs.setReference}
+        className={styles.quoteLink}
+        onMouseOver={() => setHoveredCid(quotelinkReply?.cid)}
+        onMouseLeave={() => setHoveredCid(null)}
+      >
+        {`c/${quotelinkReply?.cid && Plebbit.getShortCid(quotelinkReply.cid)}`}
+      </Link>
+      <br />
+      {hoveredCid === quotelinkReply?.cid &&
+        createPortal(
+          <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
+            <Post post={quotelinkReply} showReplies={false} />
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+
+  return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;
+};
+
+const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
+  const [hoveredCid, setHoveredCid] = useState<string | null>(null);
+  const placementRef = useRef<Placement>('bottom');
+  const quotelinkRef = useRef<HTMLSpanElement>(null);
+
+  const { refs, floatingStyles, update } = useFloating({
+    placement: placementRef.current,
+    middleware: [shift({ padding: 10 })],
+    whileElementsMounted: autoUpdate,
+  });
+
+  useEffect(() => {
+    window.addEventListener('resize', () => update());
+    return () => {
+      window.removeEventListener('resize', () => update());
+    };
+  }, [update]);
+
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (quotelinkRef.current && !quotelinkRef.current.contains(event.target as Node)) {
+        setHoveredCid(null);
+      }
+    },
+    [quotelinkRef, setHoveredCid],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  const replyBacklink = (
+    <span ref={quotelinkRef}>
+      <span className={styles.backlink} ref={refs.setReference} onClick={() => setHoveredCid(backlinkReply?.cid)}>
+        c/{backlinkReply?.shortCid}{' '}
+      </span>
+      <Link to={`/p/${backlinkReply?.subplebbitAddress}/c/${backlinkReply?.cid}`} className={styles.backlinkHash}>
+        #
+      </Link>
+      {hoveredCid === backlinkReply?.cid &&
+        createPortal(
+          <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
+            <Post post={backlinkReply} showReplies={false} />
+          </div>,
+          document.body,
+        )}
+    </span>
+  );
+
+  const replyQuotelink = (
+    <span ref={quotelinkRef}>
+      <span ref={refs.setReference} className={styles.quoteLink} onClick={() => setHoveredCid(quotelinkReply?.cid)}>
+        {quotelinkReply?.shortCid}{' '}
+      </span>
+      <Link className={styles.quoteLink} to={`/p/${quotelinkReply?.subplebbitAddress}/c/${quotelinkReply?.cid}`}>
+        #
+      </Link>
+      <br />
+      {hoveredCid === quotelinkReply?.cid &&
+        createPortal(
+          <div className={styles.replyQuotePreview} ref={refs.setFloating} style={floatingStyles}>
+            <Post post={quotelinkReply} showReplies={false} />
+          </div>,
+          document.body,
+        )}
+    </span>
+  );
+
+  return isBacklinkReply ? replyBacklink : isQuotelinkReply && replyQuotelink;
+};
+
+const ReplyQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, isQuotelinkReply }: ReplyQuotePreviewProps) => {
+  const isMobile = useIsMobile();
+
+  return isMobile ? (
+    <MobileQuotePreview backlinkReply={backlinkReply} quotelinkReply={quotelinkReply} isBacklinkReply={isBacklinkReply} isQuotelinkReply={isQuotelinkReply} />
+  ) : (
+    <DesktopQuotePreview backlinkReply={backlinkReply} quotelinkReply={quotelinkReply} isBacklinkReply={isBacklinkReply} isQuotelinkReply={isQuotelinkReply} />
+  );
+};
+
+export default ReplyQuotePreview;