UX: New PM design (#125)

javascripts/discourse/components/card/topic-replies-column.gjs

@@ -3,7 +3,7 @@ import gt from "truth-helpers/helpers/gt";
 
 const TopicRepliesColumn = <template>
   {{#if (gt @topic.replyCount 1)}}
-    <span class="topic-replies">{{icon "reply"}}{{@topic.replyCount}}</span>
+    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
   {{/if}}
 </template>;
 

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -33,15 +33,12 @@ const TopicLikesReplies = <template>
 export default {
   name: "topic-list-customizations",
 
-  initialize() {
+  initialize(container) {
+    const router = container.lookup("service:router");
     withPluginApi("1.39.0", (api) => {
       api.registerValueTransformer(
         "topic-list-columns",
         ({ value: columns }) => {
-          columns.add("topic-activity", {
-            item: TopicActivity,
-            after: "title",
-          });
           columns.add("topic-status", {
             item: TopicStatus,
             after: "topic-author",
@@ -50,14 +47,21 @@ export default {
             item: TopicCategory,
             after: "topic-status",
           });
+
           columns.add("topic-likes-replies", {
             item: TopicLikesReplies,
             after: "topic-author-avatar",
           });
-          columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
-          columns.delete("activity");
+          if (!router.currentRouteName.includes("userPrivateMessages")) {
+            columns.add("topic-activity", {
+              item: TopicActivity,
+              after: "title",
+            });
+            columns.delete("posters");
+            columns.delete("activity");
+          }
           return columns;
         }
       );

scss/topic-cards.scss

@@ -530,44 +530,55 @@
 
 // User Messages
 
-body.user-messages-page .topic-list-item {
+body.user-messages-page {
-  td.topic-category-data,
+  .topic-list-body {
-  td.topic-likes-replies-data,
+    gap: 0;
-  td.topic-status-data {
-    display: none;
   }
-  td.main-link .link-top-line {
+  .topic-list .topic-list-data.posters a:not(.latest) {
-    grid-row: 1 / 2;
+    display: block;
-    grid-column: 1 / -1;
   }
-  grid-template-areas:
+  .topic-list-item {
-    ". . . . . . ."
+    border-radius: 0;
-    "activity . . . . likes-replies likes-replies";
+    box-shadow: none;
-  &.excerpt-expanded {
+    border-bottom: 1px solid var(--primary-200);
-    grid-template-columns: 20px repeat(6, 1fr) auto;
+    border-top: none;
-    grid-template-rows: 20px auto auto 30px;
+    border-right: none;
-    grid-template-areas:
+    border-left: none;
-      ". . . . . . . ."
+    display: grid;
-      "activity . . . . . . ."
+    grid-template-areas: "title activity" "posters .";
-      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
+    grid-template-columns: min-content auto;
-      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
+    grid-template-rows: min-content;
-    @include breakpoint(extra-large) {
+    td.topic-category-data,
-      grid-template-areas:
+    td.topic-likes-replies-data,
-        ". . . . . . . ."
+    td.topic-status-data {
-        "activity . . . . . . ."
-        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
-    }
-  }
-  @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto;
-    grid-template-areas:
-      ". . . . . . . ."
-      "activity . . . . . . .";
-    .topic-excerpt {
       display: none;
     }
+    &.visited .main-link .link-top-line {
+      font-weight: normal;
+      grid-area: title;
+    }
+    &:hover {
+      background-color: var(--primary-low);
+      border-color: var(--primary-200);
+    }
+    .link-top-line {
+      order: 1;
+      width: max-content;
+    }
+    td.topic-activity-data {
+      grid-area: activity;
+    }
+    td.topic-list-data.posters {
+      grid-area: posters;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+      }
+    }
   }
 }
 

spec/system/horizon_high_level_spec.rb

@@ -36,10 +36,10 @@ describe "Horizon theme | High level", type: :system do
     expect(topic_item.all("td").map { |el| el["class"] }).to eq(
       [
         "main-link topic-list-data",
-        "topic-activity-data",
         "topic-status-data",
         "topic-category-data",
         "topic-likes-replies-data",
+        "topic-activity-data",
       ],
     )