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,11 +83,13 @@ acceptance(
   }
 );
 
-let fetchedNew;
+acceptance(
-let fetchUserNew;
+  "User Private Messages - user with group messages",
-let fetchedGroupNew;
+  function (needs) {
+    let fetchedNew;
+    let fetchUserNew;
+    let fetchedGroupNew;
 
-function withGroupMessagesSetup(needs) {
     needs.user({
       id: 5,
       username: "charlie",
@@ -226,9 +228,8 @@ function withGroupMessagesSetup(needs) {
         });
       });
     });
-}
 
-const publishReadToMessageBus = function (opts = {}) {
+    const publishReadToMessageBus = function (opts = {}) {
       return publishToMessageBus(
         `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
         {
@@ -241,9 +242,9 @@ const publishReadToMessageBus = function (opts = {}) {
           },
         }
       );
-};
+    };
 
-const publishUnreadToMessageBus = function (opts = {}) {
+    const publishUnreadToMessageBus = function (opts = {}) {
       return publishToMessageBus(
         `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
         {
@@ -257,9 +258,9 @@ const publishUnreadToMessageBus = function (opts = {}) {
           },
         }
       );
-};
+    };
 
-const publishNewToMessageBus = function (opts = {}) {
+    const publishNewToMessageBus = function (opts = {}) {
       return publishToMessageBus(
         `/private-message-topic-tracking-state/user/${opts.userId || 5}`,
         {
@@ -272,9 +273,9 @@ const publishNewToMessageBus = function (opts = {}) {
           },
         }
       );
-};
+    };
 
-const publishGroupArchiveToMessageBus = function (opts) {
+    const publishGroupArchiveToMessageBus = function (opts) {
       return publishToMessageBus(
         `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
         {
@@ -286,9 +287,9 @@ const publishGroupArchiveToMessageBus = function (opts) {
           },
         }
       );
-};
+    };
 
-const publishGroupUnreadToMessageBus = function (opts) {
+    const publishGroupUnreadToMessageBus = function (opts) {
       return publishToMessageBus(
         `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
         {
@@ -302,9 +303,9 @@ const publishGroupUnreadToMessageBus = function (opts) {
           },
         }
       );
-};
+    };
 
-const publishGroupNewToMessageBus = function (opts) {
+    const publishGroupNewToMessageBus = function (opts) {
       return publishToMessageBus(
         `/private-message-topic-tracking-state/group/${opts.groupIds[0]}`,
         {
@@ -317,12 +318,7 @@ const publishGroupNewToMessageBus = function (opts) {
           },
         }
       );
-};
+    };
-
-acceptance(
-  "User Private Messages - user with group messages",
-  function (needs) {
-    withGroupMessagesSetup(needs);
 
     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: