REVERT: suggested topic list tweaks stable (#22909)

We reverted these commits because they weren't stable enough. We'll keep working on them on `tests-passed`.

* Revert "UX: Use full width when displaying a single recommendations list. (#22896)"

This reverts commit dd8d89d9c8.

* Revert "UX:  Topic recommendations tweaks. (#22880)"

This reverts commit e7fb4be23e.

app/assets/javascripts/discourse/app/components/more-topics.hbs

@@ -1,39 +0,0 @@
-<div
-  class="more-content-wrapper {{if this.singleList 'single-list'}}"
-  {{did-insert this.buildListPills}}
->
-  {{#if this.showTopicListsNav}}
-    <div class="row">
-      <ul class="nav nav-pills" {{did-insert this.buildListPills}}>
-        {{#each this.availablePills as |pill|}}
-          <li>
-            <DButton
-              @translatedTitle={{pill.name}}
-              @translatedLabel={{pill.name}}
-              @class={{if pill.selected "active"}}
-              @action={{action "rememberTopicListPreference" pill.id}}
-            />
-          </li>
-        {{/each}}
-      </ul>
-    </div>
-  {{/if}}
-
-  {{#if @topic.relatedMessages.length}}
-    <RelatedMessages @topic={{@topic}} />
-  {{/if}}
-
-  {{#if @topic.suggestedTopics.length}}
-    <SuggestedTopics @topic={{@topic}} />
-
-    <span>
-      <PluginOutlet
-        @name="below-suggested-topics"
-        @connectorTagName="div"
-        @outletArgs={{hash topic=@topic}}
-      />
-    </span>
-  {{/if}}
-
-  <PluginOutlet @name="topic-more-content" @outletArgs={{hash model=@topic}} />
-</div>

app/assets/javascripts/discourse/app/components/more-topics.js

@@ -1,59 +0,0 @@
-import Component from "@glimmer/component";
-import { inject as service } from "@ember/service";
-import { next } from "@ember/runloop";
-import { action } from "@ember/object";
-import { tracked } from "@glimmer/tracking";
-
-export default class MoreTopics extends Component {
-  @service site;
-  @service moreTopicsPreferenceTracking;
-
-  @tracked availablePills = [];
-  @tracked singleList = false;
-
-  get showTopicListsNav() {
-    return this.site.mobileView && !this.singleList;
-  }
-
-  @action
-  rememberTopicListPreference(value) {
-    this.moreTopicsPreferenceTracking.updatePreference(value);
-
-    this.buildListPills();
-  }
-
-  @action
-  buildListPills() {
-    next(() => {
-      const pills = Array.from(
-        document.querySelectorAll(".more-content-topics")
-      ).map((topicList) => {
-        return {
-          name: topicList.dataset.mobileTitle,
-          id: topicList.dataset.listId,
-        };
-      });
-
-      if (pills.length <= 1) {
-        this.singleList = true;
-      }
-
-      if (this.singleList || !this.site.mobileView) {
-        return;
-      }
-
-      let preference = this.moreTopicsPreferenceTracking.preference;
-
-      if (!preference) {
-        this.moreTopicsPreferenceTracking.updatePreference(pills[0].id);
-        preference = pills[0].id;
-      }
-
-      pills.forEach((pill) => {
-        pill.selected = pill.id === preference;
-      });
-
-      this.availablePills = pills;
-    });
-  }
-}

app/assets/javascripts/discourse/app/components/related-messages.hbs

@@ -1,12 +1,10 @@
 <div
   id="related-messages"
-  class="more-content-topics {{if this.hidden 'hidden'}}"
+  class="suggested-topics"
   role="complementary"
   aria-labelledby="related-messages-title"
-  data-mobile-title={{i18n "related_messages.pill"}}
-  data-list-id={{this.listId}}
 >
-  <h3 id="related-messages-title" class="more-topics-title">
+  <h3 class="suggested-topics-title" id="related-messages-title">
     {{i18n "related_messages.title"}}
   </h3>
 

app/assets/javascripts/discourse/app/components/related-messages.js

@@ -1,17 +1,9 @@
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import getURL from "discourse-common/lib/get-url";
-import { inject as service } from "@ember/service";
 
 export default Component.extend({
   tagName: "",
-  moreTopicsPreferenceTracking: service(),
-  listId: "related-Messages",
-
-  @discourseComputed("moreTopicsPreferenceTracking.preference")
-  hidden(preference) {
-    return this.site.mobileView && preference !== this.listId;
-  },
 
   @discourseComputed("topic")
   targetUser(topic) {

app/assets/javascripts/discourse/app/components/suggested-topics.hbs

@@ -1,14 +1,12 @@
 <div
   id="suggested-topics"
-  class="more-content-topics {{if this.hidden 'hidden'}}"
+  class="suggested-topics"
   role="complementary"
   aria-labelledby="suggested-topics-title"
-  data-mobile-title={{i18n "suggested_topics.pill"}}
-  data-list-id={{this.listId}}
 >
   <UserTip @id="suggested_topics" @selector=".user-tip-reference" />
 
-  <h3 id="suggested-topics-title" class="more-topics-title">
+  <h3 id="suggested-topics-title" class="suggested-topics-title">
     {{i18n this.suggestedTitleLabel}}
   </h3>
 
@@ -28,3 +26,11 @@
     {{html-safe this.browseMoreMessage}}
   </h3>
 </div>
+
+<span>
+  <PluginOutlet
+    @name="below-suggested-topics"
+    @connectorTagName="div"
+    @outletArgs={{hash topic=this.topic}}
+  />
+</span>

app/assets/javascripts/discourse/app/components/suggested-topics.js

@@ -5,12 +5,9 @@ import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import discourseComputed from "discourse-common/utils/decorators";
 import getURL from "discourse-common/lib/get-url";
 import { iconHTML } from "discourse-common/lib/icon-library";
-import { inject as service } from "@ember/service";
 
 export default Component.extend({
   tagName: "",
-  moreTopicsPreferenceTracking: service(),
-  listId: "suggested-topics",
 
   suggestedTitleLabel: computed("topic", function () {
     const href = this.currentUser && this.currentUser.pmPath(this.topic);
@@ -21,11 +18,6 @@ export default Component.extend({
     }
   }),
 
-  @discourseComputed("moreTopicsPreferenceTracking.preference")
-  hidden(preference) {
-    return this.site.mobileView && preference !== this.listId;
-  },
-
   @discourseComputed(
     "topic",
     "pmTopicTrackingState.isTracking",

app/assets/javascripts/discourse/app/lib/keyboard-shortcuts.js

@@ -360,7 +360,7 @@ export default {
   },
 
   goToFirstSuggestedTopic() {
-    const el = document.querySelector("#suggested-topics a.raw-topic-link");
+    const el = document.querySelector(".suggested-topics a.raw-topic-link");
     if (el) {
       el.click();
     } else {

app/assets/javascripts/discourse/app/services/more-topics-preference-tracking.js

@@ -1,20 +0,0 @@
-import Service, { inject as service } from "@ember/service";
-import { tracked } from "@glimmer/tracking";
-
-const TOPIC_LIST_PREFERENCE_KEY = "more-topics-list-preference";
-
-export default class MoreTopicsPreferenceTracking extends Service {
-  @service keyValueStore;
-
-  @tracked preference;
-
-  init() {
-    super.init(...arguments);
-    this.preference = this.keyValueStore.get(TOPIC_LIST_PREFERENCE_KEY);
-  }
-
-  updatePreference(value) {
-    this.keyValueStore.set({ key: TOPIC_LIST_PREFERENCE_KEY, value });
-    this.preference = value;
-  }
-}

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -543,8 +543,20 @@
           @outletArgs={{hash model=this.model}}
         />
       </span>
-
+      <div
-      <MoreTopics @topic={{this.model}} />
+        class="{{if
+            this.model.relatedMessages.length
+            'related-messages-wrapper'
+          }}
+          {{if this.model.suggestedTopics.length 'suggested-topics-wrapper'}}"
+      >
+        {{#if this.model.relatedMessages.length}}
+          <RelatedMessages @topic={{this.model}} />
+        {{/if}}
+        {{#if this.model.suggestedTopics.length}}
+          <SuggestedTopics @topic={{this.model}} />
+        {{/if}}
+      </div>
     {{/if}}
   {{else}}
     <div class="container">

app/assets/javascripts/discourse/tests/acceptance/personal-message-test.js

@@ -21,7 +21,7 @@ acceptance("Personal Message", function (needs) {
     await visit("/t/pm-for-testing/12");
 
     assert.strictEqual(
-      query("#suggested-topics-title").innerText.trim(),
+      query("#suggested-topics .suggested-topics-title").innerText.trim(),
       I18n.t("suggested_topics.pm_title")
     );
   });

app/assets/javascripts/discourse/tests/acceptance/topic-test.js

@@ -204,7 +204,7 @@ acceptance("Topic", function (needs) {
     await visit("/t/internationalization-localization/280");
 
     assert.strictEqual(
-      query("#suggested-topics-title").innerText.trim(),
+      query("#suggested-topics .suggested-topics-title").innerText.trim(),
       I18n.t("suggested_topics.title")
     );
   });

app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js

@@ -83,246 +83,242 @@ acceptance(
   }
 );
 
-let fetchedNew;
-let fetchUserNew;
-let fetchedGroupNew;
-
-function withGroupMessagesSetup(needs) {
-  needs.user({
-    id: 5,
-    username: "charlie",
-    groups: [{ id: 14, name: "awesome_group", has_messages: true }],
-  });
-
-  needs.site({
-    can_tag_pms: true,
-  });
-
-  needs.hooks.afterEach(() => {
-    fetchedNew = false;
-    fetchedGroupNew = false;
-    fetchUserNew = false;
-  });
-
-  needs.pretender((server, helper) => {
-    server.get("/tags/personal_messages/:username.json", () => {
-      return helper.response({ tags: [{ id: "tag1" }] });
-    });
-
-    server.get("/t/13.json", () => {
-      const response = cloneJSON(fixturesByUrl["/t/12/1.json"]);
-      response.suggested_group_name = "awesome_group";
-      return helper.response(response);
-    });
-
-    server.get("/topics/private-messages/:username.json", () => {
-      return helper.response({
-        topic_list: {
-          topics: [
-            {
-              id: 1,
-              posters: [],
-              notification_level: NotificationLevels.TRACKING,
-              unread_posts: 1,
-              last_read_post_number: 1,
-              highest_post_number: 2,
-            },
-            {
-              id: 2,
-              posters: [],
-            },
-            {
-              id: 3,
-              posters: [],
-            },
-          ],
-        },
-      });
-    });
-
-    [
-      "/topics/private-messages-new/:username.json",
-      "/topics/private-messages-unread/:username.json",
-      "/topics/private-messages-archive/:username.json",
-      "/topics/private-messages-group/:username/:group_name/new.json",
-      "/topics/private-messages-group/:username/:group_name/unread.json",
-      "/topics/private-messages-group/:username/:group_name/archive.json",
-      "/topics/private-messages-tags/:username/:tag_name",
-    ].forEach((url) => {
-      server.get(url, () => {
-        let topics;
-
-        if (fetchedNew || fetchedGroupNew || fetchUserNew) {
-          topics = [];
-        } else {
-          topics = [
-            { id: 1, posters: [] },
-            { id: 2, posters: [] },
-            { id: 3, posters: [] },
-          ];
-        }
-
-        return helper.response({
-          topic_list: {
-            topics,
-          },
-        });
-      });
-    });
-
-    server.get(
-      "/topics/private-messages-group/:username/:group_name.json",
-      () => {
-        return helper.response({
-          topic_list: {
-            topics: [
-              { id: 1, posters: [] },
-              { id: 2, posters: [] },
-            ],
-          },
-        });
-      }
-    );
-
-    server.put("/topics/pm-reset-new", (request) => {
-      const requestBody = request.requestBody;
-      // No easy way to do this https://github.com/pretenderjs/pretender/issues/159
-      if (requestBody === "inbox=group&group_name=awesome_group") {
-        fetchedGroupNew = true;
-      }
-
-      if (requestBody === "inbox=user") {
-        fetchUserNew = true;
-      }
-
-      if (requestBody === "inbox=all") {
-        fetchedNew = true;
-      }
-
-      return helper.response({ topic_ids: [1, 2, 3] });
-    });
-
-    server.put("/topics/bulk", (request) => {
-      const requestBody = request.requestBody;
-
-      if (requestBody.includes("private_message_inbox=all")) {
-        fetchedNew = true;
-      }
-
-      if (
-        requestBody.includes(
-          "private_message_inbox=group&group_name=awesome_group"
-        )
-      ) {
-        fetchedGroupNew = true;
-      }
-
-      if (requestBody.includes("private_message_inbox=user")) {
-        fetchUserNew = true;
-      }
-
-      return helper.response({
-        topic_ids: [1, 2, 3],
-      });
-    });
-  });
-}
-
-const publishReadToMessageBus = function (opts = {}) {
-  return publishToMessageBus(
-    `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
-    {
-      topic_id: opts.topicId,
-      message_type: "read",
-      payload: {
-        last_read_post_number: 2,
-        highest_post_number: 2,
-        notification_level: 2,
-      },
-    }
-  );
-};
-
-const publishUnreadToMessageBus = function (opts = {}) {
-  return publishToMessageBus(
-    `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
-    {
-      topic_id: opts.topicId,
-      message_type: "unread",
-      payload: {
-        last_read_post_number: 1,
-        highest_post_number: 2,
-        notification_level: 2,
-        group_ids: opts.groupIds || [],
-      },
-    }
-  );
-};
-
-const publishNewToMessageBus = function (opts = {}) {
-  return publishToMessageBus(
-    `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
-    {
-      topic_id: opts.topicId,
-      message_type: "new_topic",
-      payload: {
-        last_read_post_number: null,
-        highest_post_number: 1,
-        group_ids: opts.groupIds || [],
-      },
-    }
-  );
-};
-
-const publishGroupArchiveToMessageBus = function (opts) {
-  return publishToMessageBus(
-    `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
-    {
-      topic_id: opts.topicId,
-      message_type: "group_archive",
-      payload: {
-        group_ids: opts.groupIds,
-        acting_user_id: opts.actingUserId,
-      },
-    }
-  );
-};
-
-const publishGroupUnreadToMessageBus = function (opts) {
-  return publishToMessageBus(
-    `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
-    {
-      topic_id: opts.topicId,
-      message_type: "unread",
-      payload: {
-        last_read_post_number: 1,
-        highest_post_number: 2,
-        notification_level: 2,
-        group_ids: opts.groupIds || [],
-      },
-    }
-  );
-};
-
-const publishGroupNewToMessageBus = function (opts) {
-  return publishToMessageBus(
-    `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
-    {
-      topic_id: opts.topicId,
-      message_type: "new_topic",
-      payload: {
-        last_read_post_number: null,
-        highest_post_number: 1,
-        group_ids: opts.groupIds || [],
-      },
-    }
-  );
-};
-
 acceptance(
   "User Private Messages - user with group messages",
   function (needs) {
-    withGroupMessagesSetup(needs);
+    let fetchedNew;
+    let fetchUserNew;
+    let fetchedGroupNew;
+
+    needs.user({
+      id: 5,
+      username: "charlie",
+      groups: [{ id: 14, name: "awesome_group", has_messages: true }],
+    });
+
+    needs.site({
+      can_tag_pms: true,
+    });
+
+    needs.hooks.afterEach(() => {
+      fetchedNew = false;
+      fetchedGroupNew = false;
+      fetchUserNew = false;
+    });
+
+    needs.pretender((server, helper) => {
+      server.get("/tags/personal_messages/:username.json", () => {
+        return helper.response({ tags: [{ id: "tag1" }] });
+      });
+
+      server.get("/t/13.json", () => {
+        const response = cloneJSON(fixturesByUrl["/t/12/1.json"]);
+        response.suggested_group_name = "awesome_group";
+        return helper.response(response);
+      });
+
+      server.get("/topics/private-messages/:username.json", () => {
+        return helper.response({
+          topic_list: {
+            topics: [
+              {
+                id: 1,
+                posters: [],
+                notification_level: NotificationLevels.TRACKING,
+                unread_posts: 1,
+                last_read_post_number: 1,
+                highest_post_number: 2,
+              },
+              {
+                id: 2,
+                posters: [],
+              },
+              {
+                id: 3,
+                posters: [],
+              },
+            ],
+          },
+        });
+      });
+
+      [
+        "/topics/private-messages-new/:username.json",
+        "/topics/private-messages-unread/:username.json",
+        "/topics/private-messages-archive/:username.json",
+        "/topics/private-messages-group/:username/:group_name/new.json",
+        "/topics/private-messages-group/:username/:group_name/unread.json",
+        "/topics/private-messages-group/:username/:group_name/archive.json",
+        "/topics/private-messages-tags/:username/:tag_name",
+      ].forEach((url) => {
+        server.get(url, () => {
+          let topics;
+
+          if (fetchedNew || fetchedGroupNew || fetchUserNew) {
+            topics = [];
+          } else {
+            topics = [
+              { id: 1, posters: [] },
+              { id: 2, posters: [] },
+              { id: 3, posters: [] },
+            ];
+          }
+
+          return helper.response({
+            topic_list: {
+              topics,
+            },
+          });
+        });
+      });
+
+      server.get(
+        "/topics/private-messages-group/:username/:group_name.json",
+        () => {
+          return helper.response({
+            topic_list: {
+              topics: [
+                { id: 1, posters: [] },
+                { id: 2, posters: [] },
+              ],
+            },
+          });
+        }
+      );
+
+      server.put("/topics/pm-reset-new", (request) => {
+        const requestBody = request.requestBody;
+        // No easy way to do this https://github.com/pretenderjs/pretender/issues/159
+        if (requestBody === "inbox=group&group_name=awesome_group") {
+          fetchedGroupNew = true;
+        }
+
+        if (requestBody === "inbox=user") {
+          fetchUserNew = true;
+        }
+
+        if (requestBody === "inbox=all") {
+          fetchedNew = true;
+        }
+
+        return helper.response({ topic_ids: [1, 2, 3] });
+      });
+
+      server.put("/topics/bulk", (request) => {
+        const requestBody = request.requestBody;
+
+        if (requestBody.includes("private_message_inbox=all")) {
+          fetchedNew = true;
+        }
+
+        if (
+          requestBody.includes(
+            "private_message_inbox=group&group_name=awesome_group"
+          )
+        ) {
+          fetchedGroupNew = true;
+        }
+
+        if (requestBody.includes("private_message_inbox=user")) {
+          fetchUserNew = true;
+        }
+
+        return helper.response({
+          topic_ids: [1, 2, 3],
+        });
+      });
+    });
+
+    const publishReadToMessageBus = function (opts = {}) {
+      return publishToMessageBus(
+        `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
+        {
+          topic_id: opts.topicId,
+          message_type: "read",
+          payload: {
+            last_read_post_number: 2,
+            highest_post_number: 2,
+            notification_level: 2,
+          },
+        }
+      );
+    };
+
+    const publishUnreadToMessageBus = function (opts = {}) {
+      return publishToMessageBus(
+        `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
+        {
+          topic_id: opts.topicId,
+          message_type: "unread",
+          payload: {
+            last_read_post_number: 1,
+            highest_post_number: 2,
+            notification_level: 2,
+            group_ids: opts.groupIds || [],
+          },
+        }
+      );
+    };
+
+    const publishNewToMessageBus = function (opts = {}) {
+      return publishToMessageBus(
+        `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
+        {
+          topic_id: opts.topicId,
+          message_type: "new_topic",
+          payload: {
+            last_read_post_number: null,
+            highest_post_number: 1,
+            group_ids: opts.groupIds || [],
+          },
+        }
+      );
+    };
+
+    const publishGroupArchiveToMessageBus = function (opts) {
+      return publishToMessageBus(
+        `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
+        {
+          topic_id: opts.topicId,
+          message_type: "group_archive",
+          payload: {
+            group_ids: opts.groupIds,
+            acting_user_id: opts.actingUserId,
+          },
+        }
+      );
+    };
+
+    const publishGroupUnreadToMessageBus = function (opts) {
+      return publishToMessageBus(
+        `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
+        {
+          topic_id: opts.topicId,
+          message_type: "unread",
+          payload: {
+            last_read_post_number: 1,
+            highest_post_number: 2,
+            notification_level: 2,
+            group_ids: opts.groupIds || [],
+          },
+        }
+      );
+    };
+
+    const publishGroupNewToMessageBus = function (opts) {
+      return publishToMessageBus(
+        `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
+        {
+          topic_id: opts.topicId,
+          message_type: "new_topic",
+          payload: {
+            last_read_post_number: null,
+            highest_post_number: 1,
+            group_ids: opts.groupIds || [],
+          },
+        }
+      );
+    };
 
     test("incoming group archive message acted by current user", async function (assert) {
       await visit("/u/charlie/messages");
@@ -643,6 +639,83 @@ acceptance(
       );
     });
 
+    test("suggested messages without new or unread", async function (assert) {
+      await visit("/t/12");
+
+      assert.strictEqual(
+        query(".suggested-topics-message").innerText.trim(),
+        "Want to read more? Browse other messages in personal messages.",
+        "displays the right browse more message"
+      );
+    });
+
+    test("suggested messages with new and unread", async function (assert) {
+      await visit("/t/12");
+
+      await publishNewToMessageBus({ userId: 5, topicId: 1 });
+
+      assert.strictEqual(
+        query(".suggested-topics-message").innerText.trim(),
+        "There is 1 new message remaining, or browse other personal messages",
+        "displays the right browse more message"
+      );
+
+      await publishUnreadToMessageBus({ userId: 5, topicId: 2 });
+
+      assert.strictEqual(
+        query(".suggested-topics-message").innerText.trim(),
+        "There is 1 unread and 1 new message remaining, or browse other personal messages",
+        "displays the right browse more message"
+      );
+
+      await publishReadToMessageBus({ userId: 5, topicId: 2 });
+
+      assert.strictEqual(
+        query(".suggested-topics-message").innerText.trim(),
+        "There is 1 new message remaining, or browse other personal messages",
+        "displays the right browse more message"
+      );
+    });
+
+    test("suggested messages for group messages without new or unread", async function (assert) {
+      await visit("/t/13");
+
+      assert.ok(
+        query(".suggested-topics-message")
+          .innerText.trim()
+          .match(
+            /Want to read more\? Browse other messages in\s+awesome_group\./
+          ),
+        "displays the right browse more message"
+      );
+    });
+
+    test("suggested messages for group messages with new and unread", async function (assert) {
+      await visit("/t/13");
+
+      await publishGroupNewToMessageBus({ groupIds: [14], topicId: 1 });
+
+      assert.ok(
+        query(".suggested-topics-message")
+          .innerText.trim()
+          .match(
+            /There is 1 new message remaining, or browse other messages in\s+awesome_group/
+          ),
+        "displays the right browse more message"
+      );
+
+      await publishGroupUnreadToMessageBus({ groupIds: [14], topicId: 2 });
+
+      assert.ok(
+        query(".suggested-topics-message")
+          .innerText.trim()
+          .match(
+            /There is 1 unread and 1 new message remaining, or browse other messages in\s+awesome_group/
+          ),
+        "displays the right browse more message"
+      );
+    });
+
     test("navigating between user messages route with dropdown", async function (assert) {
       await visit("/u/Charlie/messages");
 
@@ -735,95 +808,6 @@ acceptance(
   }
 );
 
-acceptance(
-  "User Private Messages - user with group messages - Mobile",
-  function (needs) {
-    withGroupMessagesSetup(needs);
-    needs.mobileView();
-
-    test("suggested messages without new or unread", async function (assert) {
-      await visit("/t/12");
-
-      assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
-        "Want to read more? Browse other messages in personal messages.",
-        "displays the right browse more message"
-      );
-    });
-
-    test("suggested messages with new and unread", async function (assert) {
-      await visit("/t/12");
-
-      await publishNewToMessageBus({ userId: 5, topicId: 1 });
-
-      assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
-        "There is 1 new message remaining, or browse other personal messages",
-        "displays the right browse more message"
-      );
-
-      await publishUnreadToMessageBus({ userId: 5, topicId: 2 });
-
-      assert.ok(
-        query(".suggested-topics-message")
-          .innerText.trim()
-          .match(
-            /There is 1 unread\s+ and 1 new message remaining, or browse other personal messages/
-          ),
-        "displays the right browse more message"
-      );
-
-      await publishReadToMessageBus({ userId: 5, topicId: 2 });
-
-      assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
-        "There is 1 new message remaining, or browse other personal messages",
-        "displays the right browse more message"
-      );
-    });
-
-    test("suggested messages for group messages without new or unread", async function (assert) {
-      await visit("/t/13");
-
-      assert.ok(
-        query(".suggested-topics-message")
-          .innerText.trim()
-          .match(
-            /Want to read more\? Browse other messages in\s+awesome_group\./
-          ),
-        "displays the right browse more message"
-      );
-    });
-
-    test("suggested messages for group messages with new and unread", async function (assert) {
-      needs.mobileView();
-      await visit("/t/13");
-
-      await publishGroupNewToMessageBus({ groupIds: [14], topicId: 1 });
-
-      assert.ok(
-        query(".suggested-topics-message")
-          .innerText.trim()
-          .match(
-            /There is 1 new message remaining, or browse other messages in\s+awesome_group/
-          ),
-        "displays the right browse more message"
-      );
-
-      await publishGroupUnreadToMessageBus({ groupIds: [14], topicId: 2 });
-
-      assert.ok(
-        query(".suggested-topics-message")
-          .innerText.trim()
-          .match(
-            /There is 1 unread\s+ and 1 new message remaining, or browse other messages in\s+awesome_group/
-          ),
-        "displays the right browse more message"
-      );
-    });
-  }
-);
-
 acceptance("User Private Messages - user with no messages", function (needs) {
   needs.user();
 

app/assets/stylesheets/common/base/topic.scss

@@ -368,39 +368,42 @@ a.badge-category {
   max-width: 757px;
 }
 
+.suggested-topics-wrapper.related-messages-wrapper {
+  .suggested-topics:nth-of-type(n + 2) {
+    thead {
+      display: none;
+    }
+  }
+}
+
 // Target the .badge-category text, the bullet icon needs to maintain `display: block`
-.more-content-topics h3 .badge-wrapper.bullet span.badge-category,
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category,
-.more-content-topics h3 .badge-wrapper.box span,
+.suggested-topics h3 .badge-wrapper.box span,
-.more-content-topics h3 .badge-wrapper.bar span {
+.suggested-topics h3 .badge-wrapper.bar span {
   display: inline;
 }
 
-.more-content-topicss h3 .badge-wrapper.bullet span.badge-category {
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category {
   // Override vertical-align: text-top from `badges.css.scss`
   vertical-align: baseline;
   line-height: var(--line-height-medium);
 }
 
-.more-content-topics h3 .badge-wrapper.bullet,
+.suggested-topics h3 .badge-wrapper.bullet,
-.more-content-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg,
-.more-content-topics h3 .badge-wrapper.bullet span.badge-category-bg {
+.suggested-topics h3 .badge-wrapper.bullet span.badge-category-bg {
   // Top of bullet aligns with top of line - adjust line height to vertically align bullet.
   line-height: 0.8;
 }
 
-.more-content-topics .badge-wrapper.bullet span.badge-category,
+.suggested-topics .badge-wrapper.bullet span.badge-category,
-.more-content-topics .badge-wrapper.bar span.badge-category {
+.suggested-topics .badge-wrapper.bar span.badge-category {
   max-width: 150px;
 }
 
-.more-content-topics {
+.suggested-topics .suggested-topics-title {
-  .topic-list-body {
+  display: flex;
-    border-top: none;
+  align-items: center;
-
-    .topic-list-item:last-of-type {
-      border-bottom: none;
-    }
-  }
 }
 
 .post-links-container {

app/assets/stylesheets/desktop/topic-post.scss

@@ -362,17 +362,11 @@ pre.codeblock-buttons:hover {
   }
 }
 
-.more-content-wrapper.single-list {
+.suggested-topics {
-  .more-content-topics {
+  margin: 4.5em 0 1em;
-    width: 100%;
-  }
-}
 
-.more-content-topics {
+  table {
-  margin-top: 2em;
+    margin-top: 10px;
-
-  .suggested-topics-message {
-    display: none;
   }
 }
 

app/assets/stylesheets/desktop/topic.scss

@@ -135,26 +135,3 @@
     max-width: 100%;
   }
 }
-
-.more-content-wrapper {
-  display: flex;
-  justify-content: space-around;
-
-  .topic-list-header,
-  .posts-map,
-  .views {
-    display: none;
-  }
-
-  .topic-list-body {
-    border-top: none;
-
-    .topic-list-item {
-      padding-left: 5px;
-    }
-
-    .topic-list-item:last-of-type {
-      border-bottom: none;
-    }
-  }
-}

app/assets/stylesheets/mobile/topic-post.scss

@@ -252,22 +252,17 @@ a.reply-to-tab {
   }
 }
 
-.more-content-wrapper {
+.suggested-topics {
-  &:not(.single-list) {
-    .more-topics-title {
-      display: none;
-    }
-  }
-
-  .topic-list-data {
-    padding-left: 5px;
-  }
-}
-
-.more-content-topics {
   clear: left;
   padding: 20px 0 15px 0;
-
+  th.views,
+  td.views,
+  td.activity,
+  th.activity,
+  th.likes,
+  td.likes {
+    display: none;
+  }
   a.badge-category,
   a.badge-category-parent {
     font-size: var(--font-down-1);

config/locales/client.en.yml

@@ -301,12 +301,10 @@ en:
 
     related_messages:
       title: "Related Messages"
-      pill: "Related Messages"
       see_all: 'See <a href="%{path}">all messages</a> from @%{username}...'
 
     suggested_topics:
-      title: "New & Unread Topics"
+      title: "Suggested Topics"
-      pill: "Suggested"
       pm_title: "Suggested Messages"
 
     about: