UX: add fadeout to topic list on large vp

common/common.scss

@@ -1,7 +1,6 @@
 @import "box-view";
 @import "buttons";
 @import "chat";
-@import "categories-view";
 @import "color-choice";
 @import "composer";
 @import "composer-peek-mode";

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

@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
 import formatDate from "discourse/helpers/format-date";
 
 export default class TopicActivityColumn extends Component {
@@ -35,12 +36,21 @@ 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>

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

@@ -5,13 +5,15 @@ export default class TopicCreatorColumn extends Component {
   get topicCreator() {
     return {
       user: this.args.topic.creator,
+      username: this.args.topic.creator.username,
       class: "--topic-creator",
     };
   }
 
   <template>
-    <div class={{this.topicCreator.class}}>
+    <div class={{this.topicUser.class}}>
       {{avatar this.topicCreator.user}}
+      <span class="topic-creator__username">{{this.topicUser.username}}</span>
     </div>
   </template>
 }

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

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

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

@@ -30,9 +30,7 @@ export default class TopicStatusColumn extends Component {
     {{#if this.badge}}
       <span class="topic-status-card {{this.badge.className}}">{{icon
           this.badge.icon
-        }}<p class="topic-status-card__name">{{i18n
+        }}{{i18n (themePrefix this.badge.text)}}</span>
-            (themePrefix this.badge.text)
-          }}</p></span>
     {{/if}}
   </template>
 }

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

@@ -2,6 +2,7 @@ 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";
 
@@ -23,8 +24,9 @@ const TopicCategory = <template>
   </td>
 </template>;
 
-const TopicReplies = <template>
+const TopicLikesReplies = <template>
   <td class="topic-likes-replies-data">
+    <TopicLikesColumn @topic={{@topic}} />
     <TopicRepliesColumn @topic={{@topic}} />
   </td>
 </template>;
@@ -54,7 +56,7 @@ export default {
           });
 
           columns.add("topic-likes-replies", {
-            item: TopicReplies,
+            item: TopicLikesReplies,
             after: "topic-author-avatar",
           });
           columns.add("topic-creator", {
@@ -85,9 +87,6 @@ export default {
           ) {
             classes.push("--has-status-card");
           }
-          if (context.topic.replyCount > 1) {
-            classes.push("has-replies");
-          }
           return classes;
         }
       );

scss/categories-view.scss

@@ -1,357 +0,0 @@
-@use "lib/viewport";
-
-.categories-and-latest {
-  .category-list {
-    border-collapse: separate;
-
-    th.topics {
-      display: none;
-    }
-
-    thead tr th {
-      font-size: var(--font-up-1-rem);
-      font-weight: bold;
-    }
-
-    tbody {
-      display: flex;
-      flex-direction: column;
-      gap: 1em;
-      padding-top: 1em;
-      border: 0;
-    }
-
-    tbody tr {
-      display: grid;
-      grid-template-areas:
-        "title topics"
-        "category category"
-        "subcategory subcategory";
-      row-gap: 1em;
-      border: 1px solid var(--primary-300);
-      border-radius: var(--d-border-radius-large);
-      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
-    }
-
-    td.category {
-      display: contents;
-      border-top-left-radius: var(--d-border-radius-large);
-      border-bottom-left-radius: var(--d-border-radius-large);
-      border-width: 2px;
-      padding: 1em 1.5rem;
-    }
-
-    tbody h3 {
-      grid-area: title;
-      padding: 1em 0 0 1.5rem;
-      font-size: var(--font-up-1-rem);
-
-      .category-name {
-        display: flex;
-        align-self: center;
-      }
-
-      .badge-category {
-        gap: 0.25em;
-        align-items: center;
-        font-size: var(--font-up-1-rem);
-
-        .d-icon:first-of-type:not(.d-icon-lock),
-        &.--style-square::before,
-        &.--style-emoji .emoji {
-          width: 1.25em;
-          height: 1.25em;
-          margin-right: 0.25em;
-        }
-
-        &.--style-square::before {
-          border-radius: 6px;
-        }
-      }
-
-      .d-icon.d-icon-lock {
-        order: 1;
-      }
-    }
-
-    .topics {
-      width: auto;
-      padding: 1em 1.5rem 0 0;
-      display: flex;
-      align-items: center;
-      justify-content: end;
-    }
-
-    .category-description {
-      grid-area: category;
-      padding: 0 1.5rem;
-      margin: 0;
-      font-size: var(--font-down-1-rem);
-    }
-
-    .subcategories {
-      grid-area: subcategory;
-      gap: 0.25em 0.5em;
-      padding: 0 1.5rem 1em;
-      margin: 0;
-
-      .badge-category__wrapper {
-        background-color: light-dark(
-          oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
-          oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
-        );
-        padding: 0.25em 0.5rem;
-        border-radius: var(--d-border-radius);
-      }
-
-      .badge-category__name {
-        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)
-        );
-      }
-
-      .badge-category.--style-square::before {
-        border-radius: 3px;
-      }
-    }
-  }
-
-  .latest-topic-list {
-    .table-heading {
-      border: 0;
-      font-size: var(--font-up-1-rem);
-      font-weight: bold;
-    }
-
-    &-item {
-      display: grid;
-      grid-template-columns: min-content min-content auto min-content;
-      grid-template-areas:
-        "creator title title status"
-        ". category activity activity";
-      grid-column-gap: 0.75rem;
-      grid-row-gap: 0.5rem;
-      background: var(--d-content-background);
-      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
-      text-overflow: ellipsis;
-      padding: 0.75em 1rem;
-      border: 1px solid var(--primary-300);
-      border-radius: var(--d-border-radius-large);
-      margin-top: 1em;
-    }
-
-    .main-link,
-    .topic-stats {
-      display: contents;
-    }
-
-    .top-row {
-      grid-area: title;
-    }
-
-    .bottom-row {
-      grid-area: category;
-
-      .discourse-tags {
-        display: none;
-      }
-    }
-
-    .badge-category__wrapper {
-      border-radius: var(--d-border-radius);
-      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) {
-        padding: 0.25em 0.5rem;
-        font-size: var(--font-down-2);
-      }
-
-      .badge-category__name {
-        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)
-        );
-      }
-    }
-
-    .topic-list-data {
-      grid-area: likes-replies;
-    }
-
-    .num.posts-map {
-      display: none;
-    }
-
-    .topic-last-activity {
-      grid-area: activity;
-      display: flex;
-      align-items: center;
-      text-align: left;
-      font-size: var(--font-down-1-rem);
-
-      &::before {
-        content: "";
-        display: inline-block;
-        width: 0.25em;
-        height: 0.25em;
-        background-color: var(--primary-500);
-        border-radius: 100%;
-        margin-right: 0.5em;
-      }
-    }
-
-    .topic-poster {
-      grid-area: creator;
-      width: auto;
-      align-self: flex-start;
-
-      .avatar {
-        height: 24px;
-        width: 24px;
-        border-radius: var(--d-border-radius-small);
-      }
-    }
-  }
-}
-
-@include viewport.until(sm) {
-  .category-list.with-topics {
-    margin-inline: 1rem;
-
-    .num.posts,
-    .category-topics-count {
-      display: none;
-    }
-
-    .category-list {
-      &-item {
-        padding-top: 0;
-        padding-bottom: 0;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-      }
-    }
-
-    tbody {
-      display: flex;
-      flex-direction: column;
-
-      tr:first-of-type {
-        order: -2;
-      }
-
-      tr.subcategories-list {
-        order: -1;
-      }
-
-      tr:nth-last-of-type(2) {
-        border-bottom: 0;
-      }
-    }
-
-    th.main-link {
-      padding-top: 0;
-    }
-  }
-}
-
-.category-boxes.with-subcategories {
-  @include viewport.from(sm) {
-    margin-top: 0;
-  }
-
-  @include viewport.until(md) {
-    padding-inline: 1rem;
-    box-sizing: border-box;
-  }
-
-  .category {
-    border: 0;
-
-    &-box-inner {
-      border-radius: var(--d-border-radius-large);
-      border: 1px solid var(--primary-300);
-      background: var(--d-content-background);
-      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
-
-      &:hover {
-        .discourse-no-touch & {
-          border-color: var(--accent-color);
-          background: var(--d-content-background);
-        }
-      }
-
-      &.selected {
-        box-shadow:
-          0 0 0 2px var(--accent-color),
-          0 0 12px 1px var(--topic-card-shadow);
-      }
-    }
-
-    &-details {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      height: 100%;
-    }
-
-    &-box-heading {
-      h3 {
-        text-align: left;
-      }
-
-      .badge-category {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: flex-start;
-        gap: 1em;
-        justify-content: space-between;
-        width: 100%;
-
-        &__wrapper {
-          display: flex;
-        }
-
-        &.--style-square::before {
-          aspect-ratio: 1 / 1;
-          height: auto;
-          width: 13%;
-          border-radius: var(--d-border-radius);
-        }
-
-        &__name {
-          flex-basis: 100%;
-          font-size: var(--font-up-1-rem);
-        }
-
-        .d-icon:not(.d-icon-lock),
-        img.emoji {
-          aspect-ratio: 1 / 1;
-          height: auto;
-          width: 13%;
-        }
-      }
-    }
-
-    .description {
-      text-align: left;
-      margin: 0;
-      font-size: var(--font-down-1-rem);
-    }
-
-    .subcategories {
-      margin-top: auto;
-      row-gap: 0.5em;
-
-      .subcategory {
-        margin-bottom: 0;
-        font-size: var(--font-down-1);
-      }
-    }
-  }
-}

scss/hiddenstuff.scss

@@ -2,6 +2,8 @@
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.more-topics__browse-more {
+.more-topics__browse-more,
+// footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
+.footer-message {
   display: none;
 }

scss/main.scss

@@ -98,19 +98,6 @@ body:not(.has-full-page-chat, .wizard) {
   }
 }
 
-body.users-page {
-  // very specific to overcome the above rules
-  #main #main-outlet-wrapper #main-outlet > section {
-    max-width: unset;
-  }
-}
-
-@include viewport.until(sm) {
-  .welcome-banner {
-    display: none;
-  }
-}
-
 #list-area {
   .show-more.has-topics {
     @include viewport.from(lg) {

scss/nav-pills.scss

@@ -1,14 +1,36 @@
+@use "lib/viewport";
 .list-controls {
   position: sticky;
   top: var(--header-offset);
   background: var(--d-content-background);
   z-index: z("base");
-  padding: 1.5rem 0 1rem 0;
+  padding: 1.5rem 0 0 0;
   max-width: unset;
 
+  @include viewport.until(sm) {
+    padding-bottom: 1em;
+  }
+
   .navigation-container {
+    position: relative;
     gap: 1rem;
 
+    @include viewport.from(sm) {
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -1rem;
+        height: 1rem;
+        background: linear-gradient(
+          to bottom,
+          var(--d-content-background),
+          transparent
+        );
+      }
+    }
+
     .category-breadcrumb {
       order: 1;
     }

scss/topic-cards.scss

@@ -1,9 +1,5 @@
 @use "lib/viewport";
 
-:root {
-  --d-border-radius-small: calc(var(--d-border-radius) * 0.5);
-}
-
 .topic-list .topic-list-item-separator {
   display: none;
 }
@@ -16,43 +12,6 @@
   }
 }
 
-.topic-list,
-.category-boxes .subcategories {
-  .badge-category__wrapper {
-    border-radius: var(--d-border-radius);
-    padding: 3px 6px;
-    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) {
-      padding: 2px 6px;
-      font-size: var(--font-down-2);
-    }
-
-    .badge-category__name {
-      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)
-      );
-    }
-  }
-}
-
-// undo all the above for the few instances that arent styled like traditional badges
-.category-text-title {
-  .badge-category__wrapper {
-    border-radius: 0;
-    padding: 0;
-    background-color: transparent;
-
-    .badge-category__name {
-      color: var(--primary);
-    }
-  }
-}
-
 .topic-list-body {
   border: none;
   display: flex;
@@ -75,72 +34,35 @@
   background: var(--d-content-background);
   box-shadow: 0 0 12px 1px var(--topic-card-shadow);
   text-overflow: ellipsis;
-  padding: var(--space-3);
+  padding: 0.75em 1rem;
   border: 1px solid var(--primary-300);
   display: grid;
-  grid-template-columns: min-content min-content min-content auto min-content;
+  grid-template-columns: min-content min-content auto min-content;
   grid-template-areas:
-    "creator title title title status"
+    "creator title title status"
-    ". category activity activity .";
+    "creator category activity likes-replies";
-  grid-gap: var(--space-3);
+  grid-column-gap: 0.75rem;
+  grid-row-gap: 0.5rem;
   border-radius: var(--d-border-radius);
   cursor: pointer;
 
-  &.has-replies {
+  .bulk-select-enabled & {
+    grid-template-columns: min-content min-content min-content auto min-content;
     grid-template-areas:
-      "creator title title title status"
+      "bulk-select creator title title status"
-      ". category likes-replies activity .";
+      "bulk-select creator category activity likes-replies";
-  }
-
-  &:not(.has-replies) {
-    .topic-likes-replies-data {
-      display: none;
-    }
   }
 
   @include viewport.until(sm) {
-    max-width: 100vw;
-    box-sizing: border-box;
     grid-template-areas:
-      "creator title title title status"
+      "category category category status"
-      ". category activity activity . ";
+      "creator title title title"
+      "activity activity activity likes-replies";
+    row-gap: 0.75em;
     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-areas:
-          "bulk-select creator title title title status"
-          "bulk-select . category likes-replies activity . ";
-      }
-    }
-
-    @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 . ";
-    }
   }
 
   &:hover {
@@ -166,34 +88,32 @@
 
     @include viewport.from(sm) {
       grid-template-areas:
-        "creator title title title status"
+        "creator title title status"
-        ". category activity activity . "
+        "creator category activity likes-replies "
-        ". excerpt excerpt excerpt excerpt";
+        "creator 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 title status"
+          "bulk-select creator title title status"
-          "bulk-select category category activity likes-replies likes-replies "
+          "bulk-select creator category activity likes-replies "
-          " bulk-select excerpt excerpt excerpt excerpt excerpt";
+          " bulk-select creator 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;
-    line-height: calc(var(--space-3) * 2); // avatar sizing
+    display: flex;
-
+    align-items: center;
-    @include viewport.until(sm) {
-      line-height: normal;
-    }
 
     .title {
       padding: 0;
@@ -228,11 +148,6 @@
 
   .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),
@@ -244,25 +159,11 @@
       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);
     }
   }
 
@@ -271,12 +172,14 @@
     grid-area: creator;
 
     .avatar {
-      height: calc(var(--space-3) * 2);
+      height: 50px;
-      width: calc(var(--space-3) * 2);
+      width: 50px;
       border-radius: var(--d-border-radius);
 
       @include viewport.until(sm) {
-        border-radius: var(--d-border-radius-small);
+        height: 30px;
+        width: 30px;
+        border-radius: 0.25rem;
       }
     }
   }
@@ -326,11 +229,6 @@
 
   // status
   .topic-status-data {
-    display: none;
-  }
-
-  &.--has-status-card .topic-status-data {
-    display: block;
     grid-area: status;
   }
 
@@ -342,22 +240,13 @@
     gap: 0.25em;
     align-items: center;
     padding: 0.2em 0.5rem;
-    font-size: var(--font-down-2);
+    font-size: var(--font-down-3);
-
-    @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);
     }
@@ -375,31 +264,14 @@
     }
 
     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 {
@@ -451,15 +323,13 @@
     grid-area: likes-replies;
     display: flex;
     flex-direction: row;
-    gap: var(--space-3);
+    gap: 0.5em;
+    justify-content: flex-end;
     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;
@@ -492,186 +362,221 @@
       display: none;
     }
   }
+}
 
-  // Assigned List
+// Bookmarks
-  &.assigned-list-item {
+.topic-list-item.bookmark-list-item {
-    .topic-status-data {
+  .link-bottom-line {
-      display: none;
+    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:
-      "creator title title title dropdown"
+      " . . . . . . dropdown"
-      ". category activity activity .";
+      "update metadata metadata metadata metadata category category";
 
-    &.has-replies {
+    .avatar {
-      grid-template-areas:
+      display: none;
-        "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;
-        }
-      }
     }
   }
 
-  // Bookmarks
+  &.has-metadata {
-  &.bookmark-list-item {
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-    grid-template-areas:
-      "creator title title title dropdown"
-      "category category activity . . ";
 
     @include viewport.until(sm) {
       grid-template-areas:
-        "title title title title dropdown"
+        ". . . . . . . dropdown"
-        "category category activity activity . ";
+        "update update metadata metadata metadata metadata category category";
 
       .avatar {
         display: none;
       }
     }
+  }
 
-    &.excerpt-expanded {
+  // 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;
       grid-template-areas:
-        "creator title title title dropdown"
+        ".  dropdown"
-        "category category activity . . "
+        "category category";
-        "excerpt excerpt excerpt excerpt excerpt";
 
-      @include viewport.until(sm) {
+      .post-excerpt,
-        grid-template-areas:
+      .avatar {
-          "title title title title dropdown"
+        display: none;
-          "category category activity activity . "
-          "excerpt excerpt excerpt excerpt excerpt";
       }
     }
 
     &.has-metadata {
+      grid-template-columns: 20px min-content auto min-content;
       grid-template-areas:
-        "creator title title title dropdown"
+        ". . . dropdown"
-        "category category activity metadata . ";
+        "avatar update metadata metadata"
+        "excerpt excerpt excerpt . "
+        "excerpt excerpt excerpt category";
 
       @include viewport.until(sm) {
+        grid-template-columns: auto min-content;
         grid-template-areas:
-          "metadata metadata metadata metadata dropdown"
+          " . dropdown"
-          "title title title title ."
+          "metadata category";
-          "category category activity activity . ";
-      }
 
-      &.excerpt-expanded {
+        .bookmark-metadata {
-        grid-template-areas:
+          flex-wrap: wrap;
-          "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";
         }
       }
     }
 
-    td.author-avatar {
+    .badge-category__wrapper {
-      grid-area: creator;
+      align-self: flex-end;
+      height: min-content;
+      max-width: 100%;
     }
+  }
 
-    td.main-link .link-bottom-line {
+  td.author-avatar {
-      display: contents;
+    grid-area: avatar;
+  }
 
-      .badge-category__wrapper {
+  td.main-link .link-bottom-line {
-        grid-area: category;
+    display: contents;
-        display: flex;
-        align-items: center;
-        width: min-content;
-        justify-self: flex-end;
-      }
-    }
 
-    td.main-link .link-top-line {
+    .badge-category__wrapper {
-      display: contents;
+      grid-area: category;
-
-      .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;
-      font-size: var(--font-down-1-rem);
+      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);
     }
 
-    td.activity .post-activity {
+    .bookmark-metadata-item {
-      display: none;
+      margin: 0;
+      vertical-align: middle;
     }
+
+    .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;
   }
 }
 
-// bulk-select overrule for j/k nav
+// Assigned List
-.topic-list tr.selected td:first-of-type,
+.topic-list-item.assigned-list-item {
-.topic-list-item.selected td:first-of-type {
+  .topic-status-card {
-  box-shadow: none;
+    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;
+  }
 }
 
 // User Messages
@@ -696,10 +601,6 @@ body.user-messages-page {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto;
 
-    &.has-replies {
-      grid-template-areas: "title activity" "posters .";
-    }
-
     &:hover {
       .discourse-no-touch & {
         background-color: var(--primary-low);
@@ -749,4 +650,5 @@ body.user-messages-page {
 .event-date-container {
   display: inline-flex;
   position: relative;
+  top: -0.25em; // optical alignment
 }

spec/system/horizon_high_level_spec.rb

@@ -36,7 +36,9 @@ 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-status-data",
         "topic-category-data",
+        "topic-likes-replies-data",
         "topic-creator-data",
         "topic-activity-data",
       ],
@@ -48,7 +50,7 @@ describe "Horizon theme | High level", type: :system do
 
     # Can change site colors from the sidebar palette, which are remembered
     # across page reloads.
-    marigold_palette = theme.color_schemes.find_by(name: "Marigold")
+    marigold_palette = ColorScheme.find_by(name: "Marigold")
     palette_selector.open_palette_menu
     palette_selector.click_palette_menu_item(marigold_palette.name)
     expect(palette_selector).to have_no_palette_menu

spec/system/page_objects/components/user_color_palette_selector.rb

@@ -26,9 +26,7 @@ module PageObjects
       end
 
       def has_selected_palette?(palette)
-        has_css?(
+        has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
-          ".user-color-palette-selector-trigger[data-selected-color-palette-id=\"#{palette.id}\"]",
-        )
       end
 
       def has_loaded_css?

spec/system/user_color_palette_selector_spec.rb

@@ -6,7 +6,7 @@ describe "Horizon theme | User color palette selector", type: :system do
   let(:set_theme_as_default) { true }
   let!(:theme) do
     horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
-    horizon_theme.color_schemes.update_all(user_selectable: true)
+    ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
     horizon_theme
   end
   fab!(:current_user) { Fabricate(:user) }
@@ -16,8 +16,8 @@ describe "Horizon theme | User color palette selector", type: :system do
   let(:interface_color_selector) do
     PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
   end
-  let(:marigold_palette) { theme.color_schemes.find_by(name: "Marigold") }
+  let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
-  let(:marigold_palette_dark) { theme.color_schemes.find_by(name: "Marigold Dark") }
+  let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
 
   before { SiteSetting.interface_color_selector = "sidebar_footer" }