Differentiate events with an icon

app/assets/images/clipboard.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19 3h-4.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2h-4.2c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-15c0-1.1-.9-2-2-2m-7 0c.6 0 1 .5 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1m-5 4h10v-2h2v15h-14v-15h2z"/></svg>

app/assets/images/comment.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 2.9c-5.4 0-9.8 3.6-9.8 8.1 0 2.2 1 4.2 2.7 5.6l-2 3.9c-.1.2 0 .5.2.6h.4l5.3-2.4c1.1.3 2.2.5 3.3.5 5.4 0 9.8-3.6 9.8-8.1s-4.5-8.2-9.9-8.2z"/></svg>

app/assets/stylesheets/events.css

@@ -120,3 +120,20 @@
     grid-row-start: unset !important;
   }
 }
+
+.event__icon {
+  aspect-ratio: 1;
+  background-color: var(--bubble-color);
+  block-size: 1.7em;
+  border-radius: 1.7em;
+  inline-size: 1.7em;
+  display: grid;
+  place-content: center;
+  margin-inline-end: -0.75em;
+
+  img {
+    block-size: 1.1em;
+    inline-size: 1.1em;
+    grid-area: 1 / 1;
+  }
+}

app/helpers/events_helper.rb

@@ -92,4 +92,19 @@ module EventsHelper
       "#{event.creator.name} renamed  on <span style='color: var(--bubble-color)'>#{ event.bubble.title }</span> (was: '#{event.particulars.dig('particulars', 'old_title')})'".html_safe
     end
   end
+
+  def event_action_icon(event)
+    case event.action
+    when "assigned"
+      "clipboard"
+    when "boosted"
+      "thumb-up"
+    when "staged"
+      "bolt"
+    when "commented"
+      "comment"
+    else
+      "person"
+    end
+  end
 end

app/views/events/_event.html.erb

@@ -13,9 +13,17 @@
   </div>
 
   <div class="flex flex-column min-width txt-small align-start txt-align-start" style="color: color-mix(in srgb, var(--bubble-color) 40%, var(--color-ink));">
-    <strong class="event__title txt-break overflow-line-clamp txt-tight-lines">
-      <%= event_action_sentence(event) %>
-    </strong>
+    <div class="flex align-start gap">
+      <strong class="event__title txt-break overflow-line-clamp txt-tight-lines">
+        <%= event_action_sentence(event) %>
+      </strong>
+
+      <% if event_column(event) == 2 %>
+        <span class="event__icon">
+          <%= image_tag "#{event_action_icon(event)}.svg", size: 24, aria: { hidden: true }, class: "colorize--white" %>
+        </span>
+      <% end %>
+    </div>
 
     <% if event.action == "commented" && !strip_tags(event&.comment&.body_html).blank? %>
       <span class="txt-break overflow-line-clamp txt-tight-lines">