From 9a9cb3340bb602098875da074a7dee24512545e7 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Thu, 22 May 2025 11:01:17 -0500
Subject: [PATCH] WIP

---
 app/assets/stylesheets/trays.css       | 10 ++++------
 app/views/layouts/application.html.erb |  2 +-
 app/views/my/pins/_tray.html.erb       | 17 ++++++++++-------
 app/views/notifications/_tray.html.erb | 22 ++++++++++++----------
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 24399ffc4..ab0872b56 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -59,6 +59,10 @@
       &:nth-child(4) { --tray-item-index: 4; }
       &:nth-child(5) { --tray-item-index: 5; }
       &:nth-child(6) { --tray-item-index: 6; }
+      &:nth-child(7) { --tray-item-index: 7; }
+      &:nth-child(8) { --tray-item-index: 8; }
+      &:nth-child(9) { --tray-item-index: 9; }
+      &:nth-child(10) { --tray-item-index: 10; }
 
       .tray[open] & {
         --tray-item-y: calc(-100% * var(--tray-item-index) + var(--tray-item-height) - var(--footer-height));
@@ -202,16 +206,11 @@
   /* ------------------------------------------------------------------------ */
 
   .tray--pins {
-    /* inset: auto auto var(--block-space-half) var(--inline-space); */
     inset-inline: var(--inline-space) auto;
 
     .tray__item {
       --tray-item-z: calc(10 - var(--tray-item-index));
 
-      &:nth-child(7) { --tray-item-index: 7; }
-      &:nth-child(8) { --tray-item-index: 8; }
-      &:nth-child(9) { --tray-item-index: 9; }
-      &:nth-child(10) { --tray-item-index: 10; }
       &:nth-child(1n + 11) { display: none; }
     }
 
@@ -270,7 +269,6 @@
   /* ------------------------------------------------------------------------ */
 
   .tray--notifications {
-    /* inset: auto var(--inline-space) var(--block-space-half) auto; */
     inset-inline: auto var(--inline-space);
 
     .tray__item:nth-child(1n + 7) {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index ba86f92e4..0e04cbca9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -48,9 +48,9 @@
 
       <% if Current.user && !@hide_footer_frames %>
         <div id="footer_frames" data-turbo-permanent="true" >
-          <%= render "notifications/tray" %>
           <%= render "my/pins/tray" %>
           <%= render "commands/terminal" %>
+          <%= render "notifications/tray" %>
         </div>
       <% end %>
     </footer>
diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb
index 297dd12c8..b05e65239 100644
--- a/app/views/my/pins/_tray.html.erb
+++ b/app/views/my/pins/_tray.html.erb
@@ -1,13 +1,16 @@
 <%= turbo_stream_from Current.user, :pins_tray %>
 
-<%= tag.dialog id: "pin-tray", class: "tray tray--pins",
-      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 "pins", src: my_pins_path %>
+<section class="tray tray--pins">
+  <%= tag.dialog id: "pin-tray", class: "tray__dialog",
+        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 "pins", src: my_pins_path %>
+  <% end %>
 
   <div class="tray__actions">
-    <button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center full-width" data-action="click->dialog#close">Pinned</button>
+    <button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center full-width" data-action="click->dialog#close">
+      Pinned
+    </button>
   </div>
 
-  <button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack">
-  </button>
-<% end %>
+  <button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack"></button>
+</section>
diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb
index 17b869af0..749e1bdc5 100644
--- a/app/views/notifications/_tray.html.erb
+++ b/app/views/notifications/_tray.html.erb
@@ -1,15 +1,17 @@
 <%= turbo_stream_from Current.user, :notifications %>
 
-<dialog class="tray tray--notifications"
-    data-controller="dialog" data-dialog-modal-value="false" data-dialog-target="dialog"
-    data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
-  <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %>
+<section class="tray tray--notifications">
+  <dialog class="tray__dialog"
+      data-controller="dialog" data-dialog-modal-value="false" data-dialog-target="dialog"
+      data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
+    <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %>
 
-  <div class="tray__item tray__item--overflow">
-    <%= link_to notifications_path, class: "card", data: { action: "click->dialog#close" } do %>
-      + More…
-    <% end %>
-  </div>
+    <div class="tray__item tray__item--overflow">
+      <%= link_to notifications_path, class: "card", data: { action: "click->dialog#close" } do %>
+        + More…
+      <% end %>
+    </div>
+  </dialog>
 
   <div class="tray__actions">
     <%= button_to read_all_notifications_path,
@@ -26,4 +28,4 @@
   </div>
 
   <button class="tray__expander" data-action="dialog#toggle" aria-label="Expand notifications stack"></button>
-</dialog>
+</section>