comment intro

src/ui/component/commentCreate/index.js

@@ -1,16 +1,18 @@
 import { connect } from 'react-redux';
 
-import { doCommentCreate, makeSelectClaimForUri, selectMyActiveChannelUri, } from 'lbry-redux';
-
+import { doCommentCreate, makeSelectClaimForUri, selectMyActiveChannelUri } from 'lbry-redux';
+import { selectCommentsInfoAck, doAckComments } from 'redux/selectors/app';
 import CommentCreate from './view';
 
 const select = (state, props) => ({
   claim: makeSelectClaimForUri(props.uri)(state),
   channelUri: selectMyActiveChannelUri(state),
+  acksComments: selectCommentsInfoAck(state),
 });
 
 const perform = dispatch => ({
   createComment: params => dispatch(doCommentCreate(params)),
+  ackComments: () => dispatch(doAckComments()),
 });
 
 export default connect(

src/ui/component/commentCreate/view.jsx

@@ -4,6 +4,7 @@ import { FormField, Form } from 'component/common/form';
 import Button from 'component/button';
 import ChannelSection from 'component/selectChannel';
 import { parseURI } from 'lbry-redux';
+import { usePersistedState } from 'util/use-persisted-state';
 
 // props:
 type Props = {
@@ -51,6 +52,21 @@ class CommentCreate extends React.PureComponent<Props> {
 
     return (
       <section className="card card--section">
+        {!acksComments && (
+          <React.Fragment>
+            <div className="media__title">
+              <TruncatedText text={channelName || uri} lines={1} />
+            </div>
+            <div className="media__subtitle">
+              {totalItems > 0 && (
+                <span>
+                  {totalItems} {totalItems === 1 ? 'publish' : 'publishes'}
+                </span>
+              )}
+              {!isResolvingUri && !totalItems && <span>This is an empty channel.</span>}
+            </div>
+          </React.Fragment>
+        )}
         <Form onSubmit={this.handleSubmit}>
           <div className="card__content">
             <FormField

src/ui/constants/action_types.js

@@ -14,6 +14,7 @@ export const DAEMON_VERSION_MATCH = 'DAEMON_VERSION_MATCH';
 export const DAEMON_VERSION_MISMATCH = 'DAEMON_VERSION_MISMATCH';
 export const VOLUME_CHANGED = 'VOLUME_CHANGED';
 export const ADD_COMMENT = 'ADD_COMMENT';
+export const ACTIVATE_COMMENTS = 'ACTIVATE_COMMENTS';
 export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';
 export const CHANGE_MODALS_ALLOWED = 'CHANGE_MODALS_ALLOWED';

src/ui/redux/actions/app.js

@@ -373,13 +373,19 @@ export function doChangeVolume(volume) {
     });
   };
 }
-
+// HERE
 export function doClickCommentButton() {
   return {
     type: ACTIONS.ADD_COMMENT,
   };
 }
 
+export function doAckComments() {
+  return {
+    type: ACTIONS.COMMENTS_ACK,
+  };
+}
+
 export function doConditionalAuthNavigate(newSession) {
   return (dispatch, getState) => {
     const state = getState();

src/ui/redux/reducers/app.js

@@ -36,6 +36,8 @@ export type AppState = {
   isUpgradeAvailable: ?boolean,
   isUpgradeSkipped: ?boolean,
   hasClickedComment: boolean,
+  commentsInfoAck: boolean,
+  enhancedLayout: boolean,
   searchOptionsExpanded: boolean,
 };
 
@@ -54,6 +56,7 @@ const defaultState: AppState = {
   autoUpdateDeclined: false,
   modalsAllowed: true,
   hasClickedComment: false,
+  commentsInfoAck: false,
   downloadProgress: undefined,
   upgradeDownloading: undefined,
   upgradeDownloadComplete: undefined,
@@ -194,6 +197,8 @@ reducers[ACTIONS.CLEAR_UPGRADE_TIMER] = state =>
   Object.assign({}, state, {
     checkUpgradeTimer: undefined,
   });
+// HERE
+reducers[ACTIONS.COMMENTS_ACK] = state => Object.assign({}, state, { commentsInfoAck: true });
 
 reducers[ACTIONS.ADD_COMMENT] = state =>
   Object.assign({}, state, {

src/ui/redux/selectors/app.js

@@ -23,11 +23,17 @@ export const selectUpdateUrl = createSelector(
   }
 );
 
+// HERE
 export const selectHasClickedComment = createSelector(
   selectState,
   state => state.hasClickedComment
 );
 
+export const selectCommentsInfoAck = createSelector(
+  selectState,
+  state => state.commentsInfoAck
+);
+
 export const selectRemoteVersion = createSelector(
   selectState,
   state => state.remoteVersion