feat(replies): add backlinks

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
-import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -24,7 +24,8 @@ import _ from 'lodash';
 
 const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { t } = useTranslation();
-  const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
+  const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {};
+  const replies = useReplies(post);
   const { address, displayName, shortAddress } = author || {};
   const { isDescription, isRules } = post || {}; // custom properties, not from api
   const stateString = useStateString(post);
@@ -104,6 +105,17 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
         )}
       </span>
       <PostMenuDesktop post={post} />
+      {replyCount > 0 &&
+        parentCid &&
+        replies &&
+        replies.map(
+          (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>
   );
 };

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, useLocation, useParams } from 'react-router-dom';
-import { useAccount, useEditedComment } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useEditedComment } 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';
@@ -99,6 +99,28 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   );
 };
 
+const ReplyBacklinks = ({ post }: PostProps) => {
+  const { cid, parentCid, replyCount, subplebbitAddress } = post || {};
+  const replies = useReplies(post);
+
+  return (
+    replyCount > 0 &&
+    parentCid &&
+    replies && (
+      <div className={styles.mobileReplyBacklinks}>
+        {replies.map(
+          (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 { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {};
 
@@ -217,6 +239,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
                   <div className={styles.replyContainer}>
                     <PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
                     {reply.content && <PostMessageMobile post={reply} />}
+                    <ReplyBacklinks post={reply} />
                   </div>
                 </div>
               </div>

src/components/post/post.module.css

@@ -393,6 +393,29 @@
   color: red;
 }
 
+.backlink {
+  font-size: 0.8em;
+  padding-left: 5px;
+}
+
+.backlink a {
+  color: var(--post-backlink-text-color);
+  text-decoration: var(--post-backlink-text-decoration);
+}
+
+.backlink a:hover {
+  color: var(--post-backlink-text-color-hover);
+  text-decoration: var(--post-backlink-text-decoration-hover);
+}
+
+.mobileReplyBacklinks {
+  padding: 0 0;
+  padding-bottom: 3px;
+  line-height: 2;
+  background-color: var(--reply-backlink-mobile-background-color);
+  border-top: var(--reply-backlink-mobile-border-top);
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

src/themes.css

@@ -1,4 +1,12 @@
 :root .yotsuba {
+  /* backlink */
+  --post-backlink-text-color: navy;
+  --post-backlink-text-decoration: underline;
+  --post-backlink-text-color-hover: red;
+  --post-backlink-text-decoration-hover: underline;
+  --reply-backlink-mobile-background-color: #ead6ca;
+  --reply-backlink-mobile-border-top: 1px solid #d9bfb7;
+
   /* board banner */
   --banner-image-border: 1px solid #800;
   --board-title-font-size: 28px;
@@ -183,6 +191,14 @@
 }
 
 :root .yotsuba-b {
+  /* backlink */
+  --post-backlink-text-color: #34345C;
+  --post-backlink-text-decoration: underline;
+  --post-backlink-text-color-hover: #dd0000;
+  --post-backlink-text-decoration-hover: underline;
+  --reply-backlink-mobile-background-color: #c9cde8;
+  --reply-backlink-mobile-border-top: 1px solid #b7c5d9;
+
   /* board banner */
   --banner-image-border: 1px solid #000;
   --board-title-font-size: 28px;
@@ -367,6 +383,14 @@
 }
 
 :root .futaba {
+  /* backlink */
+  --post-backlink-text-color: navy;
+  --post-backlink-text-decoration: underline;
+  --post-backlink-text-color-hover: red;
+  --post-backlink-text-decoration-hover: underline;
+  --reply-backlink-mobile-background-color: #ead6ca;
+  --reply-backlink-mobile-border-top: 1px solid #d9bfb7;
+
   /* body */
   --body-background-base-color: #ffe;
   --body-background-pattern-image: none;
@@ -517,6 +541,14 @@
 }
 
 :root .burichan {
+  /* backlink */
+  --post-backlink-text-color: #34345C;
+  --post-backlink-text-decoration: underline;
+  --post-backlink-text-color-hover: #dd0000;
+  --post-backlink-text-decoration-hover: underline;
+  --reply-backlink-mobile-background-color: #c9cde8;
+  --reply-backlink-mobile-border-top: 1px solid #b7c5d9;
+
   /* board banner */
   --banner-image-border: 1px solid #000;
   --board-title-font-size: 32px;
@@ -681,6 +713,14 @@
 }
 
 :root .tomorrow {
+  /* backlink */
+  --post-backlink-text-color: #5f89ac;
+  --post-backlink-text-decoration: underline;
+  --post-backlink-text-color-hover: #81a2be;
+  --post-backlink-text-decoration-hover: underline;
+  --reply-backlink-mobile-background-color: #212326;
+  --reply-backlink-mobile-border-top: 1px solid #2D2F33;
+
   /* body */
   --body-background-base-color: #1d1f21;
   --body-background-pattern-image: none;
@@ -868,6 +908,14 @@
 }
 
 :root .photon {
+  /* backlink */
+  --post-backlink-text-color: #f60;
+  --post-backlink-text-decoration: underline;
+  --post-backlink-text-color-hover: #f30;
+  --post-backlink-text-decoration-hover: underline;
+  --reply-backlink-mobile-background-color: #ddd;
+  --reply-backlink-mobile-border-top: 1px solid #ccc;
+
   /* body */
   --body-background-base-color: #eee;
   --body-background-pattern-image: none;