Add functionality for marking all notifications as read

app/controllers/notifications_controller.rb

@@ -25,6 +25,16 @@ class NotificationsController < ApplicationController
     end
   end
 
+  def read
+    current_user.notifications.where(new: true).update_all(new: false)
+
+    respond_to do |format|
+      format.turbo_stream do
+        render "navigation/notifications", locals: { notifications: [], notification_count: nil }
+       end
+    end
+  end
+
   private
 
   def paginate_notifications

app/views/navigation/_desktop.html.haml

@@ -19,16 +19,19 @@
           %a.nav-link{ href: '#', data: { bs_target: '#modal-list-memberships', bs_toggle: :modal } }
             %i.fa.fa-list.hidden-xs
             %span.d-none.d-sm-inline.d-md-none= t(".list")
-      = nav_entry t("navigation.notifications"), notifications_path, badge: notification_count, class: "d-block d-sm-none", hotkey: "g n"
+      = nav_entry t("navigation.notifications"), notifications_path, class: "d-block d-sm-none", hotkey: "g n"
       %li.nav-item.dropdown.d-none.d-sm-block
         %a.nav-link.dropdown-toggle{ href: '#', data: { bs_toggle: :dropdown } }
-          - if notification_count.nil?
+          %turbo-frame#notification-desktop-icon
-            %i.fa.fa-bell-o
+            - if notification_count.nil?
-          - else
+              %i.fa.fa-bell-o
-            %i.fa.fa-bell
+            - else
-          %span.visually-hidden= t("navigation.notifications")
+              %i.fa.fa-bell
-          %span.badge= notification_count
+            %span.visually-hidden= t("navigation.notifications")
-        = render 'navigation/dropdown/notifications', notifications: notifications, size: "desktop"
+            %span.badge= notification_count
+        .dropdown-menu.dropdown-menu-end.notification-dropdown
+          %turbo-frame#notifications-dropdown-list
+            = render 'navigation/dropdown/notifications', notifications:, notification_count: nil
       %li.nav-item.d-none.d-sm-block{ data: { bs_toggle: 'tooltip', bs_placement: 'bottom' }, title: t('.ask_question') }
         %a.nav-link{ href: "#", name: "toggle-all-ask", data: { bs_target: "#modal-ask-followers", bs_toggle: :modal, hotkey: "n" } }
           %i.fa.fa-pencil-square-o

app/views/navigation/_mobile.html.haml

@@ -9,7 +9,7 @@
       - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
         = nav_entry t("navigation.discover"), discover_path, icon: 'compass', icon_only: true
       = nav_entry t("navigation.notifications"), notifications_path("all"), icon: notifications_icon,
-        badge: notification_count, badge_color: "primary", icon_only: true
+        badge: notification_count, badge_color: "primary", badge_attr: { id: "notification-mobile-count" }, icon_only: true
       %li.nav-item.profile--image-dropdown
         %a.nav-link{ href: '#', data: { bs_toggle: 'dropdown', bs_target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }
           %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }

app/views/navigation/dropdown/_notifications.html.haml

@@ -10,6 +10,9 @@
     %a.dropdown-item.text-center{ href: notifications_path }
       %i.fa.fa-fw.fa-chevron-right
       = t(".new")
+    = link_to notifications_read_path, class: "dropdown-item text-center", data: { turbo_stream: true, turbo_method: :post } do
+      %i.fa.fa-fw.fa-check-double
+      = t(".mark_as_read")
     - notifications.each do |notification|
       .dropdown-item
         = render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification

app/views/navigation/notifications.turbo_stream.haml

@@ -0,0 +1,13 @@
+= turbo_stream.update "notifications-dropdown-list" do
+  = render "navigation/dropdown/notifications", notifications:
+
+= turbo_stream.update "notification-desktop-icon" do
+  - if notification_count.nil?
+    %i.fa.fa-bell-o
+  - else
+    %i.fa.fa-bell
+  %span.visually-hidden= t("navigation.notifications")
+  %span.badge= notification_count
+
+= turbo_stream.update "notification-mobile-count" do
+  %span.badge.badge-primary= notification_count

config/locales/views.en.yml

@@ -318,6 +318,7 @@ en:
         none: :notifications.index.none
         all: "Show all notifications"
         new: "Show all new notifications"
+        mark_as_read: "Mark all as read"
       profile:
         profile: "Show profile"
         settings: "Settings"

config/routes.rb

@@ -143,6 +143,7 @@ Rails.application.routes.draw do
   get "/list/:list_name", to: "timeline#list", as: :list_timeline
 
   get "/notifications(/:type)", to: "notifications#index", as: :notifications, defaults: { type: "new" }
+  post "/notifications", to: "notifications#read", as: :notifications_read
 
   post "/inbox/create", to: "inbox#create", as: :inbox_create
   get "/inbox", to: "inbox#show", as: :inbox