UX: Adjust bulk select action placement

UX: adjust styles to meet core changes (#148 )
UX: Adjust spacing for more room (#146 )
2025-04-24 12:16:01 -05:00 · 2025-04-23 14:44:00 -05:00 · 2025-04-21 16:36:03 -05:00 · 2025-04-18 14:08:34 -04:00 · 2025-04-18 12:23:44 +10:00 · 2025-04-17 21:16:43 -05:00
48 changed files with 1893 additions and 646 deletions
@@ -1,5 +1,3 @@
-# next-gen
+Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.

-**Theme Summary**
-
-For more information, please see: **url to meta topic**
+https://meta.discourse.org/t/horizon-theme/360486
@@ -1,81 +1,134 @@
 {
-  "name": "Horizon Theme",
+  "name": "Horizon",
  "authors": "Design Team",
-  "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
-  "license_url": "TODO: Put your theme's LICENSE URL here",
-  "learn_more": "TODO",
+  "about_url": "https://meta.discourse.org/t/horizon-theme/360486",
+  "license_url": "https://github.com/discourse/horizon/blob/main/LICENSE",
+  "learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
  "theme_version": "0.0.1",
-  "minimum_discourse_version": null,
-  "maximum_discourse_version": null,
-  "assets": {},
  "modifiers": {
    "svg_icons": ["fire"],
    "serialize_topic_is_hot": true
  },
-  "components": [
-    "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
-    "https://github.com/discourse/discourse-full-width-component.git"
-  ],
  "color_schemes": {
    "Horizon": {
      "primary": "1A1A1A",
      "secondary": "ffffff",
-      "tertiary": "595bca"
+      "tertiary": "595bca",
+      "tertiary-med-or-tertiary": "595bca",
+      "selected": "d7dfff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "E1E8FF"
    },
    "Horizon Dark": {
      "primary": "ffffff",
      "secondary": "1A1A1A",
-      "tertiary": "595bca"
+      "tertiary": "595bca",
+      "tertiary-med-or-tertiary": "595bca",
+      "selected": "3b3e56",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "333548"
    },
    "Royal": {
      "primary": "1A1A1A",
      "secondary": "ffffff",
-      "tertiary": "4169e1"
+      "tertiary": "1F7BC1",
+      "tertiary-med-or-tertiary": "1F7BC1",
+      "selected": "c7e3ff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "D6EBFF"
    },
    "Royal Dark": {
      "primary": "ffffff",
      "secondary": "1A1A1A",
-      "tertiary": "4169e1"
+      "tertiary": "1F7BC1",
+      "tertiary-med-or-tertiary": "1F7BC1",
+      "selected": "3a455f",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "323B4E"
    },
    "Clover": {
      "primary": "1A1A1A",
      "secondary": "ffffff",
-      "tertiary": "45a06e"
+      "tertiary": "39845B",
+      "tertiary-med-or-tertiary": "39845B",
+      "selected": "c6f1d5",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "D5F5E0"
    },
    "Clover Dark": {
      "primary": "ffffff",
      "secondary": "1A1A1A",
-      "tertiary": "45a06e"
+      "tertiary": "39845B",
+      "tertiary-med-or-tertiary": "39845B",
+      "selected": "47594e",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "3C4A40"
    },
    "Lily": {
      "primary": "1A1A1A",
      "secondary": "ffffff",
-      "tertiary": "cc338c"
+      "tertiary": "cc338c",
+      "tertiary-med-or-tertiary": "cc338c",
+      "selected": "ffc8ee",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "FFD7F3"
    },
    "Lily Dark": {
      "primary": "ffffff",
      "secondary": "1A1A1A",
-      "tertiary": "cc338c"
+      "tertiary": "cc338c",
+      "tertiary-med-or-tertiary": "cc338c",
+      "selected": "5f3e4e",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "4E3640"
    },
    "Violet": {
      "primary": "1A1A1A",
      "secondary": "ffffff",
-      "tertiary": "9b15de"
+      "tertiary": "9b15de",
+      "tertiary-med-or-tertiary": "9b15de",
+      "selected": "feccff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "FFD9FF"
    },
    "Violet Dark": {
      "primary": "ffffff",
      "secondary": "1A1A1A",
-      "tertiary": "9b15de"
+      "tertiary": "9b15de",
+      "tertiary-med-or-tertiary": "9b15de",
+      "selected": "4c385c",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "40314C"
    },
    "Marigold": {
      "primary": "1A1A1A",
      "secondary": "ffffff",
-      "tertiary": "d3881f"
+      "tertiary": "d3881f",
+      "tertiary-med-or-tertiary": "d3881f",
+      "selected": "ffdcb2",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "FFE6C6"
    },
    "Marigold Dark": {
      "primary": "ffffff",
      "secondary": "1A1A1A",
-      "tertiary": "d3881f"
+      "tertiary": "d3881f",
+      "tertiary-med-or-tertiary": "d3881f",
+      "selected": "6c5b49",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "584B3E"
    }
  }
-}
+}
@@ -0,0 +1,107 @@
+html {
+  --accent-color: #{$tertiary} !important;
+  --accent-text-color: #ffffff;
+  // Background Colors
+  --background-color: light-dark(
+    oklch(from #{$tertiary} 96% calc(c * 0.125) h),
+    oklch(from #{$tertiary} 10% 0.025 h)
+  ) !important;
+  --d-content-background: light-dark(
+    oklch(from #{$secondary} calc(2 * l) c h),
+    oklch(from #{$secondary} l c h)
+  ) !important;
+  // HeaderColors
+  --header_primary-low-mid: light-dark(
+    oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
+    oklch(from #{$tertiary} l calc(c * 0.25) h)
+  ) !important;
+  --header_primary-medium: light-dark(
+    oklch(from #{$tertiary} 54% calc(c * 0.5) h),
+    oklch(from #{$tertiary} calc(l * 1.35) calc(c * 0.25) h)
+  ) !important;
+
+  // Sidebar Colors
+  --d-sidebar-border-color: light-dark(
+    oklch(from #{$tertiary} 88% calc(c * 0.25) h),
+    oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
+  ) !important;
+  --d-sidebar-link-color: light-dark(
+    oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
+    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
+  ) !important;
+  --d-sidebar-active-color: #{$primary} !important;
+  --d-sidebar-suffix-color: light-dark(
+    oklch(from #{$tertiary} l calc(c * 0.9) h),
+    oklch(from #{$tertiary} l calc(c * 0.9) h)
+  ) !important;
+
+  // Other Colors
+  --d-selected: light-dark(
+    oklch(from #{$tertiary} 92% calc(c * 0.5) h),
+    oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
+  ) !important;
+
+  --d-nav-color--active: light-dark(
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 1.2) c h)
+  ) !important;
+
+  --d-nav-color--hover: light-dark(
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 1.2) c h)
+  ) !important;
+
+  --link-color: light-dark(
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 0.95) c h)
+  ) !important;
+  --link-color-hover: light-dark(
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
+  ) !important;
+  --tertiary-hover: #{$tertiary} !important;
+
+  // Search Colors
+  --search-color: light-dark(
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
+  ) !important;
+
+  // Topic Card Colors
+  --topic-card-shadow: light-dark(
+    oklch(from #{$tertiary} calc(l * 1.85) calc(c * 0.5) h),
+    oklch(from #{$tertiary} calc(l * 0.2) calc(c * 0.01) h / 0.25)
+  ) !important;
+
+  // Button Colors
+  --button-box-shadow: light-dark(
+    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
+    oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
+  ) !important;
+
+  --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
+  --d-sidebar-highlight-hover-background: var(--d-selected) !important;
+  --d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
+  --d-sidebar-header-color: var(--d-sidebar-link-color) !important;
+  --d-sidebar-header-icon-color: var(--d-sidebar-link-color) !important;
+  --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color) !important;
+  --d-sidebar-background: var(--background-color) !important;
+  --d-sidebar-footer-fade: var(--background-color) !important;
+  --d-sidebar-prefix-background: var(--d-selected) !important;
+  --d-sidebar-active-prefix-background: light-dark(
+    oklch(from var(--d-selected) calc(l * 0.85) c h),
+    oklch(from var(--d-selected) calc(l * 0.7) c h)
+  ) !important;
+  --d-sidebar-highlight-prefix-background: light-dark(
+    oklch(from var(--d-selected) calc(l * 0.85) c h),
+    oklch(from var(--d-selected) calc(l * 0.7) c h)
+  ) !important;
+  --d-sidebar-highlight-suffix-color: var(
+    --d-sidebar-active-suffix-color
+  ) !important;
+  --d-sidebar-highlight-color: var(--primary) !important;
+  --d-sidebar-highlight-background: var(--d-selected) !important;
+  --d-sidebar-section-link-icon-size: 1em !important;
+  --d-hover: oklch(from var(--d-selected) l c h / 0.75) !important;
+  --d-input-bg-color: var(--d-content-background) !important;
+}
@@ -2,16 +2,18 @@
@import "buttons";
@import "chat";
@import "color-choice";
-@import "color-exploration";
@import "composer";
+@import "composer-peek-mode";
@import "header";
@import "hiddenstuff";
+@import "login";
@import "main";
@import "misc";
@import "mobile-stuff";
@import "nav-pills";
-@import "search-banner";
+@import "welcome-banner";
@import "sidebar";
+@import "sidebar-new-topic-button";
@import "topic";
@import "topic-cards";
@import "variables";
@@ -0,0 +1,6 @@
+<script>
+  if(!CSS.supports("(color: hsl(from white h s l))")){
+    window.unsupportedBrowser = true;
+    window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
+  }
+</script>
@@ -1,63 +1,2 @@
-.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;
-    }
-  }
-}
+@import "desktop-horizon-fixes";
+@import "desktop-full-width";
@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import ComposerPeekModeToggle from "../components/composer-peek-mode-toggle";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("before-composer-toggles", ComposerPeekModeToggle);
+});
@@ -0,0 +1,16 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("0.8", (api) => {
+  document.body.classList.add("full-width-enabled");
+
+  // When the sidebar is visible, force the HomeLogo to be in an 'un-minimized' state.
+  api.registerValueTransformer?.(
+    "home-logo-minimized",
+    ({ value, context }) => {
+      if (value && context.showSidebar) {
+        return false;
+      }
+      return value;
+    }
+  );
+});
@@ -1,12 +1,10 @@
 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";
+import UserColorPaletteSelector from "../components/user-color-palette-selector";

 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.renderInOutlet("sidebar-footer-actions", UserColorPaletteSelector);

  api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
    return settings.enable_welcome_banner;
@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import SidebarNewTopicButton from "../components/sidebar-new-topic-button";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("before-sidebar-sections", SidebarNewTopicButton);
+});
@@ -1,42 +1,56 @@
 import Component from "@glimmer/component";
 import avatar from "discourse/helpers/avatar";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
 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
+  get topicUser() {
    if (
      moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
    ) {
-      return "user_updated";
+      return {
+        user: undefined,
+        username: undefined,
+        activityText: "user_updated",
+        class: "--updated",
+      };
    }

    if (this.args.topic.posts_count > 1) {
-      return "user_replied";
+      return {
+        user: this.args.topic.lastPosterUser,
+        username: this.args.topic.last_poster_username,
+        activityText: "user_replied",
+        class: "--replied",
+      };
    } else if (this.args.topic.posts_count === 1) {
-      return "user_posted";
+      return {
+        user: this.args.topic.creator,
+        username: this.args.topic.creator.username,
+        activityText: "user_posted",
+        class: "--posted",
+      };
    }
  }

  <template>
-    <span class="topic-activity">
+    <span class={{concatClass "topic-activity" this.topicUser.class}}>
      <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>
+        {{#if this.topicUser.user}}
+          {{avatar this.topicUser.user imageSize="small"}}
        {{else}}
-          {{avatar @topic.creator imageSize="small"}}
-          <span
-            class="topic-activity__username"
-          >@{{@topic.creator.username}}</span>
+          {{icon "pencil"}}
        {{/if}}
      </div>
+      {{#if this.topicUser.username}}
+        <span
+          class="topic-activity__username"
+        >{{this.topicUser.username}}</span>
+      {{/if}}
      <div class="topic-activity__reason">
-        {{i18n (themePrefix this.activityText)}}
+        {{i18n (themePrefix this.topicUser.activityText)}}
      </div>
      <div class="topic-activity__time">
        {{formatDate
@@ -1,9 +0,0 @@
-import avatar from "discourse/helpers/avatar";
-
-const TopicAuthorAvatarColumn = <template>
-  <span class="topic-author-avatar">
-    {{avatar @topic.creator imageSize="large"}}
-  </span>
-</template>;
-
-export default TopicAuthorAvatarColumn;
@@ -1,5 +0,0 @@
-const TopicAuthorColumn = <template>
-  <span class="topic-author">@{{@topic.creator.username}}</span>
-</template>;
-
-export default TopicAuthorColumn;
@@ -3,7 +3,7 @@ import gt from "truth-helpers/helpers/gt";

 const TopicRepliesColumn = <template>
  {{#if (gt @topic.replyCount 1)}}
-    <span class="topic-replies">{{icon "reply"}}{{@topic.replyCount}}</span>
+    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
  {{/if}}
 </template>;

@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import bodyClass from "discourse/helpers/body-class";
+
+export default class ComposerPeekModeToggle extends Component {
+  @service composer;
+  @service keyValueStore;
+
+  @tracked
+  peekModeActive = this.keyValueStore.getItem("peekModeActive") === "true";
+
+  get bodyCssClass() {
+    return this.peekModeActive ? "peek-mode-active" : "";
+  }
+
+  @action
+  togglePeekMode() {
+    this.peekModeActive = !this.peekModeActive;
+    this.keyValueStore.setItem("peekModeActive", this.peekModeActive);
+    if (this.composer.showPreview) {
+      this.composer.togglePreview();
+    }
+  }
+
+  <template>
+    {{bodyClass this.bodyCssClass}}
+    <DButton
+      @action={{this.togglePeekMode}}
+      @preventFocus={{true}}
+      @icon="discourse-sidebar"
+      class="btn-mini-toggle no-text peek-mode-toggle btn-transparent"
+    />
+  </template>
+}
@@ -1,12 +0,0 @@
-import Component from "@glimmer/component";
-import { concat } from "@ember/helper";
-import { service } from "@ember/service";
-import htmlClass from "discourse/helpers/html-class";
-
-export default class CustomColorHtmlClass extends Component {
-  @service customColor;
-
-  <template>
-    {{htmlClass (concat "custom-color-" this.customColor.color)}}
-  </template>
-}
@@ -1,60 +0,0 @@
-import icon from "discourse/helpers/d-icon";
-import DMenu from "float-kit/components/d-menu";
-import SitePaletteMenuItem from "./site-palette-menu-item";
-
-const PALETTES = [
-  {
-    label: "Marigold",
-    name: "marigold",
-    color: "#d3881f",
-  },
-  {
-    label: "Violet",
-    name: "violet",
-    color: "#9b15de",
-  },
-  {
-    label: "Lily",
-    name: "lily",
-    color: "#CC336F",
-  },
-  {
-    label: "Clover",
-    name: "clover",
-    color: "#45a06e",
-  },
-  {
-    label: "Royal",
-    name: "royal",
-    color: "#4169e1",
-  },
-  {
-    label: "Horizon",
-    name: "horizon",
-    color: "#595bca",
-  },
-];
-
-export const DEFAULT_PALETTE_NAME = "horizon";
-
-<template>
-  <DMenu
-    @identifier="user-color-palette"
-    @placementStrategy="fixed"
-    class="btn-flat user-color-palette sidebar-footer-actions-button"
-    @inline={{true}}
-  >
-    <:trigger>
-      {{icon "paintbrush"}}
-    </:trigger>
-    <:content>
-      <div class="color-palette-menu">
-        <div class="color-palette-menu__content">
-          {{#each PALETTES as |colorPalette|}}
-            <SitePaletteMenuItem @colorPalette={{colorPalette}} />
-          {{/each}}
-        </div>
-      </div>
-    </:content>
-  </DMenu>
-</template>
@@ -2,10 +2,14 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { bind } from "discourse/lib/decorators";

+const DO_NOT_RENDER_LIST = ["login"];
+
 export default class ExperimentalScreen extends Component {
+  @service router;
  @tracked left = 0;
  @tracked right = 0;
  resizeObserver;
@@ -28,6 +32,10 @@ export default class ExperimentalScreen extends Component {
    );
  }

+  get shouldRender() {
+    return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
+  }
+
  @action
  onInsert(element) {
    this.calculateDistance(element);
@@ -42,16 +50,18 @@ export default class ExperimentalScreen extends Component {
  }

  <template>
-    <ul
-      class="experimental-screen"
-      {{didInsert this.onInsert}}
-      style={{this.distanceStyles}}
-    >
-      <li class="experimental-screen__top-left"></li>
-      <li class="experimental-screen__top-right"></li>
-      <li class="experimental-screen__bottom-left"></li>
-      <li class="experimental-screen__bottom-right"></li>
-      <li class="experimental-screen__bottom-bar"></li>
-    </ul>
+    {{#if this.shouldRender}}
+      <ul
+        class="experimental-screen"
+        {{didInsert this.onInsert}}
+        style={{this.distanceStyles}}
+      >
+        <li class="experimental-screen__top-left"></li>
+        <li class="experimental-screen__top-right"></li>
+        <li class="experimental-screen__bottom-left"></li>
+        <li class="experimental-screen__bottom-right"></li>
+        <li class="experimental-screen__bottom-bar"></li>
+      </ul>
+    {{/if}}
  </template>
 }
@@ -0,0 +1,96 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import { service } from "@ember/service";
+import { gt } from "truth-helpers";
+import CreateTopicButton from "discourse/components/create-topic-button";
+import not from "truth-helpers/helpers/not";
+
+export default class SidebarNewTopicButton extends Component {
+  @service composer;
+  @service currentUser;
+  @service siteSettings;
+  @service router;
+
+  @tracked category;
+  @tracked tag;
+
+  get shouldRender() {
+    return this.currentUser && !this.router.currentRouteName.includes("admin");
+  }
+
+  get canCreateTopic() {
+    return this.currentUser?.can_create_topic;
+  }
+
+  get draftCount() {
+    return this.currentUser?.get("draft_count");
+  }
+
+  get createTopicTargetCategory() {
+    if (this.category?.canCreateTopic) {
+      return this.category;
+    }
+
+    if (this.siteSettings.default_subcategory_on_read_only_category) {
+      return this.category?.subcategoryWithCreateTopicPermission;
+    }
+  }
+
+  get tagRestricted() {
+    return this.tag?.staff;
+  }
+
+  get createTopicDisabled() {
+    return (
+      (this.category && !this.createTopicTargetCategory) ||
+      (this.tagRestricted && !this.currentUser.staff)
+    );
+  }
+
+  get categoryReadOnlyBanner() {
+    if (this.category && this.currentUser && this.createTopicDisabled) {
+      return this.category.read_only_banner;
+    }
+  }
+
+  get createTopicClass() {
+    const baseClasses = "btn-default sidebar-new-topic-button";
+    return this.categoryReadOnlyBanner
+      ? `${baseClasses} disabled`
+      : baseClasses;
+  }
+
+  @action
+  createNewTopic() {
+    this.composer.openNewTopic({ category: this.category, tags: this.tag?.id });
+  }
+
+  @action
+  getCategoryandTag() {
+    this.category = this.router.currentRoute.attributes?.category || null;
+    this.tag = this.router.currentRoute.attributes?.tag || null;
+  }
+
+  <template>
+    {{#if this.shouldRender}}
+      <div
+        class="sidebar-new-topic-button__wrapper"
+        {{didInsert this.getCategoryandTag}}
+        {{didUpdate this.getCategoryandTag this.router.currentRoute}}
+      >
+        <CreateTopicButton
+          @canCreateTopic={{this.canCreateTopic}}
+          @action={{this.createNewTopic}}
+          @disabled={{this.createTopicDisabled}}
+          @label="topic.create"
+          @btnClass={{this.createTopicClass}}
+          @canCreateTopicOnTag={{not this.tagRestricted}}
+          @showDrafts={{gt this.draftCount 0}}
+        />
+      </div>
+    {{/if}}
+  </template>
+}
@@ -1,40 +1,43 @@
 import Component from "@glimmer/component";
-import { fn } from "@ember/helper";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";

-export default class SitePaletteMenuItem extends Component {
-  @service customColor;
+export default class UserColorPaletteMenuItem extends Component {
+  @service site;
+  @service session;

  get siteStyle() {
-    return `--icon-color: ${this.args.colorPalette.color}`;
+    return `--icon-color: ${this.args.colorPalette.accent}`;
  }

  get activeClass() {
-    if (this.customColor.color === this.args.colorPalette.name) {
+    if (this.args.selectedColorPaletteId === this.args.colorPalette.id) {
      return "active";
    }
  }

  @action
-  handleInput(colorPalette) {
-    this.customColor.setColor(colorPalette.name);
+  paletteSelected() {
+    this.args.paletteSelected(this.args.colorPalette);
  }

  <template>
-    <div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
+    <div
+      class="user-color-palette-menu__item"
+      data-color-palette={{@colorPalette.name}}
+    >
      <DButton
        class={{concatClass
-          "btn-flat color-palette-menu__item-choice"
+          "btn-flat user-color-palette-menu__item-choice"
          this.activeClass
        }}
        style={{htmlSafe this.siteStyle}}
        @icon="circle"
-        @translatedLabel={{@colorPalette.label}}
-        @action={{fn this.handleInput @colorPalette}}
+        @translatedLabel={{@colorPalette.name}}
+        @action={{this.paletteSelected}}
      />
    </div>
  </template>
@@ -0,0 +1,209 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import { isEmpty } from "@ember/utils";
+import { Promise } from "rsvp";
+import concatClass from "discourse/helpers/concat-class";
+import icon from "discourse/helpers/d-icon";
+import { reload } from "discourse/helpers/page-reloader";
+import { ajax } from "discourse/lib/ajax";
+import {
+  listColorSchemes,
+  updateColorSchemeCookie,
+} from "discourse/lib/color-scheme-picker";
+import cookie from "discourse/lib/cookie";
+import DMenu from "float-kit/components/d-menu";
+import UserColorPaletteMenuItem from "./user-color-palette-menu-item";
+
+const HORIZON_PALETTES = [
+  "Horizon",
+  "Marigold",
+  "Violet",
+  "Lily",
+  "Clover",
+  "Royal",
+];
+
+export default class UserColorPaletteSelector extends Component {
+  @service currentUser;
+  @service keyValueStore;
+  @service site;
+  @service session;
+  @service interfaceColor;
+  @tracked anonColorPaletteId = this.#loadAnonColorPalette();
+  @tracked userColorPaletteId = this.session.userColorSchemeId;
+  @tracked cssLoaded = true;
+
+  get userColorPalettes() {
+    const availablePalettes = listColorSchemes(this.site)
+      .map((userPalette) => {
+        return {
+          ...userPalette,
+          accent: `#${
+            userPalette.colors.find((color) => color.name === "tertiary").hex
+          }`,
+        };
+      })
+      .filter((userPalette) => {
+        return HORIZON_PALETTES.some((palette) => {
+          return userPalette.name.toLowerCase().includes(palette.toLowerCase());
+        });
+      })
+      .sort();
+
+    // Match the light scheme with the corresponding dark id based in the name
+    return (
+      availablePalettes
+        .map((palette) => {
+          if (palette.is_dark) {
+            return palette;
+          }
+
+          const normalizedLightName = palette.name.toLowerCase();
+
+          const correspondingDarkModeId = availablePalettes.find(
+            (item) =>
+              item.is_dark &&
+              normalizedLightName ===
+                item.name.toLowerCase().replace(/\s+dark$/, "")
+          )?.id;
+
+          return {
+            ...palette,
+            correspondingDarkModeId,
+          };
+        })
+        // Only want to show palettes that have corresponding light/dark modes
+        .filter((palette) => !palette.is_dark)
+    );
+  }
+
+  get selectedColorPaletteId() {
+    if (this.currentUser) {
+      return this.userColorPaletteId;
+    }
+
+    return this.anonColorPaletteId;
+  }
+
+  @action
+  onRegisterMenu(api) {
+    this.dMenu = api;
+  }
+
+  @action
+  paletteSelected(selectedPalette) {
+    if (selectedPalette.id === this.selectedColorPaletteId) {
+      return;
+    }
+
+    this.#updatePreference(selectedPalette);
+    this.#changeSiteColorPalette(selectedPalette);
+    this.dMenu.close();
+  }
+
+  #updatePreference(selectedPalette) {
+    updateColorSchemeCookie(selectedPalette.id);
+    updateColorSchemeCookie(selectedPalette.correspondingDarkModeId, {
+      dark: true,
+    });
+
+    if (!this.currentUser) {
+      this.anonColorPaletteId = selectedPalette.id;
+    } else {
+      this.userColorPaletteId = selectedPalette.id;
+    }
+  }
+
+  #loadAnonColorPalette() {
+    const storedAnonPaletteId = cookie("color_scheme_id");
+    if (storedAnonPaletteId) {
+      return parseInt(storedAnonPaletteId, 10);
+    }
+  }
+
+  async #changeSiteColorPalette(colorPalette) {
+    this.cssLoaded = false;
+
+    const lightPaletteId = colorPalette.id;
+    const darkPaletteId = colorPalette.correspondingDarkModeId;
+    const darkTag = document.querySelector("link.dark-scheme");
+
+    // TODO(osama) once we have built-in light/dark modes for each palette, we
+    // can stop making the 2nd ajax call for the dark palette and replace it
+    // with a include_dark_scheme param on the ajax call for the light
+    // palette which will include the href for the dark palette in the response
+    if (!darkTag) {
+      reload();
+      return;
+    }
+
+    const lightPaletteInfo = await ajax(
+      `/color-scheme-stylesheet/${lightPaletteId}/${colorPalette.theme_id}.json`
+    );
+    const darkPaletteInfo = await ajax(
+      `/color-scheme-stylesheet/${darkPaletteId}/${colorPalette.theme_id}.json`
+    );
+
+    Promise.all([
+      this.#preloadAndSwapCSS(lightPaletteInfo.new_href, "light-scheme"),
+      this.#preloadAndSwapCSS(darkPaletteInfo.new_href, "dark-scheme"),
+    ]).then(() => {
+      this.cssLoaded = true;
+    });
+  }
+
+  #preloadAndSwapCSS(newHref, existingLinkClass) {
+    return new Promise((resolve) => {
+      const existingLink = document.querySelector(
+        `link[rel='stylesheet'].${existingLinkClass}`
+      );
+      const newTag = document.createElement("link");
+
+      newTag.rel = "preload";
+      newTag.href = newHref;
+      newTag.as = "style";
+      newTag.onload = () => {
+        existingLink.href = newHref;
+        newTag.remove();
+        resolve();
+      };
+
+      document.head.appendChild(newTag);
+    });
+  }
+
+  <template>
+    {{#unless (isEmpty this.userColorPalettes)}}
+      <DMenu
+        @identifier="user-color-palette-selector"
+        @placementStrategy="fixed"
+        @onRegisterApi={{this.onRegisterMenu}}
+        class={{concatClass
+          "btn-flat user-color-palette-selector sidebar-footer-actions-button"
+          (if this.cssLoaded "user-color-palette-css-loaded")
+        }}
+        data-selected-color-palette-id={{this.selectedColorPaletteId}}
+        @inline={{true}}
+      >
+        <:trigger>
+          {{icon "paintbrush"}}
+        </:trigger>
+        <:content>
+          <div class="user-color-palette-menu">
+            <div class="user-color-palette-menu__content">
+              {{#each this.userColorPalettes as |colorPalette|}}
+                <UserColorPaletteMenuItem
+                  @selectedColorPaletteId={{this.selectedColorPaletteId}}
+                  @colorPalette={{colorPalette}}
+                  @paletteSelected={{this.paletteSelected}}
+                />
+              {{/each}}
+            </div>
+          </div>
+        </:content>
+      </DMenu>
+    {{/unless}}
+  </template>
+}
@@ -33,15 +33,12 @@ const TopicLikesReplies = <template>
 export default {
  name: "topic-list-customizations",

-  initialize() {
+  initialize(container) {
+    const router = container.lookup("service:router");
    withPluginApi("1.39.0", (api) => {
      api.registerValueTransformer(
        "topic-list-columns",
        ({ value: columns }) => {
-          columns.add("topic-activity", {
-            item: TopicActivity,
-            after: "title",
-          });
          columns.add("topic-status", {
            item: TopicStatus,
            after: "topic-author",
@@ -50,14 +47,21 @@ export default {
            item: TopicCategory,
            after: "topic-status",
          });
+
          columns.add("topic-likes-replies", {
            item: TopicLikesReplies,
            after: "topic-author-avatar",
          });
-          columns.delete("posters");
          columns.delete("views");
          columns.delete("replies");
-          columns.delete("activity");
+          if (!router.currentRouteName.includes("userPrivateMessages")) {
+            columns.add("topic-activity", {
+              item: TopicActivity,
+              after: "title",
+            });
+            columns.delete("posters");
+            columns.delete("activity");
+          }
          return columns;
        }
      );
@@ -1,18 +0,0 @@
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import Service, { service } from "@ember/service";
-import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
-
-const CUSTOM_COLOR_KEY = "d-custom-color-preference";
-
-export default class CustomColor extends Service {
-  @service keyValueStore;
-  @tracked
-  color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
-
-  @action
-  setColor(color) {
-    this.color = color;
-    this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
-  }
-}
@@ -18,14 +18,14 @@
 }

 .has-full-page-chat .chat-replying-indicator-container {
-  margin-bottom: var(--d-border-radius-large);
+  margin-bottom: var(--main-grid-gap);
  @include breakpoint(medium) {
    margin-bottom: 0;
  }
 }

 .has-full-page-chat .chat-selection-management {
-  margin-bottom: var(--d-border-radius-large);
+  margin-bottom: var(--main-grid-gap);
  @include breakpoint(medium) {
    margin-bottom: 0;
  }
@@ -36,15 +36,18 @@
    display: none;
  }
  max-width: unset !important;
-  @media screen and (max-width: 488px) {
-    display: none;
-  }
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  container: content-width / inline-size;
+  @media screen and (max-width: 488px) {
+    display: none;
+  }
+  @include breakpoint(tablet) {
+    display: none;
+  }
  li {
    list-style: none;
    margin: 0;
@@ -59,6 +62,12 @@
    height: var(--d-border-radius-large);
    background-color: var(--background-color);
    z-index: 399;
+    mask: radial-gradient(
+      circle at var(--d-border-radius-large) var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      black var(--d-border-radius-large)
+    );
    -webkit-mask: radial-gradient(
      circle at var(--d-border-radius-large) var(--d-border-radius-large),
      transparent var(--d-border-radius-large),
@@ -77,7 +86,7 @@
  }
  &__bottom-left {
    transform: rotate(-90deg);
-    bottom: var(--d-border-radius-large);
+    bottom: var(--main-grid-gap);
    left: var(--left-distance);
    @media screen and (max-width: 768px) {
      bottom: calc(var(--d-border-radius-large) * 2);
@@ -85,7 +94,7 @@
  }
  &__bottom-right {
    transform: rotate(180deg);
-    bottom: var(--d-border-radius-large);
+    bottom: var(--main-grid-gap);
    left: calc(var(--right-distance) - var(--d-border-radius-large));
    @media screen and (max-width: 768px) {
      bottom: calc(var(--d-border-radius-large) * 2);
@@ -98,7 +107,7 @@
    background-color: var(--background-color);
    bottom: 0;
    left: var(--left-distance);
-    height: var(--d-border-radius-large);
+    height: var(--main-grid-gap);
    @media screen and (max-width: 768px) {
      height: calc(var(--d-border-radius-large) * 2);
    }
@@ -66,7 +66,10 @@
  }
  &:hover {
    .discourse-no-touch & {
-      background: oklch(from var(--accent-color) 40% c h) !important;
+      background: light-dark(
+        oklch(from var(--accent-color) 40% c h),
+        oklch(from var(--accent-color) 50% c h)
+      );
      box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
      color: var(--accent-text-color);
      .d-icon {
@@ -76,12 +79,18 @@
  }
  &:focus-visible {
    .discourse-no-touch & {
-      background: oklch(from var(--accent-color) 40% c h) !important;
+      background: light-dark(
+        oklch(from var(--accent-color) 40% c h),
+        oklch(from var(--accent-color) 50% c h)
+      );
      box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
      color: var(--accent-text-color);
    }
  }
  &:active {
-    background: oklch(from var(--accent-color) 30% c h) !important;
+    background: light-dark(
+      oklch(from var(--accent-color) 40% c h),
+      oklch(from var(--accent-color) 50% c h)
+    );
  }
 }
@@ -13,7 +13,7 @@ body.has-full-page-chat {

 .chat-drawer-container {
  .is-expanded & {
-    box-shadow: 0px 0px 0px 2px var(--d-chat-border);
+    box-shadow: 0px 0px 0px 2px var(--tertiary-medium);
  }
  .chat-drawer.is-expanded & {
    border: none;
@@ -27,7 +27,6 @@ body.has-full-page-chat {
 .chat-drawer .channels-list-container .chat-channel-row {
  margin-bottom: var(--spacing-block-xs);
  font-size: var(--font-up-1);
-  border-radius: var(--d-border-radius);
  border-bottom: none;
  &:hover {
    background-color: var(--d-sidebar-active-background);
@@ -1,4 +1,4 @@
-.color-palette-menu {
+.user-color-palette-menu {
  &__item .btn-icon-text.btn-flat {
    background-color: var(--d-content-background);
    width: 100%;
@@ -23,27 +23,3 @@
 .user-color-palette-content .fk-d-menu__inner-content {
  border: none;
 }
-
-html.custom-color-horizon {
-  --accent-base-color: #595bca;
-}
-
-html.custom-color-marigold {
-  --accent-base-color: #d3881f;
-}
-
-html.custom-color-violet {
-  --accent-base-color: #9b15de;
-}
-
-html.custom-color-lily {
-  --accent-base-color: #cc338c;
-}
-
-html.custom-color-clover {
-  --accent-base-color: #45a06e;
-}
-
-html.custom-color-royal {
-  --accent-base-color: #4169e1;
-}
@@ -1,108 +1,12 @@
 :root {
-  --accent-base-color: #595bca;
-  --accent-color: light-dark(
-    var(--accent-base-color),
-    oklch(from var(--accent-base-color) calc(l * 0.95) c h)
-  );
-  //   --background-color: light-dark(#f5f8ff, #101112);
-  --background-color: light-dark(
-    oklch(from var(--accent-color) 98% calc(c * 0.25) h),
-    oklch(from var(--accent-color) 10% 0.025 h)
-  );
-  --header_primary-low-mid: light-dark(
-    oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
-    oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
-  );
-  --header_primary-medium: light-dark(
-    oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
-    oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
-  );
-  --d-content-background: light-dark(
-    oklch(from var(--accent-color) calc(l * 2) 0 h),
-    oklch(from var(--accent-color) calc(l * 0.375) 0 h)
-  );
-  --primary-100: light-dark(#f2f2f2, #333333);
-  --primary-300: light-dark(#d1d1d1, #838383);
-  --primary-low: light-dark(#e9e9e9, #313131);
-  --primary-high: light-dark(#646464, #a6a6a6);
-  --primary-very-high: light-dark(#434343, #c7c7c7);
-  --d-hover: oklch(from var(--d-selected) l c h / 0.75);
-  --tertiary: var(--accent-color);
-  --tertiary-medium: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h)
-  );
-  --tertiary-very-low: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.75) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h)
-  );
-  --tertiary-med-or-tertiary: var(--accent-color);
-  --tertiary-low: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
-  );
-  --tertiary-300: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
-  );
-  --tertiary-high: light-dark(
-    oklch(from var(--accent-color) calc(l * 1) c h),
-    oklch(from var(--accent-color) calc(l * 1) c h)
-  );
  --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
-  --search-color: light-dark(
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
-  );
-  --search-banner-text-color: light-dark(
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
-    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
-  );
-  --topic-card-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
-    oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
-  );
-  --button-box-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
-    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
-  );
-  --d-selected: light-dark(
-    oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
-    oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
-  );
  --d-sidebar-highlight-hover-background: var(--d-selected);
-  --d-sidebar-border-color: light-dark(
-    oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
-    oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
-  );
-  --d-chat-border: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
-  );
-  --accent-text-color: light-dark(#ffffff, #212121);
-  --d-nav-color--active: var(--accent-color);
-  --d-sidebar-background: var(--background-color);
-  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
-  --d-sidebar-link-color: light-dark(
-    oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
-  );
  --d-sidebar-link-icon-color: var(--d-sidebar-link-color);
  --d-sidebar-header-color: var(--d-sidebar-link-color);
  --d-sidebar-header-icon-color: var(--d-sidebar-link-color);
-  --d-sidebar-suffix-color: light-dark(
-    oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
-    oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
-  );
  --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
-  --link-color: light-dark(
-    var(--accent-base-color),
-    oklch(from var(--accent-base-color) calc(l * 0.95) c h)
-  );
-  --link-color-hover: light-dark(
-    var(--accent-base-color),
-    oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
-  );
+  --d-sidebar-background: var(--background-color);
+  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
  --d-sidebar-prefix-background: var(--d-selected);
  --d-sidebar-active-prefix-background: light-dark(
    oklch(from var(--d-selected) calc(l * 0.85) c h),
@@ -116,6 +20,7 @@
  --d-sidebar-highlight-color: var(--primary);
  --d-sidebar-highlight-background: var(--d-selected);
  --d-sidebar-section-link-icon-size: 1em;
+  --d-hover: oklch(from var(--d-selected) l c h / 0.75);
  --d-input-bg-color: var(--d-content-background);
-  --tertiary-hover: var(--accent-color);
+  --d-sidebar-active-color: var(--primary) !important;
 }
@@ -0,0 +1,64 @@
+.peek-mode-toggle {
+  display: none;
+}
+
+@media screen and (min-width: 1300px) {
+  html:not(.fullscreen-composer) {
+    .peek-mode-toggle svg {
+      transform: scaleX(-1);
+    }
+
+    &.composer-open {
+      .full-width-enabled .peek-mode-toggle {
+        display: flex;
+      }
+
+      .full-width-enabled.peek-mode-active {
+        #reply-control.hide-preview {
+          transition: none;
+          box-shadow: none;
+          border-radius: var(--d-border-radius-large);
+          .grippie {
+            display: none;
+          }
+
+          .reply-area {
+            padding-inline: 0.67em;
+          }
+        }
+
+        #reply-control:not(.fullscreen).hide-preview {
+          width: 100%;
+          right: var(--main-grid-gap);
+          top: var(--header-offset);
+          bottom: var(--main-grid-gap);
+          left: unset;
+          height: unset;
+          max-width: 36.5vw;
+        }
+
+        &.has-sidebar-page {
+          #main-outlet-wrapper {
+            grid-template-columns:
+              var(--d-sidebar-width) calc(100vw - 38vw - var(--d-sidebar-width))
+              1fr;
+          }
+        }
+
+        &:not(.has-sidebar-page) {
+          #main-outlet-wrapper {
+            grid-template-columns: 0 calc(100vw - 52vw) 1fr;
+          }
+
+          #reply-control:not(.fullscreen).hide-preview {
+            max-width: 46vw;
+          }
+        }
+
+        .sidebar-wrapper .sidebar-container {
+          height: unset;
+        }
+      }
+    }
+  }
+}
@@ -21,6 +21,7 @@
      background: var(--tertiary-low);
    }

+    .user-selector,
    .title-and-category {
      padding: 0 var(--spacing-inline-m);
      width: calc(100% - var(--spacing-inline-m) * 2);
@@ -0,0 +1,255 @@
+// Full width layout. Ported from the Discourse Full Width theme component here
+// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
+// intend to move into core over time.
+//
+// We are copying this here so we can continue to iterate on Horizon with full
+// width without having to include the theme component as a dependency, we
+// need to remove this once full width is in core.
+
+$sidebar-width: 17em;
+
+.wrap {
+  max-width: unset; // undoing core default
+}
+
+.d-header #site-logo {
+  // constraining the logo to fit its grid container
+  // this prevents the logo from shifting header content
+  // when the sidebar is opened
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain; // contains logo without squishing/stretching
+}
+
+#main-outlet-wrapper {
+  padding: 0;
+
+  body.has-sidebar-page & {
+    .sidebar-wrapper {
+      width: var(--d-sidebar-width);
+    }
+  }
+
+  body.has-full-page-chat & {
+    gap: 0;
+  }
+
+  .sidebar-wrapper {
+    width: 100%; // safari has issues without this
+  }
+
+  #main-outlet {
+    margin: 0 auto;
+    max-width: var(--d-max-width);
+    width: 100%;
+
+    body.has-full-page-chat & {
+      max-width: unset;
+    }
+  }
+}
+
+.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
+  border: none;
+}
+
+#main-outlet > .regular {
+  max-width: var(--d-max-width);
+  margin: 0 auto;
+
+  body.has-sidebar-page & {
+    margin: 0 auto;
+  }
+}
+
+.d-header .title:not(.title--minimized) {
+  // allowing overflow here isn't always ideal
+  // but works well enough most of the time
+  overflow: visible;
+}
+
+.d-header {
+  > .wrap {
+    .contents {
+      display: grid;
+      grid-template-areas: "logo lspace extra-info rspace panel";
+      grid-template-columns:
+        minmax(auto, 1fr)
+        auto
+        minmax(0, calc(var(--d-max-width)))
+        auto
+        minmax(auto, 1fr);
+
+      .d-header-mode {
+        grid-area: extra-info;
+        white-space: nowrap;
+
+        @include breakpoint("tablet") {
+          display: none;
+        }
+      }
+
+      .d-header .title {
+        min-width: auto;
+      }
+
+      .has-sidebar-page & {
+        // at wide widths, when 1fr > 0
+        // we want the panel to be the same width as the sidebar
+        // this way we can get more accurate centering
+        grid-template-columns:
+          calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
+          1fr
+          minmax(0, calc(var(--d-max-width)))
+          1fr
+          minmax(0, calc(var(--d-sidebar-width) - 11px));
+        gap: 1em;
+
+        // at narrower widths, when 1fr = 0
+        // we can center without matching the sidebar's width
+        // which allows the title to take up the remaining width
+        @media screen and (max-width: 1400px) {
+          grid-template-columns:
+            calc(var(--d-sidebar-width) - 11px)
+            1fr
+            minmax(0, calc(var(--d-max-width)))
+            1fr
+            auto;
+        }
+
+        @media screen and (max-width: 1000px) {
+          gap: 0.5em;
+        }
+
+        .d-header-mode {
+          grid-area: extra-info;
+        }
+      }
+    }
+  }
+
+  .header-sidebar-toggle {
+    grid-area: logo;
+  }
+
+  .before-header-panel-outlet {
+    grid-area: extra-info;
+  }
+
+  .d-header-mode {
+    .bootstrap-mode {
+      margin: 0;
+    }
+  }
+
+  .home-logo-wrapper-outlet {
+    grid-area: logo;
+    margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
+    margin-right: 0.725em;
+    display: flex;
+    overflow: visible;
+
+    .title {
+      flex: 1 0 auto;
+    }
+  }
+
+  .panel {
+    grid-area: panel;
+  }
+}
+
+.extra-info-wrapper {
+  grid-area: extra-info;
+  max-width: var(--d-max-width);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.header-search--enabled .floating-search-input-wrapper {
+  grid-area: extra-info;
+
+  @include breakpoint(tablet) {
+    grid-area: rspace;
+  }
+
+  @include breakpoint(mobile-extra-large) {
+    display: none;
+  }
+}
+
+body.has-sidebar-page {
+  .wrap {
+    max-width: unset; // undoing core default
+  }
+
+  .d-header-mode,
+  .extra-info-wrapper {
+    padding: 0;
+  }
+
+  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
+    #reply-control.show-preview {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .sidebar-container {
+      height: auto;
+    }
+  }
+
+  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
+    #reply-control.show-preview:not(.fullscreen) {
+      margin-left: $sidebar-width;
+      width: auto;
+
+      // overruling new core composer changes
+      max-width: $reply-area-max-width;
+      transform: none;
+    }
+
+    .sidebar-container {
+      height: auto;
+    }
+  }
+
+  // overruling new core composer changes
+  @media screen and (min-width: $reply-area-max-width) {
+    #reply-control.show-preview:not(.fullscreen) {
+      max-width: $reply-area-max-width;
+      transform: none;
+    }
+  }
+}
+
+body.sidebar-animate {
+  #main-outlet-wrapper {
+    transition: none;
+  }
+
+  .d-header-wrap .wrap {
+    transition: none;
+  }
+}
+
+.d-header-icons {
+  display: flex;
+}
+
+.rtl {
+  .d-header .title {
+    margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
+    margin-left: 0.725em;
+  }
+}
+
+// provides some extra space for login buttons
+@media screen and (min-width: 1400px) {
+  .anon {
+    .d-header .panel {
+      grid-column-start: -4;
+    }
+  }
+}
@@ -0,0 +1,65 @@
+// Fixing bulk select (only needed for desktop)
+
+.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: 0;
+    bottom: 0;
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+    button {
+      white-space: nowrap;
+    }
+  }
+}
@@ -2,14 +2,10 @@
  box-shadow: none;
  background: var(--background-color);
  @include breakpoint(extra-large, $rule: min-width) {
-    padding-bottom: 1em;
+    padding-bottom: var(--main-grid-gap);
  }
 }

-.has-full-page-chat .d-header {
-  background-color: transparent;
-}
-
 .user-menu .quick-access-panel,
 .user-notifications-list {
  li {
@@ -44,7 +40,8 @@
  .d-header-icons
  .header-color-scheme-toggle
  .-expanded
-  > .d-icon {
+  > .d-icon,
+.discourse-no-touch .header-sidebar-toggle button:hover .d-icon {
  color: var(--header_primary-medium);
 }

@@ -73,14 +70,6 @@
  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);
-}
-
 body.login-page,
 body.signup-page,
 body.invite-page,
@@ -90,3 +79,11 @@ body.activate-account-page {
    background: var(--background-color);
  }
 }
+
+.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
+  border-color: var(--background-color);
+}
+
+.d-header-icons .badge-notification {
+  border-color: var(--background-color);
+}
@@ -0,0 +1,14 @@
+body.static-login {
+  #main-outlet-wrapper {
+    grid-template-areas:
+      "sidebar blank"
+      "sidebar content"
+      "sidebar below-content";
+    grid-template-rows: auto 1fr auto;
+  }
+  .login-welcome {
+    border-radius: none;
+    border: none;
+    box-shadow: none;
+  }
+}
@@ -1,5 +1,5 @@
 :root {
-  --main-grid-gap: 2em;
+  --main-grid-gap: 0.5em;
 }

 html:not(:has(.has-full-page-chat)) {
@@ -22,6 +22,7 @@ body {

 body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
  grid-column-gap: var(--main-grid-gap);
+  background-color: var(--background-color);
 }

 body.has-full-page-chat:not(.has-sidebar-page) {
@@ -57,42 +58,29 @@ body:not(.has-full-page-chat) {
    @include breakpoint(medium) {
      --main-grid-gap: 0;
    }
-    @include breakpoint(tablet, $rule: min-width) {
+    @media screen and (min-width: 768px) {
      gap: var(--main-grid-gap);
    }
    #main-outlet {
      width: 100%;
-      padding-bottom: var(--spacing-block-l);
      max-width: unset;
-      //thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
-      .list-controls,
-      .list-container,
-      #topic-title,
-      .container.posts,
-      #topic-footer-buttons,
-      .more-topics__container,
-      .welcome-banner,
-      .container .user-main,
-      .reviewable,
-      .admin-content,
-      .discourse-post-event-upcoming-events,
-      .container.groups-index,
-      .body-page,
-      .container.badges,
-      .topic-above-footer-buttons-outlet .presence-users,
-      .global-notice,
-      .container.tags-index {
+      padding-bottom: var(--spacing-block-l);
+      border-radius: var(--d-border-radius-large);
+      background-color: var(--d-content-background);
+      @include breakpoint(medium) {
+        border-radius: 0px;
+      }
+      html.composer-open & {
+        padding-bottom: var(--composer-height);
+      }
+      > *:not(.experimental-screen, .activate-account) {
        @include breakpoint(medium, $rule: min-width) {
+          box-sizing: border-box;
          max-width: 1000px;
          margin-inline: auto;
          padding-inline: var(--spacing-inline-l);
        }
      }
-      border-radius: var(--d-border-radius-large);
-      @include breakpoint(medium) {
-        border-radius: 0px;
-      }
-      background-color: var(--d-content-background);
    }
  }
 }
@@ -125,3 +113,12 @@ aside.onebox {
  padding: 1em;
  background-color: var(--d-content-background);
 }
+
+.no-ember {
+  #main-outlet {
+    border-radius: var(--d-border-radius-large);
+    margin: 0 var(--main-grid-gap) var(--main-grid-gap) var(--main-grid-gap);
+    padding: 2em;
+    max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
+  }
+}
@@ -8,7 +8,7 @@
 }

 .powered-by-discourse {
-  z-index: 9999;
+  z-index: 400;
 }

 .boxed.white {
@@ -69,8 +69,11 @@ input[type="color"]:focus,
  background-color: var(--background-color);
 }

-.fk-d-menu__trigger.topic-list-layout-trigger {
-  display: none;
+@include breakpoint(mobile-extra-large) {
+  // pinned topic excerpts are hidden on small screens too
+  .fk-d-menu__trigger.topic-list-layout-trigger {
+    display: none;
+  }
 }

 .search-container .search-header,
@@ -94,3 +97,11 @@ input[type="color"]:focus,
 .discourse-reactions-list .reactions {
  gap: 0.15em;
 }
+
+.group-details-container {
+  border-radius: var(--d-border-radius);
+}
+
+.period-chooser-header {
+  border-radius: 0;
+}
@@ -35,10 +35,14 @@
          column-gap: var(--spacing-inline-s);
          row-gap: var(--spacing-block-xs);
          flex-basis: 100%;
+          li {
+            margin-right: 0;
+            margin-left: calc(
+              (var(--spacing-block-s) - 2px) * -1
+            ); // 2px is width of the outline
+          }
          .select-kit-header {
            background: var(--d-content-background);
-            padding-block: var(--spacing-block-s);
-            padding-inline: 0;
            border: 0;
          }
        }
@@ -142,7 +146,6 @@
      .main-avatar .avatar {
        width: 40px;
        height: 40px;
-        border-radius: var(--d-border-radius);
      }

      .topic-body {
@@ -201,3 +204,11 @@
    border: 1px solid var(--tertiary-low);
  }
 }
+
+.mobile-device #reply-control.show-preview .submit-panel {
+  background-color: var(--background-color);
+}
+
+.d-editor-preview-wrapper {
+  outline: 2px solid var(--background-color);
+}
@@ -17,7 +17,6 @@
    background-color: var(--secondary);
    border-radius: var(--d-border-radius-large);
    border: 1px solid var(--primary-300);
-    // font-size: var(--font-up-1-rem);
    &:hover {
      border: 1px solid var(--accent-color);
    }
@@ -47,7 +46,7 @@
 .nav-pills > li button:hover {
  .discourse-no-touch & {
    background: transparent;
-    color: var(--accent-color);
+    color: var(--d-nav-color--hover);
    &::after {
      content: "";
      position: absolute;
@@ -55,7 +54,7 @@
      bottom: 0;
      right: 0;
      height: var(--d-nav-underline-height);
-      background: var(--accent-color);
+      background: var(--d-nav-color--hover);
    }
  }
 }
@@ -0,0 +1,64 @@
+.navigation-controls {
+  .topic-drafts-menu-trigger,
+  .fk-d-button-tooltip {
+    display: none;
+  }
+}
+
+.sidebar-new-topic-button {
+  flex: 1 1 auto;
+
+  &__wrapper {
+    box-sizing: border-box;
+    display: flex;
+
+    .mobile-view & {
+      margin: 0 0 1rem;
+    }
+
+    &:has(.topic-drafts-menu-trigger) {
+      .sidebar-new-topic-button {
+        border-radius: var(--d-button-border-radius) 0 0
+          var(--d-button-border-radius);
+        border-right: 1px solid var(--primary-300);
+      }
+    }
+
+    .fk-d-button-tooltip {
+      flex: 1 1 auto;
+    }
+
+    .topic-drafts-menu-trigger {
+      flex: 0 1 auto;
+      margin: 0;
+      border-radius: 0 var(--d-button-border-radius)
+        var(--d-button-border-radius) 0;
+    }
+
+    .fk-d-button-tooltip:has(button[disabled]) {
+      + .topic-drafts-menu-trigger {
+        display: none;
+      }
+
+      .fk-d-tooltip__trigger {
+        background: var(--accent-color);
+        border-radius: 0 var(--d-button-border-radius)
+          var(--d-button-border-radius) 0;
+        padding-right: 0.65em;
+        .d-icon {
+          color: var(--secondary);
+        }
+      }
+    }
+  }
+}
+
+li.sidebar-section-link-wrapper[data-list-item-name="New Topic"] {
+  display: none;
+}
+
+.has-full-page-chat {
+  .sidebar-new-topic-button__wrapper {
+    display: none;
+  }
+}
@@ -29,11 +29,11 @@
  padding: 0.75em 1rem;
  border: 1px solid var(--primary-300);
  display: grid;
-  grid-template-columns: 20px 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: auto minmax(20px, auto);
  grid-template-areas:
-    ". . . . . . status"
-    "activity activity activity activity activity likes-replies category";
+    ". . . . status"
+    "activity . . likes-replies category";
  grid-column-gap: 12px;
  grid-row-gap: 8px;
  border-radius: var(--d-border-radius);
@@ -47,8 +47,8 @@
  }
  @include breakpoint(extra-large) {
    grid-template-areas:
-      ". . . . . . status"
-      "activity activity activity activity activity likes-replies category";
+      ". . . . status"
+      "activity . . likes-replies category";
  }
  @include breakpoint(mobile-extra-large) {
    td.main-link .link-top-line,
@@ -56,41 +56,53 @@
      grid-row: 2/3;
      grid-column: 1/-1;
    }
-    grid-template-columns: 25px repeat(7, 1fr);
+    grid-template-columns: 20px repeat(5, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
-      "category category category category category category category status"
-      ". . . . . . . ."
-      "activity activity activity activity activity activity activity likes-replies";
+      "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 auto repeat(5, 1fr) auto;
+    grid-template-columns: 20px auto auto min-content min-content;
    grid-template-rows: auto auto auto;
    grid-template-areas:
-      ". . . . . . . status"
-      "activity activity activity activity activity activity activity activity"
-      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
+      ". . . . status"
+      "activity . . . ."
+      "excerpt excerpt excerpt likes-replies category";
    @include breakpoint(extra-large) {
      grid-template-areas:
-        ". . . . . . . status"
-        "activity activity activity activity activity activity activity activity"
-        "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies category";
+        ". . . . status"
+        "activity . . . ."
+        "excerpt excerpt excerpt likes-replies category";
    }
    @include breakpoint(mobile-extra-large) {
-      grid-template-columns: 25px auto repeat(6, 1fr);
      grid-template-rows: auto auto auto;
      grid-template-areas:
-        "category category category category category category category status"
-        ". . . . . . . ."
-        "activity activity activity activity activity activity activity likes-replies";
-      .topic-excerpt {
+        "category category category category status"
+        ". . . . ."
+        "activity . . . likes-replies";
+      .topic-excerpt,
+      .link-bottom-line {
        display: none;
      }
    }
+    .topic-likes-replies-data {
+      align-self: flex-end;
+    }
+    .topic-category-data {
+      align-items: flex-end;
+    }
+    .badge-category__wrapper {
+      height: min-content;
+    }
+    .link-bottom-line {
+      display: flex;
+    }
  }

  // display contents
@@ -111,15 +123,11 @@
    grid-area: activity;
  }
  .topic-activity {
-    display: flex;
-    gap: 0.25em;
+    display: grid;
+    grid-template-columns: 20px auto auto auto;
    font-size: var(--font-down-1);
    height: 100%;
    align-items: center;
-  }
-
-  .topic-activity__user {
-    display: flex;
    gap: 0.25em;
  }

@@ -129,10 +137,32 @@
    border-radius: 4px;
  }

+  .topic-activity__user {
+    height: 20px;
+    width: 20px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--primary-low);
+  }
+
  .topic-activity__username {
-    @include breakpoint(mobile-extra-large) {
+    margin-left: 0.25em;
+    text-wrap: nowrap;
+  }
+
+  @include breakpoint(mobile-extra-large) {
+    .topic-activity__username {
      display: none;
    }
+    .topic-activity__reason {
+      margin-left: 0.25em;
+    }
+  }
+
+  .topic-activity.--updated .topic-activity__reason {
+    margin-left: 0.25em;
  }

  // status
@@ -144,14 +174,6 @@
    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;
@@ -165,6 +187,14 @@
    border: 1px solid var(--status-color);
    color: var(--status-color);
    width: min-content;
+    @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);
+    }
    svg {
      font-size: var(--font-down-1);
      color: var(--status-color);
@@ -207,14 +237,6 @@
    min-width: unset;
  }

-  // excerpt
-  .topic-excerpt {
-    grid-row: 3 / -1;
-    grid-column: 1 / -2;
-    margin: 0;
-    font-size: var(--font-down-2);
-  }
-
  // timestamp
  td.activity .post-activity {
    grid-area: activity;
@@ -224,12 +246,29 @@
    padding: 0;
  }

-  // metadata
-  // metadata - category
-  td.main-link .link-bottom-line {
+  .link-bottom-line {
    display: none;
  }

+  // metadata
+  // metadata - excerpt
+  .topic-excerpt,
+  td.main-link .link-bottom-line {
+    grid-row: 3 / -1;
+    grid-column: 1 / -3;
+    margin: 0;
+    font-size: var(--font-down-2);
+
+    .excerpt__contents {
+      color: var(--primary-high);
+    }
+
+    // default category position hidden
+    .badge-category__wrapper {
+      display: none;
+    }
+  }
+
  td.topic-category-status-data {
    display: contents;
  }
@@ -316,46 +355,82 @@
  .link-bottom-line {
    font-size: unset;
  }
-  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  //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 dropdown";
+    "avatar update metadata metadata metadata . category";
  @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
    grid-template-areas:
-      ". . . . . . . dropdown"
-      "avatar update metadata metadata metadata metadata category dropdown";
+      " . . . . . . dropdown"
+      "update metadata metadata metadata metadata category category";
+    .avatar {
+      display: none;
+    }
  }
  &.has-metadata {
-    grid-template-areas:
-      ". . . . . . dropdown"
-      "avatar update metadata metadata metadata category dropdown";
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
    @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 {
+        "update update metadata metadata metadata metadata category category";
+      .avatar {
        display: none;
      }
    }
-    &.has-metadata {
+  }
+
+  //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";
+
+    .badge-category__wrapper {
+      align-self: flex-end;
+      height: min-content;
+      max-width: 100%;
+    }
+
+    @include breakpoint(extra-large, $rule: min-width) {
+      grid-template-columns: 20px min-content auto min-content;
+    }
+
+    @include breakpoint(mobile-extra-large) {
+      grid-template-columns: auto min-content;
      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";
+        ".  dropdown"
+        "category category";
+      .post-excerpt,
+      .avatar {
+        display: none;
+      }
+    }
+
+    &.has-metadata {
+      grid-template-columns: 20px min-content auto min-content;
+      grid-template-areas:
+        ". . . dropdown"
+        "avatar update metadata metadata"
+        "excerpt excerpt excerpt . "
+        "excerpt excerpt excerpt category";
+      @include breakpoint(mobile-extra-large) {
+        grid-template-columns: auto min-content;
+        grid-template-areas:
+          " . dropdown"
+          "metadata category";
+
+        .bookmark-metadata {
+          flex-wrap: wrap;
+        }
+      }
    }
  }
+
  td.author-avatar {
    grid-area: avatar;
  }
@@ -373,12 +448,21 @@
    display: contents;
    .bookmark-metadata {
      grid-area: metadata;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-inline-xs);
+    }
+    .bookmark-metadata-item {
+      margin: 0;
+      vertical-align: middle;
    }
    .bookmark-status-with-link {
      grid-column: 1/-2;
      grid-row: 1/2;
    }
  }
+
  .post-excerpt {
    grid-area: excerpt;
    margin: 0;
@@ -387,12 +471,24 @@
    display: contents;
    .bookmark-actions-dropdown {
      grid-area: dropdown;
-      align-self: center;
+      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;
-    margin-left: auto;
  }
  td.activity .post-activity {
    display: none;
@@ -400,27 +496,41 @@
 }

 // Assigned List
-
 .topic-list-item.assigned-list-item {
+  .topic-status-card {
+    display: none;
+  }
  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-columns: 20px min-content min-content auto min-content min-content min-content;
  grid-template-areas:
    ". . . . . status dropdown"
-    "activity activity activity activity likes-replies category dropdown";
+    "activity . . . . likes-replies category";
  @include breakpoint(mobile-extra-large) {
    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
    grid-template-areas:
-      ". . . . . . status dropdown"
-      "activity activity activity activity activity activity activity dropdown"
-      "category category category category category category likes-replies dropdown";
+      "category category . . . . status dropdown"
+      ". . . . . . . . "
+      "activity . . . . . . likes-replies";
  }
  .assign-topic-buttons {
    display: contents;
    .assign-actions-dropdown {
      grid-area: dropdown;
-      align-self: center;
+      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 {
@@ -435,53 +545,87 @@

 // User Messages

-body.user-messages-page .topic-list-item {
-  td.topic-category-data,
-  td.topic-likes-replies-data,
-  td.topic-status-data {
-    display: none;
+body.user-messages-page {
+  .topic-list-body {
+    gap: 0;
  }
-  td.main-link .link-top-line {
-    grid-row: 1 / 2;
-    grid-column: 1 / -1;
+  .topic-list .topic-list-data.posters a:not(.latest) {
+    display: block;
  }
-  grid-template-areas:
-    ". . . . . . ."
-    "activity activity activity activity 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 activity activity activity activity activity activity 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 activity activity activity activity activity activity 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);
+  .topic-list-item {
+    border-radius: 0;
+    box-shadow: none;
+    border-bottom: 1px solid var(--primary-200);
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    display: grid;
+    grid-template-areas: "title activity" "posters .";
+    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
-    grid-template-areas:
-      ". . . . . . . ."
-      "activity activity activity activity activity activity activity activity";
-    .topic-excerpt {
+    td.topic-category-data,
+    td.topic-likes-replies-data,
+    td.topic-status-data {
      display: none;
    }
+    &.visited .main-link .link-top-line {
+      font-weight: normal;
+      grid-area: title;
+    }
+    &:hover {
+      background-color: var(--primary-low);
+      border-color: var(--primary-200);
+    }
+    td.topic-activity-data {
+      grid-area: activity;
+    }
+    td.topic-list-data.posters {
+      grid-area: posters;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      a {
+        margin-right: 4px;
+      }
+      .avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        background-color: var(--primary-low);
+      }
+    }
  }
 }

 // Bulk select

-.bulk-select-enabled .topic-list-item {
+.bulk-select-enabled .topic-list-body .topic-list-item {
  grid-template-areas:
-    "bulk-select activity activity activity . . status"
-    "bulk-select . . . likes-replies likes-replies category";
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
+  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 . . .";
+    }
+  }
  .bulk-select {
    grid-area: bulk-select;
    padding: 0;
@@ -493,19 +637,20 @@ body.user-messages-page .topic-list-item {
    }
  }
  @include breakpoint(large) {
-    grid-template-columns: 20px repeat(6, 1fr);
-    grid-template-rows: 20px minmax(20px, auto);
    grid-template-areas:
-      "bulk-select activity activity activity activity activity status"
-      "bulk-select . . . . . ."
-      "bulk-select category . . . . likes-replies";
+      "bulk-select . . . status"
+      "bulk-select activity activity . category";
  }
  @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
+    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 activity activity activity activity activity activity status"
-      "bulk-select . . . . . . ."
-      "bulk-select category . . . . .  likes-replies";
+      "bulk-select category . . .  status"
+      "bulk-select . . . . ."
+      "bulk-select activity activity . . .";
  }
 }
@@ -6,7 +6,7 @@
  }
 }

-.container.posts .topic-navigation {
+.container.posts .topic-navigation:not(.with-topic-progress) {
  // super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
  top: calc(
    var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
@@ -21,20 +21,11 @@

    .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);
+        margin-left: -4.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;
@@ -43,8 +34,8 @@
    .timeline-handle {
      background-color: var(--accent-color);
      @include breakpoint("medium", $rule: min-width) {
-        width: 3px;
-        border-radius: 2px;
+        width: 8px;
+        border-radius: 10px;
        height: calc(100% - 6px);
      }
    }
@@ -54,8 +45,6 @@
 //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
@@ -64,16 +53,23 @@
    }
  }
 }
-.container.posts,
-#topic-footer-buttons {
-  padding: 0 24px;
-}

 .container.posts {
-  grid-template-columns: auto 150px;
+  grid-template-columns: auto 8em;
  @media screen and (max-width: 924px) {
    grid-template-columns: auto auto;
  }
+
+  .post-notice {
+    padding: var(--spacing-block-sm);
+    border-radius: var(--d-border-radius);
+    font-size: var(--font-down-1-rem);
+
+    .d-icon {
+      font-size: var(--font-up-1);
+      width: 1em;
+    }
+  }
 }

 .timeline-container .topic-timeline .timeline-ago {
@@ -1,27 +1,80 @@
 .welcome-banner {
-  z-index: calc(z("base") + 1);
-}
+  &__wrap {
+    display: grid;
+    grid-template-rows: 0.33fr 0.33fr 0.33fr;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 1em;
+    grid-row-gap: 0.5em;
+    border-bottom: 1px solid var(--primary-300);
+    padding: 1.5em 0 2.5em;
+    margin-bottom: 0;

-.custom-search-banner-wrap {
-  display: grid;
-  grid-template-rows: 0.33fr 0.33fr 0.33fr;
-  grid-template-columns: 1fr 1fr;
-  grid-column-gap: 1em;
-  grid-row-gap: 0.5em;
-  border-bottom: 1px solid var(--primary-300);
-  padding: 1.5em 0 2.5em;
-  margin-bottom: 0;
-  @media screen and (max-width: 768px) {
-    padding: 1em;
+    @media screen and (max-width: 768px) {
+      padding: 1em;
+    }
+
+    @include breakpoint("mobile-extra-large") {
+      display: block;
+      padding: 0.5em;
+      margin-top: 0;
+    }
+
+    .search-menu {
+      grid-column: 2/3;
+      grid-row: 1/-1;
+      width: 100%;
+      align-self: center;
+      @media screen and (max-width: 1028px) {
+        grid-row: 2/-1;
+        grid-column: 1/-1;
+      }
+      @media screen and (max-width: 768px) {
+        grid-column: 2/-1;
+        grid-row: 1/-1;
+      }
+      @media screen and (max-width: 600px) {
+        grid-row: 2/-1;
+        grid-column: 1/-1;
+      }
+      @include breakpoint("mobile-extra-large") {
+        display: none;
+      }
+    }
+    p {
+      display: none;
+    }
  }
-  h1 {
+
+  .search-menu .search-input,
+  .search-menu-container .search-input {
+    background: var(--d-content-background);
+    border: 1px solid var(--search-color);
+    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
+  }
+  .search-menu .search-input:focus-within,
+  .search-menu-container .search-input:focus-within {
+    border: 1px solid var(--search-color);
+    outline: 2px solid var(--search-color);
+  }
+  .search-menu .d-icon,
+  .search-menu .searching .d-icon,
+  .search-menu .searching .show-advanced-search .d-icon {
+    color: var(--search-color);
+  }
+  .panel-body {
+    z-index: z("dropdown");
+  }
+  .results {
+    background: var(--d-content-background);
+  }
+  &__title {
    grid-column: 1/2;
    grid-row: 1/-1;
    text-align: left;
    align-self: center;
    margin: 0;
    font-weight: 400;
-    color: var(--search-banner-text-color);
+    color: var(--search-color);
    @media screen and (max-width: 1028px) {
      font-size: var(--font-up-4);
      grid-column: 1/-1;
@@ -41,46 +94,8 @@
      text-align: center;
      margin-bottom: 0.5em;
    }
-  }
-  .search-menu {
-    grid-column: 2/3;
-    grid-row: 1/-1;
-    width: 100%;
-    align-self: center;
-    @media screen and (max-width: 1028px) {
-      grid-row: 2/-1;
-      grid-column: 1/-1;
+    @include breakpoint("mobile-extra-large") {
+      font-size: var(--font-up-2);
    }
-    @media screen and (max-width: 768px) {
-      grid-column: 2/-1;
-      grid-row: 1/-1;
-    }
-    @media screen and (max-width: 600px) {
-      grid-row: 2/-1;
-      grid-column: 1/-1;
-    }
-  }
-  p {
-    display: none;
-  }
-  .search-input {
-    background: var(--d-content-background);
-    border: 1px solid var(--search-color);
-    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
-  }
-  .search-menu .search-input:focus-within,
-  .search-menu-container .search-input:focus-within {
-    border: 1px solid var(--search-color);
-    outline: 2px solid var(--search-color);
-  }
-  .search-menu .d-icon,
-  .search-menu .searching .d-icon {
-    color: var(--search-color);
-  }
-  .panel-body {
-    z-index: z("dropdown");
-  }
-  .results {
-    background: var(--d-content-background);
  }
 }
@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+describe "Composer peek", type: :system do
+  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
+  fab!(:topic) { Fabricate(:topic_with_op) }
+
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before do
+    upload_theme
+    sign_in(current_user)
+  end
+
+  it "does not show composer peek for small windows" do
+    topic_page.visit_topic(topic)
+    topic_page.click_footer_reply
+    expect(composer).to be_opened
+
+    resize_window(width: 600) { expect(page).to have_no_css(".peek-mode-toggle") }
+  end
+
+  it "turns on composer peek and remembers this preference on page load" do
+    topic_page.visit_topic(topic)
+    topic_page.click_footer_reply
+    expect(composer).to be_opened
+
+    resize_window(width: 1380) do
+      find(".peek-mode-toggle").click
+      expect(page).to have_css("body.peek-mode-active")
+
+      topic_page.visit_topic(topic)
+      topic_page.click_footer_reply
+      expect(composer).to be_opened
+      expect(page).to have_css("body.peek-mode-active")
+
+      find(".peek-mode-toggle").click
+      expect(page).to have_no_css("body.peek-mode-active")
+    end
+  end
+
+  it "hides the composer preview when toggling" do
+    topic_page.visit_topic(topic)
+    topic_page.click_footer_reply
+    expect(composer).to be_opened
+    expect(composer).to have_composer_preview
+
+    resize_window(width: 1380) do
+      find(".peek-mode-toggle").click
+      expect(page).to have_css("body.peek-mode-active")
+      expect(composer).to have_no_composer_preview
+    end
+  end
+end
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+RSpec.describe "Core features", type: :system do
+  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before { upload_theme_or_component }
+
+  it_behaves_like "having working core features",
+                  skip_examples: %i[search:quick_search topics:create]
+
+  it "creates a new topic" do
+    sign_in(current_user)
+    visit("/new-topic")
+    composer.fill_title("This is a new topic")
+    composer.fill_content("This is a long enough sentence.")
+    expect(page).to have_css(".d-editor-preview p", visible: true)
+    within(".save-or-cancel") { click_button("Create Topic") }
+    expect(page).to have_content("This is a new topic")
+    expect(page).to have_content("This is a long enough sentence.")
+  end
+end
@@ -1,7 +1,16 @@
 # frozen_string_literal: true

+require_relative "./page_objects/components/user_color_palette_selector"
+
 describe "Horizon theme | High level", type: :system do
-  let!(:theme) { upload_theme }
+  let!(:theme) do
+    horizon_theme = upload_theme
+    ColorScheme
+      .where(theme_id: horizon_theme.id)
+      .where.not("name LIKE '%Dark%'")
+      .update_all(user_selectable: true)
+    horizon_theme
+  end
  fab!(:current_user) { Fabricate(:user) }
  fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
  fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
@@ -10,6 +19,7 @@ describe "Horizon theme | High level", type: :system do
  let(:topic_list) { PageObjects::Components::TopicList.new }
  let(:topic_page) { PageObjects::Pages::Topic.new }
  let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
+  let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }

  def run_all_high_level_tests
    expect(page).to have_css(".experimental-screen")
@@ -26,25 +36,27 @@ describe "Horizon theme | High level", type: :system do
    expect(topic_item.all("td").map { |el| el["class"] }).to eq(
      [
        "main-link topic-list-data",
-        "topic-activity-data",
        "topic-status-data",
        "topic-category-data",
        "topic-likes-replies-data",
+        "topic-activity-data",
      ],
    )

-    # Can see a topic in the list and navigate to it successfully
+    # Can see a topic in the list and navigate to it successfully.
    topic_list.visit_topic(topic_1)
    expect(topic_page).to have_topic_title(topic_1.title)

-    # Can change site colors from the sidebar palette, which are remembered across page reloads
-    palette_menu =
-      PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
-    palette_menu.expand
-    find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
-    expect(page).to have_css(".custom-color-marigold")
+    # Can change site colors from the sidebar palette, which are remembered
+    # across page reloads.
+    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
+
    page.refresh
-    expect(page).to have_css(".custom-color-marigold")
+    expect(palette_selector).to have_selected_palette(marigold_palette)
+    expect(palette_selector).to have_tertiary_color(marigold_palette)
  end

  it "works for anon" do
@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class UserColorPaletteSelector < PageObjects::Components::Base
+      def sidebar_footer_button_css
+        ".sidebar-footer-actions .user-color-palette-selector"
+      end
+
+      def palette_menu
+        PageObjects::Components::DMenu.new(find(sidebar_footer_button_css))
+      end
+
+      def open_palette_menu
+        palette_menu.expand
+      end
+
+      def has_no_palette_menu?
+        has_no_css?(".user-color-palette-selector-content")
+      end
+
+      def click_palette_menu_item(palette_name)
+        find(
+          ".user-color-palette-menu__content .user-color-palette-menu__item[data-color-palette='#{palette_name}']",
+        ).click
+      end
+
+      def has_selected_palette?(palette)
+        has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
+      end
+
+      def has_loaded_css?
+        has_css?(".user-color-palette-selector.user-color-palette-css-loaded")
+      end
+
+      def has_tertiary_color?(palette)
+        computed_color_hex =
+          page.evaluate_script(
+            "getComputedStyle(document.documentElement).getPropertyValue('--tertiary')",
+          )
+        computed_color_hex == "#" + palette.colors.find { |color| color.name == "tertiary" }.hex
+      end
+
+      def has_computed_color?(color)
+        computed_background_color =
+          page.evaluate_script(
+            "getComputedStyle(document.querySelector(\"li.sidebar-section-link-wrapper[data-list-item-name='everything'] .active\")).backgroundColor",
+          )
+        computed_background_color == color
+      end
+    end
+  end
+end
@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+RSpec.describe "Sidebar New Topic Button", system: true do
+  before { upload_theme }
+  fab!(:group)
+  fab!(:user) { Fabricate(:user, trust_level: 3, groups: [group]) }
+  fab!(:category)
+  fab!(:private_category) do
+    c = Fabricate(:category_with_definition)
+    c.set_permissions(group => :readonly)
+    c.save
+    c
+  end
+
+  context "for signed in users" do
+    before { sign_in(user) }
+
+    it "renders the new topic button in the sidebar" do
+      visit("/latest")
+      expect(page).to have_css(".sidebar-new-topic-button__wrapper")
+      expect(page).to have_css(".sidebar-new-topic-button:not(.disabled)")
+    end
+
+    it "opens the composer when clicked" do
+      visit("/")
+      find(".sidebar-new-topic-button").click
+      expect(page).to have_css("#reply-title")
+    end
+
+    it "shows draft menu when drafts exist" do
+      Draft.create!(user: user, draft_key: "topic_1", data: {})
+
+      visit("/")
+      expect(page).to have_css(".sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger")
+    end
+
+    it "disables button when visiting read-only category" do
+      visit("/c/#{private_category.slug}/#{private_category.id}")
+
+      expect(page).to have_css(".sidebar-new-topic-button[disabled]")
+
+      visit("/c/#{category.slug}/#{category.id}")
+
+      expect(page).not_to have_css(".sidebar-new-topic-button[disabled]")
+    end
+  end
+
+  context "for anon" do
+    it "does not render the sidebar button for anons" do
+      visit("/latest")
+      expect(page).not_to have_css(".sidebar-new-topic-button__wrapper")
+      expect(page).not_to have_css(".sidebar-new-topic-button:not(.disabled)")
+    end
+  end
+end
@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+require_relative "./page_objects/components/user_color_palette_selector"
+
+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)
+    ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
+    horizon_theme
+  end
+  fab!(:current_user) { Fabricate(:user) }
+  let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
+  let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
+  let(:interface_color_mode) { PageObjects::Components::InterfaceColorMode.new }
+  let(:interface_color_selector) do
+    PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
+  end
+  let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
+  let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
+
+  before { SiteSetting.interface_color_selector = "sidebar_footer" }
+
+  it "does not show the sidebar button if there are no user-selectable color palettes" do
+    ColorScheme.update_all(user_selectable: false)
+    visit "/"
+    expect(page).to have_no_css(palette_selector.sidebar_footer_button_css)
+  end
+
+  describe "for logged in user" do
+    before { sign_in(current_user) }
+
+    it "can open the user color palette menu and select a palette, which is preseved on reload" do
+      visit "/"
+      palette_selector.open_palette_menu
+      palette_selector.click_palette_menu_item(marigold_palette.name)
+
+      expect(palette_selector).to have_no_palette_menu
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
+      expect(palette_selector).to have_tertiary_color(marigold_palette)
+
+      page.refresh
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+    end
+
+    it "uses the dark version of the palette if the user selects dark mode" do
+      visit "/"
+      palette_selector.open_palette_menu
+      palette_selector.click_palette_menu_item(marigold_palette.name)
+
+      expect(palette_selector).to have_no_palette_menu
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
+      expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
+
+      interface_color_selector.expand
+      interface_color_selector.dark_option.click
+      expect(interface_color_mode).to have_dark_mode_forced
+      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
+
+      page.refresh
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
+    end
+
+    context "when the theme is not default but is selected by a user" do
+      let(:set_theme_as_default) { false }
+
+      it "can open the user color palette menu and select a palette, which is preseved on reload" do
+        theme.update!(user_selectable: true)
+        current_user.user_option.update!(theme_ids: [theme.id])
+        visit "/"
+        palette_selector.open_palette_menu
+        palette_selector.click_palette_menu_item(marigold_palette.name)
+
+        expect(palette_selector).to have_no_palette_menu
+        expect(palette_selector).to have_selected_palette(marigold_palette)
+        expect(palette_selector).to have_loaded_css
+        expect(palette_selector).to have_tertiary_color(marigold_palette)
+      end
+    end
+  end
+
+  describe "for anon" do
+    it "can open the user color palette menu and select a palette, which is preseved on reload" do
+      visit "/"
+      palette_selector.open_palette_menu
+      palette_selector.click_palette_menu_item(marigold_palette.name)
+
+      expect(palette_selector).to have_no_palette_menu
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
+      expect(palette_selector).to have_tertiary_color(marigold_palette)
+    end
+
+    it "uses the dark version of the palette if the user selects dark mode, which is preserved on reload" do
+      visit "/"
+      palette_selector.open_palette_menu
+      palette_selector.click_palette_menu_item(marigold_palette.name)
+
+      expect(palette_selector).to have_no_palette_menu
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
+      expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
+
+      interface_color_selector.expand
+      interface_color_selector.dark_option.click
+      expect(interface_color_mode).to have_dark_mode_forced
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
+      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
+
+      page.refresh
+      expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
+    end
+  end
+end
Author	SHA1	Message	Date
Jordan Vidrine	d887ad9475	UX: Adjust bulk select action placement	2025-04-24 12:16:01 -05:00
Jordan Vidrine	806b800f1f	UX: adjust styles to meet core changes (#148 )	2025-04-23 14:44:00 -05:00
Jordan Vidrine	70af5fc68a	UX: Adjust spacing for more room (#146 )	2025-04-21 16:36:03 -05:00
Kris	b1a9389a04	UX: minor breakpoint gap fix (#147 ) Reported here: https://meta.discourse.org/t/help-us-test-horizon-our-newest-theme/360484/55?u=awesomerobot We have a 1px gap here where we get kind of a half-container Before: ![image](https://github.com/user-attachments/assets/0d355156-c579-418d-a1d1-9d624c61bc12) After: ![image](https://github.com/user-attachments/assets/ce96bf6b-c8a8-4fd2-b5b0-56d37382284d)	2025-04-18 14:08:34 -04:00
Martin Brennan	f9603a24ea	DEV: Rename search -> welcome banner (#144 ) Horizon is targeting the welcome banner not the search component anymore, update CSS class names and rename the file to make this clearer	2025-04-18 12:23:44 +10:00
Jordan Vidrine	bf2fb463ae	UX: Modernize spacing a bit (#145 )	2025-04-17 21:16:43 -05:00
Martin Brennan	07113ca324	DEV: Slight refactor and add specs for composer peek (#142 ) Followup `cf9fd864dd`	2025-04-18 09:12:43 +10:00
Kris	d67ec3ac5f	FIX: remove SCSS mixed declarations (#143 ) This fixes the SCSS mixed declaration errors (most noticeable while running rspec)	2025-04-17 17:27:13 -04:00
Kris	cf9fd864dd	DEV: implement composer peek mode directly in theme (#141 ) This implements the [composer peek](https://github.com/discourse/composer-peek) component directly into the theme, and makes some minor adjustments to match theme styles: ![image](https://github.com/user-attachments/assets/e4272a11-6570-4392-945f-c509cf4debd6)	2025-04-16 17:10:23 -04:00
Kris	36899bbbaa	UX: make theme compatible with AI gists (#140 ) Before (only pinned topic excerpts, no gist toggle): ![image](https://github.com/user-attachments/assets/7a1b78b8-e115-4c96-9ebf-52d2c1237eea) After (gists can be toggled on): ![image](https://github.com/user-attachments/assets/9e6786be-3817-4420-8142-1c5f7cad54ea) This puts the gists in the same place as the theme places excerpts and uses the same styles. It also follows the theme pattern of hiding excerpts/gists on mobile.	2025-04-16 15:34:52 -04:00
Jordan Vidrine	651cf2794c	UX: remove square avatar from topic posts (#139 )	2025-04-16 12:04:41 -05:00
Jordan Vidrine	e9e166ca3a	FIX: Search header index (#138 )	2025-04-15 20:46:27 -05:00
Kris	81141cc66f	UX: update about.json, readme (#137 ) Just a little bit of metadata cleanup	2025-04-15 09:19:14 -04:00
Martin Brennan	b23c4764a2	DEV: Put full width styles into their own file (#132 ) Followup `f1d5b69293` We want to make it super clear that this is to be removed when we merge full width into core, keeping it in desktop.scss together with other styles will make that harder.	2025-04-15 13:46:20 +10:00
Jordan Vidrine	7ab29303dd	UX: Mobile composer fixes (#136 )	2025-04-14 16:33:30 -05:00
Kris	776071fdb0	UX: adjust disabled create button tooltip styles (#135 )	2025-04-14 16:22:17 -05:00
Jordan Vidrine	2d193b4d7a	UX: Quick fixes (#134 )	2025-04-14 15:52:12 -05:00
Jordan Vidrine	24165a53a6	UX: Login layout fixes (#133 )	2025-04-14 13:59:24 -05:00
Kris	3a9917862d	UX: main-outlet needs dynamic bottom padding when composer open (#119 ) When the composer is open the `#main-outlet`'s bottom padding needs to match the composer height, so the content behind the composer can be scrolled into view. Reported here: https://meta.discourse.org/t/help-us-test-horizon-our-newest-theme/360484/26?u=awesomerobot	2025-04-14 09:06:42 -04:00
Kris	0cd52c07fe	UX: fix topic progress height (#118 ) Before: ![image](https://github.com/user-attachments/assets/b41d9c5f-6a7a-4cae-aa87-375e54b94bf9) After: ![image](https://github.com/user-attachments/assets/e6969dcd-83b3-4e3c-a868-1dbd70ecf195)	2025-04-14 08:59:33 -04:00
Kris	1e6a4a8a57	DEV: port sidebar new topic component into theme (#129 ) This moves the [sidebar new topic button component](https://github.com/discourse/discourse-sidebar-new-topic-button) into the theme directly If you have installed this theme previously, you should manually remove the component.	2025-04-14 08:58:46 -04:00
Jordan Vidrine	b40a5a6e9a	UX: Adjust avatar spacing (#131 )	2025-04-12 09:03:55 -05:00
Jordan Vidrine	3a0a5b0f30	UX: Fix chat backgrounds (#130 )	2025-04-11 17:06:41 -05:00
Jordan Vidrine	e3aed16e2b	UX: remove gap on avatars in PM list (#128 )	2025-04-11 15:47:12 -05:00
Jordan Vidrine	23f4362f7e	UX: Visual fixes (#127 )	2025-04-11 15:33:58 -05:00
Kris	f1d5b69293	DEV: port full-width component to be included directly (#126 ) Removes the [full-width component](https://github.com/discourse/discourse-full-width-component) dependency by adding most of the code directly to the theme. There was one grid definition in the CSS I ended up removing because it was conflicting with an existing override in the theme. Anyone who has previously installed the theme should manually remove the full-width component from it.	2025-04-11 15:46:25 -04:00
Jordan Vidrine	18ffe04242	UX: New PM design (#125 )	2025-04-11 13:43:17 -05:00
David Taylor	b220d87a0d	DEV: Trigger basic-html view for unsupported browsers (#124 )	2025-04-10 20:39:30 +01:00
Kris	8e5cef819d	UX: fix account activation layout (#123 ) fixes this too-wide layout issue ![image](https://github.com/user-attachments/assets/9b2c8a1a-e395-44b5-acdb-cb289f69dcfb)	2025-04-10 13:19:52 -04:00
chapoi	2653732bc3	UX: post notice styling (#122 ) ![CleanShot 2025-04-10 at 11 14 07@2x](https://github.com/user-attachments/assets/c5c8f918-fbf4-4a39-b65d-09ddf045fe74) ⬇️ ![CleanShot 2025-04-10 at 11 13 28@2x](https://github.com/user-attachments/assets/449d824a-15e3-49fb-9acb-25cee76e8acb)	2025-04-10 13:56:17 +02:00
Jordan Vidrine	2a0f5ec599	UX: font set experimental screen styles (#121 )	2025-04-09 12:12:10 -05:00
Loïc Guitaut	3c7ccc97a7	DEV: Add system spec to check core features are working fine (#117 )	2025-04-09 15:41:21 +02:00
Kris	2674364309	DEV: use wildcard selector for common container behavior (#120 )	2025-04-08 16:01:08 -05:00
chapoi	5299986ed1	UX: iteration for the timeline scroll design (#116 ) Attempt to make the timeline less eye-drawing, while still enhancing the feel of "this is a draggable area" by emphasising the handle. Also added a slight decrease of width. \| Before \| After \| \|--------\|--------\| \| ![CleanShot 2025-04-07 at 20 17 29@2x](https://github.com/user-attachments/assets/7997a797-1ffa-43b7-94fa-010974aeae51) \| ![CleanShot 2025-04-07 at 20 17 02@2x](https://github.com/user-attachments/assets/7372e1e2-8530-4045-bcdf-0ef73aa6698e) \|	2025-04-08 18:31:10 +02:00
Jordan Vidrine	34b26abb6e	UX: fix width (#114 )	2025-04-04 14:04:58 -05:00
Jordan Vidrine	c735718f1b	DEV: Add more user logic (#113 )	2025-04-04 11:47:00 -05:00
Jordan Vidrine	cdcbffc483	UX: More color fixes (#111 )	2025-04-03 16:13:23 -05:00
Jordan Vidrine	d8c44934f4	UX: Theme name change (#112 )	2025-04-03 16:13:02 -05:00
Martin Brennan	00b2402cbb	DEV: Core feature spec refinement (#106 ) Followup `e4b99976eb` This allows us to skip core feature specs more granularly, since the topic ones work fine except create for example. Also adds a topic create spec, since this theme uses the sidebar new topic button component. We can rely on the /new-topic route instead.	2025-04-03 13:40:27 +10:00
Kris	c9c468c677	UX: fix PM user input spacing (#110 ) Before: ![image](https://github.com/user-attachments/assets/3327adce-b26e-4644-82fe-d4f9611ad8e0) After: ![image](https://github.com/user-attachments/assets/33f6a819-fa34-40f1-98de-469ab0f161f0)	2025-04-02 15:07:51 -04:00
Kris	85d94e9eca	UX: fix cakeday & user directory containers (#109 ) Before: ![image](https://github.com/user-attachments/assets/dbc14156-2def-42c1-bbc4-b2366a9b89fa) ![image](https://github.com/user-attachments/assets/92554725-ce2d-4756-9f9e-e49b91f0c227) After: ![image](https://github.com/user-attachments/assets/a2c90617-6efa-4bdb-8149-cd7d5cea6e95) ![image](https://github.com/user-attachments/assets/2188f0be-58ef-4996-8628-57705cc6d52c)	2025-04-02 15:07:35 -04:00
Jordan Vidrine	d0078cdd3e	UX: Adjust icon colors (#108 )	2025-04-02 10:50:37 -05:00
Jordan Vidrine	759fd0b218	UX: Header outline (#107 )	2025-04-02 08:28:08 -05:00
Jordan Vidrine	1c85ae4626	UX: More accessible colors (#105 )	2025-04-01 20:01:29 -05:00
Jordan Vidrine	f4c6876923	UX: Topic excerpt fix (#104 )	2025-04-01 15:09:04 -05:00
Martin Brennan	e4b99976eb	DEV: Add core feature spec (#100 )	2025-04-01 12:49:37 -05:00
chapoi	def09bcca5	UX: adapt topic card layout for bookmarks & assigned list (#97 )	2025-04-01 12:48:52 -05:00
Jordan Vidrine	05d4b79fc9	UX: Add hover colors (#103 )	2025-04-01 12:25:52 -05:00
Kris	5570fb9feb	UX: fix group page container, round border (#102 ) Fixes the spacing on the group container and rounds the header Before: ![image](https://github.com/user-attachments/assets/3384841a-82b0-4f17-a0be-a32bd405bd29) After: ![image](https://github.com/user-attachments/assets/1450cb2d-bd7a-4fb4-b7a8-b800b8b40d0d)	2025-04-01 12:50:19 -04:00
Jordan Vidrine	5bbba7cacc	UX: Define header colors (#101 )	2025-04-01 09:52:12 -05:00
Martin Brennan	96da1d3439	FIX: Issues with FOUC and dark mode when switching palettes (#99 ) Followup `6a4b979514` In this commit I changed how we load the selected palette stylesheet so the system specs would know when the CSS is actually loaded, however this introduced an issue where the user would see a FOUC when switching palettes. I also introduced a bug where if you chose to force dark mode then switched the palette, you would see light mode instead. This commit fixes both issues, by swapping the CSS link with a preloaded one then waiting for the preload before switching the href of the existing link, and removes `mode` shenanigans causing the light mode issue.	2025-04-01 13:07:26 +10:00
Kris	878da19552	UX: fix category nav padding on small screens (#98 ) This adjusts the active state of the dropdown by employing negative margin to compensate for the padding before: ![image](https://github.com/user-attachments/assets/e8c8a544-3527-4d6c-a513-0291a6a15ab5) after: ![image](https://github.com/user-attachments/assets/4a53a0ee-a07d-43b0-9ab6-3542d86bbe8c)	2025-03-31 17:02:30 -04:00
chapoi	17bd1c2346	UX: fix chat border (#96 )	2025-03-31 10:50:44 +02:00
Martin Brennan	6a4b979514	FIX: Color palette switching when Horizon is not default (#95 ) When Horizon is not the default theme, and the color palette switcher is used, we were ending up in a broken CSS state because the color definitions were not loaded correctly when calling `/color-scheme-stylesheet/` to get the new stylesheet URLs. The problem was that we were not giving the theme ID to this URL, we were only doing `/color-scheme-stylesheet/:palette_id`, not `/color-scheme-stylesheet/:palette_id/:theme_id`, so the theme color definitions like the ones that define the background color were not loaded. This commit fixes the issue and also changes to recreating the `<link>` tags for the CSS in the head so we can check if they are loaded correctly for easier testing in system specs.	2025-03-31 18:23:07 +10:00
Jordan Vidrine	b4e451e64b	DEV: Experimenting with using built in core color palettes for the color picking component (#71 ) This PR is the beginning of converting the color picker to use built in core color palettes. The `color_schemes` defined in `about.json` are created in core when the theme is imported, and we then show all user-selectable color palettes in this sidebar footer menu. An important caveat here is that all of the Horizon themes must be changed to `user_selectable` otherwise they will not show up in the color palette selector in the sidebar. When choosing a color palette that also has a corresponding dark color palette, both light mode and dark mode are correctly saved with the color palette(s) chosen, using the color palette cookie we already have in core. Anon users can also set a palette, which will be saved in a cookie. --------- Co-authored-by: Sérgio Saquetim <saquetim@discourse.org> Co-authored-by: Martin Brennan <martin@discourse.org> Co-authored-by: Osama Sayegh <asooomaasoooma90@gmail.com>	2025-03-31 13:28:28 +10:00
chapoi	0473f90cd9	Lower z-index of powered-by-discourse badge (#93 )	2025-03-30 20:33:59 -05:00
Jordan Vidrine	3e3f410839	UX: More card fixes (#94 )	2025-03-28 16:43:52 -05:00