From 18ffe04242fba347f466597fdebeb8cbaf3ce40c Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Fri, 11 Apr 2025 13:43:17 -0500
Subject: [PATCH] UX: New PM design (#125)

---
 .../components/card/topic-replies-column.gjs  |  2 +-
 .../initializers/topic-list-columns.gjs       | 18 +++--
 scss/topic-cards.scss                         | 79 +++++++++++--------
 spec/system/horizon_high_level_spec.rb        |  2 +-
 4 files changed, 58 insertions(+), 43 deletions(-)

diff --git a/javascripts/discourse/components/card/topic-replies-column.gjs b/javascripts/discourse/components/card/topic-replies-column.gjs
index 131eff7..82e684f 100644
--- a/javascripts/discourse/components/card/topic-replies-column.gjs
+++ b/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>;
 
diff --git a/javascripts/discourse/initializers/topic-list-columns.gjs b/javascripts/discourse/initializers/topic-list-columns.gjs
index fb82c8d..bf58304 100644
--- a/javascripts/discourse/initializers/topic-list-columns.gjs
+++ b/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;
         }
       );
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 9d24dc5..748c1fd 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -530,44 +530,55 @@
 
 // User Messages
 
-body.user-messages-page .topic-list-item {
-  td.topic-category-data,
-  td.topic-likes-replies-data,
-  td.topic-status-data {
-    display: none;
+body.user-messages-page {
+  .topic-list-body {
+    gap: 0;
   }
-  td.main-link .link-top-line {
-    grid-row: 1 / 2;
-    grid-column: 1 / -1;
+  .topic-list .topic-list-data.posters a:not(.latest) {
+    display: block;
   }
-  grid-template-areas:
-    ". . . . . . ."
-    "activity . . . . likes-replies likes-replies";
-  &.excerpt-expanded {
-    grid-template-columns: 20px repeat(6, 1fr) auto;
-    grid-template-rows: 20px auto auto 30px;
-    grid-template-areas:
-      ". . . . . . . ."
-      "activity . . . . . . ."
-      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
-      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
-    @include breakpoint(extra-large) {
-      grid-template-areas:
-        ". . . . . . . ."
-        "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 {
+  .topic-list-item {
+    border-radius: 0;
+    box-shadow: none;
+    border-bottom: 1px solid var(--primary-200);
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    display: grid;
+    grid-template-areas: "title activity" "posters .";
+    grid-template-columns: min-content auto;
+    grid-template-rows: min-content;
+    td.topic-category-data,
+    td.topic-likes-replies-data,
+    td.topic-status-data {
       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;
+      }
+    }
   }
 }
 
diff --git a/spec/system/horizon_high_level_spec.rb b/spec/system/horizon_high_level_spec.rb
index d040852..8a9cd5f 100644
--- a/spec/system/horizon_high_level_spec.rb
+++ b/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",
       ],
     )