From b3b881da174991bd1f794e82b4beb3c86e356cfb Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 19 Feb 2025 14:02:07 -0600
Subject: [PATCH] Try a more Basecamp style activity event card

---
 app/assets/stylesheets/events.css          |  5 +++
 app/assets/stylesheets/utilities.css       |  1 +
 app/helpers/events_helper.rb               | 39 ++++++----------------
 app/views/events/_event.html.erb           | 25 ++++++++------
 test/controllers/events_controller_test.rb |  4 +--
 5 files changed, 33 insertions(+), 41 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 75635a719..1900443d1 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -81,6 +81,11 @@
   margin-block-start: calc(var(--grid-lines) * -1);
 }
 
+.event__title {
+  font-size: 1.1em;
+  line-height: 1.2;
+}
+
 .event__wrapper {
   align-content: end;
   display: grid;
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 54f33f5ee..62f98c2c5 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -39,6 +39,7 @@
 .txt-nowrap { white-space: nowrap; }
 .txt-break { word-break: break-word; }
 .txt-uppercase { text-transform: uppercase; }
+.txt-link { color: var(--color-link); text-decoration: underline; }
 
 /* Flexbox and Grid */
 .justify-end { justify-content: end; }
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index d20c733fe..3f04dfdc5 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -67,44 +67,27 @@ module EventsHelper
   def event_action_sentence(event)
     case event.action
     when "assigned"
-      "Assigned to <strong>#{ event.assignees.pluck(:name).to_sentence }</strong>".html_safe
+      "#{ event.creator.name } assigned #{ event.assignees.pluck(:name).to_sentence } to <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "unassigned"
-      "Unassigned <strong>#{ event.assignees.pluck(:name).to_sentence }</strong>".html_safe
+      "#{ event.creator.name } unassigned #{ event.assignees.pluck(:name).to_sentence } from <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "boosted"
-      "Boosted by <strong>#{ event.creator.name }</strong>".html_safe
+      "#{ event.creator.name } boosted <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "commented"
-      "#{ strip_tags(event.comment.body_html).blank? ? "<strong>#{ event.creator.name }</strong> replied.".html_safe : "<strong>#{ event.creator.name }:</strong>" } #{ strip_tags(event.comment.body_html).truncate(200) }".html_safe
+      "#{ event.creator.name } commented on <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "published"
-      "Added by <strong>#{ event.creator.name }</strong>".html_safe
+      "#{ event.creator.name } added <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "popped"
-      "Popped by <strong>#{ event.creator.name }</strong>".html_safe
+      "#{ event.creator.name } popped <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "staged"
-      "<strong>#{event.creator.name}</strong> moved to #{event.stage_name}.".html_safe
+      "#{event.creator.name} changed the stage to #{event.stage_name} on <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "due_date_added"
-      "<strong>#{event.creator.name}</strong> set the date to #{event.particulars.dig('particulars', 'due_date').to_date.strftime('%B %-d')}".html_safe
+      "#{event.creator.name} set the date to #{event.particulars.dig('particulars', 'due_date').to_date.strftime('%B %-d')} on <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "due_date_changed"
-      "<strong>#{event.creator.name}</strong> changed the date to #{event.particulars.dig('particulars', 'due_date').to_date.strftime('%B %-d')}".html_safe
+      "#{event.creator.name} changed the date to #{event.particulars.dig('particulars', 'due_date').to_date.strftime('%B %-d')} on <span class='txt-link'>#{ event.bubble.title }</span>".html_safe
     when "due_date_removed"
-      "#{event.creator.name} removed the date"
+      "#{event.creator.name} removed the date on <span class='txt-link'>#{ event.bubble.title }</span>"
     when "title_changed"
-      "<strong>#{event.creator.name}</strong> renamed this (was: '#{event.particulars.dig('particulars', 'old_title')})'".html_safe
-    end
-  end
-
-  def event_action_icon(event)
-    case event.action
-    when "assigned"
-      "arrow-right"
-    when "boosted"
-      "thumb-up"
-    when "staged"
-      "bolt"
-    when "unassigned"
-      "remove-med"
-    when "due_date_added", "due_date_changed"
-      "calendar"
-    else
-      "person"
+      "#{event.creator.name} renamed  on <span class='txt-link'>#{ event.bubble.title }</span> (was: '#{event.particulars.dig('particulars', 'old_title')})'".html_safe
     end
   end
 end
diff --git a/app/views/events/_event.html.erb b/app/views/events/_event.html.erb
index c43c5f24a..64f99c2e6 100644
--- a/app/views/events/_event.html.erb
+++ b/app/views/events/_event.html.erb
@@ -10,18 +10,21 @@
               animation_play_class: "bubble--wobble", 
               animation_play_on_load_value: "true", 
               action: "mouseover->animation#play mouseover->related-element#highlight mouseout->related-element#unhighlight" } do %>
-  <div class="bubble__shape flex-item-no-shrink txt-large"></div>
+  <div class="avatar txt-x-small flex-item-no-shrink">
+    <%= avatar_image_tag(event.creator) %>
+  </div>
 
-  <div class="flex flex-column min-width txt-small txt-tight-lines align-start txt-align-start">
-    <strong style="font-size: 1.1em;" class="txt-break overflow-line-clamp">
-      <%= event.action == "commented" ? "RE: #{ bubble.title }" : bubble.title %>
+  <div class="flex flex-column min-width txt-small align-start txt-align-start">
+    <strong class="event__title txt-break overflow-line-clamp">
+      <%= event_action_sentence(event) %>
     </strong>
-    <span class="flex align-center gap-half align-start">
-      <% if event_column(event) == 1 %>
-      <span class="flex-item-no-shrink"><%= image_tag "#{event_action_icon(event)}.svg", aria: { hidden: true }, size: 13, class: "colorize--black" %></span>
-      <% end %>
-      <span class="txt-break overflow-line-clamp" style="--lines: 3;"><%= event_action_sentence(event) %></span>
-    </span>
-    <span class="translucent"><%= bubble.bucket.name %></span>
+
+    <% if event.action == "commented" && !strip_tags(event&.comment&.body_html).blank? %>
+      <span class="txt-break overflow-line-clamp">
+        <%= strip_tags(event.comment.body_html).truncate(200) -%>
+      </span>
+    <% end %>
+
+    <span class="event__bucket translucent"><%= bubble.bucket.name %></span>
   </div>
 <% end %>
diff --git a/test/controllers/events_controller_test.rb b/test/controllers/events_controller_test.rb
index 66833d506..5fa3f9bf4 100644
--- a/test/controllers/events_controller_test.rb
+++ b/test/controllers/events_controller_test.rb
@@ -12,7 +12,7 @@ class EventsControllerTest < ActionDispatch::IntegrationTest
     get events_url
 
     assert_select "div.event__wrapper[style='grid-area: 17/1']" do
-      assert_select "strong", text: "Layout is broken"
+      assert_select "strong", text: "David assigned JZ to Layout is broken"
     end
   end
 
@@ -22,7 +22,7 @@ class EventsControllerTest < ActionDispatch::IntegrationTest
     get events_url
 
     assert_select "div.event__wrapper[style='grid-area: 22/1']" do
-      assert_select "strong", text: "Layout is broken"
+      assert_select "strong", text: "David assigned JZ to Layout is broken"
     end
   end
 end