Add a notifications button to the tray for reaching the index when you have no unreads

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>

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) {

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>

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 %>