From 6b832876a2b9957aadf632896b6d368eed8dc0d7 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 17 Jan 2025 15:30:33 -0600
Subject: [PATCH] Add a notifications button to the tray for reaching the index
 when you have no unreads

---
 app/assets/images/bell.svg               |  1 +
 app/assets/stylesheets/notifications.css | 12 ++++++------
 app/views/buckets/index.html.erb         |  2 --
 app/views/notifications/_tray.html.erb   |  5 +++++
 4 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/images/bell.svg

diff --git a/app/assets/images/bell.svg b/app/assets/images/bell.svg
new file mode 100644
index 000000000..52a5611fb
--- /dev/null
+++ b/app/assets/images/bell.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21 17.5a1.5 1.5 0 0 1 -1.5-1.5v-4.862a7.957 7.957 0 0 0 -6.5-8.065v-2.073a1 1 0 0 0 -2 0v2.073a7.957 7.957 0 0 0 -6.5 8.065v4.862a1.5 1.5 0 0 1 -1.5 1.5 1 1 0 0 0 0 2h18a1 1 0 0 0 0-2z"/><path d="m14.236 21h-4.472a.25.25 0 0 0 -.248.222 2.319 2.319 0 0 0 -.016.278 2.5 2.5 0 1 0 5 0 2.319 2.319 0 0 0 -.016-.278.248.248 0 0 0 -.248-.222z"/></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index 6c8c1b355..a3d66f171 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -1,5 +1,5 @@
 .notification-tray {
-  inset: auto auto var(--block-space);
+  inset: auto auto var(--block-space) var(--inline-space);
   position: fixed;
   z-index: 1;
 
@@ -15,35 +15,35 @@
       --offsetX: 0;
       --offsetY: 0;
       --width: 38ch;
-      --z-index: 0;
+      --z-index: 1;
     }
 
     &:nth-child(2) {
       --offsetX: 0.5ch;
       --offsetY: calc(var(--block-space-half) * -1);
       --width: 37ch;
-      --z-index: -1;
+      --z-index: 0;
     }
 
     &:nth-child(3) {
       --offsetX: 1ch;
       --offsetY: calc(var(--block-space) * -1);
       --width: 36ch;
-      --z-index: -2;
+      --z-index: -1;
     }
 
     &:nth-child(4) {
       --offsetX: 1.5ch;
       --offsetY: calc(var(--block-space) * -1.5);
       --width: 35ch;
-      --z-index: -3;
+      --z-index: -2;
     }
 
     &:nth-child(5) {
       --offsetX: 2ch;
       --offsetY: calc(var(--block-space) * -2);
       --width: 34ch;
-      --z-index: -4;
+      --z-index: -3;
     }
 
     &:nth-child(1n + 6) {
diff --git a/app/views/buckets/index.html.erb b/app/views/buckets/index.html.erb
index baf1e0ddd..7c2f59a91 100644
--- a/app/views/buckets/index.html.erb
+++ b/app/views/buckets/index.html.erb
@@ -7,8 +7,6 @@
       <span class="for-screen-reader">Account settings</span>
     <% end %>
 
-    <%= link_to "All notifications", notifications_path %>
-
     <%= link_to new_bucket_path, class: "btn flex-item-justify-end", style: "view-transition-name: new-bucket" do %>
       <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Add a new project</span>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index af4385822..8a781deba 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -2,4 +2,9 @@
 
 <%= tag.div id: "notification-tray", class: "notification-tray flex flex-column gap", data: { turbo_permanent: true } do %>
   <%=  turbo_frame_tag("notifications", src: notifications_tray_path) %>
+
+  <%= link_to notifications_path, class: "btn flex-item-justify-start" do %>
+    <%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
+    <span class="for-screen-reader">See all notifications</span>
+  <% end %>
 <% end %>