Merge branch 'main' into second-batch

Followup fix for #84

about.json

@@ -9,7 +9,8 @@
   "maximum_discourse_version": null,
   "assets": {},
   "modifiers": {
-    "svg_icons": ["fire"]
+    "svg_icons": ["fire"],
+    "serialize_topic_is_hot": true
   },
   "components": [
     "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
@@ -19,22 +20,62 @@
     "Horizon": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "header_background": "f5f8ff",
+      "tertiary": "595bca"
-      "tertiary": "595bca",
-      "tertiary-low": "d8d9f3",
-      "tertiary-50": "f5f8ff",
-      "selected": "d8d9f3",
-      "hover": "ebebf9"
     },
     "Horizon Dark": {
-      "primary": "F1EFF9",
+      "primary": "ffffff",
-      "secondary": "1e1a36",
+      "secondary": "1A1A1A",
-      "header_background": "00091d",
+      "tertiary": "595bca"
-      "header_primary": "F5F8FF",
+    },
-      "tertiary": "6465ab",
+    "Royal": {
-      "tertiary-50": "131124",
+      "primary": "1A1A1A",
-      "selected": "1e1a36",
+      "secondary": "ffffff",
-      "hover": "131124"
+      "tertiary": "4169e1"
+    },
+    "Royal Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "4169e1"
+    },
+    "Clover": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "45a06e"
+    },
+    "Clover Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "45a06e"
+    },
+    "Lily": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "cc338c"
+    },
+    "Lily Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "cc338c"
+    },
+    "Violet": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "9b15de"
+    },
+    "Violet Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "9b15de"
+    },
+    "Marigold": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "d3881f"
+    },
+    "Marigold Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "d3881f"
     }
   }
 }

desktop/desktop.scss

@@ -0,0 +1,63 @@
+.bulk-select-enabled {
+  .topic-list-header .topic-list-data.default {
+    position: sticky;
+    top: 10em;
+  }
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: bulk-select;
+    margin-left: -0.5em;
+
+    @media screen and (max-width: 576px) {
+      margin-top: 0;
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      position: absolute;
+      right: 0;
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  .bulk-select-topics {
+    position: absolute;
+    right: -1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    button {
+      white-space: nowrap;
+    }
+  }
+}

javascripts/discourse/api-initializers/horizon.gjs

@@ -1,8 +1,18 @@
 import { apiInitializer } from "discourse/lib/api";
 import CustomColorHtmlClass from "../components/custom-color-html-class";
+import CustomUserPalette from "../components/custom-user-palette";
 import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
   api.renderInOutlet("above-main-container", CustomColorHtmlClass);
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
+
+  api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
+    return settings.enable_welcome_banner;
+  });
+
+  api.registerValueTransformer("site-setting-search-experience", () => {
+    return settings.search_experience;
+  });
 });

javascripts/discourse/api-initializers/reposition-bulk-select.js

@@ -0,0 +1,7 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("0.8.0", (api) => {
+  api.registerValueTransformer("bulk-select-in-nav-controls", () => {
+    return true;
+  });
+});

javascripts/discourse/api-initializers/user-pallette.js

@@ -1,6 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-import CustomUserPalette from "../components/custom-user-palette";
-
-export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
-});

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

@@ -0,0 +1,50 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+import formatDate from "discourse/helpers/format-date";
+import { i18n } from "discourse-i18n";
+import gt from "truth-helpers/helpers/gt";
+
+export default class TopicActivityColumn extends Component {
+  get activityText() {
+    // this should handle any case where a topic was no bumped due to a reply/post
+    if (
+      moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
+    ) {
+      return "user_updated";
+    }
+
+    if (this.args.topic.posts_count > 1) {
+      return "user_replied";
+    } else if (this.args.topic.posts_count === 1) {
+      return "user_posted";
+    }
+  }
+
+  <template>
+    <span class="topic-activity">
+      <div class="topic-activity__user">
+        {{#if (gt @topic.replyCount 1)}}
+          {{avatar @topic.lastPosterUser imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.last_poster_username}}</span>
+        {{else}}
+          {{avatar @topic.creator imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.creator.username}}</span>
+        {{/if}}
+      </div>
+      <div class="topic-activity__reason">
+        {{i18n (themePrefix this.activityText)}}
+      </div>
+      <div class="topic-activity__time">
+        {{formatDate
+          @topic.bumpedAt
+          leaveAgo="true"
+          format="medium-with-ago-and-on"
+        }}
+      </div>
+    </span>
+  </template>
+}

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

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

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

@@ -1,115 +1,36 @@
 import Component from "@glimmer/component";
-import { on } from "@ember/modifier";
-import { action } from "@ember/object";
 import { service } from "@ember/service";
-import { and } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
 export default class TopicStatusColumn extends Component {
-  @service currentUser;
   @service siteSettings;
 
-  get canAct() {
+  get badge() {
-    return this.currentUser && !this.args.disableActions;
+    if (this.args.topic.is_hot) {
+      return {
+        icon: "fire",
+        text: "topic_hot",
+        className: "--hot",
+      };
     }
 
-  get statusClass() {
+    if (this.args.topic.pinned) {
-    let classes = ["topic-status-card"];
+      return {
-    if (this.args.topic.bookmarked) {
+        icon: "thumbtack",
-      classes.push("--bookmark");
+        text: "topic_pinned",
-    } else if (this.args.topic.closed && this.args.topic.archived) {
+        className: "--pinned",
-      classes.push("--locked --archived");
+      };
-    } else if (this.args.topic.closed) {
-      classes.push("--locked");
-    } else if (this.args.topic.archived) {
-      classes.push("--archived");
-    } else if (this.args.topic.is_warning) {
-      classes.push("--warning");
-    } else if (
-      this.args.showPrivateMessageIcon &&
-      this.args.topic.isPrivateMessage
-    ) {
-      classes.push("--private-message");
-    } else if (this.args.topic.pinned) {
-      classes.push("--pinned");
-    } else if (this.args.topic.unpinned) {
-      classes.push("--unpinned");
-    }
-    return classes.join(" ");
     }
 
-  get heatMap() {
+    return null;
-    return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
-  }
-
-  @action
-  togglePinned(event) {
-    event.preventDefault();
-    this.args.topic.togglePinnedForUser();
   }
 
   <template>
-    {{#if @topic.bookmarked}}
+    {{#if this.badge}}
-      <span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
+      <span class="topic-status-card {{this.badge.className}}">{{icon
-          (themePrefix "topic_bookmarked")
+          this.badge.icon
-        }}</span>
+        }}{{i18n (themePrefix this.badge.text)}}</span>
-    {{/if}}
-    {{#if (and @topic.closed @topic.archived)~}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_closed_and_archived")
-        }}</span>
-    {{else if @topic.closed}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_closed")
-        }}</span>
-    {{else if @topic.archived}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_archived")
-        }}</span>
-    {{/if}}
-    {{#if @topic.is_warning}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_warning")
-        }}</span>
-    {{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_personal_message")
-        }}</span>
-    {{/if}}
-    {{#if @topic.pinned}}
-      {{#if this.canAct}}
-        <button
-          type="button"
-          {{on "click" this.togglePinned}}
-          class={{this.statusClass}}
-        >{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
-      {{else}}
-        <span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
-            (themePrefix "topic_pinned")
-          }}</span>
-      {{/if}}
-    {{else if @topic.unpinned}}
-      {{#if this.canAct}}
-        <button
-          type="button"
-          {{on "click" this.togglePinned}}
-          class={{this.statusClass}}
-        >{{icon "thumbtack" class="unpinned"}}{{i18n
-            (themePrefix "topic_unpinned")
-          }}</button>
-      {{else}}
-        <span class={{this.statusClass}}>{{icon
-            "thumbtack"
-            class="unpinned"
-          }}{{i18n (themePrefix "topic_unpinned")}}</span>
-      {{/if}}
-    {{/if}}
-
-    {{#if this.heatMap}}
-      <span class="topic-status-card --hot">{{icon "fire"}}{{i18n
-          (themePrefix "topic_hot")
-        }}</span>
     {{/if}}
   </template>
 }

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

@@ -1,30 +1,28 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
+import TopicActivityColumn from "../components/card/topic-activity-column";
-import TopicAuthorColumn from "../components/card/topic-author-column";
 import TopicCategoryColumn from "../components/card/topic-category-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";
 
-const TopicAuthor = <template>
+const TopicActivity = <template>
-  <td class="topic-author-data">
+  <td class="topic-activity-data">
-    <TopicAuthorColumn @topic={{@topic}} />
+    <TopicActivityColumn @topic={{@topic}} />
   </td>
 </template>;
 
-const TopicAuthorAvatar = <template>
+const TopicStatus = <template>
-  <td class="topic-author-avatar-data">
+  <td class="topic-status-data">
-    <TopicAuthorAvatarColumn @topic={{@topic}} />
-  </td>
-</template>;
-
-const TopicCategoryStatus = <template>
-  <td class="topic-category-status-data">
-    <TopicCategoryColumn @topic={{@topic}} />
     <TopicStatusColumn @topic={{@topic}} />
   </td>
 </template>;
 
+const TopicCategory = <template>
+  <td class="topic-category-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 const TopicLikesReplies = <template>
   <td class="topic-likes-replies-data">
     <TopicLikesColumn @topic={{@topic}} />
@@ -40,17 +38,17 @@ export default {
       api.registerValueTransformer(
         "topic-list-columns",
         ({ value: columns }) => {
-          columns.add("topic-author", {
+          columns.add("topic-activity", {
-            item: TopicAuthor,
+            item: TopicActivity,
-            after: "activity",
+            after: "title",
           });
-          columns.add("topic-category-status", {
+          columns.add("topic-status", {
-            item: TopicCategoryStatus,
+            item: TopicStatus,
             after: "topic-author",
           });
-          columns.add("topic-author-avatar", {
+          columns.add("topic-category", {
-            item: TopicAuthorAvatar,
+            item: TopicCategory,
-            after: "topic-category-status",
+            after: "topic-status",
           });
           columns.add("topic-likes-replies", {
             item: TopicLikesReplies,
@@ -59,6 +57,7 @@ export default {
           columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
+          columns.delete("activity");
           return columns;
         }
       );
@@ -66,8 +65,12 @@ export default {
       api.registerValueTransformer(
         "topic-list-item-class",
         ({ value: classes, context }) => {
-          if (context.topic.pinned || context.topic.pinned_globally) {
+          if (
-            classes.push("--pinned");
+            context.topic.is_hot ||
+            context.topic.pinned ||
+            context.topic.pinned_globally
+          ) {
+            classes.push("--has-status-card");
           }
           return classes;
         }

locales/en.yml

@@ -1,12 +1,9 @@
 en:
   theme_metadata:
     description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
-  topic_bookmarked: "Bookmarked"
-  topic_closed_archived: "Closed and archived"
-  topic_closed: "Closed"
-  topic_archived: "Archived"
-  topic_warning: "Warning"
-  topic_personal_message: "Personal message"
   topic_pinned: "Pinned"
-  topic_unpinned: "Unpinned"
   topic_hot: "Hot"
+  user_replied: "replied"
+  user_posted: "posted"
+  user_updated: "updated"
+

scss/chat.scss

@@ -51,3 +51,7 @@ body.has-full-page-chat {
     color: var(--primary);
   }
 }
+
+.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
+  z-index: z("composer", "content") + 1;
+}

scss/composer.scss

@@ -9,6 +9,55 @@
     }
   }
 }
+
+#reply-control.hide-preview:not(.draft) {
+  @include breakpoint("mobile-extra-large", $rule: min-width) {
+    background: var(--d-content-background);
+
+    border-top-right-radius: var(--d-border-radius);
+    border-top-left-radius: var(--d-border-radius);
+
+    .grippie {
+      background: var(--tertiary-low);
+    }
+
+    .title-and-category {
+      padding: 0 var(--spacing-inline-m);
+      width: calc(100% - var(--spacing-inline-m) * 2);
+    }
+
+    .d-editor-button-bar {
+      padding: 3px var(--spacing-inline-m);
+      border: none;
+    }
+
+    .d-editor-input {
+      padding: var(--spacing-inline-m);
+    }
+
+    &:has(.in-focus) .grippie {
+      background: var(--tertiary);
+    }
+
+    .reply-area {
+      padding-inline: 0;
+    }
+    .reply-to,
+    .submit-panel {
+      padding-inline: var(--spacing-inline-sm);
+    }
+
+    .d-editor-textarea-wrapper {
+      border: 0;
+      border-bottom: 1px solid var(--primary-low);
+      border-radius: 0;
+
+      &.in-focus {
+        outline: 0;
+      }
+    }
+  }
+}
 .d-editor-button-bar {
   .btn:hover,
   .toolbar-popup-menu-options.is-expanded {

scss/main.scss

@@ -4,10 +4,17 @@
 
 html:not(:has(.has-full-page-chat)) {
   background-color: var(--background-color);
+
+  @include breakpoint("mobile-extra-large") {
+    background-color: var(--d-content-background);
+  }
 }
 
 body {
   -webkit-font-smoothing: antialiased;
+  @include breakpoint("mobile-extra-large") {
+    background-color: var(--d-content-background);
+  }
 }
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
@@ -73,7 +80,8 @@ body:not(.has-full-page-chat) {
       .body-page,
       .container.badges,
       .topic-above-footer-buttons-outlet .presence-users,
-      .global-notice {
+      .global-notice,
+      .container.tags-index {
         @include breakpoint(medium, $rule: min-width) {
           max-width: 1000px;
           margin-inline: auto;

scss/misc.scss

@@ -40,10 +40,6 @@
   border-radius: 0;
 }
 
-.d-editor-button-bar {
-  padding: 3px;
-}
-
 .open .grippie {
   background-color: var(--accent-color);
 }

scss/mobile-stuff.scss

@@ -2,7 +2,7 @@
 @include breakpoint(medium) {
   html,
   .d-header {
-    background-color: var(--secondary);
+    background-color: var(--d-content-background);
   }
 }
 #main-outlet-wrapper {
@@ -36,6 +36,7 @@
           row-gap: var(--spacing-block-xs);
           flex-basis: 100%;
           .select-kit-header {
+            background: var(--d-content-background);
             padding-block: var(--spacing-block-s);
             padding-inline: 0;
             border: 0;
@@ -84,24 +85,11 @@
         padding-top: 0;
       }
     }
-
-    .topic-list-item {
-      @include breakpoint(mobile-extra-large) {
-        box-shadow: none;
-        border-radius: 0;
-        //to be moved to topic card segment for general use
-        // .navigation-category & {
-        //   .badge-category__wrapper {
-        //     display: none;
-        //   }
-        // }
-      }
-    }
   }
 
   #topic-title {
     @include breakpoint(mobile-extra-large) {
-      padding-inline: var(--spacing-inline-m) !important;
+      padding-inline: var(--spacing-inline-s) !important;
 
       .title-wrapper {
         gap: var(--spacing-block-s);
@@ -131,6 +119,12 @@
           oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
         );
       }
+      .discourse-tags {
+        gap: var(--spacing-inline-xs);
+        &__tag-separator {
+          display: none;
+        }
+      }
       .discourse-tag {
         font-size: var(--font-down-2-rem);
         padding: var(--spacing-inline-xs) var(--spacing-inline-s);

scss/nav-pills.scss

@@ -2,7 +2,7 @@
   position: sticky;
   top: var(--header-offset);
   background: var(--d-content-background);
-  z-index: 100;
+  z-index: z("base");
   padding: 1.5rem 0 1rem 0;
   max-width: unset;
 

scss/search-banner.scss

@@ -1,3 +1,7 @@
+.welcome-banner {
+  z-index: calc(z("base") + 1);
+}
+
 .custom-search-banner-wrap {
   display: grid;
   grid-template-rows: 0.33fr 0.33fr 0.33fr;

scss/topic-cards.scss

@@ -1,16 +1,3 @@
-// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
-// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
-// 1280x832 – desktop small – (Figma MacBook Air)
-
-:root {
-  --hot-color: oklch(63.79% 0.1823 34.77);
-}
-
-$extra-small: 435px;
-$small: 576px;
-$medium: 980px;
-$extra-large: 1280px;
-
 .topic-list .topic-list-item-separator {
   display: none;
 }
@@ -29,136 +16,82 @@ $extra-large: 1280px;
   gap: 1em;
   @include breakpoint(medium) {
     gap: 0.5em;
+    padding: 0 0.5em;
   }
-}
+  @include breakpoint(mobile-extra-large) {
-
+    gap: 0;
-.bulk-select-enabled .topic-list-item {
-  grid-template-areas:
-    "bulk-select avatar author status status . activity"
-    ". topic-title topic-title topic-title likes-replies likes-replies category";
-  .bulk-select {
-    grid-area: bulk-select;
     padding: 0;
-    margin: 0;
-    align-self: center;
-    justify-self: center;
-    label {
-      margin: 0;
-    }
-  }
-  @media screen and (max-width: $medium) {
-    grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
-    grid-template-rows: 22px minmax(22px, auto);
-    grid-template-areas:
-      "bulk-select avatar author status status  . activity"
-      ". topic-title topic-title topic-title . . likes-replies"
-      ". topic-title topic-title topic-title . . category";
-  }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "bulk-select category-status category-status . . . . activity"
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      "avatar author . . . . . likes-replies";
   }
 }
 
-body.user-messages-page .topic-list-item {
+.topic-list-body .topic-list-item {
-  .topic-category-status-data {
-    display: none;
-  }
-  grid-template-areas:
-    "avatar author status status . . activity"
-    ". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
-  &.excerpt-expanded {
-    grid-template-columns: 44px repeat(6, 1fr) auto;
-    grid-template-rows: 22px auto auto 30px;
-    grid-template-areas:
-      "avatar author status status . . . activity"
-      "avatar topic-title topic-title topic-title topic-title . . ."
-      ". excerpt excerpt excerpt excerpt excerpt . ."
-      ". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
-    @media screen and (max-width: $extra-large) {
-      grid-template-areas:
-        "avatar author status status . . . activity"
-        "avatar topic-title topic-title topic-title topic-title . . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies";
-    }
-  }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto;
-    grid-template-areas:
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
-      "avatar author . . . . . likes-replies";
-    .topic-excerpt {
-      display: none;
-    }
-  }
-}
-
-.topic-list-item {
   text-overflow: ellipsis;
   padding: 0.75em 1rem;
   border: 1px solid var(--primary-300);
   display: grid;
-  grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
+  grid-template-columns: 20px min-content min-content auto min-content;
-  grid-template-rows: 22px minmax(22px, auto);
+  grid-template-rows: auto minmax(20px, auto);
   grid-template-areas:
-    "avatar author status status . . activity"
+    ". . . . status"
-    ". topic-title topic-title topic-title likes-replies likes-replies category";
+    "activity . . likes-replies category";
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
-  &.excerpt-expanded {
+  td.main-link .link-top-line {
-    grid-template-columns: 44px repeat(6, 1fr) auto;
+    grid-row: 1/2;
-    grid-template-rows: 22px auto auto 30px;
+    grid-column: 1/-1;
-    grid-template-areas:
+    font-weight: 500;
-      "avatar author status status . . . activity"
-      "avatar topic-title topic-title topic-title topic-title . . ."
-      ". excerpt excerpt excerpt excerpt excerpt . ."
-      ". excerpt excerpt excerpt excerpt excerpt likes-replies category";
-    @media screen and (max-width: $extra-large) {
-      grid-template-areas:
-        "avatar author status status . . . activity"
-        "avatar topic-title topic-title topic-title topic-title . . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . category";
   }
-    @media screen and (max-width: $small) {
+  &.--has-status-card td.main-link .link-top-line {
-      grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-column: 1/-2;
+  }
+  @include breakpoint(extra-large) {
+    grid-template-areas:
+      ". . . . status"
+      "activity . . likes-replies category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-row: 2/3;
+      grid-column: 1/-1;
+    }
+
+    grid-template-columns: 20px repeat(5, 1fr);
     grid-template-rows: auto auto auto;
     grid-template-areas:
-        "category-status category-status category-status . . . . activity"
+      "category category category category category status"
-        "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
+      ". . . . . ."
-        "avatar author . . . . . likes-replies";
+      "activity . . . . likes-replies";
+    border: none;
+    border-bottom: 1px solid var(--primary-200);
+    box-shadow: none;
+    border-radius: 0;
+  }
+  &.excerpt-expanded {
+    grid-template-columns: 20px min-content min-content auto min-content;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      ". . . . status"
+      "activity . . . ."
+      "excerpt excerpt excerpt likes-replies category";
+    @include breakpoint(extra-large) {
+      grid-template-areas:
+        ". . . . status"
+        "activity . . . ."
+        "excerpt excerpt excerpt likes-replies category";
+    }
+    @include breakpoint(mobile-extra-large) {
+      grid-template-rows: auto auto auto;
+      grid-template-areas:
+        "category category category category status"
+        ". . . . ."
+        "activity . . . likes-replies";
       .topic-excerpt {
         display: none;
       }
     }
   }
-  @media screen and (max-width: $medium) {
-    grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
-    grid-template-rows: 22px minmax(22px, auto);
-    grid-template-areas:
-      "avatar author status status . . activity"
-      ". topic-title topic-title topic-title . . likes-replies"
-      ". topic-title topic-title topic-title . . category";
-  }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "category-status category-status category-status . . . . activity"
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      "avatar author . . . . . likes-replies";
-  }
-  @include breakpoint(medium) {
-    border: none;
-    border-bottom: 1px solid var(--primary-200);
-  }
 
   // display contents
   td.main-link,
@@ -173,32 +106,54 @@ body.user-messages-page .topic-list-item {
     padding: 0;
   }
 
-  // avatar & author
+  // topic activity, avatar, text
-  .topic-author-avatar-data {
+  .topic-activity-data {
-    grid-area: avatar;
+    grid-area: activity;
-    margin: 0;
   }
-  .topic-author-avatar img.avatar {
+  .topic-activity {
-    width: 44px;
-    height: 44px;
-    border-radius: var(--d-border-radius);
-    @media screen and (max-width: $small) {
-      width: 25px;
-      height: 25px;
-    }
-  }
-  td.topic-author-data {
-    grid-area: author;
     display: flex;
-    gap: 0.5em;
+    gap: 0.25em;
+    font-size: var(--font-down-1);
+    height: 100%;
     align-items: center;
   }
-  .topic-author-data .topic-author {
+
-    color: var(--primary-500);
+  .topic-activity__user {
+    display: flex;
+    gap: 0.25em;
+  }
+
+  .topic-activity__user .avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+  }
+
+  .topic-activity__username {
+    @include breakpoint(mobile-extra-large) {
+      display: none;
+    }
   }
 
   // status
+  .topic-status-data {
+    grid-area: status;
+  }
+  .topic-status-data {
+    grid-area: status;
+    position: relative;
+  }
   .topic-status-card {
+    @include breakpoint("large", min-width) {
+      position: absolute;
+      right: 0px;
+      top: -20px;
+      background-color: var(--d-content-background);
+      height: 20px;
+      font-size: var(--font-down-3);
+    }
+    height: min-content;
+    margin-left: auto;
     display: flex;
     flex-direction: row;
     gap: 4px;
@@ -209,40 +164,22 @@ body.user-messages-page .topic-list-item {
     border-radius: var(--d-border-radius);
     border: 1px solid var(--status-color);
     color: var(--status-color);
-    height: min-content;
-    grid-area: status;
     width: min-content;
-    @media screen and (max-width: $small) {
-      height: calc(100% - 2px);
-    }
     svg {
       font-size: var(--font-down-1);
       color: var(--status-color);
     }
   }
 
-  .topic-status-card.--bookmark {
+  .topic-status-card.--pinned {
-    display: none;
-  }
-  .topic-status-card.--pinned,
-  .topic-status-card.--unpinned {
     --status-color: var(--primary-500);
-    cursor: pointer;
-    background-color: transparent;
-    line-height: unset;
   }
   .topic-status-card.--hot {
-    --status-color: var(--hot-color);
+    --status-color: #e45735;
-  }
-
-  // title
-  td.main-link .link-top-line {
-    font-size: var(--font-0);
-    grid-area: topic-title;
-    font-weight: 500;
   }
 
   .link-top-line .event-date {
+    margin-left: 0.5em;
     font-size: var(--font-down-3);
   }
 
@@ -250,11 +187,16 @@ body.user-messages-page .topic-list-item {
     display: none;
   }
 
+  .topic-list-data {
+    padding: 0;
+  }
+
   td.main-link .link-top-line a.raw-topic-link {
     padding: 0;
   }
 
-  .topic-post-badges .badge-notification.unread-posts {
+  .topic-post-badges .badge-notification.unread-posts,
+  .topic-post-badges .badge-notification.new-topic {
     background-color: var(--tertiary);
     color: var(--tertiary);
     overflow: hidden;
@@ -267,7 +209,8 @@ body.user-messages-page .topic-list-item {
 
   // excerpt
   .topic-excerpt {
-    grid-area: excerpt;
+    grid-row: 3 / -1;
+    grid-column: 1 / -2;
     margin: 0;
     font-size: var(--font-down-2);
   }
@@ -289,29 +232,27 @@ body.user-messages-page .topic-list-item {
 
   td.topic-category-status-data {
     display: contents;
-    @media screen and (max-width: $small) {
-      grid-area: category-status;
-      display: flex;
-      gap: 0.5em;
-      align-items: center;
   }
-  }
+  td.topic-category-data {
-  td.topic-category-status-data .badge-category__wrapper {
     grid-area: category;
+    display: flex;
+    justify-content: flex-end;
+    @include breakpoint(mobile-extra-large) {
+      justify-content: flex-start;
     }
-
+  }
-  td.topic-category-status-data .badge-category__wrapper {
+  td.topic-category-data .badge-category__wrapper,
-    overflow: unset;
+  td.main-link .link-bottom-line .badge-category__wrapper {
     border-radius: var(--d-border-radius);
-    padding: 6px;
+    padding: 3px 6px;
-    align-self: flex-end;
     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)
     );
 
-    @media screen and (max-width: $small) {
+    @include breakpoint(tablet) {
       padding: 2px 6px;
+      font-size: var(--font-down-2);
     }
 
     .badge-category__name {
@@ -339,8 +280,7 @@ body.user-messages-page .topic-list-item {
     gap: 0.5em;
     justify-content: flex-end;
     height: min-content;
-    align-self: flex-end;
+    align-self: center;
-    padding-bottom: 4px;
   }
   .topic-likes-replies-data .topic-likes,
   .topic-likes-replies-data .topic-replies {
@@ -355,10 +295,6 @@ body.user-messages-page .topic-list-item {
   }
 }
 
-.topic-list-header {
-  display: none;
-}
-
 .topic-list-item {
   background: var(--d-content-background);
   box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
@@ -373,3 +309,229 @@ body.user-messages-page .topic-list-item {
       0px 0px 12px 1px var(--topic-card-shadow);
   }
 }
+
+// Bookmarks
+
+.topic-list-item.bookmark-list-item {
+  .link-bottom-line {
+    font-size: unset;
+  }
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  grid-template-areas:
+    ". . . . . . dropdown"
+    "avatar update metadata metadata metadata category dropdown";
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-areas:
+      ". . . . . . . dropdown"
+      "avatar update metadata metadata metadata metadata category dropdown";
+  }
+  &.has-metadata {
+    grid-template-areas:
+      ". . . . . . dropdown"
+      "avatar update metadata metadata metadata category dropdown";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-areas:
+        ". . . . . . . dropdown"
+        "avatar update metadata metadata metadata metadata category dropdown";
+    }
+  }
+  &.excerpt-expanded {
+    grid-template-areas:
+      ". . . . . . . dropdown"
+      "avatar update metadata metadata metadata metadata metadata dropdown"
+      "excerpt excerpt excerpt excerpt excerpt . . dropdown"
+      "excerpt excerpt excerpt excerpt excerpt category category dropdown";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+      .post-excerpt {
+        display: none;
+      }
+    }
+    &.has-metadata {
+      grid-template-areas:
+        ". . . . . . . dropdown"
+        "avatar update metadata metadata metadata metadata metadata dropdown"
+        "excerpt excerpt excerpt excerpt excerpt . . dropdown"
+        "excerpt excerpt excerpt excerpt excerpt category category dropdown";
+    }
+  }
+  td.author-avatar {
+    grid-area: avatar;
+  }
+  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;
+    }
+  }
+  td.main-link .link-top-line {
+    display: contents;
+    .bookmark-metadata {
+      grid-area: metadata;
+    }
+    .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: center;
+    }
+  }
+  .post-metadata.topic-list-data.updated-at {
+    grid-area: update;
+    margin-left: auto;
+  }
+  td.activity .post-activity {
+    display: none;
+  }
+}
+
+// Assigned List
+.topic-list-item.assigned-list-item {
+  td.main-link .link-top-line {
+    grid-column: 1/-3;
+  }
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  grid-template-areas:
+    ". . . . . status dropdown"
+    "activity . . . likes-replies category dropdown";
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line {
+      grid-column: 1/-2 !important;
+    }
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-areas:
+      "category category . . . . status dropdown"
+      ". . . . . . . dropdown"
+      "activity . . . . . likes-replies dropdown";
+  }
+  .assign-topic-buttons {
+    display: contents;
+    .assign-actions-dropdown {
+      grid-area: dropdown;
+      align-self: center;
+    }
+  }
+  td.topic-category-status-data {
+    display: contents;
+  }
+  .topic-status-card {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+}
+
+// User Messages
+
+body.user-messages-page .topic-list-item {
+  td.topic-category-data,
+  td.topic-likes-replies-data,
+  td.topic-status-data {
+    display: none;
+  }
+  td.main-link .link-top-line {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+  }
+  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 {
+      display: none;
+    }
+  }
+}
+
+// Bulk select
+
+.bulk-select-enabled .topic-list-body .topic-list-item {
+  td.topic-likes-replies-data {
+    display: none;
+  }
+  td.main-link .link-top-line,
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 2/-1;
+    font-weight: 500;
+  }
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+  }
+  &.excerpt-expanded {
+    grid-template-areas:
+      "bulk-select . . . status" "bulk-select activity . . ."
+      "bulk-select excerpt excerpt excerpt category";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-areas:
+        "bulk-select category . . .  status"
+        "bulk-select . . . . ."
+        "bulk-select activity activity . . .";
+    }
+  }
+  grid-template-areas:
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+    label {
+      margin: 0;
+    }
+  }
+  @include breakpoint(large) {
+    grid-template-areas:
+      "bulk-select . . . status"
+      "bulk-select activity activity . category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-column: 2/-1;
+      grid-row: 2;
+      font-weight: 500;
+    }
+    grid-template-areas:
+      "bulk-select category . . .  status"
+      "bulk-select . . . . ."
+      "bulk-select activity activity . . .";
+  }
+}

scss/topic.scss

@@ -18,8 +18,9 @@
   min-width: unset; // why we have this?
   .timeline-scrollarea {
     border-left: 1px solid var(--accent-color);
-  }
+
     .timeline-scroller {
+      @include breakpoint("medium", $rule: min-width) {
         padding: 0.25em;
         border: 1px solid var(--accent-color);
         border-radius: 0.75em;
@@ -28,26 +29,41 @@
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
       }
-  .timelime-scroller-content {
+
-    display: flex;
+      .timeline-scroller-content {
-    flex-direction: column;
+        // display: flex;
-    gap: 0.25em;
+        // flex-direction: column;
+        // gap: 0.25em;
       }
       .timeline-replies,
       .timeline-ago {
         line-height: 1;
       }
-  .timeline-ago {
-    // font-size: var(--font-down-1);
     }
     .timeline-handle {
       background-color: var(--accent-color);
+      @include breakpoint("medium", $rule: min-width) {
         width: 3px;
         border-radius: 2px;
         height: calc(100% - 6px);
       }
+    }
+  }
 }
 
+//should probably get rid of this extra specificity class in core?
+.timeline-container.timeline-fullscreen {
+  @include breakpoint("medium", $rule: max-width) {
+    .topic-timeline .timeline-scrollarea-wrapper {
+    }
+    .topic-timeline
+      .timeline-scrollarea
+      .timeline-scroller
+      .timeline-scroller-content {
+      padding-right: 0.5em;
+    }
+  }
+}
 .container.posts,
 #topic-footer-buttons {
   padding: 0 24px;
@@ -101,3 +117,7 @@
 nav.post-controls .actions button {
   font-size: var(--font-0);
 }
+
+.archetype-private_message {
+  --pm-border-radius: var(--d-border-radius);
+}

settings.yml

@@ -0,0 +1,11 @@
+enable_welcome_banner:
+  default: true
+  description: "Overrides the core `enable welcome banner` site setting"
+
+search_experience:
+  type: enum
+  default: search_field
+  choices:
+    - search_field
+    - search_icon
+  description: "Overrides the core `search experience` site setting"

spec/system/horizon_high_level_spec.rb

@@ -25,11 +25,10 @@ describe "Horizon theme | High level", type: :system do
     topic_item = find(topic_list.topic_list_item_class(topic_1))
     expect(topic_item.all("td").map { |el| el["class"] }).to eq(
       [
-        "main-link clearfix topic-list-data",
+        "main-link topic-list-data",
-        "activity num topic-list-data age",
+        "topic-activity-data",
-        "topic-author-data",
+        "topic-status-data",
-        "topic-category-status-data",
+        "topic-category-data",
-        "topic-author-avatar-data",
         "topic-likes-replies-data",
       ],
     )