Replace ofn-page-alert angular directive

app/assets/javascripts/darkswarm/directives/page_alert.js.coffee

@@ -1,21 +0,0 @@
-angular.module('Darkswarm').directive "ofnPageAlert", ($timeout) ->
-  restrict: 'A'
-  scope: true
-  link: (scope, elem, attrs) ->
-    moveSelectors = [".off-canvas-wrap .inner-wrap",
-                     ".off-canvas-wrap .inner-wrap .fixed",
-                     ".off-canvas-fixed .top-bar",
-                     ".off-canvas-fixed ofn-flash",
-                     ".off-canvas-fixed nav.tab-bar",
-                     ".off-canvas-fixed .page-alert"]
-
-    container_elems = $(moveSelectors.join(", "))
-
-    # Wait a moment after page load before showing the alert. Otherwise we often miss the
-    # start of the animation.
-    $timeout ->
-      container_elems.addClass("move-up")
-    , 1000
-
-    scope.close = ->
-      container_elems.removeClass("move-up")

app/views/shared/menu/_alert.html.haml

@@ -1,4 +1,4 @@
-.text-center.page-alert.fixed{ "ofn-page-alert" => true }
+.text-center.page-alert.fixed{ "data-controller" => "page-alert" }
   .alert-box
     = render 'shared/page_alert'
-    %a.close{ "ng-click": "close()" } ×
+    %a.close{ "data-action" => "page-alert#close" } ×

app/webpacker/controllers/page_alert_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  moveSelectors = [".off-canvas-wrap .inner-wrap",
+                   ".off-canvas-wrap .inner-wrap .fixed",
+                   ".off-canvas-fixed .top-bar",
+                   ".off-canvas-fixed ofn-flash",
+                   ".off-canvas-fixed nav.tab-bar",
+                   ".off-canvas-fixed .page-alert"];
+
+  connect() {
+    // Wait a moment after page load before showing the alert. Otherwise we often miss the
+    // start of the animation.
+    setTimeout(this.#show, 1000);
+  }
+
+  close() {
+    this.#moveElements().forEach((element) => {
+      element.classList.remove("move-up");
+    });
+  }
+
+  // private
+
+  #moveElements() {
+    return document.querySelectorAll(this.moveSelectors.join(","));
+  }
+
+  #show = () => {
+    this.#moveElements().forEach((element) => {
+      element.classList.add("move-up");
+    });
+  };
+}