refactor(frontend): dont use did-insert

frontend/app/components/sy-checkbox/component.js

@@ -1,4 +1,3 @@
-import { action } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
 import Component from "@glimmer/component";
 
@@ -13,17 +12,6 @@ export default class SyCheckbox extends Component {
   constructor(...args) {
     super(...args);
 
-    this._checkboxElementId = guidFor(this);
-  }
-
-  get checkboxElementId() {
-    return this._checkboxElementId;
-  }
-
-  @action
-  handleCheckBox(element) {
-    if (this.args.checked === null) {
-      element.indeterminate = true;
-    }
+    this.checkboxElementId = guidFor(this);
   }
 }

frontend/app/components/sy-checkbox/template.hbs

@@ -4,9 +4,8 @@
     id={{this.checkboxElementId}}
     checked={{@checked}}
     disabled={{@disabled}}
+    indeterminate={{eq @checked null}}
     {{on "change" (pick "target.checked" (optional @onChange))}}
-    {{!-- template-lint-disable no-at-ember-render-modifiers --}}
-    {{did-insert this.handleCheckBox}}
   />
   <label for={{this.checkboxElementId}} title={{@title}}>
     {{#if (has-block)}}

frontend/app/components/sy-modal/overlay/component.js

@@ -1,22 +1,17 @@
-import { registerDestructor } from "@ember/destroyable";
 import { action } from "@ember/object";
+import { guidFor } from "@ember/object/internals";
 import Component from "@glimmer/component";
 
 export default class SyModalOverlay extends Component {
-  @action
-  setupClickHandler(element) {
-    this.element = element;
-
-    element.addEventListener("click", this.handleClick);
+  constructor(...args) {
+    super(...args);
 
-    registerDestructor(this, () => {
-      element.removeEventListener("click", this.handleClick);
-    });
+    this.id = guidFor(this);
   }
 
   @action
   handleClick(e) {
-    if (e.target === this.element) {
+    if (e.target.id === this.id) {
       this.args.onClose();
     }
   }

frontend/app/components/sy-modal/overlay/template.hbs

@@ -1,7 +1,8 @@
 <div
   class="modal modal-overlay {{if @visible 'modal--visible'}}"
-  {{!-- template-lint-disable no-at-ember-render-modifiers --}}
-  {{did-insert this.setupClickHandler}}
+  id={{this.id}}
+  {{!-- template-lint-disable no-invalid-interactive --}}
+  {{on "click" this.handleClick}}
 >
   {{yield}}
 </div>

frontend/app/components/timed-clock/component.js

@@ -1,4 +1,5 @@
 import { setProperties } from "@ember/object";
+import { scheduleOnce } from "@ember/runloop";
 import { isTesting, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
@@ -20,17 +21,21 @@ export default class TimedClock extends Component {
     setProperties(this, { second, minute, hour });
   }
 
+  constructor(...args) {
+    super(...args);
+
+    scheduleOnce("actions", this.timer, "perform");
+  }
+
   @task
   *timer() {
     for (;;) {
       this._update();
 
-      /* istanbul ignore else */
       if (macroCondition(isTesting())) {
         return;
       }
 
-      /* istanbul ignore next */
       yield timeout(1000);
     }
   }

frontend/app/components/timed-clock/template.hbs

@@ -1,11 +1,9 @@
-{{!-- template-lint-disable no-at-ember-render-modifiers --}}
 <svg
   class="timed-clock"
   viewBox="0 0 512 512"
   width="100%"
   height="100%"
   {{style --clock-size=(concat (or @clockSize 50) "px")}}
-  {{did-insert (perform this.timer)}}
 >
   <circle class="circle" r="240" cx="256" cy="256" stroke-width="20" />
   <line