From 2bf7ecbd790f708da68da0430e18d44388316480 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 19 May 2025 15:47:34 -0500
Subject: [PATCH] Account for different notification types

---
 app/assets/stylesheets/notifications.css             | 11 ++++++++---
 app/assets/stylesheets/trays.css                     |  1 +
 app/views/notifications/_notification.html.erb       | 12 ++----------
 .../{_event.html.erb => event/_body.html.erb}        |  1 +
 .../notification/event/_header.html.erb              |  6 ++++++
 .../{_mention.html.erb => mention/_body.html.erb}    |  0
 .../notification/mention/_header.html.erb            |  3 +++
 7 files changed, 21 insertions(+), 13 deletions(-)
 rename app/views/notifications/notification/{_event.html.erb => event/_body.html.erb} (69%)
 create mode 100644 app/views/notifications/notification/event/_header.html.erb
 rename app/views/notifications/notification/{_mention.html.erb => mention/_body.html.erb} (100%)
 create mode 100644 app/views/notifications/notification/mention/_header.html.erb

diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index 7d1d3e88b..a801f3758 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -50,11 +50,11 @@
     align-items: flex-start;
     background-color: var(--color-canvas);
     border: 1px solid var(--color-ink-lighter);
-    border-radius: 0.5em;
+    border-radius: 0.2em;
     box-shadow: var(--shadow);
     color: var(--color-ink);
     display: block;
-    font-size: 10px;
+    font-size: var(--text-normal);
     inline-size: 100%;
     max-inline-size: 100%;
     padding: var(--notification-padding-block) var(--notification-padding-inline);
@@ -76,7 +76,7 @@
     align-items: center;
     display: flex;
     gap: var(--inline-space);
-    margin-block-end: var(--notification-padding-block);
+    margin-block-end: 1ch;
     margin-block-start: calc(-1 * var(--notification-padding-block));
     margin-inline-start: calc(-1 * var(--notification-padding-inline));
     min-inline-size: 0;
@@ -86,10 +86,15 @@
     background-color: var(--card-color);
     border-radius: 0.2em 0 0.2em 0;
     color: var(--color-ink-inverted);
+    font-size: 0.6em;
     font-weight: 800;
     inline-size: fit-content;
     padding: 0.25ch var(--inline-space) 0.25ch var(--inline-space-double);
     text-transform: uppercase;
+
+    .tray & {
+      font-size: 10px;
+    }
   }
 
   .notification__id {
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 6eb2b8cd9..9899792fb 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -118,6 +118,7 @@
   .tray__item-meta {
     font-size: var(--text-x-small);
     font-weight: 500;
+    opacity: 0.66;
   }
 
   .tray__overflow {
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb
index 50ec01e3e..04d602688 100644
--- a/app/views/notifications/_notification.html.erb
+++ b/app/views/notifications/_notification.html.erb
@@ -2,15 +2,7 @@
   <%= notification_tag notification do %>
 
     <header class="notification__header">
-      <div class="notification__collection">
-        <span class="notification__id"><%= notification.source.id %></span>
-        <span class="notification__collection-name overflow-ellipsis">
-          <%= notification.source.collection.name %>
-        </span>
-      </div>
-      <span class="notification__time">
-        <%= local_datetime_tag(notification.created_at, style: :ago) %>
-      </span>
+      <%= render "notifications/notification/#{notification.source_type.underscore}/header", notification: notification %>
     </header>
 
     <div class="notification__body">
@@ -19,7 +11,7 @@
       </div>
 
       <div class="flex flex-column min-width flex-item-grow">
-        <%= render "notifications/notification/#{notification.source_type.underscore}", notification: notification %>
+        <%= render "notifications/notification/#{notification.source_type.underscore}/body", notification: notification %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/notifications/notification/_event.html.erb b/app/views/notifications/notification/event/_body.html.erb
similarity index 69%
rename from app/views/notifications/notification/_event.html.erb
rename to app/views/notifications/notification/event/_body.html.erb
index b482db3f1..fa48434ed 100644
--- a/app/views/notifications/notification/_event.html.erb
+++ b/app/views/notifications/notification/event/_body.html.erb
@@ -4,3 +4,4 @@
 <div class="overflow-ellipsis txt-small txt-tight-lines">
   <%= event_notification_body(event) %>
 </div>
+<div class="tray__item-meta overflow-ellipsis"> <%= local_datetime_tag(notification.created_at, style: :ago) %></div>
diff --git a/app/views/notifications/notification/event/_header.html.erb b/app/views/notifications/notification/event/_header.html.erb
new file mode 100644
index 000000000..fcfb81be0
--- /dev/null
+++ b/app/views/notifications/notification/event/_header.html.erb
@@ -0,0 +1,6 @@
+<div class="notification__collection">
+  <span class="notification__id"><%= notification.source.id %></span>
+  <span class="notification__collection-name overflow-ellipsis">
+    <%= notification.source.collection.name %>
+  </span>
+</div>
diff --git a/app/views/notifications/notification/_mention.html.erb b/app/views/notifications/notification/mention/_body.html.erb
similarity index 100%
rename from app/views/notifications/notification/_mention.html.erb
rename to app/views/notifications/notification/mention/_body.html.erb
diff --git a/app/views/notifications/notification/mention/_header.html.erb b/app/views/notifications/notification/mention/_header.html.erb
new file mode 100644
index 000000000..bf62c67f5
--- /dev/null
+++ b/app/views/notifications/notification/mention/_header.html.erb
@@ -0,0 +1,3 @@
+<div class="notification__collection">
+  <span class="notification__id"><%= notification.source.id %></span>
+</div>