Add some structure to buckets index

app/models/filter/summarized.rb

@@ -9,18 +9,18 @@ module Filter::Summarized
 
   private
     def index_summary
-      "<mark>#{indexed_by.humanize}</mark>"
+      indexed_by.humanize
     end
 
     def tag_summary
       if tags.any?
-        "tagged <mark>#{tags.map(&:hashtag).to_choice_sentence}</mark>"
+        "tagged #{tags.map(&:hashtag).to_choice_sentence}"
       end
     end
 
     def assignee_summary
       if assignees.any?
-        "assigned to <mark>#{assignees.pluck(:name).to_choice_sentence}</mark>"
+        "assigned to #{assignees.pluck(:name).to_choice_sentence}"
       elsif assignments.unassigned?
         "assigned to no one"
       end
@@ -28,21 +28,21 @@ module Filter::Summarized
 
     def assigner_summary
       if assigners.any?
-        "assigned by <mark>#{assigners.pluck(:name).to_choice_sentence}</mark>"
+        "assigned by #{assigners.pluck(:name).to_choice_sentence}"
       end
     end
 
     def bucket_summary
       if buckets.any?
-        "in <mark>#{buckets.pluck(:name).to_choice_sentence}</mark>"
+        "in #{buckets.pluck(:name).to_choice_sentence}"
       else
-        "in <mark>all projects</mark>"
+        "in all projects</mark>"
       end
     end
 
     def terms_summary
       if terms.any?
-        "matching <mark>#{terms.map { |term| %Q("#{term}") }.to_sentence}</mark>"
+        "matching #{terms.map { |term| %Q("#{term}") }.to_sentence}"
       end
     end
 end

app/views/buckets/_bucket.html.erb

@@ -1,6 +1,6 @@
 <% cache bucket do %>
   <li class="bucket flex flex-column txt-align-center max-width position-relative">
-    <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "windshield__container flex justify-center align-center position-relative" do %>
+    <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "border border-radius margin-block-end-half windshield__container flex justify-center align-center position-relative" do %>
       <div class="windshield bucket__windshield flex flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= bucket.id %>">
         <% bucket.bubbles.ordered_by_activity.limit(10).each do |bubble| %>
           <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
@@ -12,7 +12,7 @@
 
     <div class="flex align-center justify-center flex-column flex-wrap center gap-half">
       <%= link_to bubbles_path(bucket_ids: [ bucket ]), class: "txt-ink flex flex-column" do %>
-        <strong class="txt-x-large">In <%= bucket.name %></strong>
+        <strong class="txt-x-large"><%= bucket.name %></strong>
       <% end %>
 
       <%= link_to edit_bucket_path(bucket), class: "btn txt-small" do %>

app/views/buckets/index.html.erb

@@ -14,7 +14,10 @@
   </nav>
 <% end %>
 
-<menu class="buckets margin-none unpad align-center justify-center flex flex-wrap gap">
-  <%= render @filters %>
+<div class="buckets margin-none unpad align-start justify-center flex flex-wrap gap">
   <%= render @buckets, cached: true %>
-</menu>
+</div>
+<hr class="separator--horizontal full-width margin-block-double" style="--border-style: solid; --border-color: var(--color-subtle)">
+<div class="buckets margin-none unpad align-start justify-center flex flex-wrap gap">
+  <%= render @filters %>
+</div>

app/views/filters/_filter.html.erb

@@ -1,6 +1,6 @@
 <% cache_if filter.cacheable?, filter do %>
   <li class="bucket flex flex-column txt-align-center max-width position-relative">
-    <%= link_to bubbles_path(**filter.to_params), class: "windshield__container flex justify-center align-center position-relative" do %>
+    <%= link_to bubbles_path(**filter.to_params), class: "border border-radius margin-block-end-half windshield__container flex justify-center align-center position-relative" do %>
       <div class="windshield bucket__windshield flex flex-wrap gap justify-center align-end" style="view-transition-name: windshield_<%= filter.id %>">
         <% filter.bubbles.ordered_by_activity.limit(10).each do |bubble| %>
           <div class="bubble" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %> <%= bubble_size(bubble) %>">
@@ -12,7 +12,7 @@
 
     <div class="flex align-center justify-center flex-column flex-wrap center gap-half">
       <%= link_to bubbles_path(**filter.to_params), class: "txt-ink flex flex-column" do %>
-        <strong class="txt-x-large"><%= filter.summary.html_safe %></strong>
+        <strong class="txt-large"><%= filter.summary %></strong>
       <% end %>
       <%= button_to filter_path(filter), method: :delete, class: "btn txt-small btn--negative", data: { turbo_confirm: "Are you sure you want to delete this filter?" } do %>
         <%= image_tag "minus.svg", aria: { hidden: true }, size: 24 %>