From 5636711ae4fc40f6085493600fc9d173a6c62796 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 13 Sep 2024 17:03:43 -0500
Subject: [PATCH] Clean up with partials

---
 app/views/bubbles/_boosts.html.erb      |  8 +++
 app/views/bubbles/_bubble.html.erb      | 83 ++++---------------------
 app/views/bubbles/_date.html.erb        | 19 ++++++
 app/views/bubbles/_image.html.erb       | 23 +++++++
 app/views/bubbles/_tags.html.erb        | 11 ++++
 app/views/bubbles/index.html.erb        | 17 +----
 app/views/bubbles/list/_bubble.html.erb | 19 ++++++
 7 files changed, 94 insertions(+), 86 deletions(-)
 create mode 100644 app/views/bubbles/_boosts.html.erb
 create mode 100644 app/views/bubbles/_date.html.erb
 create mode 100644 app/views/bubbles/_image.html.erb
 create mode 100644 app/views/bubbles/_tags.html.erb
 create mode 100644 app/views/bubbles/list/_bubble.html.erb

diff --git a/app/views/bubbles/_boosts.html.erb b/app/views/bubbles/_boosts.html.erb
new file mode 100644
index 000000000..fb7a2b48c
--- /dev/null
+++ b/app/views/bubbles/_boosts.html.erb
@@ -0,0 +1,8 @@
+<%= tag.div class: "bubble__bubble bubble__meta bubble__boosts",
+      data: {
+        controller: "animation toggle-class",
+        animation_play_class: "boosting",
+        toggle_class_toggle_class: "boosting",
+        action: "animationend->toggle-class#toggle" } do %>
+  <%= turbo_frame_tag dom_id(bubble, :boosts), src: bubble_boosts_path(bubble) %>
+<% end %>
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 3ce7d5d05..c7a5301bf 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -1,78 +1,21 @@
 <div class="bubble" data-controller="upload-preview" style="view-transition-name: bubble-<%= bubble.id -%>; --bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) -%> <%= bubble_size(bubble) %>">
-    <h1 class="bubble__title">
-      <%= turbo_frame_tag bubble, :edit do %>
-        <%= link_to bubble.title, edit_bubble_path(bubble), class: "txt-undecorated" %>
-      <% end %>
-    </h1>
+  <h1 class="bubble__title">
+    <%= turbo_frame_tag bubble, :edit do %>
+      <%= link_to bubble.title, edit_bubble_path(bubble), class: "txt-undecorated" %>
+    <% end %>
+  </h1>
 
-  <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
+  <svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
+    <path d="m0 0h990v990h-990z" fill="none" stroke="none" />
+    <path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
+  </svg>
 
   <%= link_to bubble, class: "bubble__link" do %>
     <span class="for-screen-reader"><%= bubble.title %></span>
   <% end %>
 
-  <div class="bubble__image">
-    <%= image_tag bubble.image.attached? ? bubble.image : "", data: { upload_preview_target: "image" } %>
-  </div>
-
-  <%= form_with model: bubble, data: { controller: "form" } do | form | %>
-    <div class="bubble__bubble bubble__meta bubble__attachment">
-      <% if bubble.image.attached? %>
-        <%= tag.label class: "btn btn--plain", style: "--btn-icon-size: 3em; margin-block-start: -0.5em; margin-inline-end: -0.2em", data: { action: "click->upload-preview#clear click->form#submit", upload_preview_target: "button" } do %>
-          <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path fill="var(--color-negative)" d="m19.1 0c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm-.8 5.7h-1.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.2s1.6 0 1.6 0h1.2c.3 0 .6.3.6.6s-.3.6-.6.6h-1.2s-1.6 0-1.6 0z"/><path d="m6.7 10.5c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6z" fill="none"/><path d="m9.7 16.9h.1l-.1-.1z"/><path d="m19.2 11.6v6.3c0 .2 0 .4-.4.4h-16.8v-13.7c0-.2 0-.4.4-.4h10.1c0-.7.3-1.3.5-1.8h-11.6c-.9.2-1.4.9-1.4 1.8v14c0 1 .8 1.8 1.8 1.8h17.5c1 0 1.8-.8 1.8-1.8v-6.9c-.6.2-1.2.3-1.8.3z"/><path d="m4.8 5.5c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s0 0 0 0c.4 0 .7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s0 0 0 0c.5 0 1 .3 1.3.7l3.1 5c0-.1 0-.2 0-.3v-4.2c-2.8-.6-4.9-3-5.1-6h-7.6zm1.9 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m5.2 16.9h2.6l1-1.5-1.2-1.7z"/><path d="m10.4 15.8-.7 1 .1.1h1.3 5.1l-3.1-5.1z"/></svg>
-          <%= form.hidden_field :bubble, value: bubble.id %>
-          <%= check_box_tag "remove_image", "true" %>
-          <span class="for-screen-reader">Remove imagee</span>
-        <% end %>
-      <% else %>
-        <label class="btn btn--plain input--file" style="--btn-icon-size: 3em; margin-block-start: -0.5em; margin-inline-end: -0.2em">
-          <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path fill="var(--color-positive)" d="m19.1 0c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm-.1 2.5c.3 0 .6.3.6.6v1.2c0 .2 0 .2.2.2h1.2c.3 0 .6.3.6.6s-.3.6-.6.6h-1.2c-.2 0-.2 0-.2.2v1.2c0 .3-.3.6-.6.6s-.6-.3-.6-.6v-1.2c0-.2 0-.2-.2-.2h-1.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.2c.2 0 .2 0 .2-.2v-1.2c0-.3.3-.6.6-.6z"/><path d="m6.7 10.5c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6z" fill="none"/><path d="m9.7 16.9h.1l-.1-.1z"/><path d="m19.2 11.6v6.3c0 .2 0 .4-.4.4h-16.8v-13.7c0-.2 0-.4.4-.4h10.1c0-.7.3-1.3.5-1.8h-11.6c-.9.2-1.4.9-1.4 1.8v14c0 1 .8 1.8 1.8 1.8h17.5c1 0 1.8-.8 1.8-1.8v-6.9c-.6.2-1.2.3-1.8.3z"/><path d="m4.8 5.5c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s0 0 0 0c.4 0 .7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s0 0 0 0c.5 0 1 .3 1.3.7l3.1 5c0-.1 0-.2 0-.3v-4.2c-2.8-.6-4.9-3-5.1-6h-7.6zm1.9 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m5.2 16.9h2.6l1-1.5-1.2-1.7z"/><path d="m10.4 15.8-.7 1 .1.1h1.3 5.1l-3.1-5.1z"/></svg>
-          <%= form.file_field :image, class: "input", accept: "image/*",
-                data: { action: "upload-preview#previewImage change->form#submit" } %>
-          <span class="for-screen-reader">Upload an image</span>
-        </label>
-      <% end %>
-    </div>
-  <% end %>
-
-  <% if bubble.due_on.present? %>
-    <%= form_with model: bubble, data: { controller: "form" } do | form | %>
-      <label class="bubble__bubble bubble__meta bubble__date">
-        <%= bubble.due_on.strftime("%b <br> %d").html_safe %>
-        <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker"} %>
-        <span class="for-screen-reader">Change the due date</span>
-      </label>
-    <% end %>
-  <% else %>
-    <div class="bubble__bubble bubble__meta bubble__date bubble__date--new">
-      <%= form_with model: bubble, data: { controller: "form" } do | form | %>
-        <label class="btn btn--plain" style="--btn-icon-size: 2.5em; margin-inline-end: -0.2em">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--bubble-color)"><path d="M9.569,16.5H2.5A.5.5,0,0,1,2,16V7.5A.5.5,0,0,1,2.5,7H16a.5.5,0,0,1,.5.5V9.57a7.281,7.281,0,0,1,2,0V3a1,1,0,0,0-1-1H15a.25.25,0,0,1-.25-.25v-1a.75.75,0,1,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H7a.25.25,0,0,1-.25-.25v-1a.75.75,0,0,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H1A1,1,0,0,0,0,3V16.5a2,2,0,0,0,2,2H9.569a7.281,7.281,0,0,1,0-2Z"/><path fill="var(--color-positive)" d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z"/></svg>
-          <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker"} %>
-          <span class="for-screen-reader">Add a due date</span>
-        </label>
-      <% end %>
-    </div>
-  <% end %>
-
-  <% bubble.tags.each do |tag| %>
-    <%= link_to "##{tag.title}", bubbles_path(tag_id: tag), class: "bubble__bubble bubble__meta bubble__tag" %>
-  <% end %>
-
-  <% if bubble.tags.size < 3 %>
-    <span class="bubble__bubble bubble__meta bubble__tag">
-      <%= turbo_frame_tag :new_tag do %>
-        <%= link_to "#", new_bubble_tag_path(bubble), class: "bubble__tag--new" %>
-      <% end %>
-    </span>
-  <% end %>
-
-  <%= tag.div class: "bubble__bubble bubble__meta bubble__boosts",
-        data: {
-          controller: "animation toggle-class",
-          animation_play_class: "boosting",
-          toggle_class_toggle_class: "boosting",
-          action: "animationend->toggle-class#toggle" } do %>
-    <%= turbo_frame_tag dom_id(bubble, :boosts), src: bubble_boosts_path(bubble) %>
-  <% end %>
+  <%= render "boosts", bubble: bubble %>
+  <%= render "date", bubble: bubble %>
+  <%= render "image", bubble: bubble %>
+  <%= render "tags", bubble: bubble %>
 </div>
diff --git a/app/views/bubbles/_date.html.erb b/app/views/bubbles/_date.html.erb
new file mode 100644
index 000000000..e57d4c056
--- /dev/null
+++ b/app/views/bubbles/_date.html.erb
@@ -0,0 +1,19 @@
+<% if bubble.due_on.present? %>
+  <%= form_with model: bubble, data: { controller: "form" } do | form | %>
+    <label class="bubble__bubble bubble__meta bubble__date">
+      <%= bubble.due_on.strftime("%b <br> %d").html_safe %>
+      <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker"} %>
+      <span class="for-screen-reader">Change the due date</span>
+    </label>
+  <% end %>
+<% else %>
+  <div class="bubble__bubble bubble__meta bubble__date bubble__date--new">
+    <%= form_with model: bubble, data: { controller: "form" } do | form | %>
+      <label class="btn btn--plain" style="--btn-icon-size: 2.5em; margin-inline-end: -0.2em">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--bubble-color)"><path d="M9.569,16.5H2.5A.5.5,0,0,1,2,16V7.5A.5.5,0,0,1,2.5,7H16a.5.5,0,0,1,.5.5V9.57a7.281,7.281,0,0,1,2,0V3a1,1,0,0,0-1-1H15a.25.25,0,0,1-.25-.25v-1a.75.75,0,1,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H7a.25.25,0,0,1-.25-.25v-1a.75.75,0,0,0-1.5,0V4.5a.75.75,0,1,1-1.5,0v-2a.5.5,0,0,0-.5-.5H1A1,1,0,0,0,0,3V16.5a2,2,0,0,0,2,2H9.569a7.281,7.281,0,0,1,0-2Z"/><path fill="var(--color-positive)" d="M17.5,11A6.5,6.5,0,1,0,24,17.5,6.508,6.508,0,0,0,17.5,11Zm.75,9a.75.75,0,1,1-1.5,0V18.5a.25.25,0,0,0-.25-.25H15a.75.75,0,0,1,0-1.5h1.5a.25.25,0,0,0,.25-.25V15a.75.75,0,1,1,1.5,0v1.5a.25.25,0,0,0,.25.25H20a.75.75,0,0,1,0,1.5H18.5a.25.25,0,0,0-.25.25Z"/></svg>
+        <%= form.date_field :due_on, class: "input input--hidden", data: { action: "change->form#submit click->form#showPicker"} %>
+        <span class="for-screen-reader">Add a due date</span>
+      </label>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/bubbles/_image.html.erb b/app/views/bubbles/_image.html.erb
new file mode 100644
index 000000000..9f0a2574d
--- /dev/null
+++ b/app/views/bubbles/_image.html.erb
@@ -0,0 +1,23 @@
+<div class="bubble__image">
+  <%= image_tag bubble.image.attached? ? bubble.image : "", data: { upload_preview_target: "image" } %>
+</div>
+
+<%= form_with model: bubble, data: { controller: "form" } do | form | %>
+  <div class="bubble__bubble bubble__meta bubble__attachment">
+    <% if bubble.image.attached? %>
+      <%= tag.label class: "btn btn--plain", style: "--btn-icon-size: 3em; margin-block-start: -0.5em; margin-inline-end: -0.2em", data: { action: "click->upload-preview#clear click->form#submit", upload_preview_target: "button" } do %>
+        <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path fill="var(--color-negative)" d="m19.1 0c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm-.8 5.7h-1.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.2s1.6 0 1.6 0h1.2c.3 0 .6.3.6.6s-.3.6-.6.6h-1.2s-1.6 0-1.6 0z"/><path d="m6.7 10.5c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6z" fill="none"/><path d="m9.7 16.9h.1l-.1-.1z"/><path d="m19.2 11.6v6.3c0 .2 0 .4-.4.4h-16.8v-13.7c0-.2 0-.4.4-.4h10.1c0-.7.3-1.3.5-1.8h-11.6c-.9.2-1.4.9-1.4 1.8v14c0 1 .8 1.8 1.8 1.8h17.5c1 0 1.8-.8 1.8-1.8v-6.9c-.6.2-1.2.3-1.8.3z"/><path d="m4.8 5.5c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s0 0 0 0c.4 0 .7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s0 0 0 0c.5 0 1 .3 1.3.7l3.1 5c0-.1 0-.2 0-.3v-4.2c-2.8-.6-4.9-3-5.1-6h-7.6zm1.9 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m5.2 16.9h2.6l1-1.5-1.2-1.7z"/><path d="m10.4 15.8-.7 1 .1.1h1.3 5.1l-3.1-5.1z"/></svg>
+        <%= form.hidden_field :bubble, value: bubble.id %>
+        <%= check_box_tag "remove_image", "true" %>
+        <span class="for-screen-reader">Remove imagee</span>
+      <% end %>
+    <% else %>
+      <label class="btn btn--plain input--file" style="--btn-icon-size: 3em; margin-block-start: -0.5em; margin-inline-end: -0.2em">
+        <svg viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" fill="var(--bubble-color)"><path fill="var(--color-positive)" d="m19.1 0c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm-.1 2.5c.3 0 .6.3.6.6v1.2c0 .2 0 .2.2.2h1.2c.3 0 .6.3.6.6s-.3.6-.6.6h-1.2c-.2 0-.2 0-.2.2v1.2c0 .3-.3.6-.6.6s-.6-.3-.6-.6v-1.2c0-.2 0-.2-.2-.2h-1.2c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h1.2c.2 0 .2 0 .2-.2v-1.2c0-.3.3-.6.6-.6z"/><path d="m6.7 10.5c.9 0 1.6-.7 1.6-1.6s-.7-1.6-1.6-1.6-1.6.7-1.6 1.6.7 1.6 1.6 1.6z" fill="none"/><path d="m9.7 16.9h.1l-.1-.1z"/><path d="m19.2 11.6v6.3c0 .2 0 .4-.4.4h-16.8v-13.7c0-.2 0-.4.4-.4h10.1c0-.7.3-1.3.5-1.8h-11.6c-.9.2-1.4.9-1.4 1.8v14c0 1 .8 1.8 1.8 1.8h17.5c1 0 1.8-.8 1.8-1.8v-6.9c-.6.2-1.2.3-1.8.3z"/><path d="m4.8 5.5c-.7 0-1.3.6-1.3 1.3v8.9c0 .4.2.7.5 1l2.6-3.5c.2-.3.6-.5.9-.5s0 0 0 0c.4 0 .7.2.9.5l.9 1.3 2.3-3.5c.3-.4.8-.7 1.3-.7s0 0 0 0c.5 0 1 .3 1.3.7l3.1 5c0-.1 0-.2 0-.3v-4.2c-2.8-.6-4.9-3-5.1-6h-7.6zm1.9 5c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6 1.6.7 1.6 1.6-.7 1.6-1.6 1.6z"/><path d="m5.2 16.9h2.6l1-1.5-1.2-1.7z"/><path d="m10.4 15.8-.7 1 .1.1h1.3 5.1l-3.1-5.1z"/></svg>
+        <%= form.file_field :image, class: "input", accept: "image/*",
+              data: { action: "upload-preview#previewImage change->form#submit" } %>
+        <span class="for-screen-reader">Upload an image</span>
+      </label>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb
new file mode 100644
index 000000000..93bfaceeb
--- /dev/null
+++ b/app/views/bubbles/_tags.html.erb
@@ -0,0 +1,11 @@
+<% bubble.tags.each do |tag| %>
+  <%= link_to "##{tag.title}", bubbles_path(tag_id: tag), class: "bubble__bubble bubble__meta bubble__tag" %>
+<% end %>
+
+<% if bubble.tags.size < 3 %>
+  <span class="bubble__bubble bubble__meta bubble__tag">
+    <%= turbo_frame_tag :new_tag do %>
+      <%= link_to "#", new_bubble_tag_path(bubble), class: "bubble__tag--new" %>
+    <% end %>
+  </span>
+<% end %>
diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb
index 55dd6765a..e5c3b5ab2 100644
--- a/app/views/bubbles/index.html.erb
+++ b/app/views/bubbles/index.html.erb
@@ -33,21 +33,6 @@
 
 <section class="bubbles-list unpad-inline center margin-block-start">
   <ul class="unpad margin-none flex flex-column txt-align-start center">
-    <% @bubbles.each do | bubble | %>
-      <li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>">
-        <div class="bubble">
-          <svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
-        </div>
-        <%= link_to bubble, class: "bubble__title-link flex align-center gap flex-item-grow min-width" do %>
-          <strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
-        <% end %>
-        <small class="flex align-center gap flex-item-no-shrink">
-          <% bubble.tags.each do |tag| %>
-            <%= link_to "##{tag.title}", bubbles_path(tag_id: tag.id), style: "color: #{ bubble.color }" %>
-          <% end %>
-          <time class="txt-nowrap flex-item-justify-end"><%= bubble.created_at.strftime("%b %d").html_safe %></time>
-        </small>
-      </li>
-    <% end %>
+    <%= render partial: "bubbles/list/bubble", collection: @bubbles %>
   </ul>
 </section>
diff --git a/app/views/bubbles/list/_bubble.html.erb b/app/views/bubbles/list/_bubble.html.erb
new file mode 100644
index 000000000..88b4a67e5
--- /dev/null
+++ b/app/views/bubbles/list/_bubble.html.erb
@@ -0,0 +1,19 @@
+<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>">
+  <div class="bubble">
+    <svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
+      <path d="m0 0h990v990h-990z" fill="none" stroke="none" />
+      <path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
+    </svg>
+  </div>
+
+  <%= link_to bubble, class: "bubble__title-link flex align-center gap flex-item-grow min-width" do %>
+    <strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
+  <% end %>
+
+  <small class="flex align-center gap flex-item-no-shrink">
+    <% bubble.tags.each do |tag| %>
+      <%= link_to "##{tag.title}", bubbles_path(tag_id: tag.id), style: "color: #{ bubble.color }" %>
+    <% end %>
+    <time class="txt-nowrap flex-item-justify-end"><%= bubble.created_at.strftime("%b %d").html_safe %></time>
+  </small>
+</li>