DEV: Unify on-resize modifier situation (#30415)

1. Move chat's on-resize to core
2. Remove ember-on-resize-modifier

app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.hbs

@@ -22,8 +22,8 @@
   {{/if}}
 
   <ul
-    {{on-resize this.checkScroll}}
+    {{on-resize this.onResize}}
-    {{on "scroll" this.watchScroll}}
+    {{on "scroll" this.onScroll}}
     {{did-insert this.scrollToActive}}
     {{on "mousedown" this.scrollDrag}}
     class="nav-pills action-list {{@className}}"

app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js

@@ -22,13 +22,14 @@ export default class HorizontalOverflowNav extends Component {
   }
 
   @bind
-  checkScroll(event) {
+  onResize(entries) {
     if (this.site.mobileView) {
       return;
     }
 
-    this.watchScroll(event);
+    const element = entries[0].target;
-    this.hasScroll = event.target.scrollWidth > event.target.offsetWidth;
+    this.watchScroll(element);
+    this.hasScroll = element.scrollWidth > element.offsetWidth;
   }
 
   @bind
@@ -37,22 +38,23 @@ export default class HorizontalOverflowNav extends Component {
   }
 
   @bind
-  watchScroll(event) {
+  onScroll(event) {
     if (this.site.mobileView) {
       return;
     }
 
-    if (
+    this.watchScroll(event.target);
-      event.target.offsetWidth + event.target.scrollLeft ===
+  }
-      event.target.scrollWidth
+
-    ) {
+  watchScroll(element) {
+    if (element.offsetWidth + element.scrollLeft === element.scrollWidth) {
       this.hideRightScroll = true;
       clearInterval(this.scrollInterval);
     } else {
       this.hideRightScroll = false;
     }
 
-    if (event.target.scrollLeft === 0) {
+    if (element.scrollLeft === 0) {
       this.hideLeftScroll = true;
       clearInterval(this.scrollInterval);
     } else {

app/assets/javascripts/discourse/app/modifiers/on-resize.js

@@ -2,7 +2,7 @@ import { registerDestructor } from "@ember/destroyable";
 import { cancel, throttle } from "@ember/runloop";
 import Modifier from "ember-modifier";
 
-export default class ChatOnResize extends Modifier {
+export default class OnResize extends Modifier {
   constructor(owner, args) {
     super(owner, args);
     registerDestructor(this, (instance) => instance.cleanup());

app/assets/javascripts/discourse/package.json

@@ -96,7 +96,6 @@
     "ember-exam": "^9.0.0",
     "ember-load-initializers": "^3.0.1",
     "ember-modifier": "^4.2.0",
-    "ember-on-resize-modifier": "^2.0.2",
     "ember-qunit": "^9.0.1",
     "ember-source": "~5.12.0",
     "ember-template-imports": "^4.2.0",

plugins/chat/assets/javascripts/discourse/components/chat-messages-container.gjs

@@ -1,10 +1,10 @@
 import { hash } from "@ember/helper";
-import ChatOnResize from "../modifiers/chat/on-resize";
+import onResize from "discourse/modifiers/on-resize";
 
 const ChatMessagesContainer = <template>
   <div
     class="chat-messages-container"
-    {{ChatOnResize @didResizePane (hash delay=100 immediate=true)}}
+    {{onResize @didResizePane (hash delay=100 immediate=true)}}
   >
     {{yield}}
   </div>

plugins/chat/assets/javascripts/discourse/components/chat/navbar/index.gjs

@@ -4,7 +4,7 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import concatClass from "discourse/helpers/concat-class";
 import noop from "discourse/helpers/noop";
-import ChatOnResize from "../../../modifiers/chat/on-resize";
+import onResize from "discourse/modifiers/on-resize";
 import Actions from "./actions";
 import BackButton from "./back-button";
 import ChannelTitle from "./channel-title";
@@ -30,7 +30,7 @@ export default class ChatNavbar extends Component {
     <div
       class={{concatClass "c-navbar-container" (if @onClick "-clickable")}}
       {{on "click" (if @onClick @onClick (noop))}}
-      {{ChatOnResize this.handleResize}}
+      {{onResize this.handleResize}}
     >
       <nav class="c-navbar">
         {{yield

pnpm-lock.yaml

@@ -504,9 +504,6 @@ importers:
       ember-modifier:
         specifier: ^4.2.0
         version: 4.2.0(@babel/core@7.26.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))
-      ember-on-resize-modifier:
-        specifier: ^2.0.2
-        version: 2.0.2(@babel/core@7.26.0)(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))
       ember-qunit:
         specifier: ^9.0.1
         version: 9.0.1(@ember/test-helpers@4.0.4(@babel/core@7.26.0)(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))))(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))(qunit@2.23.1)
@@ -744,7 +741,7 @@ importers:
         version: 4.2.0
       ember-this-fallback:
         specifier: ^0.4.0
-        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5))
+        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))
     devDependencies:
       ember-cli:
         specifier: ~6.0.1
@@ -1087,7 +1084,7 @@ importers:
         version: 5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))
       ember-this-fallback:
         specifier: ^0.4.0
-        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5))
+        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))
       handlebars:
         specifier: ^4.7.8
         version: 4.7.8
@@ -4392,10 +4389,6 @@ packages:
       ember-source:
         optional: true
 
-  ember-on-resize-modifier@2.0.2:
-    resolution: {integrity: sha512-7mcD7CNbiCaZEIASWlRz/Wmn47afCMSFTdQJSSUe0WCgnXxn9DVoqZ39B7ZuddTHa0V6otTFrV/lIRYpggQ+eg==}
-    engines: {node: 12.* || 14.* || >= 16}
-
   ember-qunit@9.0.1:
     resolution: {integrity: sha512-9DgjczFG7ZjINmwWFYDtUF8McbYqQir82hyFp/ZbMOLkpFvHCKPw1mtKcpcdLnLAAYJpwR2/MCyPNiEMkR11aA==}
     peerDependencies:
@@ -4403,10 +4396,6 @@ packages:
       ember-source: '>=4.0.0'
       qunit: ^2.13.0
 
-  ember-resize-observer-service@1.1.0:
-    resolution: {integrity: sha512-/vbfxtHSyOGSNdjPKL8X3SyvUnYo3z88sJtD/bLJ0ZGhqVPaXCmtSkLyr/Fh75ckJDixRFxK4i4zEUSlrbk0PA==}
-    engines: {node: 12.* || 14.* || >= 16}
-
   ember-resolver@13.1.0:
     resolution: {integrity: sha512-t/PjXLCl5tM9EQXGIFoBgHiA41HkLJpfo17Nud5Cy9eyUPGcnsMjWJqQ+O5QHA0E63Sp+zTn4y/RS5Tu2v2ydg==}
     engines: {node: 14.* || 16.* || >= 18}
@@ -12684,20 +12673,6 @@ snapshots:
       - '@babel/core'
       - supports-color
 
-  ember-on-resize-modifier@2.0.2(@babel/core@7.26.0)(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)):
-    dependencies:
-      ember-auto-import: 2.10.0(@glint/template@1.5.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 5.7.2
-      ember-modifier: 4.2.0(@babel/core@7.26.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))
-      ember-resize-observer-service: 1.1.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@glint/template'
-      - ember-source
-      - supports-color
-      - webpack
-
   ember-qunit@9.0.1(@ember/test-helpers@4.0.4(@babel/core@7.26.0)(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))))(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))(qunit@2.23.1):
     dependencies:
       '@ember/test-helpers': 4.0.4(@babel/core@7.26.0)(@glint/template@1.5.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2)))
@@ -12710,13 +12685,6 @@ snapshots:
       - '@glint/template'
       - supports-color
 
-  ember-resize-observer-service@1.1.0:
-    dependencies:
-      ember-cli-babel: 7.26.11
-      ember-cli-htmlbars: 5.7.2
-    transitivePeerDependencies:
-      - supports-color
-
   ember-resolver@13.1.0(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))):
     dependencies:
       ember-cli-babel: 7.26.11
@@ -12866,7 +12834,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ember-this-fallback@0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)):
+  ember-this-fallback@0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.0))(@glint/template@1.5.0)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.2))):
     dependencies:
       '@glimmer/syntax': 0.84.3
       babel-plugin-ember-template-compilation: 2.2.5