Add information about how to opt-in to the directory on the directory (#9834)

Fix #9833

app/javascript/styles/mastodon/widgets.scss

@@ -480,3 +480,30 @@ $fluid-breakpoint: $maximum-width + 20px;
     }
   }
 }
+
+.notice-widget {
+  margin-bottom: 10px;
+  color: $darker-text-color;
+
+  p {
+    margin-bottom: 10px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    font-size: 14px;
+    line-height: 20px;
+    text-decoration: none;
+    font-weight: 500;
+    color: $ui-highlight-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: underline;
+    }
+  }
+}

app/views/directories/index.html.haml

@@ -41,8 +41,22 @@
       = paginate @accounts
 
   .column-1
-    - if @tags.empty?
-      .nothing-here.nothing-here--flexible
+    - if user_signed_in?
+      .box-widget.notice-widget
+        - if current_account.discoverable?
+          - if current_account.followers_count < Account::MIN_FOLLOWERS_DISCOVERY
+            %p= t('directories.enabled_but_waiting', min_followers: Account::MIN_FOLLOWERS_DISCOVERY)
+          - else
+            %p= t('directories.enabled')
+        - else
+          %p= t('directories.how_to_enable')
+
+          = link_to settings_profile_path do
+            = t('settings.edit_profile')
+            = fa_icon 'chevron-right fw'
+
+    - if @tags.empty? && !user_signed_in?
+      .nothing-here
     - else
       - @tags.each do |tag|
         .directory__tag{ class: tag.id == @tag&.id ? 'active' : nil }

config/locales/en.yml

@@ -553,8 +553,11 @@ en:
     warning_title: Disseminated content availability
   directories:
     directory: Profile directory
+    enabled: You are currently listed in the directory.
+    enabled_but_waiting: You have opted-in to be listed in the directory, but you do not have the minimum number of followers (%{min_followers}) to be listed yet.
     explanation: Discover users based on their interests
     explore_mastodon: Explore %{title}
+    how_to_enable: You are not currently opted-in to the directory. You can opt-in below. Use hashtags in your bio text to be listed under specific hashtags!
     people:
       one: "%{count} person"
       other: "%{count} people"