UX: Show educational messages for the likes tab when it's empty (#19180)

This commit adds some content to educate the user about the likes tab in the user menu when it's blank.
Internal topic: t/76879.

app/assets/javascripts/discourse/app/components/user-menu/likes-list-empty-state.hbs

@@ -0,0 +1,10 @@
+<div class="empty-state">
+  <span class="empty-state-title">
+    {{i18n "user.no_likes_title"}}
+  </span>
+  <div class="empty-state-body">
+    <p>
+      {{html-safe (i18n "user.no_likes_body" preferencesUrl=(get-url "/my/preferences/notifications"))}}
+    </p>
+  </div>
+</div>

app/assets/javascripts/discourse/app/components/user-menu/likes-notifications-list.js

@@ -8,4 +8,8 @@ export default class UserMenuLikesNotificationsList extends UserMenuNotification
   dismissWarningModal() {
     return null;
   }
+
+  get emptyStateComponent() {
+    return "user-menu/likes-list-empty-state";
+  }
 }

app/assets/javascripts/discourse/tests/integration/components/user-menu/likes-list-test.js

@@ -0,0 +1,32 @@
+import { module, test } from "qunit";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { query } from "discourse/tests/helpers/qunit-helpers";
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import pretender, { response } from "discourse/tests/helpers/create-pretender";
+import I18n from "I18n";
+
+module(
+  "Integration | Component | user-menu | likes-notifications-list",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    const template = hbs`<UserMenu::LikesNotificationsList/>`;
+    test("empty state (aka blank page syndrome)", async function (assert) {
+      pretender.get("/notifications", () => {
+        return response({ notifications: [] });
+      });
+      await render(template);
+      assert.strictEqual(
+        query(".empty-state-title").textContent.trim(),
+        I18n.t("user.no_likes_title"),
+        "empty state title for the likes tab is shown"
+      );
+      const emptyStateBodyLink = query(".empty-state-body a");
+      assert.ok(
+        emptyStateBodyLink.href.endsWith("/my/preferences/notifications"),
+        "link to /my/preferences/notification inside empty state body is rendered"
+      );
+    });
+  }
+);

config/locales/client.en.yml

@@ -1132,6 +1132,11 @@ en:
       dismiss_notifications_tooltip: "Mark all unread notifications as read"
       dismiss_bookmarks_tooltip: "Mark all unread bookmark reminders as read"
       dismiss_messages_tooltip: "Mark all unread personal messages notifications as read"
+      no_likes_title: "You haven't received any likes yet"
+      no_likes_body: >
+        You will be notified here any time someone likes one of your posts so you can see what others are finding valuable. Others will see the same when you like their posts too!
+        <br><br>
+        Notifications for likes are never emailed to you, but you can tune how you receive notifications about likes on the site in your <a href='%{preferencesUrl}'>notification preferences</a>.
       no_messages_title: "You don’t have any messages"
       no_messages_body: >
         Need to have a direct personal conversation with someone, outside the normal conversational flow? Message them by selecting their avatar and using the %{icon} message button.<br><br>