Merge pull request #2171 from basecamp/collapse-system-comments

Collapse and expand system comments

app/assets/images/history.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" /></svg>

app/assets/stylesheets/comments.css

@@ -23,6 +23,7 @@
   }
 
   .comment {
+    display: flex;
     margin-inline: auto;
     max-inline-size: var(--comment-max);
     position: relative;
@@ -85,11 +86,35 @@
     background-color: var(--color-ink-lightest);
   }
 
+  .comment__history {
+    background-color: var(--color-ink-lightest);
+    display: none;
+    inset: calc(var(--comment-padding-inline) / 2.5) calc(var(--comment-padding-inline) / 1.5) auto auto;    margin-inline-end: calc(var(--comment-padding-inline) / -2.5);
+    position: absolute;
+  }
+
   .comment--system {
     --comment-padding-block: var(--block-space-half);
 
+    display: none;
     max-inline-size: var(--comment-max);
     text-align: center;
+    transition: var(--dialog-duration) allow-discrete;
+    transition-property: display;
+
+    .comments--system-expanded & {
+      display: flex;
+    }
+
+    &:nth-last-child(1 of &):not(:has(~ * &) *):not(:has(~ &) *):not(:has(~ * &)):not(:has(&)) {
+      /* This unholy selector targets the last system comment in the document */
+      /* Hat-tip, https://css-tip.com/last-element-dom/ */
+      display: flex;
+
+      .comment__history  {
+        display: grid;
+      }
+    }
 
     &::before {
       /* Make up space for lack of avatar */
@@ -122,12 +147,21 @@
     }
 
     .comment__content {
+      --stripe-color: var(--color-ink-lightest);
+
       background-image: repeating-linear-gradient(
         45deg in srgb,
         var(--color-canvas) 0 1px,
-        var(--color-ink-lightest) 1px 10px
-      );
+        var(--stripe-color) 1px 10px);
       padding-inline: var(--comment-padding-inline);
+
+      .comments--system-expanded .comment--system & {
+        --stripe-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
+      }
+
+      .comment__history {
+        background-color: var(--stripe-color);
+      }
     }
 
     .reactions {

app/assets/stylesheets/icons.css

@@ -59,6 +59,7 @@
   .icon--fizzy { --svg: url("fizzy.svg"); }
   .icon--globe { --svg: url("globe.svg "); }
   .icon--golden-ticket { --svg: url("golden-ticket.svg "); }
+  .icon--history { --svg: url("history.svg "); }
   .icon--home { --svg: url("home.svg "); }
   .icon--install-edge { --svg: url("install-edge.svg "); }
   .icon--lifebuoy { --svg: url("lifebuoy.svg "); }

app/helpers/messages_helper.rb

@@ -3,6 +3,8 @@ module MessagesHelper
     turbo_frame_tag dom_id(card, :messages),
       class: "comments gap center",
       style: "--card-color: #{card.color}",
-      role: "group", aria: { label: "Messages" }, &
+      role: "group",
+      aria: { label: "Messages" },
+      data: { controller: "toggle-class", toggle_class_toggle_class: "comments--system-expanded" }, &
   end
 end

app/views/cards/comments/_comment.html.erb

@@ -2,7 +2,7 @@
   <%# Helper Dependency Updated: avatar_image_tag 2025-12-15 %>
   <%= turbo_frame_tag comment, :container do %>
     <%# Cache bump 2025-12-14: action text attachment rendering changed for lightbox -%>
-    <div id="<%= dom_id(comment) %>" data-creator-id="<%= comment.creator_id %>"  class="comment flex align-start full-width <%= "comment--system" if comment.creator.system? %>">
+    <div id="<%= dom_id(comment) %>" data-creator-id="<%= comment.creator_id %>"  class="comment align-start full-width <%= "comment--system" if comment.creator.system? %>">
       <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
         <%= avatar_tag comment.creator, hidden_for_screen_reader: true %>
       </figure>
@@ -20,6 +20,11 @@
             <% end %>
           </h3>
 
+          <button class="comment__history btn btn--circle-mobile borderless txt-x-small" data-action="toggle-class#toggle">
+            <%= icon_tag "history", class: "icon--mobile-only" %>
+            <span>Full history</span>
+          </button>
+
           <%= link_to edit_card_comment_path(comment.card, comment),
                 class: "comment__edit btn btn--circle borderless translucent", data: { only_visible_to_you: true } do %>
             <%= icon_tag "menu-dots-horizontal" %>