Reload notifications tray when the window regain the focus

https://app.fizzy.do/5986089/cards/2743

It includes a debounce interval to avoid too many of these.

app/javascript/controllers/frame_reloader_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    reloadInterval: { type: Number, default: 10 * 60 } // 10 minutes
+  }
+
+  connect() {
+    this.freshSince = Date.now()
+  }
+
+  reload() {
+    const now = Date.now()
+    const reloadIntervalMs = this.reloadIntervalValue * 1000
+
+    if ((now - this.freshSince) >= reloadIntervalMs) {
+      this.freshSince = now
+      this.element.reload()
+    }
+  }
+}

app/views/notifications/_tray.html.erb

@@ -7,7 +7,10 @@
       data-navigable-list-actionable-items-value="true"
       data-navigable-list-reverse-navigation-value="true"
       data-action="keydown->navigable-list#navigate dialog:show@document->navigable-list#reset turbo-visit->navigable-list#reset keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
-    <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph", data: { controller: "notifications-tray", notifications_tray_grouped_class: "notification--grouped", action: "turbo:frame-render->notifications-tray#group" } %>
+    <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph", data: {
+          controller: "notifications-tray frame-reloader",
+          notifications_tray_grouped_class: "notification--grouped",
+          action: "turbo:frame-render->notifications-tray#group focus@window->frame-reloader#reload" } %>
 
     <div class="tray__item tray__item--hat txt-x-small gap-half">
       <div data-navigable-list-target="item" class="full-width">

app/views/notifications/trays/show.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_tag "notifications", data: { controller: "notifications-tray", notifications_tray_grouped_class: "notification--grouped" } do %>
+<%= turbo_frame_tag "notifications" do %>
   <%= render partial: "notifications/notification", collection: @notifications, cached: true %>
   <div hidden data-notifications-tray-target="hiddenNotifications"></div>
 <% end %>