feat(post page): add view specific buttons

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

@@ -5,6 +5,11 @@
 
 .mobileBoardButtons button {
   margin: 0 2px;
+  text-transform: capitalize;
+}
+
+.mobileBoardButtons a, .desktopBoardButtons a {
+  all: unset;
 }
 
 @media (max-width: 640px) {

src/components/board-buttons/board-buttons.tsx

@@ -1,6 +1,8 @@
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import { useSubscribe } from '@plebbit/plebbit-react-hooks';
 import styles from './board-buttons.module.css';
-import { useTranslation } from 'react-i18next';
+import { isPostPageView } from '../../lib/utils/view-utils';
 
 interface BoardButtonsProps {
   address: string;
@@ -11,9 +13,13 @@ const OptionsButton = () => {
   return <button className='button'>{t('options')}</button>;
 };
 
-const CatalogButton = () => {
+const CatalogButton = ({ address }: BoardButtonsProps) => {
   const { t } = useTranslation();
-  return <button className='button'>{t('catalog')}</button>;
+  return (
+    <button className='button'>
+      <Link to={`/p/${address}/catalog`}>{t('catalog')}</Link>
+    </button>
+  );
 };
 
 const SubscribeButton = ({ address }: BoardButtonsProps) => {
@@ -27,28 +33,69 @@ const SubscribeButton = ({ address }: BoardButtonsProps) => {
   );
 };
 
+const ReturnButton = ({ address }: BoardButtonsProps) => {
+  const { t } = useTranslation();
+  return (
+    <button className='button'>
+      <Link to={`/p/${address}`}>{t('return')}</Link>
+    </button>
+  );
+};
+
+const BottomButton = () => {
+  const { t } = useTranslation();
+  return (
+    <button className='button' onClick={() => window.scrollTo(0, document.body.scrollHeight)}>
+      {t('bottom')}
+    </button>
+  );
+};
+
 export const MobileBoardButtons = ({ address }: BoardButtonsProps) => {
+  const isInPostPage = isPostPageView(useLocation().pathname, useParams());
   return (
     <div className={styles.mobileBoardButtons}>
-      <OptionsButton />
+      {isInPostPage ? (
-      <CatalogButton />
+        <div className={styles.mobilePostPageButtons}>
-      <SubscribeButton address={address} />
+          <ReturnButton address={address} />
+          <CatalogButton address={address} />
+          <BottomButton />
+          <div>
+            <OptionsButton />
+            <SubscribeButton address={address} />
+          </div>
+        </div>
+      ) : (
+        <>
+          <OptionsButton />
+          <CatalogButton address={address} />
+          <SubscribeButton address={address} />
+        </>
+      )}
     </div>
   );
 };
 
 export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => {
+  const isInPostPage = isPostPageView(useLocation().pathname, useParams());
   return (
     <div className={styles.desktopBoardButtons}>
       <hr />
-      [
+      {isInPostPage ? (
-      <OptionsButton />
+        <>
-      ] [
+          [<ReturnButton address={address} />] [<CatalogButton address={address} />] [<BottomButton />] [<OptionsButton />]
-      <CatalogButton />]
+          <span className={styles.subscribeButton}>
-      <span className={styles.subscribeButton}>
+            [<SubscribeButton address={address} />]
-        [
+          </span>
-        <SubscribeButton address={address} />]
+        </>
-      </span>
+      ) : (
+        <>
+          [<OptionsButton />] [<CatalogButton address={address} />]
+          <span className={styles.subscribeButton}>
+            [<SubscribeButton address={address} />]
+          </span>
+        </>
+      )}
     </div>
   );
 };

src/components/post-form/post-form.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
-import styles from './post-form.module.css';
 import { useTranslation } from 'react-i18next';
+import styles from './post-form.module.css';
+import { isPostPageView } from '../../lib/utils/view-utils';
+import { useLocation, useParams } from 'react-router-dom';
 
 export interface PostFormProps {
   address: string | undefined;
@@ -9,19 +11,20 @@ export interface PostFormProps {
 const PostForm = ({ address }: PostFormProps) => {
   const { t } = useTranslation();
   const [showForm, setShowForm] = useState(false);
+  const isInPostPage = isPostPageView(useLocation().pathname, useParams());
 
   return (
     <>
       <div className={styles.postFormButtonDesktop}>
         [
         <button className='button' onClick={() => setShowForm(true)}>
-          {t('start_new_thread')}
+          {isInPostPage ? t('post_a_reply') : t('start_new_thread')}
         </button>
         ]
       </div>
       <div className={styles.postFormButtonMobile}>
         <button className='button' onClick={() => setShowForm(!showForm)}>
-          {showForm ? t('close_post_form') : t('start_new_thread')}
+          {showForm ? t('close_post_form') : isInPostPage ? t('post_a_reply') : t('start_new_thread')}
         </button>
       </div>
     </>

src/components/post/post.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
 import { getFormattedDate } from '../../lib/utils/time-utils';
+import { isPostPageView } from '../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
 import useReplies from '../../hooks/use-replies';
 import styles from './post.module.css';
@@ -280,6 +281,7 @@ const ReplyMobile = ({ reply }: Comment) => {
 };
 
 const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
+  const { t } = useTranslation();
   const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
   const { address, displayName, shortAddress } = author || {};
   const linkCount = useCountLinksInReplies(post);
@@ -292,6 +294,10 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
 
   const replies = useReplies(post);
 
+  const location = useLocation();
+  const params = useParams();
+  const isInPostPage = isPostPageView(location.pathname, params);
+
   return (
     <div className={styles.postMobile}>
       <div className={styles.hrWrapper}>
@@ -342,15 +348,17 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
               </blockquote>
             )}
           </div>
-          <div className={styles.postLink}>
+          {!isInPostPage && (
-            <span className={styles.info}>
+            <div className={styles.postLink}>
-              {replyCount} Replies
+              <span className={styles.info}>
-              {linkCount > 0 && ` / ${linkCount} Links`}
+                {replyCount} Replies
-            </span>
+                {linkCount > 0 && ` / ${linkCount} Links`}
-            <Link to={`/p/${subplebbitAddress}/c/${cid}`} className='button'>
+              </span>
-              View Thread
+              <Link to={`/p/${subplebbitAddress}/c/${cid}`} className='button'>
-            </Link>
+                {t('view_thread')}
-          </div>
+              </Link>
+            </div>
+          )}
         </div>
         {!pinned &&
           replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (

src/index.css

@@ -24,7 +24,6 @@ hr {
 
 @media (max-width: 640px) {
   .button {
-    text-transform: capitalize;
     font-size: var(--button-font-size-mobile);
     font-weight: var(--button-font-weight-mobile);
     font-family: var(--button-font-family-mobile);

src/lib/utils/view-utils.ts

@@ -1,3 +1,14 @@
+export type ParamsType = {
+  commentCid?: string;
+  subplebbitAddress?: string;
+};
+
 export const isHomeView = (pathname: string): boolean => {
   return pathname === '/';
 };
+
+export const isPostPageView = (pathname: string, params: ParamsType): boolean => {
+  // some subs might use emojis in their address, so we need to decode the pathname
+  const decodedPathname = decodeURIComponent(pathname);
+  return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false;
+};