Merge branch 'main' into dev/topic-list-data-mobile

app/assets/javascripts/discourse/app/components/composer-body.js

@@ -1,5 +1,6 @@
 import Component from "@ember/component";
 import { cancel, schedule, throttle } from "@ember/runloop";
+import { service } from "@ember/service";
 import { classNameBindings } from "@ember-decorators/component";
 import { observes } from "@ember-decorators/object";
 import discourseDebounce from "discourse/lib/debounce";
@@ -33,6 +34,8 @@ function mouseYPos(e) {
   "currentUserPrimaryGroupClass"
 )
 export default class ComposerBody extends Component {
+  @service capabilities;
+
   elementId = "reply-control";
 
   @discourseComputed("composer.action")
@@ -87,7 +90,10 @@ export default class ComposerBody extends Component {
     const currentMousePos = mouseYPos(event);
 
     let size = this.origComposerSize + (this.lastMousePos - currentMousePos);
-    size = Math.min(size, window.innerHeight - headerOffset());
+    const maxHeight = this.capabilities.isTablet
+      ? window.innerHeight
+      : window.innerHeight - headerOffset();
+    size = Math.min(size, maxHeight);
     const minHeight = parseInt(getComputedStyle(this.element).minHeight, 10);
     size = Math.max(minHeight, size);
 

app/assets/javascripts/discourse/app/components/topic-list/item.gjs

@@ -248,14 +248,19 @@ export default class Item extends Component {
                   />
                 </label>
               {{else}}
-                <a
-                  href={{@topic.lastPostUrl}}
-                  aria-label={{i18n
-                    "latest_poster_link"
-                    username=@topic.lastPosterUser.username
-                  }}
-                  data-user-card={{@topic.lastPosterUser.username}}
-                >{{avatar @topic.lastPosterUser imageSize="large"}}</a>
+                <PluginOutlet
+                  @name="topic-list-item-mobile-avatar"
+                  @outletArgs={{hash topic=@topic}}
+                >
+                  <a
+                    href={{@topic.lastPostUrl}}
+                    aria-label={{i18n
+                      "latest_poster_link"
+                      username=@topic.lastPosterUser.username
+                    }}
+                    data-user-card={{@topic.lastPosterUser.username}}
+                  >{{avatar @topic.lastPosterUser imageSize="large"}}</a>
+                </PluginOutlet>
               {{/if}}
             </div>
 

app/assets/javascripts/discourse/app/components/topic-list/latest-topic-list-item.gjs

@@ -13,12 +13,19 @@ import discourseTags from "discourse/helpers/discourse-tags";
 import formatDate from "discourse/helpers/format-date";
 import topicFeaturedLink from "discourse/helpers/topic-featured-link";
 import topicLink from "discourse/helpers/topic-link";
+import { applyValueTransformer } from "discourse/lib/transformer";
 
 export default class LatestTopicListItem extends Component {
   get tagClassNames() {
     return this.args.topic.tags?.map((tagName) => `tag-${tagName}`);
   }
 
+  get additionalClasses() {
+    return applyValueTransformer("latest-topic-list-item-class", [], {
+      topic: this.args.topic,
+    });
+  }
+
   <template>
     <div
       data-topic-id={{@topic.id}}
@@ -32,6 +39,7 @@ export default class LatestTopicListItem extends Component {
         (if @topic.pinned "pinned")
         (if @topic.closed "closed")
         (if @topic.visited "visited")
+        this.additionalClasses
       }}
     >
       <PluginOutlet

app/assets/javascripts/discourse/app/instance-initializers/sniff-capabilities.js

@@ -16,5 +16,9 @@ export default {
     if (caps.isIOS) {
       html.classList.add("ios-device");
     }
+
+    if (caps.isTablet) {
+      html.classList.add("tablet-device");
+    }
   },
 };

app/assets/javascripts/discourse/app/lib/transformer/registry.js

@@ -12,19 +12,20 @@ export const VALUE_TRANSFORMERS = Object.freeze([
   "home-logo-href",
   "home-logo-image-url",
   "invite-simple-mode-topic",
+  "latest-topic-list-item-class",
   "mentions-class",
   "more-topics-tabs",
   "move-to-topic-merge-options",
   "move-to-topic-move-options",
-  "navigation-bar-dropdown-mode",
   "navigation-bar-dropdown-icon",
-  "parent-category-row-class-mobile",
+  "navigation-bar-dropdown-mode",
   "parent-category-row-class",
+  "parent-category-row-class-mobile",
   "post-menu-buttons",
   "small-user-attrs",
+  "topic-list-class",
   "topic-list-columns",
   "topic-list-header-sortable-column",
-  "topic-list-class",
   "topic-list-item-class",
   "topic-list-item-expand-pinned",
   "topic-list-item-mobile-layout",

app/assets/javascripts/discourse/app/services/composer.js

@@ -1592,7 +1592,7 @@ export default class ComposerService extends Service {
 
     // The two custom properties below can be overridden by themes/plugins to set different default composer heights.
     if (this.model.action === "reply") {
-      return "var(--reply-composer-height, 300px)";
+      return "var(--reply-composer-height, 255px)";
     } else {
       return "var(--new-topic-composer-height, 400px)";
     }

app/assets/javascripts/discourse/tests/integration/components/latest-topic-list-item-test.gjs

@@ -0,0 +1,36 @@
+import { render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import LatestTopicListItem from "discourse/components/topic-list/latest-topic-list-item";
+import { withPluginApi } from "discourse/lib/plugin-api";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+
+module("Integration | Component | latest-topic-list-item", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("latest-topic-list-item-class value transformer", async function (assert) {
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "latest-topic-list-item-class",
+        ({ value, context }) => {
+          if (context.topic.get("foo")) {
+            value.push("bar");
+          }
+          return value;
+        }
+      );
+    });
+
+    const store = this.owner.lookup("service:store");
+    const topic = store.createRecord("topic", { id: 1234, foo: true });
+    const topic2 = store.createRecord("topic", { id: 1235, foo: false });
+    await render(<template>
+      <LatestTopicListItem @topic={{topic}} />
+      <LatestTopicListItem @topic={{topic2}} />
+    </template>);
+
+    assert.dom(".latest-topic-list-item[data-topic-id='1234']").hasClass("bar");
+    assert
+      .dom(".latest-topic-list-item[data-topic-id='1235']")
+      .doesNotHaveClass("bar");
+  });
+});

app/assets/stylesheets/common/base/compose.scss

@@ -65,8 +65,10 @@ html.composer-open {
   }
 
   &.open {
+    --min-height: 255px;
     box-sizing: border-box;
     height: var(--composer-height);
+    min-height: var(--min-height);
     max-height: calc(100vh - var(--header-offset, 4em));
     padding-bottom: var(--composer-ipad-padding);
   }
@@ -632,6 +634,7 @@ div.ac-wrap {
 // for maximum browser compatibility (especially Firefox and webviews)
 // see https://developer.chrome.com/blog/viewport-resize-behavior for context
 .ipados-device,
+.tablet-device,
 .mobile-device {
   #reply-control {
     z-index: -1;

app/assets/stylesheets/common/base/modal.scss

@@ -41,6 +41,11 @@
         font-size: var(--font-up-2);
         color: var(--primary-high);
       }
+      &:focus-visible {
+        .d-icon {
+          color: var(--primary);
+        }
+      }
     }
   }
 

app/assets/stylesheets/common/components/buttons.scss

@@ -62,7 +62,7 @@
       }
     }
   }
-  &:focus {
+  &:focus-visible {
     outline: none;
     background-color: $hover-bg-color;
     color: $hover-text-color;
@@ -72,10 +72,6 @@
         color: Highlight;
       }
     }
-
-    &:focus-visible {
-      @include darken-background($hover-bg-color, 0.1);
-    }
   }
 
   .discourse-no-touch &:active:not(:hover):not(:focus),
@@ -201,7 +197,7 @@
   color: #000;
   background: #fff;
   border-radius: var(--d-border-radius);
-  &:focus {
+  &:focus-visible {
     outline: 1px solid #000;
   }
   &[href] {
@@ -289,7 +285,7 @@
   }
   .discourse-no-touch & {
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: var(--primary);
       .d-icon {
         color: var(--primary);
@@ -298,7 +294,7 @@
     &:hover {
       background: transparent;
     }
-    &:focus {
+    &:focus-visible {
       background: var(--primary-low);
     }
   }
@@ -310,14 +306,14 @@
     }
     .discourse-no-touch & {
       &:hover,
-      &:focus {
+      &:focus-visible {
         background: transparent;
         .d-icon {
           color: var(--primary);
         }
       }
     }
-    &:focus {
+    &:focus-visible {
       background: transparent;
       .d-icon {
         color: var(--primary);
@@ -330,14 +326,14 @@
       &,
       &:hover,
       &.btn-hover,
-      &:focus {
+      &:focus-visible {
         color: var(--primary);
       }
     }
     &:not([disabled]) {
       &:hover,
       &.btn-hover,
-      &:focus {
+      &:focus-visible {
         color: var(--tertiary-hover);
       }
 
@@ -347,7 +343,7 @@
       }
     }
   }
-  &:focus {
+  &:focus-visible {
     outline: none;
     background: var(--primary-low);
     .d-icon {
@@ -370,10 +366,6 @@
       background: transparent;
     }
   }
-  &:focus {
-    color: var(--tertiary);
-    background: transparent;
-  }
   &:focus-visible {
     color: var(--tertiary);
     background: transparent;
@@ -386,7 +378,6 @@
   .d-icon {
     color: inherit;
   }
-  &:focus,
   &:focus-visible {
     color: var(--#{$btn-color}-hover);
   }
@@ -406,7 +397,6 @@
     .d-icon {
       color: var(--primary-high);
     }
-    &:focus,
     &:focus-visible {
       background: transparent;
       color: var(--tertiary-hover);