Clarify notification actions

app/assets/stylesheets/trays.css

@@ -189,25 +189,54 @@
 
     background-color: var(--color-ink-lightest);
     display: flex;
-    padding: 1ch;
+    /* display: grid;
+    grid-template-columns: 1fr 2fr 1fr; */
     opacity: 0;
+    padding: 0.5ch;
 
     .btn {
       --btn-background: var(--color-ink-lightest);
+      --btn-border-radius: 0.5ch;
+      --btn-padding: 1ch;
+
+      display: flex;
+      flex-direction: column;
+      font-size: 12px;
+      font-weight: normal;
+      gap: 0.25ch;
+      inline-size: 100%;
+    }
+
+    > *:is(:first-child, :last-child) {
+      inline-size: 128px;
     }
 
     .tray__dialog[open] & {
       opacity: 1;
     }
-  }
 
-  .tray__more-notifications {
-    display: none;
-  }
+    .tray__new-notifications {
+      display: none;
+      position: relative;
 
-  .tray__dialog:has(.tray__item:nth-child(1n + 7)) {
-    .tray__all-notifications { display: none; }
-    .tray__more-notifications { display: block; }
+      /* Red dot */
+      &:after {
+        background-color: oklch(var(--lch-red-medium));
+        block-size: 1ch;
+        border-radius: 50%;
+        box-shadow: 0 0 0 1px var(--color-ink-lightest);
+        content: "";
+        inline-size: 1ch;
+        inset: 25% auto auto 50%;
+        position: absolute;
+        translate: 25% -75%;
+      }
+    }
+
+    .tray__dialog:has(.tray__item:nth-child(1n + 7)) {
+      .tray__old-notifications { display: none; }
+      .tray__new-notifications { display: block; }
+    }
   }
 
   /* Tray cards

app/views/notifications/_tray.html.erb

@@ -7,23 +7,30 @@
     <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %>
 
     <div class="tray__item tray__item--overflow txt-x-small">
-      <%= button_to read_all_notifications_path,
-            class: "btn btn--circle borderless",
-            title: "Mark all notifications as read",
-            data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
-        <%= icon_tag "check" %>
-      <% end %>
-
-      <%= link_to notifications_path, class: "btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
-        <span class="tray__more-notifications">See more…</span>
-        <span class="tray__all-notifications">See all notifications</span>
-      <% end %>
-
       <%= link_to settings_notifications_path,
-            class: "btn btn--circle borderless",
+            class: "btn borderless",
             title: "Notification settings",
             data: { action: "click->dialog#close" } do %>
         <%= icon_tag "settings" %>
+        Settings
+      <% end %>
+
+      <%= link_to notifications_path, class: "tray__new-notifications btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
+        <%= icon_tag "bell" %>
+        See more new items…
+      <% end %>
+
+      <%= link_to notifications_path, class: "tray__old-notifications btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
+        <%= icon_tag "bell" %>
+        See all past items
+      <% end %>
+
+      <%= button_to read_all_notifications_path,
+            class: "btn borderless",
+            title: "Mark all notifications as read",
+            data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
+        <%= icon_tag "check" %>
+        Clear all
       <% end %>
     </div>
   </dialog>