Add explanation to featured hashtags page and profile (#11586)

5 files changed, 45 insertions, 13 deletions

diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb
index f153b63bb..19e8a9bc7 100644
--- a/app/controllers/accounts_controller.rb
+++ b/app/controllers/accounts_controller.rb
@@ -18,6 +18,7 @@ class AccountsController < ApplicationController
 
         @pinned_statuses   = []
         @endorsed_accounts = @account.endorsed_accounts.to_a.sample(4)
+        @featured_hashtags = @account.featured_tags.order(statuses_count: :desc)
 
         if current_account && @account.blocking?(current_account)
           @statuses = []
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index 8c30bc57c..b0d2d1787 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -109,6 +109,15 @@
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 }
 
+.placeholder-widget {
+  padding: 16px;
+  border-radius: 4px;
+  border: 2px dashed $dark-text-color;
+  text-align: center;
+  color: $darker-text-color;
+  margin-bottom: 10px;
+}
+
 .contact-widget,
 .landing-page__information.contact-widget {
   box-sizing: border-box;
@@ -526,6 +535,12 @@ $fluid-breakpoint: $maximum-width + 20px;
   a {
     font-size: 14px;
     line-height: 20px;
+  }
+}
+
+.notice-widget,
+.placeholder-widget {
+  a {
     text-decoration: none;
     font-weight: 500;
     color: $ui-highlight-color;
diff --git a/app/views/accounts/show.html.haml b/app/views/accounts/show.html.haml
index 034304936..b63bbc0c3 100644
--- a/app/views/accounts/show.html.haml
+++ b/app/views/accounts/show.html.haml
@@ -56,24 +56,33 @@
 
     = render 'bio', account: @account
 
-    - unless @endorsed_accounts.empty?
+    - if @endorsed_accounts.empty? && @account.id == current_account&.id
+      .placeholder-widget= t('accounts.endorsements_hint')
+    - elsif !@endorsed_accounts.empty?
       .endorsements-widget
         %h4= t 'accounts.choices_html', name: content_tag(:bdi, display_name(@account, custom_emojify: true))
 
         - @endorsed_accounts.each do |account|
           = account_link_to account
 
-    - @account.featured_tags.order(statuses_count: :desc).each do |featured_tag|
-      .directory__tag{ class: params[:tag] == featured_tag.name ? 'active' : nil }
-        = link_to short_account_tag_path(@account, featured_tag.tag) do
-          %h4
-            = fa_icon 'hashtag'
-            = featured_tag.name
-            %small
-              - if featured_tag.last_status_at.nil?
-                = t('accounts.nothing_here')
-              - else
-                %time.formatted{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at
-          .trends__item__current= number_to_human featured_tag.statuses_count, strip_insignificant_zeros: true
+    - if @featured_hashtags.empty? && @account.id == current_account&.id
+      .placeholder-widget
+        = t('accounts.featured_tags_hint')
+        = link_to settings_featured_tags_path do
+          = t('featured_tags.add_new')
+          = fa_icon 'chevron-right fw'
+    - else
+      - @featured_hashtags.each do |featured_tag|
+        .directory__tag{ class: params[:tag] == featured_tag.name ? 'active' : nil }
+          = link_to short_account_tag_path(@account, featured_tag.tag) do
+            %h4
+              = fa_icon 'hashtag'
+              = featured_tag.name
+              %small
+                - if featured_tag.last_status_at.nil?
+                  = t('accounts.nothing_here')
+                - else
+                  %time.formatted{ datetime: featured_tag.last_status_at.iso8601, title: l(featured_tag.last_status_at) }= l featured_tag.last_status_at
+            .trends__item__current= number_to_human featured_tag.statuses_count, strip_insignificant_zeros: true
 
     = render 'application/sidebar'
diff --git a/app/views/settings/featured_tags/index.html.haml b/app/views/settings/featured_tags/index.html.haml
index 5f69517f3..6734d027c 100644
--- a/app/views/settings/featured_tags/index.html.haml
+++ b/app/views/settings/featured_tags/index.html.haml
@@ -1,6 +1,10 @@
 - content_for :page_title do
   = t('settings.featured_tags')
 
+%p= t('featured_tags.hint_html')
+
+%hr.spacer/
+
 = simple_form_for @featured_tag, url: settings_featured_tags_path do |f|
   = render 'shared/error_messages', object: @featured_tag
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 786906e2d..7ef61e279 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -45,6 +45,8 @@ en:
     what_is_mastodon: What is Mastodon?
   accounts:
     choices_html: "%{name}'s choices:"
+    endorsements_hint: You can endorse people you follow from the web interface, and they will show up here.
+    featured_tags_hint: You can feature specific hashtags that will be displayed here.
     follow: Follow
     followers:
       one: Follower
@@ -664,6 +666,7 @@ en:
     add_new: Add new
     errors:
       limit: You have already featured the maximum amount of hashtags
+    hint_html: "<strong>What are featured hashtags?</strong> They are displayed prominently on your public profile and allow people to browse your public posts specifically under those hashtags. They are a great tool for keeping track of creative works or long-term projects."
   filters:
     contexts:
       home: Home timeline