Rework boosts form so you can enter any integer

app/assets/stylesheets/bubbles.css

@@ -78,6 +78,7 @@
     --rotation: 45deg;
 
     aspect-ratio: 6/9;
+    border-radius: var(--bubble-shape);
     display: flex;
     font-size: 6cqi;
     inset: 70cqi 7cqi auto auto;
@@ -86,22 +87,27 @@
     place-items: center;
     transform: rotate(var(--rotation));
 
-    span {
+
+    .boost__form {
       transform: rotate(calc(var(--rotation) * -1));
     }
 
-    form {
-      block-size: 100%;
-      display: grid;
-      inline-size: 100%;
+    .boost__btn {
+      --btn-background: var(--bubble-color);
+      --btn-border-radius: 50%;
+      --btn-color: var(--color-ink-reversed);
+      --btn-size: 0.5em;
+      --btn-padding: 0.3em 0.5em;
+
+      font-weight: 800;
     }
 
-    .btn {
-      --btn-background: transparent;
-      --btn-color: var(--bubble-color);
-
-      appearance: none;
+    .boost__input {
+      color: var(--bubble-color);
+      field-sizing: content;
       font-weight: 800;
+      padding: 0;
+      text-align: center;
     }
 
     &.boosting {
@@ -210,15 +216,6 @@
     transition: transform 200ms ease-out;
     white-space: nowrap;
     z-index: 1;
-
-    &:has(.input:not([type="file"], [type="date"], select)) {
-      border-radius: 2em;
-      padding: 0.2em 0.5em;
-
-      .input {
-        color: var(--bubble-color);
-      }
-    }
   }
 
   @media (hover: hover) {

app/controllers/boosts_controller.rb

@@ -2,6 +2,15 @@ class BoostsController < ApplicationController
   include BubbleScoped, BucketScoped
 
   def create
-    @bubble.boost!
+    count = if params[:boost_count].to_i == @bubble.boosts_count
+      @bubble.boosts_count + 1
+    else
+      params[:boost_count].to_i
+    end
+    @bubble.boost!(count)
+
+    respond_to do |format|
+      format.turbo_stream
+    end
   end
 end

app/models/bubble/boostable.rb

@@ -5,10 +5,13 @@ module Bubble::Boostable
     scope :ordered_by_boosts, -> { order boosts_count: :desc }
   end
 
-  def boost!
+  def boost!(count = 1)
+    count = count.to_i
+    count = 1 if count < 1
+
     transaction do
-      track_event :boosted
-      increment! :boosts_count
+      track_event :boosted, count: count
+      update! boosts_count: count
       rescore
     end
   end

app/views/boosts/_boosts.html.erb

@@ -5,10 +5,10 @@
         toggle_class_toggle_class: "boosting",
         action: "animationend->toggle-class#toggle" },
       hidden: !bubble.boosts_count.positive? do %>
-  <%= button_to bucket_bubble_boosts_path(bubble.bucket, bubble),
-      class: "btn btn--plain",
-      data: { action: "toggle-class#toggle" },
-      form_class: "full-width" do %>
-    <%= tag.span("+ #{bubble.boosts_count}") if bubble.boosts_count.positive? %>
+  <%= form_with url: bucket_bubble_boosts_path(bubble.bucket, bubble),
+        class: "boost__form",
+        data: { action: "toggle-class#toggle" } do %>
+    <%= text_field_tag :boost_count, bubble.boosts_count, min: 1, class: "input borderless boost__input" %>
+    <%= tag.button "+", class: "btn btn--plain boost__btn", type: :submit %>
   <% end %>
 <% end %>