+
<%= avatar_image_tag(notification.creator) %>
-
-
<%= notification_title(notification) %>
-
<%= notification_body(notification) %> · <%= local_datetime_tag(notification.created_at, style: :ago) %>
+
+
<%= notification_title(notification) %>
+
<%= notification_body(notification) %> · <%= local_datetime_tag(notification.created_at, style: :ago) %>
+
+
+
<% end %>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 71ada65cb..476f0bc78 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -1,5 +1,19 @@
<%= turbo_stream_from Current.user, :notifications %>
-<%= tag.div id: "notification-tray", class: "notification-tray flex flex-column gap", data: { turbo_permanent: true } do %>
- <%= turbo_frame_tag("notifications", src: notifications_path) %>
+<%= tag.dialog id: "notification-tray", class: "notification-tray flex flex-column gap unpad borderless justify-end fill-transparent",
+ data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" } do %>
+ <%= turbo_frame_tag("notifications", src: notifications_tray_path) -%>
+
+ <%= button_to notifications_mark_all_read_path, class: "notification-tray__read_action btn flex-item-justify-start", data: { turbo_frame: "notifications" } do %>
+ Mark all as read
+ <% end %>
+
+ <%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-end" do %>
+ <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
+ See all notifications
+ <% end %>
+
+
+
<% end %>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index ee91b07e4..35942d06a 100644
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -1,3 +1,36 @@
-<%= turbo_frame_tag "notifications" do %>
- <%= render @notifications %>
+<% @page_title = "Notifications" %>
+
+<% content_for :header do %>
+
+<% end %>
+
+
+ <% if @unread.any? %>
+ New for you
+ <%= render @unread %>
+ <% else %>
+
+ Nothing new for you.
+
+ <% end %>
+
+
+<% if @page.records.any? %>
+
+ Previously seen
+ <%= render @page.records %>
+
+
+ <%= notifications_next_page_link(@page) %>
<% end %>
diff --git a/app/views/notifications/index.turbo_stream.erb b/app/views/notifications/index.turbo_stream.erb
new file mode 100644
index 000000000..00d744dcd
--- /dev/null
+++ b/app/views/notifications/index.turbo_stream.erb
@@ -0,0 +1,7 @@
+<%= turbo_stream.append :notifications_list_read do %>
+ <%= render @page.records %>
+<% end %>
+
+<%= turbo_stream.replace :next_page do %>
+ <%= notifications_next_page_link(@page) %>
+<% end %>
diff --git a/app/views/notifications/mark_all_reads/create.html.erb b/app/views/notifications/mark_all_reads/create.html.erb
new file mode 100644
index 000000000..52d6bcd10
--- /dev/null
+++ b/app/views/notifications/mark_all_reads/create.html.erb
@@ -0,0 +1 @@
+<%= turbo_frame_tag "notifications" %>
diff --git a/app/views/notifications/trays/show.html.erb b/app/views/notifications/trays/show.html.erb
new file mode 100644
index 000000000..051055670
--- /dev/null
+++ b/app/views/notifications/trays/show.html.erb
@@ -0,0 +1,3 @@
+<%= turbo_frame_tag "notifications" do %>
+ <%= render collection: @notifications, partial: "notifications/notification" %>
+<% end %>
diff --git a/config/routes.rb b/config/routes.rb
index f122bb209..bea4b1c2a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -18,7 +18,11 @@ Rails.application.routes.draw do
end
resources :bubbles
- resources :notifications
+ resources :notifications, only: :index
+ namespace :notifications do
+ resource :tray, only: :show
+ resource :mark_all_read, only: :create
+ end
resources :buckets do
resources :bubbles do
diff --git a/db/migrate/20250116163344_change_notification_read_to_read_at.rb b/db/migrate/20250116163344_change_notification_read_to_read_at.rb
new file mode 100644
index 000000000..c9bd6bf64
--- /dev/null
+++ b/db/migrate/20250116163344_change_notification_read_to_read_at.rb
@@ -0,0 +1,12 @@
+class ChangeNotificationReadToReadAt < ActiveRecord::Migration[8.1]
+ def change
+ remove_index :notifications, %i[ user_id read created_at ], order: { read: :desc, created_at: :desc }
+
+ change_table :notifications do |t|
+ t.remove :read
+ t.datetime :read_at
+
+ t.index %i[ user_id read_at created_at ], order: { read_at: :desc, created_at: :desc }
+ end
+ end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 688750b25..749e157d5 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -190,13 +190,13 @@ ActiveRecord::Schema[8.1].define(version: 2025_01_21_174109) do
t.integer "bubble_id", null: false
t.string "resource_type", null: false
t.integer "resource_id", null: false
- t.boolean "read", default: false, null: false
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
+ t.datetime "read_at"
t.index ["bubble_id"], name: "index_notifications_on_bubble_id"
t.index ["event_id"], name: "index_notifications_on_event_id"
t.index ["resource_type", "resource_id"], name: "index_notifications_on_resource"
- t.index ["user_id", "read", "created_at"], name: "index_notifications_on_user_id_and_read_and_created_at", order: { read: :desc, created_at: :desc }
+ t.index ["user_id", "read_at", "created_at"], name: "index_notifications_on_user_id_and_read_at_and_created_at", order: { read_at: :desc, created_at: :desc }
t.index ["user_id"], name: "index_notifications_on_user_id"
end
@@ -284,4 +284,4 @@ ActiveRecord::Schema[8.1].define(version: 2025_01_21_174109) do
# Note that virtual tables may not work with other database engines. Be careful if changing database.
create_virtual_table "bubbles_search_index", "fts5", ["title"]
create_virtual_table "comments_search_index", "fts5", ["body"]
-end
+end
\ No newline at end of file
diff --git a/test/controllers/notifications/mark_all_reads_controller_test.rb b/test/controllers/notifications/mark_all_reads_controller_test.rb
new file mode 100644
index 000000000..ea43e1be6
--- /dev/null
+++ b/test/controllers/notifications/mark_all_reads_controller_test.rb
@@ -0,0 +1,17 @@
+require "test_helper"
+
+class Notifications::MarkAllReadsControllerTest < ActionDispatch::IntegrationTest
+ setup do
+ sign_in_as :kevin
+ end
+
+ test "show" do
+ assert_changes -> { notifications(:logo_published_kevin).reload.read? }, from: false, to: true do
+ assert_changes -> { notifications(:layout_commented_kevin).reload.read? }, from: false, to: true do
+ post notifications_mark_all_read_url
+ end
+ end
+
+ assert_response :success
+ end
+end
diff --git a/test/controllers/notifications/trays_controller_test.rb b/test/controllers/notifications/trays_controller_test.rb
new file mode 100644
index 000000000..7d44a3e00
--- /dev/null
+++ b/test/controllers/notifications/trays_controller_test.rb
@@ -0,0 +1,14 @@
+require "test_helper"
+
+class Notifications::TraysControllerTest < ActionDispatch::IntegrationTest
+ setup do
+ sign_in_as :kevin
+ end
+
+ test "show" do
+ get notifications_tray_url
+
+ assert_response :success
+ assert_select "div", text: /Layout is broken/
+ end
+end
diff --git a/test/controllers/notifications_controller_test.rb b/test/controllers/notifications_controller_test.rb
index fc4c2bfee..20b28201d 100644
--- a/test/controllers/notifications_controller_test.rb
+++ b/test/controllers/notifications_controller_test.rb
@@ -1,14 +1,7 @@
require "test_helper"
class NotificationsControllerTest < ActionDispatch::IntegrationTest
- setup do
- sign_in_as :kevin
- end
-
- test "index" do
- get notifications_url
-
- assert_response :success
- assert_select "div", text: /Layout is broken/
- end
+ # test "the truth" do
+ # assert true
+ # end
end
diff --git a/test/fixtures/notifications.yml b/test/fixtures/notifications.yml
index 89a8256ee..7bff2665c 100644
--- a/test/fixtures/notifications.yml
+++ b/test/fixtures/notifications.yml
@@ -3,7 +3,6 @@ logo_published_kevin:
event: logo_published
bubble: logo
resource: logo (Bubble)
- read: false
created_at: <%= 1.week.ago %>
layout_commented_kevin:
@@ -11,5 +10,4 @@ layout_commented_kevin:
event: layout_commented
bubble: layout
resource: layout_overflowing_david (Comment)
- read: false
created_at: <%= 1.week.ago %>