WIP: show notifications in a tray

app/assets/stylesheets/notifications.css

@@ -0,0 +1,15 @@
+.notification-tray {
+  position: fixed;
+  width: 40ch;
+  bottom: 1rem;
+  left: calc(50% - 20ch);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.notification {
+  background-color: #eeed;
+  border-radius: 6px;
+  padding: 0.5rem;
+}

app/controllers/notifications_controller.rb

@@ -0,0 +1,5 @@
+class NotificationsController < ApplicationController
+  def index
+    @notifications = Current.user.notifications.unread.ordered.limit(20)
+  end
+end

app/helpers/notifications_helper.rb

@@ -0,0 +1,7 @@
+module NotificationsHelper
+  def notification_tray_tag
+    tag.div class: "notification-tray" do
+      turbo_frame_tag "notifications", src: notifications_path, data: { turbo_permanent: true }
+    end
+  end
+end

app/models/notification.rb

@@ -2,6 +2,6 @@ class Notification < ApplicationRecord
   belongs_to :user
   belongs_to :bubble
 
-  scope :unread, -> { where.not(:read) }
-  scope :ordered, -> { order(created_at: :desc) }
+  scope :unread, -> { where(read: false) }
+  scope :ordered, -> { order(read: :desc, created_at: :desc) }
 end

app/views/bubbles/index.html.erb

@@ -50,3 +50,5 @@
     <%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %>
   </ul>
 </section>
+
+<%= notification_tray_tag %>

app/views/notifications/_notification.html.erb

@@ -0,0 +1,3 @@
+<div class="notification">
+  <p><%= notification.body %></p>
+</div>

app/views/notifications/index.html.erb

@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "notifications" do %>
+  <%= render @notifications %>
+<% end %>

config/routes.rb

@@ -13,6 +13,7 @@ Rails.application.routes.draw do
   end
 
   resources :bubbles
+  resources :notifications
 
   resources :buckets do
     resources :bubbles do

test/controllers/notifications_controller_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class NotificationsControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end