diff --git a/ui/component/channelDiscussion/index.js b/ui/component/channelDiscussion/index.js index df94145b5..09bb3b667 100644 --- a/ui/component/channelDiscussion/index.js +++ b/ui/component/channelDiscussion/index.js @@ -1,7 +1,17 @@ import { connect } from 'react-redux'; +import { withRouter } from 'react-router'; +import { makeSelectCommentForCommentId } from 'redux/selectors/comments'; + import ChannelDiscussion from './view'; -export default connect( - null, - null -)(ChannelDiscussion); +const select = (state, props) => { + const { search } = props.location; + const urlParams = new URLSearchParams(search); + const linkedCommentId = urlParams.get('lc'); + + return { + linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state), + }; +}; + +export default withRouter(connect(select)(ChannelDiscussion)); diff --git a/ui/component/channelDiscussion/view.jsx b/ui/component/channelDiscussion/view.jsx index 30372f543..8834da3ab 100644 --- a/ui/component/channelDiscussion/view.jsx +++ b/ui/component/channelDiscussion/view.jsx @@ -4,13 +4,15 @@ import CommentsList from 'component/commentsList'; type Props = { uri: string, + linkedComment: ?any, }; function ChannelDiscussion(props: Props) { - const uri = props.uri; + const { uri, linkedComment } = props; + return (
- +
); } diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx index d0f0c92c4..309c27940 100644 --- a/ui/component/notification/view.jsx +++ b/ui/component/notification/view.jsx @@ -6,10 +6,13 @@ import React from 'react'; import classnames from 'classnames'; import Icon from 'component/common/icon'; import DateTime from 'component/dateTime'; +import Button from 'component/button'; import ChannelThumbnail from 'component/channelThumbnail'; import { MenuItem } from '@reach/menu-button'; import { formatLbryUrlForWeb } from 'util/url'; import { useHistory } from 'react-router'; +import { parseURI } from 'lbry-redux'; +import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view'; type Props = { notification: WebNotification, @@ -25,10 +28,20 @@ export default function Notification(props: Props) { const notificationTarget = notification && notification_parameters.device.target; const commentText = notification_rule === NOTIFICATION_COMMENT && notification_parameters.dynamic.comment; let notificationLink = formatLbryUrlForWeb(notificationTarget); + let urlParams = new URLSearchParams(); if (notification_rule === NOTIFICATION_COMMENT && notification_parameters.dynamic.hash) { - notificationLink += `?lc=${notification_parameters.dynamic.hash}`; + urlParams.append('lc', notification_parameters.dynamic.hash); } + try { + const { isChannel } = parseURI(notificationTarget); + if (isChannel) { + urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE); + } + } catch (e) {} + + notificationLink += `?${urlParams.toString()}`; + let icon; switch (notification_rule) { case NOTIFICATION_CREATOR_SUBSCRIBER: @@ -51,6 +64,11 @@ export default function Notification(props: Props) { } } + function handleSeeNotification(e) { + e.stopPropagation(); + doSeeNotifications([id]); + } + const Wrapper = menuButton ? (props: { children: any }) => ( @@ -98,8 +116,11 @@ export default function Notification(props: Props) { )} -
- +
+
+ +
+ {!is_seen &&
diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx index e7a678ea8..a8754d96a 100644 --- a/ui/page/channel/view.jsx +++ b/ui/page/channel/view.jsx @@ -20,9 +20,9 @@ import HelpLink from 'component/common/help-link'; import ClaimSupportButton from 'component/claimSupportButton'; import YoutubeBadge from 'component/youtubeBadge'; -const PAGE_VIEW_QUERY = `view`; +export const PAGE_VIEW_QUERY = `view`; const ABOUT_PAGE = `about`; -const DISCUSSION_PAGE = `discussion`; +export const DISCUSSION_PAGE = `discussion`; const EDIT_PAGE = 'edit'; type Props = { @@ -67,7 +67,6 @@ function ChannelPage(props: Props) { } = useHistory(); const urlParams = new URLSearchParams(search); const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined; - const editInUrl = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE; const [discussionWasMounted, setDiscussionWasMounted] = React.useState(false); const editing = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE; const { channelName } = parseURI(uri); diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index 4f27dbf52..b62173c30 100644 --- a/ui/scss/component/_comments.scss +++ b/ui/scss/component/_comments.scss @@ -13,7 +13,7 @@ $thumbnailWidthSmall: 2rem; } .comment__create { - padding-bottom: var(--spacing-l); + padding-bottom: var(--spacing-m); font-size: var(--font-small); } diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss index 81037be06..f728f1999 100644 --- a/ui/scss/component/_notification.scss +++ b/ui/scss/component/_notification.scss @@ -106,3 +106,16 @@ top: 0.75rem; right: 1rem; } + +.notification__extra { + display: flex; + align-items: center; +} + +.notification__mark-seen { + height: 12px; + width: 12px; + border-radius: 50%; + background-color: var(--color-primary); + margin-left: var(--spacing-s); +} diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index d1ec49188..b2404032b 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -83,8 +83,6 @@ // Menu --color-menu-background: var(--color-header-background); - --color-menu-background--selected: #5d646c; - --color-menu-background--active: #3a3f44; --color-menu-icon: #a7a7a7; --color-menu-icon-active: #d6d6d6;