From 7a8bbc2d6db24d89dba8c7002baa25c489927e4a Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 18 Sep 2024 11:38:40 -0500
Subject: [PATCH] Display all the assignments

---
 app/assets/stylesheets/avatars.css      | 36 +++++++++++++++++++++++++
 app/views/bubbles/_assignments.html.erb | 12 +++++++--
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/avatars.css b/app/assets/stylesheets/avatars.css
index 6aeeba783..1b7a7f4a9 100644
--- a/app/assets/stylesheets/avatars.css
+++ b/app/assets/stylesheets/avatars.css
@@ -14,3 +14,39 @@
     grid-area: 1/1;
   }
 }
+
+.avatar__group {
+  --avatar-size: 2.5ch;
+
+  block-size: 5ch;
+  display: grid;
+  gap: 1px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: min-content;
+  inline-size: 5ch;
+  place-content: center;
+
+  .avatar {
+    margin: auto;
+  }
+
+  &:where(:has(> :last-child:nth-child(2))) {
+    --avatar-size: 3.5ch;
+
+    > :first-child {
+      margin-block-end: 1.5ch;
+      margin-inline-end: -0.75ch;
+    }
+
+    > :last-child {
+      margin-block-start: 1.5ch;
+      margin-inline-start: -0.75ch;
+    }
+  }
+
+  &:where(:has(> :last-child:nth-child(3))) {
+    > :last-child {
+      margin-inline: 1.25ch -1.25ch;
+    }
+  }
+}
diff --git a/app/views/bubbles/_assignments.html.erb b/app/views/bubbles/_assignments.html.erb
index 4568e1769..95168595b 100644
--- a/app/views/bubbles/_assignments.html.erb
+++ b/app/views/bubbles/_assignments.html.erb
@@ -1,8 +1,16 @@
 <span class="bubble__bubble bubble__meta bubble__assignee <%= "bubble__assignee--new" if bubble.assignees.none? %>">
   <%= form_with model: [bubble, Assignment.new], data: { controller: "form" } do |form| %>
-    <label class="btn btn--plain position-relative" style="--btn-icon-size: 2em;">
+    <label class="btn btn--plain position-relative fill-transparent" style="--btn-icon-size: 2em;">
       <% if bubble.assignees.any? %>
-        <figure class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= bubble.assignees.first.initials %></strong></figure>
+        <% if bubble.assignees.many? %>
+          <div class="avatar__group">
+            <% bubble.assignees.each do |assignee| %>
+              <figure class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= assignee.initials %></strong></figure>
+            <% end %>
+          </div>
+        <% else %>
+          <figure class="avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= bubble.assignees.first.initials %></strong></figure>
+        <% end %>
       <% else %>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" fill="var(--bubble-color)"><path d="m11.5 10.3-.6-.2c-.2-.5-.3-1.1-.1-1.6 1.1-1.2 1.6-2.7 1.5-4.3 0-2.4-1.6-4.2-3.8-4.2S4.7 1.8 4.7 4.2c-.1 1.5.4 3.1 1.5 4.3.2.5.2 1.1-.1 1.6l-.6.2c-2.4.9-4.2 1.5-4.8 2.6-.4 1.2-.7 2.4-.7 3.6 0 .3.2.5.5.5h16c.3 0 .5-.2.5-.5 0-1.2-.3-2.4-.7-3.5-.6-1.1-2.4-1.8-4.8-2.7"/></svg>
       <% end %>