Improve notifications dropdown behaviour

Author: rsmithlal

app/assets/stylesheets/better_together/navigation.scss

@@ -188,3 +188,10 @@ table.nav-items-table tr.navigation_item_children > td > table {
   bottom: 0;
   z-index: 1000;
 }
+
+.dropdown-menu-center {
+  left: 50% !important;
+  transform: translateX(-50%) !important;
+  right: auto !important;
+}
+

app/assets/stylesheets/better_together/notifications.scss

@@ -35,3 +35,11 @@
     position: relative;
   }
 }
+
+#notification-list {
+  #notification-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

app/helpers/better_together/notifications_helper.rb

@@ -3,14 +3,24 @@
 module BetterTogether
   # groups view logic related to notifications
   module NotificationsHelper
-    def unread_notification_count
-      count = current_person.notifications.unread.size
+    def unread_notifications?
+      unread_notification_count > 0
+    end
+
+    def unread_notification_counter
+      count = unread_notification_count
       return if count.zero?
 
       content_tag(:span, count, class: 'badge bg-primary rounded-pill position-absolute notification-badge',
                                 id: 'person_notification_count')
     end
 
+    def unread_notification_count
+      return unless current_person
+
+      current_person.notifications.unread.size
+    end
+
     def recent_notifications
       current_person.notifications.joins(:event).order(created_at: :desc).limit(5)
     end

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

@@ -1,9 +1,21 @@
 <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 params[:controller].present? && 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 %>
+    <%= unread_notification_counter %>
   </a>
-  <ul id="notification-list" class="dropdown-menu dropdown-menu-end p-3" style="min-width: 25rem;" aria-labelledby="notification-icon">
+  <ul id="notification-list" class="dropdown-menu dropdown-menu-center p-3 position-absolute" style="min-width: 25rem;" aria-labelledby="notification-icon">
+    <li>
+      <h5 id="notification-header">
+        <%= link_to 'Notifications', notifications_url, class: 'text-decoration-none' %>
+        <%= button_to t('better_together.notifications.mark_all_as_read'),
+                      mark_all_as_read_notifications_path,
+                      method: :post,
+                      class: 'btn btn-secondary btn-sm',
+                      id: 'mark_notifications_read',
+                      data: { turbo_stream: true } if unread_notifications? %>
+      </h5>
+    </li>
+    <li><hr class="dropdown-divider"></li>
     <%= render recent_notifications %>
   </ul>
 </li>

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

@@ -16,6 +16,7 @@
     <li class="d-flex flex-column align-items-start mb-3 dropdown-item">
       <strong><%= current_user.email %></strong>
     </li>
+    <li><hr class="dropdown-divider"></li>
     <li>
       <%= link_to t('navbar.my_profile'), person_my_profile_path(person_id: current_person.slug), class: "my-profile dropdown-item ", data: { identifier: 'my-profile' } %>
     </li>