[Glitch] Add dismissable hints to various timelines in web UI

Port f41ec9af05 to glitch-soc

Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/explore/index.js

@@ -13,7 +13,6 @@ import Search from 'flavours/glitch/features/compose/containers/search_container
 import SearchResults from './results';
 import { showTrends } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
-import { title } from 'flavours/glitch/initial_state';
 
 const messages = defineMessages({
   title: { id: 'explore.title', defaultMessage: 'Explore' },
@@ -85,7 +84,7 @@ class Explore extends React.PureComponent {
               </Switch>
 
               <Helmet>
-                <title>{intl.formatMessage(messages.title)} - {title}</title>
+                <title>{intl.formatMessage(messages.title)}</title>
               </Helmet>
             </React.Fragment>
           )}

app/javascript/flavours/glitch/features/explore/links.js

@@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import { connect } from 'react-redux';
 import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
 import { FormattedMessage } from 'react-intl';
+import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
 
 const mapStateToProps = state => ({
   links: state.getIn(['trends', 'links', 'items']),
@@ -29,9 +30,17 @@ class Links extends React.PureComponent {
   render () {
     const { isLoading, links } = this.props;
 
+    const banner = (
+      <DismissableBanner id='explore/links'>
+        <FormattedMessage id='dismissable_banner.explore_links' defaultMessage='These news stories are being talked about by people on this and other servers of the decentralized network right now.' />
+      </DismissableBanner>
+    );
+
     if (!isLoading && links.isEmpty()) {
       return (
         <div className='explore__links scrollable scrollable--flex'>
+          {banner}
+
           <div className='empty-column-indicator'>
             <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
           </div>
@@ -41,6 +50,8 @@ class Links extends React.PureComponent {
 
     return (
       <div className='explore__links'>
+        {banner}
+
         {isLoading ? (<LoadingIndicator />) : links.map(link => (
           <Story
             key={link.get('id')}

app/javascript/flavours/glitch/features/explore/results.js

@@ -10,7 +10,6 @@ import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'
 import { List as ImmutableList } from 'immutable';
 import LoadMore from 'flavours/glitch/components/load_more';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import { title } from 'flavours/glitch/initial_state';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
@@ -118,7 +117,7 @@ class Results extends React.PureComponent {
         </div>
 
         <Helmet>
-          <title>{intl.formatMessage(messages.title, { q })} - {title}</title>
+          <title>{intl.formatMessage(messages.title, { q })}</title>
         </Helmet>
       </React.Fragment>
     );

app/javascript/flavours/glitch/features/explore/statuses.js

@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/actions/trends';
 import { debounce } from 'lodash';
+import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
 
 const mapStateToProps = state => ({
   statusIds: state.getIn(['status_lists', 'trending', 'items']),
@@ -40,17 +41,23 @@ class Statuses extends React.PureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />;
 
     return (
-      <StatusList
-        trackScroll
-        statusIds={statusIds}
-        scrollKey='explore-statuses'
-        hasMore={hasMore}
-        isLoading={isLoading}
-        onLoadMore={this.handleLoadMore}
-        emptyMessage={emptyMessage}
-        bindToDocument={!multiColumn}
-        withCounters
-      />
+      <>
+        <DismissableBanner id='explore/statuses'>
+          <FormattedMessage id='dismissable_banner.explore_statuses' defaultMessage='These posts from this and other servers in the decentralized network are gaining traction on this server right now.' />
+        </DismissableBanner>
+
+        <StatusList
+          trackScroll
+          statusIds={statusIds}
+          scrollKey='explore-statuses'
+          hasMore={hasMore}
+          isLoading={isLoading}
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={emptyMessage}
+          bindToDocument={!multiColumn}
+          withCounters
+        />
+      </>
     );
   }
 

app/javascript/flavours/glitch/features/explore/tags.js

@@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import { connect } from 'react-redux';
 import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
 import { FormattedMessage } from 'react-intl';
+import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
 
 const mapStateToProps = state => ({
   hashtags: state.getIn(['trends', 'tags', 'items']),
@@ -29,9 +30,17 @@ class Tags extends React.PureComponent {
   render () {
     const { isLoading, hashtags } = this.props;
 
+    const banner = (
+      <DismissableBanner id='explore/tags'>
+        <FormattedMessage id='dismissable_banner.explore_tags' defaultMessage='These hashtags are gaining traction among people on this and other servers of the decentralized network right now.' />
+      </DismissableBanner>
+    );
+
     if (!isLoading && hashtags.isEmpty()) {
       return (
         <div className='explore__links scrollable scrollable--flex'>
+          {banner}
+
           <div className='empty-column-indicator'>
             <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
           </div>
@@ -41,6 +50,8 @@ class Tags extends React.PureComponent {
 
     return (
       <div className='explore__links'>
+        {banner}
+
         {isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
           <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
         ))}