Merge branch 'main' into f3wlvl-codex/prepare-app-for-rails-7.2-and-8-upgrade

Author: rsmithlal

app/javascript/better_together/notifications.js

@@ -59,6 +59,66 @@ function displayFlashMessage(type, message, onDismiss = null) {
   }
 }
 
+// Update badge, document title, and favicon with unread notification count
+function updateUnreadNotifications(count) {
+  // Update notification badge
+  let badge = document.getElementById('person_notification_count');
+  if (badge) {
+    if (count > 0) {
+      badge.textContent = count;
+    } else {
+      badge.remove();
+      badge = null;
+    }
+  }
+  if (!badge && count > 0) {
+    const icon = document.getElementById('notification-icon');
+    if (icon) {
+      badge = document.createElement('span');
+      badge.id = 'person_notification_count';
+      badge.className = 'badge bg-primary rounded-pill position-absolute notification-badge';
+      badge.textContent = count;
+      icon.appendChild(badge);
+    }
+  }
+
+  // Update document title
+  const baseTitle = updateUnreadNotifications.baseTitle ||
+    (updateUnreadNotifications.baseTitle = document.title.replace(/^\(\d+\)\s*/, ''));
+  if (count > 0) {
+    document.title = `(${count}) ${baseTitle}`;
+  } else {
+    document.title = baseTitle;
+  }
+
+  // Update favicon with red dot
+  const link = document.querySelector("link[rel~='icon']");
+  if (!link) return;
+  if (!updateUnreadNotifications.originalHref) {
+    updateUnreadNotifications.originalHref = link.href;
+  }
+  if (count > 0) {
+    const img = document.createElement('img');
+    img.src = updateUnreadNotifications.originalHref;
+    img.onload = () => {
+      const size = 32;
+      const canvas = document.createElement('canvas');
+      canvas.width = size;
+      canvas.height = size;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0, size, size);
+      ctx.fillStyle = '#ff0000';
+      ctx.beginPath();
+      ctx.arc(size - 5, 5, 4, 0, 2 * Math.PI);
+      ctx.fill();
+      link.href = canvas.toDataURL('image/png');
+    };
+  } else {
+    link.href = updateUnreadNotifications.originalHref;
+  }
+}
+
 export {
-  displayFlashMessage
+  displayFlashMessage,
+  updateUnreadNotifications
 }

app/javascript/channels/better_together/notifications_channel.js

@@ -1,5 +1,5 @@
 import consumer from "channels/consumer";
-import { displayFlashMessage } from "better_together/notifications";
+import { displayFlashMessage, updateUnreadNotifications } from "better_together/notifications";
 import DevicePermissionsController from "controllers/better_together/device_permissions_controller";
 
 consumer.subscriptions.create("BetterTogether::NotificationsChannel", {
@@ -18,6 +18,9 @@ consumer.subscriptions.create("BetterTogether::NotificationsChannel", {
         messageContent = `<a href="${data["url"]}" target="_blank" rel="noopener" style="color:inherit;">${messageContent}</a>`;
       }
       displayFlashMessage("info", messageContent);
+      if (data["unread_count"] !== undefined) {
+        updateUnreadNotifications(data["unread_count"]);
+      }
     }
 
     if (Notification.permission === "default") {

app/notifiers/better_together/new_message_notifier.rb

@@ -83,12 +83,13 @@ def body
       I18n.t('better_together.notifications.new_message.content', content: message.content.to_plain_text.truncate(100))
     end
 
-    def build_message(_notification)
+    def build_message(notification)
       {
         title:,
         body:,
         identifier:,
-        url:
+        url:,
+        unread_count: notification.recipient.notifications.unread.count
       }
     end
 

bin/codex_style_guard

@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+bundle exec rubocop --fail-level F

spec/features/notifications/unread_badge_spec.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+# rubocop:disable Metrics/BlockLength
+RSpec.describe 'notification badge', type: :feature do
+  include BetterTogether::DeviseSessionHelpers
+
+  before do
+    configure_host_platform
+    login_as_platform_manager
+  end
+
+  it 'updates badge and title based on unread count', :js do
+    visit conversations_path(locale: I18n.default_locale)
+    original_title = page.title
+
+    page.evaluate_async_script(<<~JS)
+      const done = arguments[0];
+      import('better_together/notifications').then(m => {
+        m.updateUnreadNotifications(3);
+        done();
+      });
+    JS
+
+    expect(page).to have_css('#person_notification_count', text: '3')
+    expect(page.title).to eq("(3) #{original_title}")
+
+    page.evaluate_async_script(<<~JS)
+      const done = arguments[0];
+      import('better_together/notifications').then(m => {
+        m.updateUnreadNotifications(0);
+        done();
+      });
+    JS
+
+    expect(page).to have_no_css('#person_notification_count')
+    expect(page.title).to eq(original_title)
+  end
+end
+# rubocop:enable Metrics/BlockLength

spec/helpers/better_together/notifications_helper_spec.rb

@@ -2,20 +2,64 @@
 
 require 'rails_helper'
 
-# Specs in this file have access to a helper object that includes
-# the NotificationsHelper. For example:
-#
-# describe NotificationsHelper do
-#   describe "string concat" do
-#     it "concats two strings with spaces" do
-#       expect(helper.concat_strings("this","that")).to eq("this that")
-#     end
-#   end
-# end
 module BetterTogether
+  # rubocop:disable Metrics/BlockLength
   RSpec.describe NotificationsHelper, type: :helper do
-    it 'exists' do
-      expect(described_class).to be
+    let(:unread_count) { 0 }
+    let(:unread_scope) { instance_double('UnreadScope', size: unread_count) }
+    let(:notifications) { instance_double('Notifications', unread: unread_scope) }
+    let(:person) { instance_double('Person', notifications: notifications) }
+
+    before do
+      p = person
+      helper.singleton_class.define_method(:current_person) { p }
+    end
+
+    describe '#unread_notification_count' do
+      let(:unread_count) { 1 }
+
+      it 'returns number of unread notifications for current person' do
+        expect(helper.unread_notification_count).to eq(1)
+      end
+
+      it 'returns nil when there is no current person' do
+        helper.singleton_class.define_method(:current_person) { nil }
+        expect(helper.unread_notification_count).to be_nil
+      end
+    end
+
+    describe '#unread_notification_counter' do
+      let(:unread_count) { 2 }
+
+      it 'renders badge html when unread notifications present' do
+        html = helper.unread_notification_counter
+        expect(html).to include('span')
+        expect(html).to include('person_notification_count')
+        expect(html).to include('badge')
+      end
+
+      it 'returns nil when there are no unread notifications' do
+        no_unread = instance_double('UnreadScope', size: 0)
+        no_person = instance_double('Person', notifications: instance_double('Notifications', unread: no_unread))
+        helper.singleton_class.define_method(:current_person) { no_person }
+        expect(helper.unread_notification_counter).to be_nil
+      end
+    end
+
+    describe '#unread_notifications?' do
+      let(:unread_count) { 3 }
+
+      it 'returns true when unread notifications exist' do
+        expect(helper.unread_notifications?).to be true
+      end
+
+      it 'returns false when there are no unread notifications' do
+        no_unread = instance_double('UnreadScope', size: 0)
+        no_person = instance_double('Person', notifications: instance_double('Notifications', unread: no_unread))
+        helper.singleton_class.define_method(:current_person) { no_person }
+        expect(helper.unread_notifications?).to be false
+      end
     end
   end
+  # rubocop:enable Metrics/BlockLength
 end

spec/notifiers/better_together/new_message_notifier_spec.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+module BetterTogether
+  # rubocop:disable Metrics/BlockLength
+  RSpec.describe NewMessageNotifier do
+    let(:recipient) { double('Person') }
+    let(:conversation) { double('Conversation', id: 1, title: 'Chat') }
+    let(:sender) { double('Person', name: 'Alice') }
+    let(:content) { double('Content', to_plain_text: 'hello') }
+    let(:message_class) do
+      Class.new do
+        attr_reader :conversation, :sender, :content
+
+        def self.name = 'Message'
+        def self.has_query_constraints? = false
+        def self.composite_primary_key? = false
+        def self.primary_key = 'id'
+        def self.polymorphic_name = name
+
+        def initialize(conversation:, sender:, content:)
+          @conversation = conversation
+          @sender = sender
+          @content = content
+        end
+
+        def _read_attribute(attr)
+          # rubocop:disable Style/StringConcatenation
+          instance_variable_get('@' + attr.to_s)
+          # rubocop:enable Style/StringConcatenation
+        end
+      end
+    end
+    let(:message) { message_class.new(conversation:, sender:, content:) }
+    let(:notification) { double('Notification', recipient: recipient) }
+
+    subject(:notifier) { described_class.new(record: message) }
+
+    before do
+      stub_const('Message', message_class)
+    end
+
+    it 'includes unread notification count in message' do
+      unread = double('Unread', count: 2)
+      allow(recipient).to receive(:notifications).and_return(double('Notifications', unread: unread))
+      result = notifier.send(:build_message, notification)
+      expect(result[:unread_count]).to eq(2)
+    end
+  end
+  # rubocop:enable Metrics/BlockLength
+end