add replies on desktop

src/components/post/post.module.css

@@ -58,27 +58,31 @@
   width: 100%;
 }
 
+.postDesktop .checkbox, .replyDesktop .checkbox {
+  padding: 3px 7px 3px 4px;
+}
+
 .postDesktop .subject {
   color: var(--post-subject-text-color);
   font-weight: var(--post-subject-font-weight);
 }
 
-.postDesktop .name {
+.postDesktop .name, .replyDesktop .name {
   color: var(--post-name-text-color);
   font-weight: var(--post-name-font-weight);
 }
 
-.postDesktop .postNumLink a, .postDesktop .postNumLink span {
+.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
   color: unset;
   text-decoration: unset;
 }
 
-.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover {
+.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
   cursor: pointer;
   color: var(--button-desktop-text-color-hover);
 }
 
-.postDesktop .stickyIconWrapper {
+.postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper {
   padding-left: 5px;
 }
 
@@ -86,7 +90,7 @@
   padding-left: 3px;
 }
 
-.postDesktop .stickyIconWrapper img, .postDesktop .closedIconWrapper img {
+.postDesktop .stickyIconWrapper img, .postDesktop .closedIconWrapper img, .replyDesktop .stickyIconWrapper img, .replyDesktop .closedIconWrapper img {
   width: 16px;
   height: 16px;
   border: none;
@@ -108,17 +112,17 @@
   color: var(--button-desktop-text-color-hover);
 }
 
-.postDesktop .postMenuBtn {
+.postDesktop .postMenuBtn, .replyDesktop .postMenuBtn {
   padding-left: 5px;
   color: var(--post-menu-button-color);
 }
 
-.postDesktop .postMenuBtn:hover {
+.postDesktop .postMenuBtn:hover, .replyDesktop .postMenuBtn:hover {
   cursor: pointer;
   color: var(--post-menu-button-color-hover);
 }
 
-.postDesktop .postMessage {
+.postDesktop .postMessage, .replyDesktop .postMessage {
   padding: 1em 40px;
 }
 
@@ -249,14 +253,45 @@
   text-decoration: var(--post-content-link-text-decoration-hover);
 }
 
+.replyDesktop {
+  padding-bottom: 4px;
+}
+
+.replyDesktop .sideArrows {
+  color: var(--side-arrows-color);
+  float: left;
+  padding: 0 2px;
+}
+
+.replyDesktop .reply {
+  background-color: #f0e0d6;
+  border: 1px solid #d9bfb7;
+  border-left: none;
+  border-top: none;
+  display: table;
+  padding: 2px;
+}
+
+.replyDesktop .postInfo {
+  padding: 3px 3px 0 0;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;
   }
+
+  .replyDesktop {
+    display: none;
+  }
 }
 
 @media (min-width: 641px) {
   .postMobile {
     display: none;
   }
+
+  .replyMobile {
+    display: none;
+  }
 }

src/components/post/post.tsx

@@ -10,13 +10,50 @@ import { Thumbnail } from '../media';
 
 import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
 
-const ReplyDesktop = ({ reply }: Comment) => {
-  const { content, link, linkHeight, linkWidth, shortCid, subplebbitAddress, timestamp } = reply || {};
+const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => {
+  const { t } = useTranslation();
+  const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {};
+  const { displayName, shortAddress } = author || {};
+
   return (
-    <div className={styles.replyDesktop}>
-      <div className={styles.sideArrows}>{'>>'}</div>
-      {content}
-    </div>
+    index < 5 && (
+      <div className={styles.replyDesktop}>
+        <div className={styles.sideArrows}>{'>>'}</div>
+        <div className={styles.reply}>
+          <div className={styles.postInfo}>
+            <span className={styles.checkbox}>
+              <input type='checkbox' />
+            </span>
+            <span className={styles.nameBlock}>
+              <span className={styles.name}>{displayName || 'Anonymous'} </span>
+              <span className={styles.userAddress}>(u/{shortAddress}) </span>
+            </span>
+            <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
+            <span className={styles.postNum}>
+              <span className={styles.postNumLink}>
+                <Link to={`/p/${subplebbitAddress}/c/${reply.cid}`} className={styles.linkToPost} title='Link to post'>
+                  c/
+                </Link>
+                <span className={styles.replyToPost} title='Reply to post'>
+                  {shortCid}
+                </span>
+              </span>
+              {pinned && (
+                <span className={styles.stickyIconWrapper}>
+                  <img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
+                </span>
+              )}
+            </span>
+            <span className={styles.postMenuBtn}>▶</span>
+          </div>
+          {content && (
+            <blockquote className={styles.postMessage}>
+              <Markdown content={content} />
+            </blockquote>
+          )}
+        </div>
+      </div>
+    )
   );
 };
 
@@ -30,6 +67,8 @@ const PostDesktop = ({ post }: Comment) => {
   const commentMediaInfo = getCommentMediaInfoMemoized(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
 
+  const replies = useReplies(post);
+
   return (
     <div className={styles.postDesktop}>
       <div className={styles.hrWrapper}>
@@ -55,7 +94,10 @@ const PostDesktop = ({ post }: Comment) => {
         </div>
       )}
       <div className={styles.postInfo}>
-        {title && <span className={styles.subject}>{displayTitle}</span>}{' '}
+        <span className={styles.checkbox}>
+          <input type='checkbox' />
+        </span>
+        {title && <span className={styles.subject}>{displayTitle} </span>}
         <span className={styles.nameBlock}>
           <span className={styles.name}>{displayName || 'Anonymous'} </span>
           <span className={styles.userAddress}>(u/{shortAddress}) </span>
@@ -97,6 +139,12 @@ const PostDesktop = ({ post }: Comment) => {
           )}
         </blockquote>
       )}
+      {!pinned &&
+        replies.map((reply, index) => (
+          <div key={reply.cid} className={styles.replyContainer}>
+            <ReplyDesktop index={index} reply={reply} />
+          </div>
+        ))}
     </div>
   );
 };
@@ -172,19 +220,12 @@ const PostMobile = ({ post }: Comment) => {
 };
 
 const Post = ({ post }: Comment) => {
-  const replies = useReplies(post);
-
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
         <PostDesktop post={post} />
         <PostMobile post={post} />
       </div>
-      {replies.map((reply) => (
-        <div key={reply.cid} className={styles.replyContainer}>
-          <ReplyDesktop reply={reply} />
-        </div>
-      ))}
     </div>
   );
 };