header search alignment

about.json

@@ -9,8 +9,7 @@
   "maximum_discourse_version": null,
   "assets": {},
   "modifiers": {
-    "svg_icons": ["fire"],
-    "serialize_topic_is_hot": true
+    "svg_icons": ["fire"]
   },
   "components": [
     "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
@@ -20,62 +19,22 @@
     "Horizon": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "595bca"
+      "header_background": "f5f8ff",
+      "tertiary": "595bca",
+      "tertiary-low": "d8d9f3",
+      "tertiary-50": "f5f8ff",
+      "selected": "d8d9f3",
+      "hover": "ebebf9"
     },
     "Horizon Dark": {
-      "primary": "ffffff",
-      "secondary": "1A1A1A",
-      "tertiary": "595bca"
-    },
-    "Royal": {
-      "primary": "1A1A1A",
-      "secondary": "ffffff",
-      "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"
+      "primary": "F1EFF9",
+      "secondary": "1e1a36",
+      "header_background": "00091d",
+      "header_primary": "F5F8FF",
+      "tertiary": "6465ab",
+      "tertiary-50": "131124",
+      "selected": "1e1a36",
+      "hover": "131124"
     }
   }
-}
+}

desktop/desktop.scss

@@ -1,63 +0,0 @@
-.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/next-gen.gjs

@@ -1,18 +1,8 @@
 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

@@ -1,7 +0,0 @@
-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

@@ -0,0 +1,6 @@
+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

@@ -1,50 +0,0 @@
-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.replyCount 1)}}
-    <span class="topic-replies">{{icon "reply"}}{{@topic.replyCount}}</span>
+  {{#if (gt @topic.posts_count 1)}}
+    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
   {{/if}}
 </template>;
 

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

@@ -1,36 +1,115 @@
 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 badge() {
-    if (this.args.topic.is_hot) {
-      return {
-        icon: "fire",
-        text: "topic_hot",
-        className: "--hot",
-      };
-    }
+  get canAct() {
+    return this.currentUser && !this.args.disableActions;
+  }
 
-    if (this.args.topic.pinned) {
-      return {
-        icon: "thumbtack",
-        text: "topic_pinned",
-        className: "--pinned",
-      };
+  get statusClass() {
+    let classes = ["topic-status-card"];
+    if (this.args.topic.bookmarked) {
+      classes.push("--bookmark");
+    } else if (this.args.topic.closed && this.args.topic.archived) {
+      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(" ");
+  }
 
-    return null;
+  get heatMap() {
+    return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
+  }
+
+  @action
+  togglePinned(event) {
+    event.preventDefault();
+    this.args.topic.togglePinnedForUser();
   }
 
   <template>
-    {{#if this.badge}}
-      <span class="topic-status-card {{this.badge.className}}">{{icon
-          this.badge.icon
-        }}{{i18n (themePrefix this.badge.text)}}</span>
+    {{#if @topic.bookmarked}}
+      <span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
+          (themePrefix "topic_bookmarked")
+        }}</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,25 +1,27 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import TopicActivityColumn from "../components/card/topic-activity-column";
+import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-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 TopicActivity = <template>
-  <td class="topic-activity-data">
-    <TopicActivityColumn @topic={{@topic}} />
+const TopicAuthor = <template>
+  <td class="topic-author-data">
+    <TopicAuthorColumn @topic={{@topic}} />
   </td>
 </template>;
 
-const TopicStatus = <template>
-  <td class="topic-status-data">
-    <TopicStatusColumn @topic={{@topic}} />
+const TopicAuthorAvatar = <template>
+  <td class="topic-author-avatar-data">
+    <TopicAuthorAvatarColumn @topic={{@topic}} />
   </td>
 </template>;
 
-const TopicCategory = <template>
-  <td class="topic-category-data">
+const TopicCategoryStatus = <template>
+  <td class="topic-category-status-data">
     <TopicCategoryColumn @topic={{@topic}} />
+    <TopicStatusColumn @topic={{@topic}} />
   </td>
 </template>;
 
@@ -38,17 +40,17 @@ export default {
       api.registerValueTransformer(
         "topic-list-columns",
         ({ value: columns }) => {
-          columns.add("topic-activity", {
-            item: TopicActivity,
-            after: "title",
+          columns.add("topic-author", {
+            item: TopicAuthor,
+            after: "activity",
           });
-          columns.add("topic-status", {
-            item: TopicStatus,
+          columns.add("topic-category-status", {
+            item: TopicCategoryStatus,
             after: "topic-author",
           });
-          columns.add("topic-category", {
-            item: TopicCategory,
-            after: "topic-status",
+          columns.add("topic-author-avatar", {
+            item: TopicAuthorAvatar,
+            after: "topic-category-status",
           });
           columns.add("topic-likes-replies", {
             item: TopicLikesReplies,
@@ -57,7 +59,6 @@ export default {
           columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
-          columns.delete("activity");
           return columns;
         }
       );
@@ -65,12 +66,8 @@ export default {
       api.registerValueTransformer(
         "topic-list-item-class",
         ({ value: classes, context }) => {
-          if (
-            context.topic.is_hot ||
-            context.topic.pinned ||
-            context.topic.pinned_globally
-          ) {
-            classes.push("--has-status-card");
+          if (context.topic.pinned || context.topic.pinned_globally) {
+            classes.push("--pinned");
           }
           return classes;
         }

locales/en.yml

@@ -1,9 +1,12 @@
 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,7 +51,3 @@ 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,55 +9,6 @@
     }
   }
 }
-
-#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/header.scss

@@ -73,13 +73,15 @@
   color: var(--accent-text-color);
 }
 
+/*
 .user-menu .quick-access-panel li,
 .user-notifications-list li,
 .user-menu .quick-access-panel li.do-not-disturb,
 .menu-panel .panel-body-bottom .btn,
 .menu-panel .panel-body-bottom .btn:hover {
-  // background-color: var(--d-content-background);
+   background-color: var(--d-content-background);
 }
+*/
 
 body.login-page,
 body.signup-page,
@@ -90,3 +92,117 @@ body.activate-account-page {
     background: var(--background-color);
   }
 }
+
+// attempt to center the title
+// by mirroring the body grid
+
+.has-sidebar-page {
+  .d-header > .wrap {
+    .contents {
+      display: grid;
+      grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
+      grid-template-rows: auto;
+      gap: 0; // gap will ruin the alignment
+
+      .header-sidebar-toggle,
+      .home-logo-wrapper-outlet {
+        grid-column: 1;
+        grid-row: 1;
+        justify-self: start;
+      }
+
+      .home-logo-wrapper-outlet {
+        margin-left: 3.5em;
+        margin-right: 0;
+        max-width: 13em; // crosses into column 2 beyond this
+        overflow: hidden;
+      }
+
+      .extra-info-wrapper {
+        grid-column: 2;
+        grid-row: 1;
+
+        justify-self: center;
+
+        max-width: 59em; // width of topic + timeline
+        padding: 0;
+
+        @media screen and (max-width: 1350px) {
+          justify-self: start;
+
+          box-sizing: border-box;
+          padding-left: 3em;
+        }
+      }
+
+      .panel {
+        grid-column: 2;
+        grid-row: 1;
+        justify-self: end;
+
+        padding-right: 1em;
+
+        // the title and panel don't exist on the same plane
+        // so we let the panel overlap the title
+        // and fade it out so it looks intentional
+
+        background: var(--background-color);
+
+        @media screen and (max-width: 850px) {
+          background: var(--secondary);
+        }
+
+        &:before {
+          content: "";
+          background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            var(--background-color) 80%
+          );
+          @media screen and (max-width: 850px) {
+            background: linear-gradient(
+              90deg,
+              rgba(255, 255, 255, 0) 0%,
+              var(--secondary) 80%
+            );
+          }
+          top: -0.5em;
+          bottom: 0;
+          height: 4em;
+          width: 3em;
+          left: -3em;
+          position: absolute;
+          display: flex;
+        }
+      }
+
+      // these will probably cause problems when used
+      .before-header-panel-outlet,
+      .after-header-panel-outlet {
+        grid-row: 1;
+      }
+
+      .before-header-panel-outlet {
+        &:has(.search-banner) {
+          grid-column: 2;
+        }
+
+        @media screen and (max-width: 1280px) {
+          .floating-search-input {
+            margin-left: 2.75em;
+            padding-right: 15em;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    &.search-header--visible
+      .floating-search-input
+      .search-banner-inner.wrap
+      .search-menu {
+      width: 100%;
+    }
+  }
+}

scss/main.scss

@@ -4,17 +4,10 @@
 
 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);
@@ -80,8 +73,7 @@ body:not(.has-full-page-chat) {
       .body-page,
       .container.badges,
       .topic-above-footer-buttons-outlet .presence-users,
-      .global-notice,
-      .container.tags-index {
+      .global-notice {
         @include breakpoint(medium, $rule: min-width) {
           max-width: 1000px;
           margin-inline: auto;

scss/misc.scss

@@ -40,6 +40,10 @@
   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(--d-content-background);
+    background-color: var(--secondary);
   }
 }
 #main-outlet-wrapper {
@@ -36,7 +36,6 @@
           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;
@@ -85,11 +84,24 @@
         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-s) !important;
+      padding-inline: var(--spacing-inline-m) !important;
 
       .title-wrapper {
         gap: var(--spacing-block-s);
@@ -119,12 +131,6 @@
           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: z("base");
+  z-index: 100;
   padding: 1.5rem 0 1rem 0;
   max-width: unset;
 

scss/search-banner.scss

@@ -1,7 +1,3 @@
-.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,3 +1,16 @@
+// 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;
 }
@@ -16,82 +29,136 @@
   gap: 1em;
   @include breakpoint(medium) {
     gap: 0.5em;
-    padding: 0 0.5em;
-  }
-  @include breakpoint(mobile-extra-large) {
-    gap: 0;
-    padding: 0;
   }
 }
 
-.topic-list-body .topic-list-item {
+.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-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: 20px min-content min-content auto min-content;
-  grid-template-rows: auto minmax(20px, auto);
+  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:
-    ". . . . status"
-    "activity . . likes-replies category";
+    "avatar author status status . . activity"
+    ". topic-title topic-title topic-title likes-replies likes-replies category";
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
-  td.main-link .link-top-line {
-    grid-row: 1/2;
-    grid-column: 1/-1;
-    font-weight: 500;
-  }
-  &.--has-status-card td.main-link .link-top-line {
-    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 category category category category status"
-      ". . . . . ."
-      "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-columns: 44px repeat(6, 1fr) auto;
+    grid-template-rows: 22px auto auto 30px;
     grid-template-areas:
-      ". . . . status"
-      "activity . . . ."
-      "excerpt excerpt excerpt likes-replies category";
-    @include breakpoint(extra-large) {
+      "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:
-        ". . . . status"
-        "activity . . . ."
-        "excerpt excerpt excerpt likes-replies category";
+        "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";
     }
-    @include breakpoint(mobile-extra-large) {
+    @media screen and (max-width: $small) {
+      grid-template-columns: 25px auto repeat(6, 1fr);
       grid-template-rows: auto auto auto;
       grid-template-areas:
-        "category category category category status"
-        ". . . . ."
-        "activity . . . likes-replies";
+        "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";
       .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,
@@ -106,54 +173,32 @@
     padding: 0;
   }
 
-  // topic activity, avatar, text
-  .topic-activity-data {
-    grid-area: activity;
+  // avatar & author
+  .topic-author-avatar-data {
+    grid-area: avatar;
+    margin: 0;
   }
-  .topic-activity {
+  .topic-author-avatar img.avatar {
+    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.25em;
-    font-size: var(--font-down-1);
-    height: 100%;
+    gap: 0.5em;
     align-items: center;
   }
-
-  .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;
-    }
+  .topic-author-data .topic-author {
+    color: var(--primary-500);
   }
 
   // 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;
@@ -164,22 +209,40 @@
     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.--pinned {
+  .topic-status-card.--bookmark {
+    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: #e45735;
+    --status-color: var(--hot-color);
+  }
+
+  // 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);
   }
 
@@ -187,16 +250,11 @@
     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.new-topic {
+  .topic-post-badges .badge-notification.unread-posts {
     background-color: var(--tertiary);
     color: var(--tertiary);
     overflow: hidden;
@@ -209,8 +267,7 @@
 
   // excerpt
   .topic-excerpt {
-    grid-row: 3 / -1;
-    grid-column: 1 / -2;
+    grid-area: excerpt;
     margin: 0;
     font-size: var(--font-down-2);
   }
@@ -232,27 +289,29 @@
 
   td.topic-category-status-data {
     display: contents;
-  }
-  td.topic-category-data {
-    grid-area: category;
-    display: flex;
-    justify-content: flex-end;
-    @include breakpoint(mobile-extra-large) {
-      justify-content: flex-start;
+    @media screen and (max-width: $small) {
+      grid-area: category-status;
+      display: flex;
+      gap: 0.5em;
+      align-items: center;
     }
   }
-  td.topic-category-data .badge-category__wrapper,
-  td.main-link .link-bottom-line .badge-category__wrapper {
+  td.topic-category-status-data .badge-category__wrapper {
+    grid-area: category;
+  }
+
+  td.topic-category-status-data .badge-category__wrapper {
+    overflow: unset;
     border-radius: var(--d-border-radius);
-    padding: 3px 6px;
+    padding: 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)
     );
 
-    @include breakpoint(tablet) {
+    @media screen and (max-width: $small) {
       padding: 2px 6px;
-      font-size: var(--font-down-2);
     }
 
     .badge-category__name {
@@ -280,7 +339,8 @@
     gap: 0.5em;
     justify-content: flex-end;
     height: min-content;
-    align-self: center;
+    align-self: flex-end;
+    padding-bottom: 4px;
   }
   .topic-likes-replies-data .topic-likes,
   .topic-likes-replies-data .topic-replies {
@@ -295,6 +355,10 @@
   }
 }
 
+.topic-list-header {
+  display: none;
+}
+
 .topic-list-item {
   background: var(--d-content-background);
   box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
@@ -309,229 +373,3 @@
       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,52 +18,36 @@
   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;
-        padding-left: 0.5em;
-        margin-left: calc(-0.5em - 2.5px);
-        background: var(--d-content-background);
-        height: 40px !important; // height is coming from element style have no other choice
-      }
-
-      .timeline-scroller-content {
-        // display: flex;
-        // flex-direction: column;
-        // gap: 0.25em;
-      }
-      .timeline-replies,
-      .timeline-ago {
-        line-height: 1;
-      }
-    }
-    .timeline-handle {
-      background-color: var(--accent-color);
-      @include breakpoint("medium", $rule: min-width) {
-        width: 3px;
-        border-radius: 2px;
-        height: calc(100% - 6px);
-      }
-    }
+  }
+  .timeline-scroller {
+    padding: 0.25em;
+    border: 1px solid var(--accent-color);
+    border-radius: 0.75em;
+    padding-left: 0.5em;
+    margin-left: calc(-0.5em - 2.5px);
+    background: var(--d-content-background);
+    height: 40px !important; // height is coming from element style have no other choice
+  }
+  .timelime-scroller-content {
+    display: flex;
+    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);
+    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;
@@ -117,7 +101,3 @@
 nav.post-controls .actions button {
   font-size: var(--font-0);
 }
-
-.archetype-private_message {
-  --pm-border-radius: var(--d-border-radius);
-}

settings.yml

@@ -1,11 +0,0 @@
-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,10 +25,11 @@ 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 topic-list-data",
-        "topic-activity-data",
-        "topic-status-data",
-        "topic-category-data",
+        "main-link clearfix topic-list-data",
+        "activity num topic-list-data age",
+        "topic-author-data",
+        "topic-category-status-data",
+        "topic-author-avatar-data",
         "topic-likes-replies-data",
       ],
     )