diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css
index 8f4b9363..87f1fe85 100644
--- a/src/components/board-buttons/board-buttons.module.css
+++ b/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) {
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx
index 8dc49364..12f54a9d 100644
--- a/src/components/board-buttons/board-buttons.tsx
+++ b/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 ;
};
-const CatalogButton = () => {
+const CatalogButton = ({ address }: BoardButtonsProps) => {
const { t } = useTranslation();
- return ;
+ return (
+
+ );
};
const SubscribeButton = ({ address }: BoardButtonsProps) => {
@@ -27,28 +33,69 @@ const SubscribeButton = ({ address }: BoardButtonsProps) => {
);
};
+const ReturnButton = ({ address }: BoardButtonsProps) => {
+ const { t } = useTranslation();
+ return (
+
+ );
+};
+
+const BottomButton = () => {
+ const { t } = useTranslation();
+ return (
+
+ );
+};
+
export const MobileBoardButtons = ({ address }: BoardButtonsProps) => {
+ const isInPostPage = isPostPageView(useLocation().pathname, useParams());
return (
-
-
-
+ {isInPostPage ? (
+
+ ) : (
+ <>
+
+
+
+ >
+ )}
);
};
export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => {
+ const isInPostPage = isPostPageView(useLocation().pathname, useParams());
return (
- [
-
- ] [
- ]
-
- [
- ]
-
+ {isInPostPage ? (
+ <>
+ [] [] [] []
+
+ []
+
+ >
+ ) : (
+ <>
+ [] []
+
+ []
+
+ >
+ )}
);
};
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index b3f80b6e..c2494a9e 100644
--- a/src/components/post-form/post-form.tsx
+++ b/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 (
<>
[
]
>
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 5c386675..4b3bad81 100644
--- a/src/components/post/post.tsx
+++ b/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 (
@@ -342,15 +348,17 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
)}
-
-
- {replyCount} Replies
- {linkCount > 0 && ` / ${linkCount} Links`}
-
-
- View Thread
-
-
+ {!isInPostPage && (
+
+
+ {replyCount} Replies
+ {linkCount > 0 && ` / ${linkCount} Links`}
+
+
+ {t('view_thread')}
+
+
+ )}
{!pinned &&
replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
diff --git a/src/index.css b/src/index.css
index 78fe011c..cf18ea6e 100644
--- a/src/index.css
+++ b/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);
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 646a5d3e..ce1ea21e 100644
--- a/src/lib/utils/view-utils.ts
+++ b/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;
+};