diff --git a/src/components/post/comment-tools/comment-tools.tsx b/src/components/post/comment-tools/comment-tools.tsx
index 85dee8b0..ca158b08 100644
--- a/src/components/post/comment-tools/comment-tools.tsx
+++ b/src/components/post/comment-tools/comment-tools.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Author, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import styles from './comment-tools.module.css';
@@ -6,6 +6,7 @@ import HideMenu from './hide-menu';
import ModTools from './mod-menu';
import ShareMenu from './share-menu';
import { FailedLabel, PendingLabel, SpoilerLabel } from '../label';
+import { isInboxView } from '../../../lib/utils/view-utils';
interface CommentToolsProps {
author?: Author;
@@ -115,9 +116,10 @@ const CommentTools = ({
const authorRole = useSubplebbit({ subplebbitAddress })?.roles?.[account?.author?.address]?.role;
const isMod = authorRole === 'admin' || authorRole === 'owner' || authorRole === 'moderator';
hasLabel = spoiler || (cid === undefined && !isReply);
+ const isInboxPage = isInboxView(useLocation().pathname);
return (
-
+
{hasLabel && }
{isReply ? (
isSingleReply ? (
diff --git a/src/components/reply/reply.module.css b/src/components/reply/reply.module.css
index 0e29f80b..74ed219d 100644
--- a/src/components/reply/reply.module.css
+++ b/src/components/reply/reply.module.css
@@ -14,11 +14,11 @@
.unreadNotification {
background-color: var(--gray-overlay);
- border: 1px solid var(--gray-border);
+ border: 1px solid var(--gray-overlay-border);
+ margin-left: 30px;
+ margin-right: 15px;
padding: 6px;
- padding: 10px 5px;
- margin-bottom: 10px;
- margin-top: 2px;
+ margin-bottom: 5px;
}
.midcol {
@@ -184,4 +184,44 @@
.parentSubplebbit {
color: var(--text-primary)
+}
+
+.inboxParentLinkSubject {
+ color: var(--text);
+ font-size: 12px;
+ font-weight: bold;
+}
+
+.inboxParentLink {
+ font-weight: normal;
+ font-style: italic;
+ margin-left: 10px;
+ font-size: 12px;
+ color: var(--link);
+ outline: none;
+ overflow: hidden;
+ unicode-bidi: isolate;
+}
+
+.inboxParentLinkWrapper {
+ margin-left: 7px;
+}
+
+.inboxParentInfo {
+ color: var(--green);
+ font-weight: 700;
+}
+
+.inboxParentInfo a {
+ color: var(--text-primary);
+}
+
+.inboxParentInfoButton {
+ cursor: pointer;
+ font-weight: 700;
+ color: var(--text-primary);
+}
+
+.addMargin {
+ margin-left: 29px;
}
\ No newline at end of file
diff --git a/src/components/reply/reply.tsx b/src/components/reply/reply.tsx
index 3e19e561..85f07903 100644
--- a/src/components/reply/reply.tsx
+++ b/src/components/reply/reply.tsx
@@ -1,7 +1,7 @@
import { useMemo, useState } from 'react';
import { Comment, useAccountComment, useAuthorAddress, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import styles from './reply.module.css';
import useReplies from '../../hooks/use-replies';
@@ -18,6 +18,7 @@ import ReplyForm from '../reply-form';
import useDownvote from '../../hooks/use-downvote';
import useStateString from '../../hooks/use-state-string';
import useUpvote from '../../hooks/use-upvote';
+import { isInboxView } from '../../lib/utils/view-utils';
interface ReplyAuthorProps {
address: string;
@@ -103,7 +104,8 @@ const ReplyMedia = ({ commentMediaInfo, content, expanded, hasThumbnail, link, l
};
type ParentLinkProps = {
- postCid: string;
+ commentCid?: string;
+ postCid?: string;
};
const ParentLink = ({ postCid }: ParentLinkProps) => {
@@ -129,6 +131,49 @@ const ParentLink = ({ postCid }: ParentLinkProps) => {
);
};
+const InboxParentLink = ({ commentCid }: ParentLinkProps) => {
+ const inboxComment = useComment({ commentCid });
+ const { postCid, parentCid } = inboxComment || {};
+ const parentComment = useComment({ commentCid: inboxComment?.postCid });
+ const { cid, content, title, subplebbitAddress } = parentComment || {};
+ // const { t } = useTranslation();
+ const postTitle = (title?.length > 300 ? title?.slice(0, 300) + '...' : title) || (content?.length > 300 ? content?.slice(0, 300) + '...' : content);
+
+ const isInboxCommentReply = postCid !== parentCid;
+ const isInboxPostReply = postCid === parentCid;
+
+ return (
+
+ {isInboxCommentReply ? 'comment reply' : isInboxPostReply ? 'post reply' : ''}
+
+ {postTitle}
+
+
+ );
+};
+
+const InboxParentInfo = ({ commentCid }: ParentLinkProps) => {
+ const parent = useComment({ commentCid });
+ const { author, cid, subplebbitAddress, timestamp } = parent || {};
+
+ return (
+ <>
+
+ from{' '}
+
+ u/{author?.shortAddress}{' '}
+
+ via{' '}
+
+ p/{subplebbitAddress}{' '}
+
+ sent {getFormattedTimeAgo(timestamp)}
+
+ show parent
+ >
+ );
+};
+
interface ReplyProps {
depth?: number;
index?: number;
@@ -196,72 +241,77 @@ const Reply = ({ depth = 0, isSingle, isNotification = false, reply = {} }: Repl
const pendingReply = useAccountComment({ commentIndex: reply?.index });
const parentOfPendingReply = useComment({ commentCid: pendingReply?.parentCid });
+ const location = useLocation();
+ const isInboxPage = isInboxView(location.pathname);
+
return (
- {isSingle &&
}
-
1 && styles.nested} ${
- isNotification && !markedAsRead ? styles.unreadNotification : ''
- }`}
- >
+ {isSingle && !isInboxPage &&
}
+ {isInboxPage &&
}
+
1 && styles.nested}`}>
{!collapsed && (
cid && upvote()} />
cid && downvote()} />
)}
-
-
- setCollapsed(!collapsed)}>
- [{collapsed ? '+' : '–'}]
-
-
- {scoreString} {getFormattedTimeAgo(timestamp)}
- {collapsed && ({childrenString})}
- {stateLabel}
- {!collapsed && flair && (
- <>
- {' '}
-
- >
+
+
+ {!isInboxPage && (
+
+ setCollapsed(!collapsed)}>
+ [{collapsed ? '+' : '–'}]
+
+
+ {scoreString} {getFormattedTimeAgo(timestamp)}
+ {collapsed && ({childrenString})}
+ {stateLabel}
+ {!collapsed && flair && (
+ <>
+ {' '}
+
+ >
+ )}
+ {state === 'pending' && loadingString}
+
)}
- {state === 'pending' && loadingString}
-
+ {isInboxPage &&
}
+ {!collapsed && (
+
+ {commentMediaInfo && (
+
+ )}
+
{contentString}
+
+ )}
+
{!collapsed && (
-
- {commentMediaInfo && (
-
- )}
-
{contentString}
+
+
+ {isReplying && }
+ {!isSingle && replies.map((reply, index) => )}
)}
- {!collapsed && (
- <>
-
- {isReplying &&
}
- {!isSingle && replies.map((reply, index) =>
)}
- >
- )}
);
diff --git a/src/themes.css b/src/themes.css
index 2dc9362e..62b809bd 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -5,6 +5,7 @@
--red: red;
--gray-contrast: #888;
--gray-overlay: #F7F7F7;
+ --gray-overlay-border: #E9E9E9;
--gray-border: #ddd;
--gray-light: #CCCCCA;
--box-shadow-modal: 4px 4px 4px #ccc;
@@ -52,6 +53,7 @@
--red: rgb(200, 0, 0);
--gray-contrast: #c7c7c7;
--gray-overlay: #1f1f1f;
+ --gray-overlay-border: #3e3e3e;
--gray-border: #3e3e3e;
--gray-light: #3e3e3e9d;
--box-shadow-modal: 4px 4px 4px #000;