Merge branch 'main' into house

* main:
  Add hotwire-spark
  Fix for Safari which doesn't support `field-sizing: content`
  Add button and action to delete a bubble
  Indicate draggable element
  Stub draggable collection size divider
  Make close and trash more distinct

Gemfile

@@ -34,6 +34,10 @@ group :development, :test do
   gem "rubocop-rails-omakase", require: false
 end
 
+group :development do
+  gem "hotwire-spark"
+end
+
 group :test do
   gem "capybara"
   gem "selenium-webdriver"

Gemfile.lock

@@ -151,8 +151,22 @@ GEM
       reline (>= 0.3.8)
     drb (2.2.1)
     erubi (1.13.0)
+    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.0-aarch64-linux-musl)
+    ffi (1.17.0-arm-linux-gnu)
+    ffi (1.17.0-arm-linux-musl)
+    ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x86-linux-gnu)
+    ffi (1.17.0-x86-linux-musl)
+    ffi (1.17.0-x86_64-darwin)
+    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.0-x86_64-linux-musl)
     globalid (1.2.1)
       activesupport (>= 6.1)
+    hotwire-spark (0.1.3)
+      listen
+      rails (>= 8.0.0)
+      zeitwerk
     i18n (1.14.6)
       concurrent-ruby (~> 1.0)
     importmap-rails (2.0.3)
@@ -168,6 +182,9 @@ GEM
       activesupport (>= 5.0.0)
     json (2.9.0)
     language_server-protocol (3.17.0.3)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
     logger (1.6.2)
     loofah (2.23.1)
       crass (~> 1.0.2)
@@ -239,6 +256,9 @@ GEM
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     rainbow (3.1.1)
     rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
     rdoc (6.8.1)
       psych (>= 4.0.0)
     regexp_parser (2.9.3)
@@ -353,6 +373,7 @@ DEPENDENCIES
   brakeman
   capybara
   debug
+  hotwire-spark
   hotwire_combobox!
   house_md!
   importmap-rails

app/assets/images/drag.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.2 8h2.7c.5 0 1-.4 1-1 0-.2 0-.5-.2-.6l-5-5.6c-.4-.4-1-.4-1.4 0l-4.8 5.6c-.4.4-.3 1 0 1.4.2.2.4.2.6.2h7z"/><path d="m9.8 16h-2.7c-.5 0-1 .4-1 1 0 .2 0 .5.2.6l4.8 5.6c.4.4 1 .4 1.4 0l4.8-5.6c.4-.4.3-1 0-1.4-.2-.2-.4-.2-.6-.2h-2.7s-4.4 0-4.4 0z"/></svg>

app/assets/images/trash.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m1.5 4.5h21"/><path d="m14.25 1.5h-4.5-.00000007c-.828427.00000004-1.5.671573-1.5 1.5v1.5h7.5v-1.5c0-.828427-.671573-1.5-1.5-1.5z"/><path d="m9.75 17.25v-7.5"/><path d="m14.25 17.25v-7.5"/><path d="m18.865 21.124.00000001-.00000017c-.0645133.777732-.714596 1.37607-1.495 1.376h-10.739-.00000007c-.780403.00006974-1.43049-.598268-1.495-1.376l-1.386-16.624h16.5z"/></g></svg>

app/assets/stylesheets/bubbles.css

@@ -81,6 +81,7 @@
     border-radius: var(--bubble-shape);
     display: flex;
     font-size: 6cqi;
+    inline-size: min-content;
     inset: 70cqi 7cqi auto auto;
     min-inline-size: 4.5ch;
     padding: 0;
@@ -104,10 +105,13 @@
 
     .boost__input {
       color: var(--bubble-color);
-      field-sizing: content;
       font-weight: 800;
       padding: 0;
       text-align: center;
+
+      @supports (field-sizing: content) {
+        field-sizing: content;
+      }
     }
 
     &.boosting {
@@ -369,15 +373,6 @@
     position: relative;
     transition: background-color 200ms ease-out;
 
-    &:nth-of-type(10)::after {
-      border-bottom: 1px dashed var(--color-subtle-dark);
-      block-size: 0;
-      content: "";
-      inline-size: 100%;
-      inset: auto 0 0 0;
-      position: absolute;
-    }
-
     @media (hover: hover) {
       &:hover {
         background-color: color(from var(--bubble-color) srgb r g b / 0.15);
@@ -396,6 +391,27 @@
   }
 }
 
+.bubbles-list__divider {
+  --border-color: var(--divider-color);
+  --border-size: 2px;
+  --divider-color: var(--color-subtle-dark);
+
+  font-size: 1rem;
+}
+
+.btn--reversed.bubbles-list__handle {
+  --btn-background: var(--divider-color);
+
+  font-size: 0.9rem;
+  cursor: grab;
+}
+
+.bubbles-list__count {
+  background-color: var(--divider-color);
+  color: var(--color-ink-reversed);
+  padding: 0.1em 0.7em;
+}
+
 .bubble__title-text {
   font-weight: 600;
   flex-grow: 1;

app/assets/stylesheets/utilities.css

@@ -216,7 +216,7 @@
 .separator {
   border-block: 0;
   border-inline-end: 0;
-  border-inline-start: 1px var(--border-style, solid) var(--border-color, currentColor);
+  border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
   display: inline-flex;
   inline-size: 0;
 }
@@ -224,7 +224,7 @@
 .separator--horizontal {
   block-size: 0;
   border-block-end: 0;
-  border-block-start: 1px var(--border-style, solid) var(--border-color, currentColor);
+  border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
   border-inline: 0;
   display: flex;
 }

app/controllers/bubbles_controller.rb

@@ -4,7 +4,7 @@ class BubblesController < ApplicationController
   skip_before_action :set_bucket, only: :index
 
   before_action :set_filter, only: :index
-  before_action :set_bubble, only: %i[ show edit update ]
+  before_action :set_bubble, only: %i[ show edit update destroy ]
 
   def index
     @bubbles = @filter.bubbles
@@ -22,6 +22,11 @@ class BubblesController < ApplicationController
   def edit
   end
 
+  def destroy
+    @bubble.destroy!
+    redirect_to bubbles_path, notice: "Bubble deleted"
+  end
+
   def update
     @bubble.update! bubble_params
     redirect_to @bubble

app/views/bubbles/index.html.erb

@@ -32,6 +32,18 @@
 
 <section class="bubbles-list unpad-inline center margin-block-start">
   <ul class="unpad margin-none flex flex-column txt-align-start center">
+    <li class="bubbles-list__divider flex align-center gap-half full-width">
+      <button class="bubbles-list__handle btn btn--reversed">
+        <%= image_tag "drag.svg", aria: { hidden: true }, size: 16 %>
+        <span class="for-screen-reader">Drag to change number of bubbles shown above</span>
+      </button>
+      <hr class="separator--horizontal flex-item-grow">
+      <strong class="bubbles-list__count border-radius">
+        Top 10
+      </strong>
+      <hr class="separator--horizontal flex-item-grow">
+      <span></span>
+    </li>
     <%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %>
   </ul>
 </section>

app/views/bubbles/show.html.erb

@@ -56,6 +56,14 @@
       <%= image_tag "picture-double.svg", aria: { hidden: true }, size: 24 %>
       <span>I've seen this</span>
     </button>
+
+    <%= button_to bucket_bubble_path(@bubble.bucket, @bubble),
+          method: :delete,
+          class: "btn full-width justify-start borderless",
+          data: { turbo_confirm: "Are you sure you want to delete this bubble?" } do %>
+      <%= image_tag "trash.svg", aria: { hidden: true }, size: 24 %>
+      <span>Delete bubble</span>
+    <% end %>
   </div>
 </aside>
 

app/views/comments/edit.html.erb

@@ -9,13 +9,13 @@
           <span class="for-screen-reader">Save</span>
         <% end %>
         <%= link_to bucket_bubble_comment_path(@bubble.bucket, @bubble, @comment), class: "btn btn--small", data: { form_target: "cancel" } do %>
-          <%= image_tag "close.svg", aria: { hidden: true }, size: 16 %>
+          <%= image_tag "remove-med.svg", aria: { hidden: true }, size: 16 %>
           <span class="for-screen-reader">Cancel</span>
         <% end %>
 
         <%= tag.button type: :submit, class: "btn btn--small btn--negative flex-item-justify-end", form: dom_id(@comment, :delete_form),
             data: { turbo_confirm: "Are you sure you want to delete this comment?" } do %>
-          <%= image_tag "remove.svg", aria: { hidden: true }, size: 16 %>
+          <%= image_tag "trash.svg", aria: { hidden: true }, size: 16 %>
           <span class="for-screen-reader">Delete</span>
         <% end %>
       </div>