Update unread notifications on page load

app/javascript/better_together/notifications.js

@@ -118,6 +118,13 @@ function updateUnreadNotifications(count) {
   }
 }
 
+// Initialize unread notification display on page load
+document.addEventListener('turbo:load', () => {
+  const badge = document.getElementById('person_notification_count');
+  const count = badge ? parseInt(badge.textContent, 10) : 0;
+  updateUnreadNotifications(count);
+});
+
 export {
   displayFlashMessage,
   updateUnreadNotifications

spec/factories/noticed/events.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Noticed
+  FactoryBot.define do
+    factory :noticed_event, class: 'Noticed::Event' do
+      type { 'BetterTogether::NewMessageNotifier' }
+      params { {} }
+    end
+  end
+end

spec/factories/noticed/notifications.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Noticed
+  FactoryBot.define do
+    factory :noticed_notification, class: 'Noticed::Notification', aliases: %i[notification] do
+      type { 'BetterTogether::NewMessageNotifier' }
+      event { association :noticed_event, type: type }
+      recipient { association(:better_together_person) }
+    end
+  end
+end

spec/features/notifications/unread_badge_spec.rb

@@ -44,4 +44,14 @@
       expect(page).to have_title(original_title)
     end
   end
+
+  it 'shows unread status in title and favicon on initial load', :js do
+    person = BetterTogether::User.find_by(email: '[email protected]').person
+    create(:noticed_notification, recipient: person)
+
+    visit conversations_path(locale: I18n.default_locale)
+
+    expect(page).to have_title(/^\(1\)/)
+    expect(page).to have_css("link[rel~='icon'][href^='data:image']", visible: false)
+  end
 end