Put timestamp in header

app/assets/stylesheets/notifications.css

@@ -47,7 +47,7 @@
     --notification-padding-block: 0.75em;
     --notification-padding-inline: 0.5em;
 
-    align-items: flex-start;
+    align-items: center;
     background-color: var(--color-canvas);
     border: 1px solid var(--color-ink-lighter);
     border-radius: 0.2em;
@@ -61,6 +61,10 @@
     position: relative;
     text-align: start;
 
+    .tray & {
+      border: none;
+    }
+
     @media (prefers-color-scheme: dark) {
       --notification-border-color: var(--color-ink-medium);
     }
@@ -75,7 +79,7 @@
   .notification__header {
     align-items: center;
     display: flex;
-    gap: var(--inline-space);
+    gap: 0.5ch;
     margin-block-end: 1ch;
     margin-block-start: calc(-1 * var(--notification-padding-block));
     margin-inline-start: calc(-1 * var(--notification-padding-inline));
@@ -111,10 +115,17 @@
   }
 
   .notification__time {
+    font-size: 0.6em;
+    font-weight: 500;
     opacity: 0.66;
+
+    .tray & {
+      font-size: 10px;
+    }
   }
 
   .notification__body {
+    align-items: center;
     display: flex;
     flex-grow: 1;
     gap: var(--inline-space-half);

app/assets/stylesheets/pins.css

@@ -28,13 +28,12 @@
     .card__meta-grid {
       margin-inline-start: 0;
     }
-    
+
     .card {
       --block-space: 1em;
       --block-space-half: 0.5em;
       --text-xx-large: 2em;
 
-      border: 1px solid var(--color-canvas);
       view-transition-name: unset !important;
     }
 
@@ -53,7 +52,7 @@
 
     .card__title {
       --lines: 1;
-    
+
       font-size: var(--text-small);
       font-weight: bold;
       min-block-size: 0;

app/views/notifications/notification/event/_body.html.erb

@@ -4,4 +4,3 @@
 <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>

app/views/notifications/notification/event/_header.html.erb

@@ -1,6 +1,7 @@
 <div class="notification__collection">
-  <span class="notification__id"><%= notification.source.id %></span>
+  <span class="notification__id"><%= notification.source.eventable.id %></span>
   <span class="notification__collection-name overflow-ellipsis">
     <%= notification.source.collection.name %>
   </span>
 </div>
+<div class="notification__time overflow-ellipsis"> <%= local_datetime_tag(notification.created_at, style: :ago) %></div>

app/views/notifications/notification/mention/_body.html.erb

@@ -4,4 +4,3 @@
 <div class="overflow-ellipsis txt-small txt-tight-lines">
   <%= mention.source.mentionable_content.truncate(200) %>
 </div>
-<div class="tray__item-meta overflow-ellipsis translucent"> <%= local_datetime_tag(notification.created_at, style: :ago) %></div>

app/views/notifications/notification/mention/_header.html.erb

@@ -1,3 +1,4 @@
 <div class="notification__collection">
   <span class="notification__id"><%= notification.source.id %></span>
 </div>
+<div class="notification__time overflow-ellipsis"> <%= local_datetime_tag(notification.created_at, style: :ago) %></div>