From 0b28a18c056749318cdeca265d0ff6e3f8a3c52f Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Fri, 13 Dec 2024 16:54:11 -0600
Subject: [PATCH] Rework boosts form so you can enter any integer

---
 app/assets/stylesheets/bubbles.css   | 35 +++++++++++++---------------
 app/controllers/boosts_controller.rb | 11 ++++++++-
 app/models/bubble/boostable.rb       |  9 ++++---
 app/views/boosts/_boosts.html.erb    | 10 ++++----
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 932efb262..25b014300 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/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) {
diff --git a/app/controllers/boosts_controller.rb b/app/controllers/boosts_controller.rb
index 5f5c95e93..0a6f34f78 100644
--- a/app/controllers/boosts_controller.rb
+++ b/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
diff --git a/app/models/bubble/boostable.rb b/app/models/bubble/boostable.rb
index 226671803..94a530e8e 100644
--- a/app/models/bubble/boostable.rb
+++ b/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
diff --git a/app/views/boosts/_boosts.html.erb b/app/views/boosts/_boosts.html.erb
index 975684583..fe2a27962 100644
--- a/app/views/boosts/_boosts.html.erb
+++ b/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 %>