From 0c57f9cdc51933076351fd53e4cbe1628e1e8d40 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 11 Feb 2025 21:48:33 -0600
Subject: [PATCH] Polish draft/post UI

---
 app/assets/stylesheets/bubbles.css     |  6 ++++--
 app/views/bubbles/_bubble.html.erb     |  2 +-
 app/views/bubbles/_pop_toggle.html.erb |  2 +-
 app/views/bubbles/show.html.erb        | 20 ++++++++------------
 4 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index f5e7affa9..1237e135f 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -372,6 +372,8 @@
   }
 
   textarea {
+    --input-color: var(--bubble-color);
+
     hyphens: none;
   
     &::selection {
@@ -542,9 +544,9 @@
   }
 }
 
-.bubble__pop-container {
+.bubble__actions-container {
   background-color: color(from var(--bubble-color) srgb r g b / 0.15);
-  margin-block-start: -1em;
+  margin-block-start: -0.7em;
 
   .btn {
     --btn-background: var(--bubble-color);
diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 0fc806347..0f322488b 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -10,7 +10,7 @@
       <h1 class="bubble__title">
         <% if bubble.creating? %>
           <%= form_with model: bubble, url: bucket_bubble_path(bubble.bucket, bubble), data: { controller: "auto-save" } do |form| %>
-            <%= form.text_field :title, placeholder: "Name it…", class: "input txt-align-center full-width borderless", autofocus: bubble.title.blank?, data: { action: "auto-save#change blur->auto-save#submit" } %>
+            <%= form.text_area :title, placeholder: "Name it…", class: "input txt-align-center full-width borderless", autofocus: bubble.title.blank?, data: { action: "auto-save#change blur->auto-save#submit keydown.enter->auto-save#submit:prevent keydown.ctrl+enter->auto-save#submit:prevent" }, rows: 5 %>
           <% end %>
         <% else %>
           <%= turbo_frame_tag bubble, :edit do %>
diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb
index f5d41e1bf..ff430eae8 100644
--- a/app/views/bubbles/_pop_toggle.html.erb
+++ b/app/views/bubbles/_pop_toggle.html.erb
@@ -1,4 +1,4 @@
-<div class="bubble__pop-container center border-radius pad flex-inline align-center justify-center gap pad-inline-double" style="--bubble-color: <%= @bubble.color %>">
+<div class="bubble__actions-container center border-radius pad flex-inline align-center justify-center gap pad-inline-double" style="--bubble-color: <%= @bubble.color %>">
   <% if bubble.popped? %>
     <% event = bubble.events.where(action: "popped").last %>
       <span class="bubble__pop-message">Popped by <%= "#{ event.creator.name } on #{ event.created_at.to_date.strftime('%B %-d') }" if event %>.</span>
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 230e3d69b..8fb27389b 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -4,9 +4,9 @@
   <% if @bubble.creating? && @bubble.can_recover_abandoned_creation? %>
     <div class="flex align-center gap-half fill-selected justify-center border-block margin-block-end"
           style="--border-color: var(--color-selected-dark); --border-style: dashed; view-transition-name: draft-banner;">
-      You have an unsaved bubble. Would you like to continue where you left off?
+      You have an unsaved work. Would you like to continue where you left off?
       <%= button_to bucket_bubble_recover_path(@bubble.bucket, @bubble), class: "btn txt-small btn--link", data: { turbo_action: "replace" } do %>
-        <span>Yes please!</span>
+        <span>Restore</span>
       <% end %>
     </div>
   <% end %>
@@ -93,8 +93,12 @@
     <%= render "bubbles/bubble", bubble: @bubble %>
   </div>
 
-  
-  <% unless @bubble.drafted? %>
+  <% if @bubble.creating? %>
+    <div class="bubble__actions-container center border-radius pad flex-inline align-center justify-center gap pad-inline-double" style="--bubble-color: <%= @bubble.color %>">
+      <%= button_to "Create bubble", bucket_bubble_publish_path(@bubble.bucket, @bubble), class: "btn btn--reversed" %>
+      <%= button_to "Save as draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put, class: "btn btn--plain borderless fill-transparent" %>
+    </div>
+  <% elsif !@bubble.drafted? %>
     <%= render "bubbles/pop_toggle", bubble: @bubble %>
   <% end %>
 
@@ -105,12 +109,4 @@
   <%= turbo_frame_tag dom_id(@bubble, :stage_picker), src: new_bucket_bubble_stage_picker_path(@bubble.bucket, @bubble) %>
 </div>
 
-<% if @bubble.creating? %>
-  <div>
-  <%= button_to "Publish", bucket_bubble_publish_path(@bubble.bucket, @bubble) %>
-  <%= button_to "Save a draft", bucket_bubble_path(@bubble.bucket, @bubble), name: "bubble[status]", value: "drafted", method: :put %>
-  <%= button_to "Cancel", bucket_bubble_path(@bubble.bucket, @bubble), method: :delete %>
-  </div>
-<% end %>
-
 <%= render "notifications/tray" %>