Converted <GhCanvasHeader> to glimmer component

no issue

- added `{{on-scroll}}` modifier to replace custom setup and teardown of event handlers inside the component

ghost/admin/app/components/gh-canvas-header.hbs

@@ -1,6 +1,5 @@
 <div
-    {{did-insert (action "initScrollWatch")}}
+    {{on-scroll this.onScroll scrollContainer=".gh-main"}}
-    {{will-destroy (action "clearScrollWatch")}}
     ...attributes
 >
     <header class="gh-canvas-header-content">

ghost/admin/app/components/gh-canvas-header.js

@@ -1,33 +1,13 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
-import classic from 'ember-classic-decorator';
 import {action} from '@ember/object';
-import {run} from '@ember/runloop';
-import {tagName} from '@ember-decorators/component';
 
-@classic
-@tagName('')
 export default class GhCanvasHeader extends Component {
     @action
-    initScrollWatch(element) {
+    onScroll(element, scrollContainer) {
-        this._onScroll = run.bind(this, this.onScroll, element);
+        if (this._isSticky && scrollContainer.scrollTop < 10) {
-        this._scrollContainer = element.closest('.gh-main');
-        if (this._scrollContainer) {
-            this._scrollContainer.addEventListener('scroll', this._onScroll, {passive: true});
-        }
-    }
-
-    @action
-    clearScrollWatch() {
-        if (this._scrollContainer) {
-            this._scrollContainer.removeEventListener('scroll', this._onScroll);
-        }
-    }
-
-    onScroll(element) {
-        if (this._isSticky && this._scrollContainer.scrollTop < 10) {
             element.classList.remove('gh-canvas-header--sticky');
             this._isSticky = false;
-        } else if (!this._isSticky && this._scrollContainer.scrollTop > 10) {
+        } else if (!this._isSticky && scrollContainer.scrollTop > 10) {
             element.classList.add('gh-canvas-header--sticky');
             this._isSticky = true;
         }

ghost/admin/app/modifiers/on-scroll.js

@@ -0,0 +1,23 @@
+import Modifier from 'ember-modifier';
+import {action} from '@ember/object';
+
+export default class OnScrollModifier extends Modifier {
+    @action
+    onScroll(event) {
+        this.args.positional[0](this.element, this.scrollContainer, event);
+    }
+
+    didInstall() {
+        this.scrollContainer = this.element;
+
+        if (this.args.named.scrollContainer) {
+            this.scrollContainer = this.element.closest(this.args.named.scrollContainer);
+        }
+
+        this.scrollContainer?.addEventListener('scroll', this.onScroll, {passive: true});
+    }
+
+    willDestroy() {
+        this.scrollContainer?.removeEventListener('scroll', this.onScroll, {passive: true});
+    }
+}