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

Port f41ec9af05d3e2145e62f705225dbabb7e04e242 to glitch-soc

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

1 files changed, 18 insertions, 11 deletions

diff --git a/app/javascript/flavours/glitch/features/explore/statuses.js b/app/javascript/flavours/glitch/features/explore/statuses.js
index fe08ce466..0a5c9de23 100644
--- a/app/javascript/flavours/glitch/features/explore/statuses.js
+++ b/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
+        />
+      </>
     );
   }