From cf5ddbbb783c37c414fffcac754d6c4e6ffa697f Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 26 Feb 2025 16:47:48 -0600
Subject: [PATCH] Style watchers block

---
 app/views/bubbles/show.html.erb             |  8 ++--
 app/views/bubbles/watches/_watcher.html.erb |  2 +-
 app/views/bubbles/watches/show.html.erb     | 42 +++++++++++++--------
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 99e7ca775..0b61270da 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -85,10 +85,6 @@
       <%= image_tag "trash.svg", aria: { hidden: true }, size: 24 %>
       <span class="overflow-ellipsis">Delete</span>
     <% end %>
-
-    <% if @bubble.published? %>
-      <%= turbo_frame_tag dom_id(@bubble, :watch), src: bucket_bubble_watch_path(@bubble.bucket, @bubble) %>
-    <% end %>
   </div>
 </aside>
 
@@ -116,6 +112,10 @@
     <% end %>
   </div>
 
+  <% if @bubble.published? %>
+    <%= turbo_frame_tag dom_id(@bubble, :watch), src: bucket_bubble_watch_path(@bubble.bucket, @bubble) %>
+  <% end %>
+
   <% if @bubble.creating? %>
     <div class="bubble__actions-container center border-radius pad flex align-center justify-space-between gap pad-inline-double" style="--bubble-color: <%= @bubble.color %>;">
       <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn btn--plain borderless fill-transparent" %>
diff --git a/app/views/bubbles/watches/_watcher.html.erb b/app/views/bubbles/watches/_watcher.html.erb
index e79fb972a..35a1d3f91 100644
--- a/app/views/bubbles/watches/_watcher.html.erb
+++ b/app/views/bubbles/watches/_watcher.html.erb
@@ -1 +1 @@
-<%= avatar_tag watcher, size: 24 %>
+<%= avatar_tag watcher, loading: :lazy %>
diff --git a/app/views/bubbles/watches/show.html.erb b/app/views/bubbles/watches/show.html.erb
index f5147e541..67bcf5d80 100644
--- a/app/views/bubbles/watches/show.html.erb
+++ b/app/views/bubbles/watches/show.html.erb
@@ -1,20 +1,32 @@
 <%= turbo_frame_tag dom_id(@bubble, :watch) do %>
-  <% if @bubble.watched_by? Current.user %>
-    <%= button_to bucket_bubble_watch_path(@bubble.bucket, @bubble), method: :delete, class: "btn" do %>
-      <%= image_tag "bookmark.svg", aria: { hidden: true }, size: 24 %>
-      <span class="overflow-ellipsis">Stop watching</span>
-    <% end %>
-  <% else %>
-    <%= button_to bucket_bubble_watch_path(@bubble.bucket, @bubble), class: "btn" do %>
-      <%= image_tag "bookmark-outline.svg", aria: { hidden: true }, size: 24 %>
-      <span class="overflow-ellipsis">Watch this</span>
-    <% end %>
-  <% end %>
+  <div class="flex flex-column align-start gap-half">
+    <div class="flex flex-column align-start">
+      <h3 class="txt-medium txt-tight-lines">Watchers</h3>
+      <div><%= pluralize @watchers.count, "person" %> are being notified when someone comments on this bubble.</div>
+    </div>
 
+    <div class="flex flex-wrap gap-half max-width txt-small">
+      <%= render partial: "bubbles/watches/watcher", collection: @watchers %>
+    </div>
 
-  <%= pluralize @watchers.count, "other" %> watching this bubble
-
-  <div class="flex">
-    <%= render partial: "bubbles/watches/watcher", collection: @watchers %>
+    <div class="flex flex-column align-start margin-block-start">
+      <% if @bubble.watched_by? Current.user %>
+        <strong>You are watching this bubble</strong>
+        <div>You will be notified when someone comments.</div>
+        <div class="margin-block-half">
+          <%= button_to bucket_bubble_watch_path(@bubble.bucket, @bubble), method: :delete, class: "btn" do %>
+            <span>Stop watching</span>
+          <% end %>
+        </div>
+      <% else %>
+        <strong>You’re not watching this bubble</strong>
+        <div>You won’t be notified when someone comments.</div>
+        <div class="margin-block-half">
+          <%= button_to bucket_bubble_watch_path(@bubble.bucket, @bubble), class: "btn" do %>
+            <span">Watch this</span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
   </div>
 <% end %>