Update notifications counter in Bottom Nav with AJAX

Notifications counter did not update in real-time, when marking a
notification as read/unread. Only when page was refreshed, it was
updated.

The commit changes the behavior to use AJAX and update the counter every
time when action on notification is performed, so that there is no need
to update the page to see the actual amount of unread notifications in
the counter.

src/api/app/views/layouts/webui/responsive_ux/_bottom_navigation.html.haml

@@ -7,11 +7,8 @@
           %span.d-block Watchlist
       - if feature_enabled?(:notifications_redesign)
         %li.nav-item.border-left.border-gray-500
-          = link_to(my_notifications_path, class: 'nav-link px-1 py-2 text-light', alt: 'Notifications') do
-            %i.fas.fa-bell
-            - unless User.session.unread_notifications.zero?
-              %span.badge.badge-primary.align-text-top= User.session.unread_notifications
-            %span.d-block Notifications
+          = link_to(my_notifications_path, id: 'bottom-notifications-counter', class: 'nav-link text-light px-1 py-2', alt: 'Notifications') do
+            = render partial: 'layouts/webui/responsive_ux/unread_notifications_counter'
       - if content_for?(:actions)
         %li.nav-item.border-left.border-gray-500
           = link_to('javascript:void(0)', class: 'nav-link px-1 py-2 text-light', alt: 'Actions', data: { toggle: 'actions' }) do

src/api/app/views/layouts/webui/responsive_ux/_top_navigation.html.haml

@@ -10,8 +10,9 @@
             %i.fas.fa-bookmark
             %span.d-block Watchlist
         - if feature_enabled?(:notifications_redesign)
-          .toggler.text-center.justify-content-center#notifications-counter
-            = render partial: 'layouts/webui/responsive_ux/unread_notifications_counter'
+          .toggler.text-center.justify-content-center
+            = link_to(my_notifications_path, id: 'top-notifications-counter', class: 'nav-link text-light p-0 w-100', alt: 'Notifications') do
+              = render partial: 'layouts/webui/responsive_ux/unread_notifications_counter'
         .toggler.text-center.justify-content-center.nav-item.dropdown
           = link_to('#', class: 'nav-link dropdown-toggle text-light', id: 'top-navigation-profile-dropdown', role: 'button',
                     'data-toggle': 'dropdown', aria: { haspopup: true, expanded: false }) do

src/api/app/views/layouts/webui/responsive_ux/_unread_notifications_counter.html.haml

@@ -1,4 +1,4 @@
-= link_to(my_notifications_path, class: 'nav-link text-light p-0 w-100', alt: 'Notifications') do
+.notifications-counter
   %i.fas.fa-bell
   - unless User.session.unread_notifications.zero?
     %span.badge.badge-primary.align-text-top= User.session.unread_notifications

src/api/app/views/webui/users/notifications/_update.js.erb

@@ -1,5 +1,5 @@
 $('#filters').html("<%= j(render partial: 'notifications_filter', locals: { filter: notifications_filter }) %>");
 $('#notifications-list').html("<%= j(render partial: 'notifications_list', locals: { notifications: notifications, selected_filter: notifications_filter.selected_filter }) %>");
 $('#flash').html("<%= escape_javascript(render(layout: false, partial: 'layouts/webui/flash', object: flash)) %>");
-$('#notifications-counter').html("<%= escape_javascript(render partial: 'layouts/webui/responsive_ux/unread_notifications_counter') %>");
+$('#top-notifications-counter, #bottom-notifications-counter').html("<%= escape_javascript(render partial: 'layouts/webui/responsive_ux/unread_notifications_counter') %>");
 $(document).ready(function() { handleNotificationCheckboxSelection(); });