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"
+      );
+    });
+  }
+);