From 5267f79b0910c9525ab7c7e2d110029d7877a844 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 11:36:24 -0600
Subject: [PATCH 01/12] Tighten-up workflow panel

---
 app/views/bubbles/stage_pickers/new.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/bubbles/stage_pickers/new.html.erb b/app/views/bubbles/stage_pickers/new.html.erb
index d3826ddaa..9fed5653f 100644
--- a/app/views/bubbles/stage_pickers/new.html.erb
+++ b/app/views/bubbles/stage_pickers/new.html.erb
@@ -1,9 +1,9 @@
 <%= turbo_frame_tag dom_id(@bubble, :stage_picker) do %>
   <% if @selected_workflow %>
-    <aside class="position-relative border pad border-radius" style="--bubble-color: <%= @bubble.color %>"
+    <aside class="position-relative" style="--bubble-color: <%= @bubble.color %>"
         data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
       <div class="flex align-center justify-start gap-half">
-        <button class="btn txt-small borderless" data-action="click->dialog#toggle" data-dialog-modal-value="true">
+        <button class="btn txt-small borderless" style="margin-inline-start: calc((var(--btn-size) + var(--inline-space)) * -0.5);" data-action="click->dialog#toggle" data-dialog-modal-value="true">
           <%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
           <span class="for-screen-reader">Choose a workflow</span>
         </button>
@@ -19,9 +19,9 @@
         </menu>
       </dialog>
 
-      <div class="workflow margin-block-start-half">
+      <div class="workflow">
         <hr class="separator--horizontal" aria-hidden="true" style="--border-color: var(--color-subtle)" />
-        <div class="flex flex-column gap-half">
+        <div class="flex flex-column">
           <% @selected_workflow.stages.each do |stage| %>
             <%= button_to_set_stage @bubble, stage %>
           <% end %>

From df0813b8d64edeef6e11fd2e06bf47d737daac10 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 12:07:17 -0600
Subject: [PATCH 02/12] Tighten up menu

---
 app/views/bubbles/show.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index b3a863a7c..4e0c407c6 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -14,13 +14,13 @@
 <% end %>
 
 <aside class="flex align-start justify-end" style="--bubble-color: <%= @bubble.color %>">
-  <div class="flex flex-column gap-half">
+  <div class="flex flex-column">
     <%= render "bubbles/color", bubble: @bubble %>
 
     <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
       <label class="btn full-width justify-start borderless">
         <%= image_tag "calendar-add.svg", aria: { hidden: true }, size: 24 %>
-        <span><%= @bubble.due_on.present? ? "Change" : "Add a" %> due date</span>
+        <span><%= @bubble.due_on.present? ? "Change" : "Add a" %> date</span>
         <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker" } %>
       </label>
     <% end %>
@@ -28,7 +28,7 @@
     <%= form_with url: bucket_bubble_assignments_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
       <label class="btn full-width justify-start borderless">
         <%= image_tag "person.svg", aria: { hidden: true }, size: 24 %>
-        <span>Assign to someone</span>
+        <span>Assign to…</span>
         <%= form.collection_select :assignee_id, @bubble.bucket.users.active, :id, :name, { prompt: "Assign to…", selected: @bubble.assignees.pluck(:id) },
               class: "input input--hidden txt-medium",
               data: { action: "change->form#submit click->form#showPicker" } %>
@@ -73,7 +73,7 @@
       <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
         <label class="btn full-width justify-start borderless">
           <%= image_tag "picture-add.svg", aria: { hidden: true }, size: 24 %>
-          <span>Add background image</span>
+          <span>Add an image</span>
           <%= form.file_field :image, class: "input",
                 accept: "image/png, image/jpeg, image/jpg, image/webp",
                 data: { action: "upload-preview#previewImage form#submit", upload_preview_target: "input" },

From 8d41b3e410012552c1d763bd4456be215471f7f2 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 13:51:46 -0600
Subject: [PATCH 03/12] Pull back comment decoration

---
 app/assets/stylesheets/comments.css               | 9 ++++-----
 app/views/comments/_comment.html.erb              | 2 +-
 app/views/comments/_new.html.erb                  | 2 +-
 app/views/event_summaries/_event_summary.html.erb | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index df2a2689c..507d12754 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -1,9 +1,9 @@
 .comments {
   --avatar-size: 2.33em;
-  --comment-padding-block: 1.2em;
-  --comment-padding-inline: 1.5em;
+  --comment-padding-block: 1lh;
+  --comment-padding-inline: 2ch;
 
-  max-inline-size: 70ch;
+  max-inline-size: 80ch;
   row-gap: var(--comment-padding-block);
 
   > :first-child {
@@ -39,7 +39,6 @@
   padding: var(--comment-padding-block) var(--comment-padding-inline);
 
   .comment--mine & {
-    background-color: var(--color-selected);
     margin-inline: var(--avatar-size) 0;
   }
 
@@ -74,7 +73,7 @@
 
 .event-summary {
   font-weight: 600;
+  gap: 0.5ch;
   margin-block: calc(var(--comment-padding-block) * -1);
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
-  gap: 0.5ch;
 }
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index c22870aaa..2bbd36475 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -3,7 +3,7 @@
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
 
-  <div class="comment__content flex flex-column full-width fill-shade border-radius">
+  <div class="comment__content flex flex-column full-width">
     <div class="comment__author flex align-center gap-half">
       <strong><%= comment.creator.name %></strong>
       <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb
index 0f7c95003..d08075ba4 100644
--- a/app/views/comments/_new.html.erb
+++ b/app/views/comments/_new.html.erb
@@ -1,7 +1,7 @@
 <div class="comment flex align-start full-width comment--mine">
   <figure class="comment__avatar avatar fill-black txt-reversed flex-item-no-shrink"><strong><%= Current.user.initials %></strong></figure>
 
-  <div class="comment__content flex flex-column full-width fill-shade border-radius">
+  <div class="comment__content flex flex-column full-width">
     <div class="comment__author flex align-center gap-half">
       <strong><%= Current.user.name %></strong>
     </div>
diff --git a/app/views/event_summaries/_event_summary.html.erb b/app/views/event_summaries/_event_summary.html.erb
index a702b21b1..8fa66b281 100644
--- a/app/views/event_summaries/_event_summary.html.erb
+++ b/app/views/event_summaries/_event_summary.html.erb
@@ -1,3 +1,3 @@
-<div class="event-summary flex-inline flex-wrap align-start fill-white border-radius center position-relative" data-controller="event-summary">
+<div class="event-summary flex flex-wrap align-start center" data-controller="event-summary">
   <%= event_summary.body %>
 </div>

From 43fa91fc05b6485070643c71efafdb3af2056fa4 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 14:19:50 -0600
Subject: [PATCH 04/12] Needs a little structure

---
 app/assets/stylesheets/comments.css  | 22 +++++++++++++++++-----
 app/helpers/comments_helper.rb       |  2 +-
 app/views/comments/_comment.html.erb |  2 +-
 app/views/comments/_new.html.erb     |  2 +-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css
index 507d12754..3d61ff712 100644
--- a/app/assets/stylesheets/comments.css
+++ b/app/assets/stylesheets/comments.css
@@ -1,9 +1,9 @@
 .comments {
   --avatar-size: 2.33em;
-  --comment-padding-block: 1lh;
+  --comment-padding-block: 0.65lh;
   --comment-padding-inline: 2ch;
 
-  max-inline-size: 80ch;
+  max-inline-size: 120ch;
   row-gap: var(--comment-padding-block);
 
   > :first-child {
@@ -11,6 +11,16 @@
   }
 }
 
+.comment {
+  max-inline-size: 66ch;
+  margin-block: var(--comment-padding-block);
+  margin-inline: 0 auto;
+
+  textarea {
+    padding: var(--comment-padding-block) var(--comment-padding-inline);
+  }
+}
+
 .comment__avatar {
   margin-block-start: calc(var(--comment-padding-block) * 0.5);
   margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
@@ -35,11 +45,11 @@
 }
 
 .comment__content {
-  margin-inline: 0 var(--avatar-size);
+  margin-inline: auto var(--avatar-size);
   padding: var(--comment-padding-block) var(--comment-padding-inline);
 
   .comment--mine & {
-    margin-inline: var(--avatar-size) 0;
+    margin-inline: var(--avatar-size) auto;
   }
 
   .comment:has(+ .event-summary) & {
@@ -49,6 +59,7 @@
 
 .comment--mine {
   flex-direction: row-reverse;
+  margin-inline: auto 0;
 
   .comment__author {
     flex-direction: row-reverse;
@@ -72,8 +83,9 @@
 }
 
 .event-summary {
+  color: var(--bubble-color);
   font-weight: 600;
   gap: 0.5ch;
-  margin-block: calc(var(--comment-padding-block) * -1);
+  /* margin-block: calc(var(--comment-padding-block) * -1); */
   padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
 }
diff --git a/app/helpers/comments_helper.rb b/app/helpers/comments_helper.rb
index e6c7f5df9..02808cc69 100644
--- a/app/helpers/comments_helper.rb
+++ b/app/helpers/comments_helper.rb
@@ -1,6 +1,6 @@
 module CommentsHelper
   def comment_tag(comment, &)
-    tag.div id: dom_id(comment), class: "comment flex align-start full-width",
+    tag.div id: dom_id(comment), class: "comment flex-inline align-start full-width",
       data: { creator_id: comment.creator_id, created_by_current_user_target: "creation" }, &
   end
 
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index 2bbd36475..d405d8bc8 100644
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -3,7 +3,7 @@
     <%= avatar_tag comment.creator, loading: :lazy %>
   </figure>
 
-  <div class="comment__content flex flex-column full-width">
+  <div class="comment__content flex-inline flex-column full-width border border-radius">
     <div class="comment__author flex align-center gap-half">
       <strong><%= comment.creator.name %></strong>
       <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %>
diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb
index d08075ba4..3a8073403 100644
--- a/app/views/comments/_new.html.erb
+++ b/app/views/comments/_new.html.erb
@@ -7,7 +7,7 @@
     </div>
     <div class="comment__body txt-align-start margin-block-start-half">
       <%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width", data: { controller: "form", action: "keydown.meta+enter->form#submit" } do |form| %>
-        <%= form.text_area :body, class: "input", required: true, rows: 4, placeholder: new_comment_placeholder(bubble) %>
+        <%= form.text_area :body, class: "input border border-radius", required: true, rows: 4, placeholder: new_comment_placeholder(bubble) %>
         <%= form.button class: "btn btn--reversed center" do %>
           <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
           <span class="for-screen-reader">Save</span>

From ddefd9b54800afa0d8306c7cdce607b3c1dd3afb Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 15:59:29 -0600
Subject: [PATCH 05/12] Display tags inside the bubble

---
 app/assets/stylesheets/bubbles.css      | 35 +++++++------------------
 app/views/bubbles/_bubble.html.erb      | 17 +++++++-----
 app/views/bubbles/_tags.html.erb        |  7 +++--
 app/views/bubbles/list/_bubble.html.erb |  9 ++-----
 app/views/bubbles/show.html.erb         |  6 +++--
 5 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index f0bf208dc..9c1f44972 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -115,32 +115,6 @@
     }
   }
 
-  &.bubble__tag {
-    inset: auto auto -6cqi 15cqi;
-
-    + & {
-      inset: auto auto 8cqi 5cqi;
-
-      + & {
-        inset: auto auto 22cqi -2cqi;
-      }
-    }
-
-    @media (hover: hover) {
-      .windshield .bubble:hover & {
-        transform: translate(-1rem, -1rem);
-      }
-
-      .windshield .bubble:hover & + & {
-        transform: translate(-1.25rem, -1.25rem);
-      }
-
-      .windshield .bubble:hover & + & + & {
-        transform: translate(-1.5rem, -1.5rem);
-      }
-    }
-  }
-
   &.bubble__assignee {
     aspect-ratio: 1;
     font-size: 4.5cqi;
@@ -307,6 +281,15 @@
   max-inline-size: 100%;
 }
 
+.bubble__tags{
+  font-size: var(--text-small);
+  margin-block-start: 0.3cqb;
+
+  .bubble__perma & {
+    font-size: var(--text-medium);
+  }
+}
+
 .bubble__title {
   -webkit-line-clamp: var(--lines, 5);
   -webkit-box-orient: vertical;
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 3ed355c04..0078e865d 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -4,11 +4,17 @@
     data-controller="animation upload-preview"
     data-animation-play-class="bubble--wobble" data-animation-play-on-load-value="true" data-action="mouseover->animation#play">
 
-    <h1 class="bubble__title">
-      <%= turbo_frame_tag bubble, :edit do %>
-        <%= link_to bubble.title, edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %>
-      <% end %>
-    </h1>
+    <div>
+      <h1 class="bubble__title">
+        <%= turbo_frame_tag bubble, :edit do %>
+          <%= link_to bubble.title, edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %>
+        <% end %>
+      </h1>
+
+      <div class="bubble__tags flex align-end justify-center gap-half">
+        <%= render "bubbles/tags", bubble: bubble %>
+      </div>
+    </div>
 
     <div class="bubble__shape"></div>
 
@@ -20,6 +26,5 @@
     <%= render "bubbles/boosts", bubble: bubble %>
     <%= render "bubbles/date", bubble: bubble %>
     <%= render "bubbles/image", bubble: bubble %>
-    <%= render "bubbles/tags", bubble: bubble %>
   </div>
 <% end %>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb
index be668f076..1783d87f3 100644
--- a/app/views/bubbles/_tags.html.erb
+++ b/app/views/bubbles/_tags.html.erb
@@ -1,5 +1,4 @@
-<% @filter ||= Current.user.filters.last %>
-
-<% bubble.tags.last(3).each do |tag| %>
-  <%= link_to tag.hashtag, bubbles_path(@filter&.to_params&.merge(tag_ids: [ tag.id ])), class: "bubble__bubble bubble__meta bubble__tag" %>
+<% bubble.tags.each do |tag| %>
+  <%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
+        class: "btn btn--plain fill-transparent", style: "color: #{bubble.color}" %>
 <% end %>
diff --git a/app/views/bubbles/list/_bubble.html.erb b/app/views/bubbles/list/_bubble.html.erb
index ae1763177..fe135da9f 100644
--- a/app/views/bubbles/list/_bubble.html.erb
+++ b/app/views/bubbles/list/_bubble.html.erb
@@ -7,11 +7,8 @@
       <strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
     <% end %>
 
-    <div class="flex align-end gap-half">
-      <% bubble.tags.each do |tag| %>
-        <%= link_to tag.hashtag, bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
-              class: "btn btn--plain txt-small fill-transparent", style: "color: #{bubble.color}" %>
-      <% end %>
+    <div class="flex align-end gap-half txt-small">
+      <%= render "bubbles/tags", bubble: bubble %>
     </div>
   </div>
 
@@ -30,6 +27,4 @@
       <strong>DUE:</strong> <%= bubble.due_on.strftime("%b %d") %>
     </time>
   <% end %>
-
-
 </li>
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 4e0c407c6..0e35b6f34 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -1,5 +1,7 @@
 <% @page_title = @bubble.title %>
 
+<% @filter ||= Current.user.filters.first %>
+
 <% content_for :header do %>
   <nav>
     <%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "back-navigation", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bubble.bucket) } do %>
@@ -14,7 +16,7 @@
 <% end %>
 
 <aside class="flex align-start justify-end" style="--bubble-color: <%= @bubble.color %>">
-  <div class="flex flex-column">
+  <div class="flex flex-column" style="row-gap: 3px;">
     <%= render "bubbles/color", bubble: @bubble %>
 
     <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), data: { controller: "form" } do |form| %>
@@ -38,7 +40,7 @@
     <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
       <button class="btn full-width justify-start borderless" data-action="dialog#toggle">
         <%= image_tag "tag.svg", aria: { hidden: true }, size: 24 %>
-        <span>Tag this</span>
+        <span>Tags</span>
       </button>
 
       <dialog class="tag-picker panel fill-white shadow gap-half align-center" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">

From 01f4acd7d017195b152863d68b647b497e805178 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:00:12 -0600
Subject: [PATCH 06/12] Bump font size

---
 app/assets/stylesheets/bubbles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 9c1f44972..f2755bf80 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -158,7 +158,7 @@
 
     aspect-ratio: 5/7;
     cursor: pointer;
-    font-size: 4.5cqi;
+    font-size: 5cqi;
     inset: 1cqb 1cqi auto auto;
     transform: rotate(var(--rotation));
 

From 92510755cf1404c196dfbb35a43123deac070b63 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:21:58 -0600
Subject: [PATCH 07/12] List name next to assignee

---
 app/assets/stylesheets/bubbles.css      | 15 +++++++++++++++
 app/views/bubbles/_assignments.html.erb |  1 +
 2 files changed, 16 insertions(+)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index f2755bf80..f8828e3fe 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -151,6 +151,20 @@
         transform: translate(1.5rem, -0.5rem);;
       }
     }
+
+    .assignee__name {
+      display: none;
+
+      .bubble__perma & {
+        color: var(--bubble-color);
+        display: block;
+        font-size: var(--text-medium);
+        font-weight: normal;
+        inset: -2em auto auto auto;
+        position: absolute;
+        text-align: center;
+      }
+    }
   }
 
   &.bubble__date {
@@ -160,6 +174,7 @@
     cursor: pointer;
     font-size: 5cqi;
     inset: 1cqb 1cqi auto auto;
+    text-align: center;
     transform: rotate(var(--rotation));
 
     .bubble__date-text {
diff --git a/app/views/bubbles/_assignments.html.erb b/app/views/bubbles/_assignments.html.erb
index eae3e7f3b..d1bec1073 100644
--- a/app/views/bubbles/_assignments.html.erb
+++ b/app/views/bubbles/_assignments.html.erb
@@ -2,6 +2,7 @@
   <div class="bubble__bubble bubble__meta bubble__assignee">
     <%= form_with url: bucket_bubble_assignments_path(bubble.bucket, bubble), data: { controller: "form" } do |form| %>
       <label class="btn btn--plain position-relative fill-transparent">
+        <span class="assignee__name"><%= assignment.assignee.name %></span>
         <%= avatar_image_tag assignment.assignee, loading: :lazy, class: "avatar flex-item-no-shrink" %>
 
         <%= form.collection_select :assignee_id, bubble.bucket.users.active, :id, :name, { prompt: "Assign to…", selected: bubble.assignees.pluck(:id) },

From c052a796d8cd8a96e189575804b9cb51aa1984fa Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:25:40 -0600
Subject: [PATCH 08/12] Remove some of the more vertical ones

---
 app/helpers/bubbles_helper.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/helpers/bubbles_helper.rb b/app/helpers/bubbles_helper.rb
index d56bc590f..bfb37b245 100644
--- a/app/helpers/bubbles_helper.rb
+++ b/app/helpers/bubbles_helper.rb
@@ -1,5 +1,5 @@
 module BubblesHelper
-  BUBBLE_ROTATION = %w[ 90 80 75 60 45 35 25 5 -45 -40 -75 ]
+  BUBBLE_ROTATION = %w[ 75 60 45 35 25 5 ]
 
   def bubble_rotation(bubble)
     value = BUBBLE_ROTATION[Zlib.crc32(bubble.to_param) % BUBBLE_ROTATION.size]

From 5865c41738a210cd9f360ed3f5124f8ea3d94c93 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:29:05 -0600
Subject: [PATCH 09/12] Move pop action

---
 app/views/bubbles/show.html.erb | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 0e35b6f34..2b183c981 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -8,10 +8,6 @@
       <%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Back</span>
     <% end %>
-
-    <span class="flex-item-justify-end">
-      <%= render "bubbles/pop_toggle", bubble: @bubble %>
-    </span>
   </nav>
 <% end %>
 
@@ -88,6 +84,9 @@
       <%= image_tag "thumb-up.svg", aria: { hidden: true }, size: 24 %>
       <span>Boost this</span>
     <% end %>
+
+    <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle);" />
+    <%= render "bubbles/pop_toggle", bubble: @bubble %>
   </div>
 </aside>
 

From 4d9b27f6d88a5070014dcc8a9fe44671606ee3b9 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:32:54 -0600
Subject: [PATCH 10/12] Stub duplicate finder button

---
 app/assets/images/picture-double.svg | 1 +
 app/views/bubbles/show.html.erb      | 5 +++++
 2 files changed, 6 insertions(+)
 create mode 100644 app/assets/images/picture-double.svg

diff --git a/app/assets/images/picture-double.svg b/app/assets/images/picture-double.svg
new file mode 100644
index 000000000..f3a34a736
--- /dev/null
+++ b/app/assets/images/picture-double.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.25 13.25a1 1 0 0 1 -1-1v-6a1 1 0 0 1 1-1h11a1 1 0 0 1 .98.8.25.25 0 0 0 .245.2h1.525a.25.25 0 0 0 .25-.25v-.75a2 2 0 0 0 -2-2h-13a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h1.75a.25.25 0 0 0 .25-.25v-1.5a.25.25 0 0 0 -.25-.25z"/><path d="m21.25 7.75h-13a2.5 2.5 0 0 0 -2.5 2.5v8a2.5 2.5 0 0 0 2.5 2.5h13a2.5 2.5 0 0 0 2.5-2.5v-8a2.5 2.5 0 0 0 -2.5-2.5zm-13 9.5v-6a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-11a1 1 0 0 1 -1-1z"/></svg>
\ No newline at end of file
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 2b183c981..48329e462 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -87,6 +87,11 @@
 
     <hr class="separator--horizontal full-width" style="--border-color: var(--color-subtle);" />
     <%= render "bubbles/pop_toggle", bubble: @bubble %>
+
+    <button class="btn full-width justify-start borderless">
+      <%= image_tag "picture-double.svg", aria: { hidden: true }, size: 24 %>
+      <span>I've seen this</span>
+    </button>
   </div>
 </aside>
 

From e9b0f8d39f517d0692d3b2f0342a69ce03d89ce3 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:35:31 -0600
Subject: [PATCH 11/12] Bump boost size, adjust assignee alignment

---
 app/assets/stylesheets/bubbles.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index f8828e3fe..45d77c069 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -80,8 +80,9 @@
 
     aspect-ratio: 6/9;
     display: flex;
+    font-size: 6cqi;
     inset: 70cqi 7cqi auto auto;
-    min-inline-size: 7ch;
+    min-inline-size: 4.5ch;
     padding: 0;
     place-items: center;
     transform: rotate(var(--rotation));
@@ -118,11 +119,11 @@
   &.bubble__assignee {
     aspect-ratio: 1;
     font-size: 4.5cqi;
-    inset: 4cqb auto auto -2cqi;
+    inset: 6cqb auto auto -2cqi;
     padding: 0.2em;
 
     + & {
-      inset: 1cqb auto auto 10cqi;
+      inset: 1cqb auto auto 9cqi;
 
       + & {
         inset: -1cqb auto auto 25cqi;

From 4f42ab973b3d6f26f09870cc78c7e0333296f232 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 22 Nov 2024 16:54:21 -0600
Subject: [PATCH 12/12] Ensure @filter isn't nil

---
 app/views/bubbles/show.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 48329e462..326eab71a 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -1,6 +1,6 @@
 <% @page_title = @bubble.title %>
 
-<% @filter ||= Current.user.filters.first %>
+<% @filter ||= Current.user.filters.first || Filter.persist!({}) %>
 
 <% content_for :header do %>
   <nav>