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] 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">