From 3c95aceeb0d093521ecb8983b1bdde8b6ca09c81 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 23 Dec 2024 09:11:17 +0100
Subject: [PATCH] DEV: Unify on-resize modifier situation (#30415)

1. Move chat's on-resize to core
2. Remove ember-on-resize-modifier
---
 .../components/horizontal-overflow-nav.hbs    |  4 +-
 .../app/components/horizontal-overflow-nav.js | 20 +++++-----
 .../discourse/app/modifiers}/on-resize.js     |  2 +-
 app/assets/javascripts/discourse/package.json |  1 -
 .../components/chat-messages-container.gjs    |  4 +-
 .../components/chat/navbar/index.gjs          |  4 +-
 pnpm-lock.yaml                                | 38 ++-----------------
 7 files changed, 21 insertions(+), 52 deletions(-)
 rename {plugins/chat/assets/javascripts/discourse/modifiers/chat => app/assets/javascripts/discourse/app/modifiers}/on-resize.js (92%)

diff --git a/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.hbs b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.hbs
index 43302b0d661..5c5685974d8 100644
--- a/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.hbs
+++ b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.hbs
@@ -22,8 +22,8 @@
   {{/if}}
 
   <ul
-    {{on-resize this.checkScroll}}
-    {{on "scroll" this.watchScroll}}
+    {{on-resize this.onResize}}
+    {{on "scroll" this.onScroll}}
     {{did-insert this.scrollToActive}}
     {{on "mousedown" this.scrollDrag}}
     class="nav-pills action-list {{@className}}"
diff --git a/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
index 594764d5e76..2c58febf46a 100644
--- a/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
+++ b/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);
-    this.hasScroll = event.target.scrollWidth > event.target.offsetWidth;
+    const element = entries[0].target;
+    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 (
-      event.target.offsetWidth + event.target.scrollLeft ===
-      event.target.scrollWidth
-    ) {
+    this.watchScroll(event.target);
+  }
+
+  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 {
diff --git a/plugins/chat/assets/javascripts/discourse/modifiers/chat/on-resize.js b/app/assets/javascripts/discourse/app/modifiers/on-resize.js
similarity index 92%
rename from plugins/chat/assets/javascripts/discourse/modifiers/chat/on-resize.js
rename to app/assets/javascripts/discourse/app/modifiers/on-resize.js
index 802901fcc23..ef0278d4a17 100644
--- a/plugins/chat/assets/javascripts/discourse/modifiers/chat/on-resize.js
+++ b/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());
diff --git a/app/assets/javascripts/discourse/package.json b/app/assets/javascripts/discourse/package.json
index 851fd28d55b..afe06ae707e 100644
--- a/app/assets/javascripts/discourse/package.json
+++ b/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",
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-messages-container.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-messages-container.gjs
index 629ff1cc819..7f0bdcb6088 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-messages-container.gjs
+++ b/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>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/index.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/index.gjs
index d3cc0375b79..e8ace0fa333 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/index.gjs
+++ b/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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 214f8b50414..b781fc8a30f 100644
--- a/pnpm-lock.yaml
+++ b/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