From 403a328ef8b60097f2e2fe152e01237a41436392 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 24 Mar 2025 17:43:43 -0500
Subject: [PATCH] Walk-back two-column comments design

---
 app/assets/stylesheets/comments.css           | 28 ++-----------------
 app/helpers/messages_helper.rb                |  2 +-
 app/views/bubbles/_messages.html.erb          | 19 +------------
 app/views/bubbles/show.html.erb               |  7 +++--
 .../event_summaries/_event_summary.html.erb   |  7 +++--
 5 files changed, 12 insertions(+), 51 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 8e7153ed2..18cbf40dd 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -3,30 +3,10 @@
   --comment-padding-block: 0.33lh;
   --comment-padding-inline: 2ch;
 
-  display: flex;
-  font-size: 1.33cqi;
-  gap: var(--comment-padding-block);
-  inline-size: 100%;
-  max-inline-size: 60cqi;
-
-  @media (max-width: 70ch) {
-    max-inline-size: 100%;
-  }
-}
-
-.comments__column {
   display: flex;
   flex-direction: column;
-  flex: 4 1 80%;
   gap: var(--comment-padding-block);
-}
-
-.events__column {
-  display: flex;
-  flex-direction: column;
-  flex: 1 0 20%;
-  gap: 1lh;
-  margin-block-start: 0.8em;
+  margin-inline: var(--tray-size);
 }
 
 .comment {
@@ -120,9 +100,5 @@
 }
 
 .event-summary {
-  color: var(--bubble-color);
-  font-size: 0.8em;
-  font-weight: 500;
-  gap: 0.5ch;
-  text-align: start;
+  padding-inline-start: 3rem;
 }
diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb
index d66756318..d47edaa20 100644
--- a/app/helpers/messages_helper.rb
+++ b/app/helpers/messages_helper.rb
@@ -1,7 +1,7 @@
 module MessagesHelper
   def messages_tag(bubble, &)
     turbo_frame_tag dom_id(bubble, :messages),
-      class: "comments center borderless gap-half",
+      class: "comments borderless gap-half",
       style: "--bubble-color: <%= bubble.color %>",
       role: "group", aria: { label: "Messages" },
       data: {
diff --git a/app/views/bubbles/_messages.html.erb b/app/views/bubbles/_messages.html.erb
index f8b656034..eccf19776 100644
--- a/app/views/bubbles/_messages.html.erb
+++ b/app/views/bubbles/_messages.html.erb
@@ -1,22 +1,5 @@
 <%= messages_tag(bubble) do %>
   <%# Template Dependency: comments/comment %>
   <%# Template Dependency: event_summaries/event_summary %>
-  <%#= render bubble.messages, cached: true %>
-
-  <div class="comments__column">
-    <%= render bubble.messages.comments %>
-    <%= render "comments/new", bubble: bubble, cached: true %>
-
-    <div class="flex flex-column margin-block-start-double txt-align-start" style="margin-inline-start: calc(var(--avatar-size) + var(--inline-space));">
-      <strong class="txt-uppercase">Subscribers</strong>
-      <p class="margin-none-block-start margin-block-end-half"><%= pluralize(@bubble.watchers.count, "person") %> will be notified when someone comments on this.</p>
-      <div class="flex align-center flex-wrap gap-half max-width"  style="font-size: 0.8em;">
-        <%= render partial: "bubbles/watches/watcher", collection: @bubble.watchers.sorted_with_user_first(Current.user) %>
-      </div>
-    </div>
-  </div>
-
-  <div class="events__column">
-    <%= render bubble.messages.event_summaries, bubble: bubble, cached: true %>
-  </div>
+  <%= render bubble.messages, cached: true %>
 <% end %>
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 013e4757c..9ab3323db 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -63,7 +63,7 @@
   <% if @bubble.published? %>
     <%= render "bubbles/messages", bubble: @bubble %>
   <% else %>
-    <div class="comments center pad-block flex align-center gap">
+    <div class="comments pad-block">
       <div class="comment comment--new flex-inline align-start full-width">
         <figure class="comment__avatar flex-item-no-shrink" aria-hidden="true">
           <%= avatar_tag Current.user, hidden_for_screen_reader: true, loading: :lazy %>
@@ -94,6 +94,7 @@
   <% end %>
 </div>
 
-<%= link_to "Go back", "#", class: "btn", 
+<%= link_to "Go back", "#", class: "btn", hidden: true,
       data: { controller: "back-navigation hotkey", 
-      action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } %>
\ No newline at end of file
+              action: "keydown.esc@document->hotkey#click", 
+              back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } %>
\ No newline at end of file
diff --git a/app/views/event_summaries/_event_summary.html.erb b/app/views/event_summaries/_event_summary.html.erb
index d25a1a991..e3c2c2663 100644
--- a/app/views/event_summaries/_event_summary.html.erb
+++ b/app/views/event_summaries/_event_summary.html.erb
@@ -1,7 +1,8 @@
 <% unless event_summary.body.blank? %>
-  <div class="event-summary flex flex-column justify-start txt-tight-lines">
-    <strong class="txt-uppercase"><%= local_datetime_tag event_summary.created_at, style: :shortdate %></strong>
-    <hr class="separator--horizontal margin-none full-width" style="--border-color: var(--color-subtle-dark);">
+  <div class="event-summary comment__content flex flex-column justify-start txt-tight-lines">
+    <div class="comment__author flex align-center gap-half">
+      <span class="comment__timestamp txt-uppercase"><%= local_datetime_tag event_summary.created_at, style: :shortdate %></span>
+    </div>
     <div class="flex flex-wrap" data-controller="event-summary">
       <%= event_summary.body %>
     </div>