feat(post): add content, links, buttons, optimize for feed scroll

src/components/board-nav/board-nav.module.css

@@ -28,10 +28,6 @@
   font-size: var(--boardnav-mobile-font-size);
 }
 
-.boardNavMobile .pageJump a {
-  color: var(--boardnav-mobile-button-text-color);
-}
-
 .boardNavMobile strong {
   text-transform: capitalize;
   padding-right: 5px;
@@ -53,13 +49,11 @@
   padding: 3px 5px 0 0;
 }
 
-.pageJump span, .pageJump a {
+.pageJump a, .mobileSearchButton {
   padding-right: 5px;
-}
-
-.pageJump a {
   color: var(--homepage-box-link-text-color);
   text-decoration: var(--homepage-box-link-text-decoration);
+  text-transform: capitalize;
 }
 
 @media (max-width: 640px) {

src/components/board-nav/board-nav.tsx

@@ -40,8 +40,8 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
 
   const boardSelect = (
     <select value={currentSubplebbit} onChange={(e) => navigate(`/p/${e.target.value}`)}>
-      <option value='all'>All</option>
-      <option value='subscriptions'>Subscriptions</option>
+      <option value='all'>{t('all')}</option>
+      <option value='subscriptions'>{t('subscriptions')}</option>
       {subplebbits.map((subplebbit: any, index: number) => (
         <option key={index} value={subplebbit.address}>
           {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}

src/components/post/post.module.css

@@ -2,6 +2,15 @@
   clear: both;
 }
 
+.hrWrapper hr {
+  margin: 0; /* margin bugs Virtuoso scrolling */
+}
+
+.hrWrapper {
+  padding-top: 0.5em; /* instead of using margin, wrap with padding */
+  padding-bottom: 0.5em;
+}
+
 .postDesktop .link a {
   color: var(--post-link-text-color);
   text-decoration: var(--post-link-text-decoration);
@@ -26,6 +35,56 @@
   font-weight: var(--post-name-font-weight);
 }
 
+.postDesktop .postNumLink a, .postDesktop .postNumLink span {
+  color: unset;
+  text-decoration: unset;
+}
+
+.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
+.postDesktop .stickyIconWrapper {
+  padding-left: 5px;
+}
+
+.postDesktop .closedIconWrapper {
+  padding-left: 3px;
+}
+
+.postDesktop .stickyIconWrapper img, .postDesktop .closedIconWrapper img {
+  width: 16px;
+  height: 16px;
+  border: none;
+  image-rendering: pixelated;
+}
+
+.postDesktop .replyButton {
+  padding-left: 10px;
+}
+
+.postDesktop .replyButton a {
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-desktop-text-decoration);
+  text-transform: capitalize;
+}
+
+.postDesktop .replyButton a:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}
+
+.postMenuBtn {
+  padding-left: 5px;
+  color: var(--post-menu-button-color);
+}
+
+.postMenuBtn:hover {
+  cursor: pointer;
+  color: var(--post-menu-button-color-hover);
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

src/components/post/post.tsx

@@ -1,21 +1,29 @@
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import styles from './post.module.css';
 import useReplies from '../../hooks/use-replies';
 import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils';
+import { getFormattedDate } from '../../lib/utils/time-utils';
+import Markdown from '../markdown';
 
 const Post = ({ post }: Comment) => {
-  const { author, content, link, title } = post || {};
+  const { t } = useTranslation();
+  const { author, cid, content, link, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { displayName, shortAddress } = author || {};
   const replies = useReplies(post);
   const linkMediaInfo = getLinkMediaInfoMemoized(link);
+
   return (
     <div className={styles.thread}>
       <div className={styles.postContainer}>
         <div className={styles.postDesktop}>
-          <hr />
+          <div className={styles.hrWrapper}>
+            <hr />
+          </div>
           {linkMediaInfo?.url && (
             <div className={styles.link}>
-              Link:{' '}
+              {t('link')}:{' '}
               <a href={linkMediaInfo?.url} target='_blank' rel='noopener noreferrer'>
                 {linkMediaInfo.url.length > 30 ? linkMediaInfo?.url.slice(0, 30) + '...' : linkMediaInfo?.url}
               </a>{' '}
@@ -26,11 +34,41 @@ const Post = ({ post }: Comment) => {
             {title && <span className={styles.subject}>{title.length > 75 ? title.slice(0, 75) + '...' : title}</span>}{' '}
             <span className={styles.nameBlock}>
               <span className={styles.name}>{displayName || 'Anonymous'} </span>
-              <span className={styles.userAddress}>(u/{shortAddress})</span>
+              <span className={styles.userAddress}>(u/{shortAddress}) </span>
             </span>
-            <span className={styles.dateTime}></span>
+            <span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
+            <span className={styles.postNum}>
+              <span className={styles.postNumLink}>
+                <Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
+                  c/
+                </Link>
+                <span className={styles.replyToPost} title={t('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>
+              )}
+              {locked && (
+                <span className={styles.closedIconWrapper}>
+                  <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
+                </span>
+              )}
+              <span className={styles.replyButton}>
+                [<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
+              </span>
+            </span>
+            <span className={styles.postMenuBtn}>▶</span>
+          </div>
+          <div className={styles.postMessage}>
+            {content && (
+              <blockquote>
+                <Markdown content={content} />
+              </blockquote>
+            )}
           </div>
-          <div className={styles.postMessage}></div>
         </div>
       </div>
     </div>

src/themes.css

@@ -95,7 +95,7 @@
   --boardnav-desktop-link-text-color: #34345c;
   --boardnav-desktop-link-text-color-hover: #d00;
   --boardnav-desktop-link-text-decoration: none;
-  --boardnav-desktop-link-text-decoration-hover: underline;
+  --boardnav-desktop-link-text-decoration-hover: none;
   --boardnav-mobile-background-color: #d6daf0;
   --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
   --boardnav-mobile-font-size: 10px;