Render up to 10 notifications in nav dropdown menu

Author: rsmithlal

app/helpers/better_together/notifications_helper.rb

@@ -9,5 +9,9 @@ def unread_notification_count
 
       content_tag(:span, count, class: 'badge bg-primary rounded-pill position-absolute notification-badge')
     end
+
+    def recent_notifications
+      current_person.notifications.order(created_at: :desc).limit(10)
+    end
   end
 end

app/views/better_together/new_message_notifier/notifications/_notification.html.erb

@@ -1,7 +1,7 @@
 <!-- app/views/better_together/new_message_notifier/_notification.html.erb -->
 <%= render layout: 'better_together/notifications/notification', locals: { notification: notification, notification_title: t('better_together.new_message_notifier.new_message', conversation_title: notification.conversation.title), notification_url: notification.url } do %>
   <p class="mb-1 message-content">
-    <strong><%= t('better_together.new_message_notifier.from_html', sender: (policy(notification.sender).show? ? link_to(notification.sender) : notification.sender)) %></strong><br>
-    <%= notification.message.content.truncate(100) %>
+    <strong><%= policy(notification.sender).show? ? link_to(notification.sender, notification.sender, class: 'text-decoration-none') : notification.sender %></strong><br>
+    <%= notification.message.content.to_plain_text.truncate(100) %>
   </p>
 <% end %>

app/views/better_together/notifications/_notification.html.erb

@@ -1,13 +1,13 @@
 <!-- app/views/better_together/notifications/_notification.html.erb -->
 <div id="<%= dom_id(notification) %>" class="notification list-group-item <%= 'list-group-item-action' unless notification.read_at %>" data-controller="better_together--notification" data-notification-mark-read-url-value="<%= mark_as_read_notification_path(notification) %>">
   <div class="d-flex justify-content-between">
-    <h5 class="mb-1">
+    <h6 class="mb-1">
       <% if notification_url.present? %>
-        <%= link_to notification_title, notification_url %>
+        <%= link_to notification_title, notification_url, class: 'text-decoration-none' %>
       <% else %>
         <%= notification_title %>
       <% end %>
-    </h5>
+    </h6>
     <small class="text-muted"><%= t('better_together.notifications.time_ago', time: time_ago_in_words(notification.created_at)) %></small>
   </div>
   <%= yield if block_given? %> <!-- This will render the specific content from the notification type partial -->

app/views/layouts/better_together/_header.html.erb

@@ -32,11 +32,14 @@
 
           <!-- User Auth Nav Item -->
           <% if user_signed_in? %>
-            <li class="nav-item notifications" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t('navbar.notifications_tooltip') %>">
-              <a class="nav-link position-relative<%= ' active' if url_for(controller: params[:controller], action: params[:action]) === notifications_path %>" href="<%= notifications_path %>">
+            <li class="nav-item notifications dropdown" data-bs-toggle="tooltip" data-bs-placement="bottom" title="<%= t('navbar.notifications_tooltip') %>">
+              <a id="notification-icon" class="nav-link position-relative<%= ' active' if url_for(controller: params[:controller], action: params[:action]) === notifications_path %>" href="<%= notifications_path %>" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                 <i class="fa fa-bell"></i>
                 <%= unread_notification_count %>
               </a>
+              <ul id="notification-list" class="dropdown-menu dropdown-menu-end p-3" style="min-width: 25rem;" aria-labelledby="notification-icon">
+                <%= render recent_notifications %>
+              </ul>
             </li>
 
             <%= cache ['locale_switcher', request.fullpath, I18n.locale] do %>