From 8ec109ec1a35d60f376c3ce3fccc460d3ea7866b Mon Sep 17 00:00:00 2001
From: Mike Dalessio <mike@37signals.com>
Date: Wed, 6 Aug 2025 12:18:12 -0400
Subject: [PATCH] Delay clearing notifications until a card is actually viewed.

Send the "read" beacon when the card is made visible.

Also take care to only send the "disconnect" beacon if the card is
visible.

ref: https://fizzy.37signals.com/5986089/collections/2/cards/1301
---
 app/javascript/controllers/beacon_controller.js | 12 +++++++++---
 app/views/cards/show.html.erb                   |  4 +++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/javascript/controllers/beacon_controller.js b/app/javascript/controllers/beacon_controller.js
index 794565f78..2686f5d14 100644
--- a/app/javascript/controllers/beacon_controller.js
+++ b/app/javascript/controllers/beacon_controller.js
@@ -4,11 +4,17 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static values = { url: String }
 
-  connect() {
-    post(this.urlValue, { responseKind: "turbo-stream" })
+  visibilityChanged() {
+    this.#sendBeacon()
   }
 
   disconnect() {
-    post(this.urlValue, { responseKind: "turbo-stream" })
+    this.#sendBeacon()
+  }
+
+  #sendBeacon() {
+    if (!document.hidden) {
+      post(this.urlValue, { responseKind: "turbo-stream" })
+    }
   }
 }
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index f2c74b1cb..d4e26b686 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -42,7 +42,9 @@
   <% end %>
 </header>
 
-<div data-controller="beacon lightbox" data-beacon-url-value="<%= card_reading_url(@card) %>">
+<div data-controller="beacon lightbox"
+     data-action="visibilitychange@document->beacon#visibilityChanged"
+     data-beacon-url-value="<%= card_reading_url(@card) %>">
   <%= render "cards/container", card: @card %>
 
   <% if @card.published? || @card.drafted? %>