UX: Use pill design on both mobile and desktop (#23124)

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

@@ -1,7 +1,7 @@
-<div class="more-content-wrapper" {{did-insert this.buildListPills}}>
-  {{#if this.showTopicListsNav}}
+<div class="more-topics__container" {{did-insert this.buildListPills}}>
+  {{#unless this.singleList}}
     <div class="row">
-      <ul class="nav nav-pills" {{did-insert this.buildListPills}}>
+      <ul class="nav nav-pills">
         {{#each this.availablePills as |pill|}}
           <li>
             <DButton
@@ -14,9 +14,9 @@
         {{/each}}
       </ul>
     </div>
-  {{/if}}
+  {{/unless}}
 
-  <div class="more-topics-lists {{if this.singleList 'single-list'}}">
+  <div class="more-topics__lists {{if this.singleList 'single-list'}}">
     {{#if @topic.relatedMessages.length}}
       <RelatedMessages @topic={{@topic}} />
     {{/if}}
@@ -41,7 +41,7 @@
   </div>
 
   {{#if @topic.suggestedTopics.length}}
-    <h3 class="suggested-topics-message">
+    <h3 class="more-topics__browse-more">
       {{html-safe this.browseMoreMessage}}
     </h3>
   {{/if}}

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

@@ -18,13 +18,13 @@ export default class MoreTopics extends Component {
   @tracked availablePills = [];
   @tracked singleList = false;
 
-  get showTopicListsNav() {
-    return this.site.mobileView && !this.singleList;
-  }
-
   @action
   rememberTopicListPreference(value) {
-    this.moreTopicsPreferenceTracking.updatePreference(value);
+    // Don't change the preference when selecting related PMs.
+    // It messes with the topics pref.
+    const rememberPref = value !== "related-messages";
+
+    this.moreTopicsPreferenceTracking.updatePreference(value, rememberPref);
 
     this.buildListPills();
   }
@@ -33,7 +33,7 @@ export default class MoreTopics extends Component {
   buildListPills() {
     next(() => {
       const pills = Array.from(
-        document.querySelectorAll(".more-content-topics")
+        document.querySelectorAll(".more-topics__list")
       ).map((topicList) => {
         return {
           name: topicList.dataset.mobileTitle,
@@ -53,7 +53,7 @@ export default class MoreTopics extends Component {
       const listPresent = pills.find((pill) => pill.id === preference);
 
       if (!listPresent) {
-        const rememberPref = this.site.mobileView && !this.singleList;
+        const rememberPref = false;
 
         this.moreTopicsPreferenceTracking.updatePreference(
           pills[0].id,

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

@@ -1,12 +1,12 @@
 <div
   id="related-messages"
-  class="more-content-topics {{if this.hidden 'hidden'}}"
+  class="more-topics__list {{if this.hidden 'hidden'}}"
   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 id="related-messages-title" class="more-topics__list-title">
     {{i18n "related_messages.title"}}
   </h3>
 
@@ -14,7 +14,7 @@
     <BasicTopicList
       @hideCategory="true"
       @showPosters="true"
-      @topics={{this.topic.relatedMessages}}
+      @topics={{@topic.relatedMessages}}
     />
   </div>
 

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

@@ -1,20 +1,21 @@
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
+import Component from "@glimmer/component";
+import { computed } from "@ember/object";
 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",
+export default class RelatedMessages extends Component {
+  @service moreTopicsPreferenceTracking;
 
-  @discourseComputed("moreTopicsPreferenceTracking.preference")
-  hidden(preference) {
-    return this.site.mobileView && preference !== this.listId;
-  },
+  listId = "related-Messages";
+
+  @computed("moreTopicsPreferenceTracking.preference")
+  get hidden() {
+    return this.moreTopicsPreferenceTracking.preference !== this.listId;
+  }
+
+  get targetUser() {
+    const topic = this.args.topic;
 
-  @discourseComputed("topic")
-  targetUser(topic) {
     if (!topic || !topic.isPrivateMessage) {
       return;
     }
@@ -30,12 +31,11 @@ export default Component.extend({
     ) {
       return allowedUsers.find((u) => u.username !== this.currentUser.username);
     }
-  },
+  }
 
-  @discourseComputed
-  searchLink() {
+  get searchLink() {
     return getURL(
       `/search?expanded=true&q=%40${this.targetUser.username}%20in%3Apersonal-direct`
     );
-  },
-});
+  }
+}

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

@@ -1,6 +1,6 @@
 <div
   id="suggested-topics"
-  class="more-content-topics {{if this.hidden 'hidden'}}"
+  class="more-topics__list {{if this.hidden 'hidden'}}"
   role="complementary"
   aria-labelledby="suggested-topics-title"
   data-mobile-title={{i18n "suggested_topics.pill"}}
@@ -8,19 +8,19 @@
 >
   <UserTip @id="suggested_topics" @selector=".user-tip-reference" />
 
-  <h3 id="suggested-topics-title" class="more-topics-title">
+  <h3 id="suggested-topics-title" class="more-topics__list-title">
     {{i18n this.suggestedTitleLabel}}
   </h3>
 
   <div class="topics">
-    {{#if this.topic.isPrivateMessage}}
+    {{#if @topic.isPrivateMessage}}
       <BasicTopicList
         @hideCategory="true"
         @showPosters="true"
-        @topics={{this.topic.suggestedTopics}}
+        @topics={{@topic.suggestedTopics}}
       />
     {{else}}
-      <BasicTopicList @topics={{this.topic.suggestedTopics}} />
+      <BasicTopicList @topics={{@topic.suggestedTopics}} />
     {{/if}}
   </div>
 </div>

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

@@ -1,24 +1,24 @@
+import Component from "@glimmer/component";
 import { computed } from "@ember/object";
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
 import { inject as service } from "@ember/service";
 
-export default Component.extend({
-  tagName: "",
-  moreTopicsPreferenceTracking: service(),
-  listId: "suggested-topics",
+export default class SuggestedTopics extends Component {
+  @service moreTopicsPreferenceTracking;
+  @service currentUser;
 
-  suggestedTitleLabel: computed("topic", function () {
-    const href = this.currentUser && this.currentUser.pmPath(this.topic);
-    if (this.topic.get("isPrivateMessage") && href) {
+  listId = "suggested-topics";
+
+  get suggestedTitleLabel() {
+    const href = this.currentUser && this.currentUser.pmPath(this.args.topic);
+    if (this.args.topic.isPrivateMessage && href) {
       return "suggested_topics.pm_title";
     } else {
       return "suggested_topics.title";
     }
-  }),
+  }
 
-  @discourseComputed("moreTopicsPreferenceTracking.preference")
-  hidden(preference) {
-    return this.site.mobileView && preference !== this.listId;
-  },
-});
+  @computed("moreTopicsPreferenceTracking.preference")
+  get hidden() {
+    return this.moreTopicsPreferenceTracking.preference !== this.listId;
+  }
+}

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

@@ -548,6 +548,8 @@
         {{/if}}
       {{/if}}
 
+      <br />
+
       <span>
         <PluginOutlet
           @name="topic-above-suggested"

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

@@ -744,7 +744,7 @@ acceptance(
       await visit("/t/12");
 
       assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
+        query(".more-topics__browse-more").innerText.trim(),
         "Want to read more? Browse other messages in personal messages.",
         "displays the right browse more message"
       );
@@ -756,7 +756,7 @@ acceptance(
       await publishNewToMessageBus({ userId: 5, topicId: 1 });
 
       assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
+        query(".more-topics__browse-more").innerText.trim(),
         "There is 1 new message remaining, or browse other personal messages",
         "displays the right browse more message"
       );
@@ -764,7 +764,7 @@ acceptance(
       await publishUnreadToMessageBus({ userId: 5, topicId: 2 });
 
       assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
+        query(".more-topics__browse-more").innerText.trim(),
         "There is 1 unread and 1 new message remaining, or browse other personal messages",
         "displays the right browse more message"
       );
@@ -772,7 +772,7 @@ acceptance(
       await publishReadToMessageBus({ userId: 5, topicId: 2 });
 
       assert.strictEqual(
-        query(".suggested-topics-message").innerText.trim(),
+        query(".more-topics__browse-more").innerText.trim(),
         "There is 1 new message remaining, or browse other personal messages",
         "displays the right browse more message"
       );
@@ -782,7 +782,7 @@ acceptance(
       await visit("/t/13");
 
       assert.ok(
-        query(".suggested-topics-message")
+        query(".more-topics__browse-more")
           .innerText.trim()
           .match(
             /Want to read more\? Browse other messages in\s+awesome_group\./
@@ -797,7 +797,7 @@ acceptance(
       await publishGroupNewToMessageBus({ groupIds: [14], topicId: 1 });
 
       assert.ok(
-        query(".suggested-topics-message")
+        query(".more-topics__browse-more")
           .innerText.trim()
           .match(
             /There is 1 new message remaining, or browse other messages in\s+awesome_group/
@@ -808,7 +808,7 @@ acceptance(
       await publishGroupUnreadToMessageBus({ groupIds: [14], topicId: 2 });
 
       assert.ok(
-        query(".suggested-topics-message")
+        query(".more-topics__browse-more")
           .innerText.trim()
           .match(
             /There is 1 unread and 1 new message remaining, or browse other messages in\s+awesome_group/

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

@@ -368,49 +368,6 @@ a.badge-category {
   max-width: 757px;
 }
 
-// Target the .badge-category text, the bullet icon needs to maintain `display: block`
-.suggested-topics-message .badge-wrapper.bullet span.badge-category,
-.suggested-topics-message .badge-wrapper.box span,
-.suggested-topics-message .badge-wrapper.bar span {
-  display: inline;
-}
-
-.suggested-topics-message .badge-wrapper.bullet span.badge-category {
-  // Override vertical-align: text-top from `badges.css.scss`
-  vertical-align: baseline;
-  line-height: var(--line-height-medium);
-}
-
-.suggested-topics-message .badge-wrapper.bullet {
-  margin-right: 0;
-}
-
-.suggested-topics-message .badge-wrapper.bullet,
-.suggested-topics-message .badge-wrapper.bullet span.badge-category-parent-bg,
-.suggested-topics-message .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;
-}
-
-.suggested-topics-message .badge-wrapper.bullet span.badge-category,
-.suggested-topics-message .badge-wrapper.bar span.badge-category {
-  max-width: 150px;
-}
-
-.more-content-wrapper {
-  padding-bottom: max(env(safe-area-inset-bottom), 1em);
-}
-
-.more-content-topics {
-  .topic-list-body {
-    border-top: none;
-
-    .topic-list-item:last-of-type {
-      border-bottom: none;
-    }
-  }
-}
-
 .post-links-container {
   @include unselectable;
   clear: both;

app/assets/stylesheets/common/components/_index.scss

@@ -24,6 +24,7 @@
 @import "iframed-html";
 @import "ignored-user-list";
 @import "keyboard_shortcuts";
+@import "more-topics";
 @import "navs";
 @import "offline-indicator";
 @import "pick-files-button";

app/assets/stylesheets/common/components/more-topics.scss

@@ -0,0 +1,65 @@
+.more-topics__container {
+  padding-bottom: max(env(safe-area-inset-bottom), 1em);
+  max-width: calc(var(--d-max-width) * 0.87);
+
+  .nav {
+    margin: 0 0 1em 0;
+
+    li {
+      .btn {
+        padding: 0.5em 0.65em;
+      }
+    }
+  }
+
+  .more-topics__lists {
+    &:not(.single-list) {
+      .more-topics__list-title {
+        display: none;
+      }
+    }
+  }
+
+  .topic-list .topic-list-data:first-of-type {
+    padding-left: 5px;
+  }
+
+  .more-topics__list {
+    .topic-list-body {
+      border-top: none;
+
+      .topic-list-item:last-of-type {
+        border-bottom: none;
+      }
+    }
+  }
+
+  // Target the .badge-category text, the bullet icon needs to maintain `display: block`
+  .suggested-topics-message .badge-wrapper.bullet span.badge-category,
+  .suggested-topics-message .badge-wrapper.box span,
+  .suggested-topics-message .badge-wrapper.bar span {
+    display: inline;
+  }
+
+  .suggested-topics-message .badge-wrapper.bullet span.badge-category {
+    // Override vertical-align: text-top from `badges.css.scss`
+    vertical-align: baseline;
+    line-height: var(--line-height-medium);
+  }
+
+  .suggested-topics-message .badge-wrapper.bullet {
+    margin-right: 0;
+  }
+
+  .suggested-topics-message .badge-wrapper.bullet,
+  .suggested-topics-message .badge-wrapper.bullet span.badge-category-parent-bg,
+  .suggested-topics-message .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;
+  }
+
+  .suggested-topics-message .badge-wrapper.bullet span.badge-category,
+  .suggested-topics-message .badge-wrapper.bar span.badge-category {
+    max-width: 150px;
+  }
+}

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

@@ -362,20 +362,6 @@ pre.codeblock-buttons:hover {
   }
 }
 
-.more-content-wrapper {
-  max-width: calc(var(--d-max-width) * 0.87);
-}
-
-.more-topics-lists.single-list {
-  .more-content-topics {
-    width: 100%;
-  }
-}
-
-.more-content-topics {
-  margin-top: 2em;
-}
-
 span.post-count {
   background: var(--primary);
   color: var(--secondary);

app/assets/stylesheets/desktop/topic.scss

@@ -135,35 +135,3 @@
     max-width: 100%;
   }
 }
-
-.more-topics-lists {
-  display: flex;
-  justify-content: space-around;
-  clear: both;
-
-  &:not(.single-list) {
-    column-gap: 0.75em;
-
-    .topic-list-header,
-    .posts-map,
-    .views {
-      display: none;
-    }
-  }
-
-  .more-content-topics {
-    flex: 1 1 0;
-  }
-
-  .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/components/_index.scss

@@ -1,3 +1,4 @@
 @import "topic-footer-mobile-dropdown";
 @import "user-card";
 @import "user-stream-item";
+@import "more-topics";

app/assets/stylesheets/mobile/components/more-topics.scss

@@ -0,0 +1,14 @@
+.more-topics__container {
+  .more-content-topics {
+    padding: 15px 0 15px 0;
+
+    a.badge-category,
+    a.badge-category-parent {
+      font-size: var(--font-down-1);
+      vertical-align: top;
+    }
+    .suggested-topics-message {
+      margin-top: 1em;
+    }
+  }
+}

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

@@ -252,32 +252,6 @@ a.reply-to-tab {
   }
 }
 
-.more-topics-lists {
-  &:not(.single-list) {
-    .more-topics-title {
-      display: none;
-    }
-  }
-
-  .topic-list-data {
-    padding-left: 5px;
-  }
-}
-
-.more-content-topics {
-  clear: left;
-  padding: 20px 0 15px 0;
-
-  a.badge-category,
-  a.badge-category-parent {
-    font-size: var(--font-down-1);
-    vertical-align: top;
-  }
-  .suggested-topics-message {
-    margin-top: 1em;
-  }
-}
-
 span.post-count {
   background: var(--primary);
   color: var(--secondary);