From 2bcd04d4f458c0672794cc9f09f2f7bad5fcccb1 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 11:08:57 +0200
Subject: [PATCH] UX: topic cards v3 (#182)

* Bringing back the OP
* Removed reason why topic appears (again) in topic list (="activity")
* Removed likes
* New layout with indention + moved all elements left (on desktop)

| Mobile | Desktop |
|--------|--------|
| ![CleanShot 2025-06-13 at 11 00
19@2x](https://github.com/user-attachments/assets/f43a773d-c8ba-4573-b16a-940e9fc3d901)
| ![CleanShot 2025-06-13 at 11 05
10@2x](https://github.com/user-attachments/assets/6bb152df-9ed3-4866-8c0a-95ddf94cd773)
|
| ![CleanShot 2025-06-13 at 11 02
25@2x](https://github.com/user-attachments/assets/3d9fb41c-a894-4b07-8737-6bd03e513f2f)
| ![CleanShot 2025-06-13 at 11 06
59@2x](https://github.com/user-attachments/assets/c54b9efe-fd1d-40aa-b8ad-2e4eab54eb90)
|
| ![CleanShot 2025-06-13 at 11 03
28@2x](https://github.com/user-attachments/assets/cdad49e8-ae6d-4f2c-9ef5-f6fa42705764)
| ![CleanShot 2025-06-13 at 11 07
10@2x](https://github.com/user-attachments/assets/91fee5ad-71b7-400c-a2c7-80339438b8de)
|
| ![CleanShot 2025-06-13 at 11 04
09@2x](https://github.com/user-attachments/assets/85296a16-f052-4787-a260-81fa54cd6191)
| ![CleanShot 2025-06-13 at 11 07
24@2x](https://github.com/user-attachments/assets/ffcaecb0-767a-4a72-8244-a3baa56d3cc2)
|
| ![CleanShot 2025-06-13 at 11 04
26@2x](https://github.com/user-attachments/assets/48a05ef5-366f-4543-bf0e-441ecae39877)
| ![CleanShot 2025-06-13 at 11 04
48@2x](https://github.com/user-attachments/assets/50499b4d-60bf-4b41-8a42-6fba8e0a41d8)
|

---------

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
---
 .../components/card/topic-activity-column.gjs |   9 -
 .../components/card/topic-status-column.gjs   |   2 +-
 .../initializers/topic-list-columns.gjs       |   9 +-
 scss/topic-cards.scss                         | 493 ++++++++++--------
 4 files changed, 278 insertions(+), 235 deletions(-)

diff --git a/javascripts/discourse/components/card/topic-activity-column.gjs b/javascripts/discourse/components/card/topic-activity-column.gjs
index 0f5b953..7c7207a 100644
--- a/javascripts/discourse/components/card/topic-activity-column.gjs
+++ b/javascripts/discourse/components/card/topic-activity-column.gjs
@@ -36,21 +36,12 @@ export default class TopicActivityColumn extends Component {
 
   <template>
     <span class={{concatClass "topic-activity" this.topicUser.class}}>
-      <div class="topic-activity__type">
-        {{#if this.topicUser.user}}
-          {{icon "reply"}}
-        {{else}}
-          {{icon "pencil"}}
-        {{/if}}
-      </div>
-
       {{#if this.topicUser.username}}
         <span
           class="topic-activity__username"
         >{{this.topicUser.username}}</span>
         <span class="dot-separator"></span>
       {{/if}}
-
       <div class="topic-activity__time">
         {{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
       </div>
diff --git a/javascripts/discourse/components/card/topic-status-column.gjs b/javascripts/discourse/components/card/topic-status-column.gjs
index 003fe10..d81b3f5 100644
--- a/javascripts/discourse/components/card/topic-status-column.gjs
+++ b/javascripts/discourse/components/card/topic-status-column.gjs
@@ -30,7 +30,7 @@ export default class TopicStatusColumn extends Component {
     {{#if this.badge}}
       <span class="topic-status-card {{this.badge.className}}">{{icon
           this.badge.icon
-        }}{{i18n (themePrefix this.badge.text)}}</span>
+        }}<p class="topic-status-card__name">{{i18n (themePrefix this.badge.text)}}</p></span>
     {{/if}}
   </template>
 }
diff --git a/javascripts/discourse/initializers/topic-list-columns.gjs b/javascripts/discourse/initializers/topic-list-columns.gjs
index 2c2e7ad..2bab295 100644
--- a/javascripts/discourse/initializers/topic-list-columns.gjs
+++ b/javascripts/discourse/initializers/topic-list-columns.gjs
@@ -2,7 +2,6 @@ import { withPluginApi } from "discourse/lib/plugin-api";
 import TopicActivityColumn from "../components/card/topic-activity-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
 import TopicCreatorColumn from "../components/card/topic-creator-column";
-import TopicLikesColumn from "../components/card/topic-likes-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";
 
@@ -24,9 +23,8 @@ const TopicCategory = <template>
   </td>
 </template>;
 
-const TopicLikesReplies = <template>
+const TopicReplies = <template>
   <td class="topic-likes-replies-data">
-    <TopicLikesColumn @topic={{@topic}} />
     <TopicRepliesColumn @topic={{@topic}} />
   </td>
 </template>;
@@ -56,7 +54,7 @@ export default {
           });
 
           columns.add("topic-likes-replies", {
-            item: TopicLikesReplies,
+            item: TopicReplies,
             after: "topic-author-avatar",
           });
           columns.add("topic-creator", {
@@ -87,6 +85,9 @@ export default {
           ) {
             classes.push("--has-status-card");
           }
+          if (context.topic.replyCount > 1) {
+            classes.push("has-replies");
+          }
           return classes;
         }
       );
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index 5765849..f975597 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -1,5 +1,9 @@
 @use "lib/viewport";
 
+:root {
+  --d-border-radius-small: calc(var(--d-border-radius) * 0.5);
+}
+
 .topic-list .topic-list-item-separator {
   display: none;
 }
@@ -18,12 +22,12 @@
   flex-direction: column;
   gap: 1.25em;
 
-  @include viewport.until(lg) {
+  @include breakpoint(medium) {
     gap: 0.5em;
     padding: 0 0.5em;
   }
 
-  @include viewport.until(sm) {
+  @include breakpoint(mobile-extra-large) {
     gap: 0;
     padding: 0;
   }
@@ -34,35 +38,74 @@
   background: var(--d-content-background);
   box-shadow: 0 0 12px 1px var(--topic-card-shadow);
   text-overflow: ellipsis;
-  padding: 0.75em 1rem;
+  padding: var(--space-3);
   border: 1px solid var(--primary-300);
   display: grid;
-  grid-template-columns: min-content min-content auto min-content;
+  grid-template-columns: min-content min-content min-content auto min-content;
   grid-template-areas:
-    "creator title title status"
-    "creator category activity likes-replies";
-  grid-column-gap: 0.75rem;
-  grid-row-gap: 0.5rem;
+    "creator title title title status"
+    ". category activity activity .";
+  grid-gap: var(--space-3);
   border-radius: var(--d-border-radius);
   cursor: pointer;
 
-  .bulk-select-enabled & {
-    grid-template-columns: min-content min-content min-content auto min-content;
+  &.has-replies {
     grid-template-areas:
-      "bulk-select creator title title status"
-      "bulk-select creator category activity likes-replies";
+      "creator title title title status"
+      ". category likes-replies activity .";
+  }
+
+  &:not(.has-replies) {
+    .topic-likes-replies-data {
+      display: none;
+    }
   }
 
   @include viewport.until(sm) {
+    max-width: 100vw;
+    box-sizing: border-box;
     grid-template-areas:
-      "category category category status"
-      "creator title title title"
-      "activity activity activity likes-replies";
-    row-gap: 0.75em;
+      "creator title title title status"
+      ". category activity activity . ";
     border: none;
     border-bottom: 1px solid var(--primary-200);
     box-shadow: none;
     border-radius: 0;
+    padding: var(--space-4) var(--space-3);
+
+    &.has-replies {
+      grid-template-areas:
+        "creator title title title status"
+        ". category likes-replies activity . ";
+    }
+  }
+
+  .bulk-select-enabled & {
+    grid-template-columns: min-content min-content min-content auto min-content min-content;
+    grid-template-areas:
+      "bulk-select creator title title title status"
+      "bulk-select category category activity activity .";
+
+    &.has-replies {
+      grid-template-areas:
+        "bulk-select creator title title title status"
+        "bulk-select category category activity likes-replies likes-replies";
+    }
+
+    @include viewport.until(sm) {
+      grid-template-columns: min-content min-content min-content min-content auto min-content;
+      grid-template-areas:
+        "bulk-select creator title title title status"
+        "bulk-select . category activity activity . ";
+    }
+
+    &.has-replies {
+      @include viewport.until(sm) {
+        grid-template-areas:
+          "bulk-select creator title title title status"
+          "bulk-select . category likes-replies activity . ";
+      }
+    }
   }
 
   &:hover {
@@ -88,32 +131,34 @@
 
     @include viewport.from(sm) {
       grid-template-areas:
-        "creator title title status"
-        "creator category activity likes-replies "
-        "creator excerpt excerpt excerpt";
+        "creator title title title status"
+        ". category activity activity . "
+        ". excerpt excerpt excerpt excerpt";
+
+      &.has-replies {
+        grid-template-areas:
+          "creator title title title status"
+          ". category likes-replies activity ."
+          ". excerpt excerpt excerpt excerpt";
+      }
 
       .bulk-select-enabled & {
         grid-template-areas:
-          "bulk-select creator title title status"
-          "bulk-select creator category activity likes-replies "
-          " bulk-select creator excerpt excerpt excerpt";
+          "bulk-select creator title title title status"
+          "bulk-select category category activity likes-replies likes-replies "
+          " bulk-select excerpt excerpt excerpt excerpt excerpt";
       }
     }
-
-    // when there is enough space, excerpt can be next to likes-replies
-    @include viewport.from(lg) {
-      grid-template-areas:
-        "creator title title status"
-        "creator category activity ."
-        "creator excerpt excerpt likes-replies";
-    }
   }
 
   .link-top-line {
     grid-area: title;
     font-weight: 500;
-    display: flex;
-    align-items: center;
+    line-height: calc(var(--space-3) * 2); // avatar sizing
+
+    @include viewport.until(sm) {
+      line-height: normal;
+    }
 
     .title {
       padding: 0;
@@ -148,22 +193,41 @@
 
   .badge-category__wrapper {
     border-radius: var(--d-border-radius);
+
+    @include viewport.until(sm) {
+      border-radius: var(--d-border-radius-small);
+      max-width: 125px;
+    }
     padding: 0.25em 0.5rem;
     background-color: light-dark(
       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
     );
 
-    @include viewport.until(md) {
+    @include breakpoint(tablet) {
       padding: 0.25em 0.5rem;
       font-size: var(--font-down-2);
     }
 
+    .badge-category {
+      align-items: center;
+    }
+
     .badge-category__name {
+      font-size: var(--font-down-1);
       color: light-dark(
         oklch(from var(--category-badge-color) 20% calc(c * 1) h),
         oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
       );
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .d-icon {
+      width: var(--font-down-1);
+      height: var(--font-down-1);
     }
   }
 
@@ -172,14 +236,12 @@
     grid-area: creator;
 
     .avatar {
-      height: 50px;
-      width: 50px;
+      height: calc(var(--space-3) * 2);
+      width: calc(var(--space-3) * 2);
       border-radius: var(--d-border-radius);
 
       @include viewport.until(sm) {
-        height: 30px;
-        width: 30px;
-        border-radius: 0.25rem;
+        border-radius: var(--d-border-radius-small);
       }
     }
   }
@@ -229,6 +291,11 @@
 
   // status
   .topic-status-data {
+    display: none;
+  }
+
+  &.--has-status-card .topic-status-data {
+    display: block;
     grid-area: status;
   }
 
@@ -240,13 +307,21 @@
     gap: 0.25em;
     align-items: center;
     padding: 0.2em 0.5rem;
-    font-size: var(--font-down-3);
+    font-size: var(--font-down-2);
+    @include viewport.from(lg) {
+      font-size: var(--font-down-3);
+    }
     font-weight: 600;
     border-radius: var(--d-border-radius);
     border: 1px solid var(--status-color);
     color: var(--status-color);
     width: min-content;
 
+    @include viewport.until(sm) {
+      border-radius: var(--d-border-radius-small);
+      padding: 0.35em;
+    }
+
     &.--pinned {
       --status-color: var(--primary-500);
     }
@@ -264,14 +339,30 @@
     }
 
     svg {
-      font-size: var(--font-down-1);
       color: var(--status-color);
+      @include viewport.from(lg) {
+        font-size: var(--font-down-1);
+      }
+    }
+
+    &__name {
+      margin: 0;
+
+      @include viewport.until(sm) {
+        display: none;
+      }
     }
   }
 
   .link-top-line .event-date {
     margin-left: 0.5em;
     font-size: var(--font-down-3);
+    white-space: nowrap;
+  }
+
+  .link-top-line .event-date-container {
+    top: -0.25rem;
+    line-height: normal;
   }
 
   .topic-list-data {
@@ -323,13 +414,15 @@
     grid-area: likes-replies;
     display: flex;
     flex-direction: row;
-    gap: 0.5em;
-    justify-content: flex-end;
+    gap: var(--space-3);
     height: min-content;
     align-self: center;
+
+    .topic-likes {
+      display: none;
+    }
   }
 
-  .topic-likes-replies-data .topic-likes,
   .topic-likes-replies-data .topic-replies {
     display: flex;
     flex-direction: row;
@@ -362,220 +455,179 @@
       display: none;
     }
   }
-}
 
-// Bookmarks
-.topic-list-item.bookmark-list-item {
-  .link-bottom-line {
-    font-size: unset;
-  }
-
-  // regular card without excerpt class
-  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-  grid-template-areas:
-    ". . . . . . dropdown"
-    "avatar update metadata metadata metadata . category";
-
-  @include viewport.until(sm) {
-    grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
-    grid-template-areas:
-      " . . . . . . dropdown"
-      "update metadata metadata metadata metadata category category";
-
-    .avatar {
+  // Assigned List
+  &.assigned-list-item {
+    .topic-status-data {
       display: none;
     }
+
+    grid-template-areas:
+      "creator title title title dropdown"
+      ". category activity activity .";
+
+    &.has-replies {
+      grid-template-areas:
+        "creator title title title dropdown"
+        "category category likes-replies activity .";
+    }
+
+    .assign-topic-buttons {
+      display: contents;
+
+      .assign-actions-dropdown {
+        grid-area: dropdown;
+        justify-content: flex-end;
+        height: 1em;
+
+        .select-kit-header {
+          padding-top: 0;
+          margin-left: auto;
+          align-items: center;
+          background: transparent;
+        }
+
+        .select-kit-header-wrapper {
+          height: 1em;
+          width: 1em;
+        }
+      }
+    }
   }
 
-  &.has-metadata {
-    grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
+  // Bookmarks
+  &.bookmark-list-item {
+    grid-template-areas:
+      "creator title title title dropdown"
+      "category category activity . . ";
 
     @include viewport.until(sm) {
       grid-template-areas:
-        ". . . . . . . dropdown"
-        "update update metadata metadata metadata metadata category category";
+        "title title title title dropdown"
+        "category category activity activity . ";
 
       .avatar {
         display: none;
       }
     }
-  }
 
-  // card with excerpt (all in horizon since the toggle is gone)
-  &.excerpt-expanded {
-    grid-template-columns: 20px min-content auto minmax(0, 100px);
-    grid-template-areas:
-      ". . .  dropdown"
-      "avatar update metadata metadata"
-      "excerpt excerpt excerpt ."
-      "excerpt excerpt excerpt category";
-
-    @include viewport.from(xl) {
-      grid-template-columns: 20px min-content auto min-content;
-    }
-
-    @include viewport.until(sm) {
-      grid-template-columns: auto min-content;
+    &.excerpt-expanded {
       grid-template-areas:
-        ".  dropdown"
-        "category category";
+        "creator title title title dropdown"
+        "category category activity . . "
+        "excerpt excerpt excerpt excerpt excerpt";
 
-      .post-excerpt,
-      .avatar {
-        display: none;
+      @include viewport.until(sm) {
+        grid-template-areas:
+          "title title title title dropdown"
+          "category category activity activity . "
+          "excerpt excerpt excerpt excerpt excerpt";
       }
     }
 
     &.has-metadata {
-      grid-template-columns: 20px min-content auto min-content;
       grid-template-areas:
-        ". . . dropdown"
-        "avatar update metadata metadata"
-        "excerpt excerpt excerpt . "
-        "excerpt excerpt excerpt category";
-
+        "creator title title title dropdown"
+        "category category activity metadata . ";
       @include viewport.until(sm) {
-        grid-template-columns: auto min-content;
         grid-template-areas:
-          " . dropdown"
-          "metadata category";
+          "metadata metadata metadata metadata dropdown"
+          "title title title title ."
+          "category category activity activity . ";
+      }
 
-        .bookmark-metadata {
-          flex-wrap: wrap;
+      &.excerpt-expanded {
+        grid-template-areas:
+          "creator title title title dropdown"
+          "category category activity metadata . "
+          "excerpt excerpt excerpt excerpt excerpt";
+
+        @include viewport.until(sm) {
+          grid-template-areas:
+            "metadata metadata metadata metadata dropdown"
+            "title title title title ."
+            "category category activity activity . "
+            "excerpt excerpt excerpt excerpt excerpt";
         }
       }
     }
 
-    .badge-category__wrapper {
-      align-self: flex-end;
-      height: min-content;
-      max-width: 100%;
+    td.author-avatar {
+      grid-area: creator;
     }
-  }
 
-  td.author-avatar {
-    grid-area: avatar;
-  }
+    td.main-link .link-bottom-line {
+      display: contents;
 
-  td.main-link .link-bottom-line {
-    display: contents;
+      .badge-category__wrapper {
+        grid-area: category;
+        display: flex;
+        align-items: center;
+        width: min-content;
+        justify-self: flex-end;
+      }
+    }
 
-    .badge-category__wrapper {
-      grid-area: category;
+    td.main-link .link-top-line {
+      display: contents;
+
+      .bookmark-metadata {
+        grid-area: metadata;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--spacing-inline-s);
+        white-space: nowrap;
+      }
+
+      .bookmark-metadata-item {
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .bookmark-status-with-link {
+        grid-area: title;
+      }
+    }
+
+    .post-excerpt {
+      grid-area: excerpt;
+      margin: 0;
+    }
+
+    .topic-list-data:last-of-type {
+      display: contents;
+
+      .bookmark-actions-dropdown {
+        grid-area: dropdown;
+        align-self: flex-start;
+        height: 1em;
+
+        .select-kit-header {
+          padding-top: 0;
+          margin-left: auto;
+          align-items: center;
+          background: transparent;
+        }
+
+        .select-kit-header-wrapper {
+          height: 1em;
+          width: 1em;
+        }
+      }
+    }
+
+    .post-metadata.topic-list-data.updated-at {
+      grid-area: activity;
       display: flex;
       align-items: center;
-      width: min-content;
-      justify-self: flex-end;
-    }
-  }
-
-  td.main-link .link-top-line {
-    display: contents;
-
-    .bookmark-metadata {
-      grid-area: metadata;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-inline-xs);
+      font-size: var(--font-down-1-rem);
     }
 
-    .bookmark-metadata-item {
-      margin: 0;
-      vertical-align: middle;
+    td.activity .post-activity {
+      display: none;
     }
-
-    .bookmark-status-with-link {
-      grid-column: 1/-2;
-      grid-row: 1/2;
-    }
-  }
-
-  .post-excerpt {
-    grid-area: excerpt;
-    margin: 0;
-  }
-
-  .topic-list-data:last-of-type {
-    display: contents;
-
-    .bookmark-actions-dropdown {
-      grid-area: dropdown;
-      align-self: flex-start;
-      height: 1em;
-
-      .select-kit-header {
-        padding-top: 0;
-        margin-left: auto;
-        align-items: center;
-        background: transparent;
-      }
-
-      .select-kit-header-wrapper {
-        height: 1em;
-        width: 1em;
-      }
-    }
-  }
-
-  .post-metadata.topic-list-data.updated-at {
-    grid-area: update;
-  }
-
-  td.activity .post-activity {
-    display: none;
-  }
-}
-
-// Assigned List
-.topic-list-item.assigned-list-item {
-  .topic-status-card {
-    display: none;
-    position: relative;
-    top: unset;
-    right: unset;
-  }
-
-  td.main-link .link-top-line {
-    grid-column: 1/-3;
-  }
-  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-  grid-template-areas:
-    ". . . . . status dropdown"
-    "activity . . . . likes-replies category";
-
-  @include viewport.until(sm) {
-    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
-    grid-template-areas:
-      "category category . . . . status dropdown"
-      ". . . . . . . . "
-      "activity . . . . . . likes-replies";
-  }
-
-  .assign-topic-buttons {
-    display: contents;
-
-    .assign-actions-dropdown {
-      grid-area: dropdown;
-      justify-content: flex-end;
-      height: 1em;
-
-      .select-kit-header {
-        padding-top: 0;
-        margin-left: auto;
-        align-items: center;
-        background: transparent;
-      }
-
-      .select-kit-header-wrapper {
-        height: 1em;
-        width: 1em;
-      }
-    }
-  }
-
-  td.topic-category-status-data {
-    display: contents;
   }
 }
 
@@ -650,5 +702,4 @@ body.user-messages-page {
 .event-date-container {
   display: inline-flex;
   position: relative;
-  top: -0.25em; // optical alignment
 }