Refactor notifications to use a Turbo Stream-backed pagination

app/controllers/notifications_controller.rb

@@ -19,7 +19,7 @@ class NotificationsController < ApplicationController
 
     respond_to do |format|
       format.html
-      format.js { render layout: false }
+      format.turbo_stream
     end
   end
 

app/views/notifications/index.haml

@@ -1,27 +1,25 @@
-%ul.list-unstyled#notifications
+= turbo_frame_tag "notification" do
-  - if @notifications.count.zero?
+  %ul.list-unstyled#notifications
-    %li.card.text-center
+    - if @notifications.count.zero?
-      .card-body
+      %li.card.text-center
-        .notifications--none
-          %i.fa.fa-bell-o.notification__bell-icon
-        %p
-          - if params[:type] == 'all'
-            = t(".none_filtered")
-          - else
-            = t(".none")
-  - else
-    - @notifications.each do |notification|
-      %li.card
         .card-body
-          .media
+          .notifications--none
-            = render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification
+            %i.fa.fa-bell-o.notification__bell-icon
-
+          %p
-  - unless @notifications.count.zero?
+            - if params[:type] == 'all'
-    = render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type]
+              = t(".none_filtered")
+            - else
+              = t(".none")
+    - else
+      - @notifications.each do |notification|
+        %li.card
+          .card-body
+            .media
+              = render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification
 
     - if @more_data_available
-      .d-flex.justify-content-center.justify-content-sm-start
+      .d-flex.justify-content-center.justify-content-sm-start#paginator
-        %button.btn.btn-light#load-more-btn{ type: :button, data: { last_id: @notifications_last_id } }
+        = button_to notifications_path(last_id: @notifications_last_id, type: params[:type]), class: "btn btn-light" do
           = t("voc.load")
 
 - provide(:title, generate_title(t(".title")))

app/views/notifications/index.js.erb

@@ -1,8 +0,0 @@
-$('#notifications').append('<% @notifications.each do |notification|
-  %><li class="card"><div class="card-body"><div class="media"><%= j render "notifications/type/#{notification.target_type.downcase}", notification: notification
-%></div></div></li><% end %>');
-<% if @more_data_available %>
-  $('#pagination').html('<%= j render 'shared/cursored_pagination_dummy', more_data_available: @more_data_available, last_id: @notifications_last_id, permitted_params: %i[type] %>');
-<% else %>
-  $('#pagination, #load-more-btn').remove();
-<% end %>

app/views/notifications/index.turbo_stream.haml

@@ -0,0 +1,12 @@
+= turbo_stream.append "notifications" do
+  - @notifications.each do |notification|
+    %li.card
+      .card-body
+        .media
+          = render "notifications/type/#{notification.target.class.name.downcase.split('::').last}", notification: notification
+
+= turbo_stream.update "paginator" do
+  - if @more_data_available
+    = button_to notifications_path(last_id: @notifications_last_id, type: params[:type]), class: "btn btn-light" do
+      = t("voc.load")
+

config/routes.rb

@@ -141,7 +141,7 @@ Rails.application.routes.draw do
   get "/public", to: "timeline#public", as: :public_timeline if APP_CONFIG.dig(:features, :public, :enabled)
   get "/list/:list_name", to: "timeline#list", as: :list_timeline
 
-  get "/notifications(/:type)", to: "notifications#index", as: :notifications, defaults: { type: "new" }
+  match "/notifications(/:type)", to: "notifications#index", via: [:get, :post], as: :notifications, defaults: { type: "new" }
 
   match "/inbox(/:author)", via: [:get, :post], to: "inbox#show", as: :inbox