Design for notifications

app/assets/stylesheets/notifications.css

@@ -1,85 +1,84 @@
 .notification-tray {
-  position: fixed;
-  bottom: 1rem;
-  left: calc(50% - 20ch);
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
   height: 4rem;
-  width: 40ch;
+  inset: auto auto var(--block-space);
+  position: fixed;
 }
 
 .notification {
+  inset: auto auto 0;
   position: absolute;
-  padding: 4px;
-  bottom: 0;
-  border-radius: 6px;
+  transform: translate(var(--offsetX), var(--offsetY));
+  transform-origin: center center;
+  transition: transform 0.2s ease-in-out;
+  z-index: var(--z-index);
 
-  & .notification--content {
-    border-radius: 6px;
-    background-color: #eee;
-    border: solid 1px black;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 40ch;
-    color: black;
-
-    &:visited {
-      color: black;
-    }
+  .notification__content {
+    color: var(--color-ink);
+    inline-size: var(--width);
   }
 
-
-  transform: translateY(var(--offset));
-  z-index: var(--z-index);
-  transition: transform 0.2s;
-
   &:nth-child(1) {
-    --offset: 0;
+    --offsetX: 0;
+    --offsetY: 0;
+    --width: 40ch;
     --z-index: 0;
   }
 
   &:nth-child(2) {
-    --offset: -8px;
+    --offsetX: 0.5ch;
+    --offsetY: calc(var(--block-space-half) * -1);
+    --width: 39ch;
     --z-index: -1;
   }
 
   &:nth-child(3) {
-    --offset: -16px;
+    --offsetX: 1ch;
+    --offsetY: calc(var(--block-space) * -1);
+    --width: 38ch;
     --z-index: -2;
   }
 
   &:nth-child(4) {
-    --offset: -24px;
+    --offsetX: 1.5ch;
+    --offsetY: calc(var(--block-space) * -1.5);
+    --width: 37ch;
     --z-index: -3;
   }
 
   &:nth-child(5) {
-    --offset: -32px;
+    --offsetX: 2ch;
+    --offsetY: calc(var(--block-space) * -2);
+    --width: 36ch;
     --z-index: -4;
   }
 
   &:nth-child(1n + 6) {
     display: none;
   }
-}
 
-.notification-tray:hover .notification {
-  &:nth-child(2) {
-    --offset: -100%;
-  }
+  .notification-tray:hover & {
+    &:nth-child(2) {
+      --offsetX: 0;
+      --offsetY: calc((100% + var(--block-space-half)) * -1);
+      --width: 40ch;
+    }
 
-  &:nth-child(3) {
-    --offset: -200%;
-  }
+    &:nth-child(3) {
+      --offsetX: 0;
+      --offsetY: calc((100% + var(--block-space-half)) * -2);
+      --width: 40ch;
+    }
 
-  &:nth-child(4) {
-    --offset: -300%;
-  }
+    &:nth-child(4) {
+      --offsetX: 0;
+      --offsetY: calc((100% + var(--block-space-half)) * -3);
+      --width: 40ch;
+    }
 
-  &:nth-child(5) {
-    --offset: -400%;
+    &:nth-child(5) {
+      --offsetX: 0;
+      --offsetY: calc((100% + var(--block-space-half)) * -4);
+      --width: 40ch;
+    }
   }
 }

app/helpers/notifications_helper.rb

@@ -1,6 +1,6 @@
 module NotificationsHelper
   def notification_tag(notification, &)
-    link_to notification.resource, id: dom_id(notification), class: "notification",
+    link_to notification.resource, id: dom_id(notification), class: "notification border-radius",
       data: { turbo_frame: "_top" }, &
   end
 end

app/models/notifier/assigned.rb

@@ -1,7 +1,7 @@
 class Notifier::Assigned < Notifier
   private
     def body
-      "assigned you: #{bubble.title}"
+      "#{event.creator.name} assigned to you"
     end
 
     def recipients

app/models/notifier/commented.rb

@@ -1,7 +1,7 @@
 class Notifier::Commented < Notifier
   private
     def body
-      "commented on: #{bubble.title}"
+      "#{event.creator.name}"
     end
 
     def resource

app/models/notifier/created.rb

@@ -1,6 +1,6 @@
 class Notifier::Created < Notifier
   private
     def body
-      "created: #{bubble.title}"
+      "Added by #{event.creator.name}"
     end
 end

app/models/notifier/popped.rb

@@ -1,6 +1,6 @@
 class Notifier::Popped < Notifier
   private
     def body
-      "popped: #{bubble.title}"
+      "Popped by #{event.creator.name}"
     end
 end

app/views/notifications/_notification.html.erb

@@ -1,9 +1,12 @@
 <%= notification_tag notification do %>
-  <div class="notification--content shadow">
+  <div class="notification__content border-radius borderless pad shadow fill-white flex align-start txt-align-start gap-half">
     <div class="avatar txt-small">
       <%= avatar_image_tag(notification.creator) %>
     </div>
 
-    <%= notification.body %>
+    <div class="flex flex-column txt-tight-lines">
+      <strong><%= "RE: " if notification.resource.is_a?(Comment) %><%= notification.bubble.title %></strong>
+      <%= notification.body %> · <%= time_ago_in_words(notification.created_at) %> ago
+    </div>
   </div>
 <% end %>

app/views/notifications/_tray.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_stream_from Current.user, :notifications %>
 
-<%= tag.div id: "notification-tray", class: "notification-tray", data: { turbo_permanent: true } do %>
+<%= tag.div id: "notification-tray", class: "notification-tray flex flex-column gap", data: { turbo_permanent: true } do %>
   <%=  turbo_frame_tag("notifications", src: notifications_path) %>
 <% end %>