From b8d256d68dc2003f698e38a01cf21cab1f9eeab7 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Mon, 16 Dec 2024 12:04:21 -0600
Subject: [PATCH] Improve the flow for editing bubble titles

- Keyboard shortcuts (ctrl-enter, meta-enter, esc)
- Visible submit button
- Hide tags while editing (so we can edit them inline later)
---
 app/views/bubbles/_bubble.html.erb | 8 ++++----
 app/views/bubbles/_tags.html.erb   | 2 +-
 app/views/bubbles/edit.html.erb    | 7 +++++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb
index 09d680c94..4945e02b6 100644
--- a/app/views/bubbles/_bubble.html.erb
+++ b/app/views/bubbles/_bubble.html.erb
@@ -8,12 +8,12 @@
       <h1 class="bubble__title">
         <%= turbo_frame_tag bubble, :edit do %>
           <%= link_to bubble.title, edit_bucket_bubble_path(bubble.bucket, bubble), class: "txt-undecorated" %>
+
+          <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
+            <%= render "bubbles/tags", bubble: bubble %>
+          </div>
         <% end %>
       </h1>
-
-      <div class="bubble__tags flex flex-wrap align-end justify-center gap-half txt-tight-lines">
-        <%= render "bubbles/tags", bubble: bubble %>
-      </div>
     </div>
 
     <div class="bubble__shape"></div>
diff --git a/app/views/bubbles/_tags.html.erb b/app/views/bubbles/_tags.html.erb
index c38e63103..bf23f575c 100644
--- a/app/views/bubbles/_tags.html.erb
+++ b/app/views/bubbles/_tags.html.erb
@@ -1,6 +1,6 @@
 <% bubble.tags.each do |tag| %>
   <%= link_to bubbles_path(@filter.to_params.merge(tag_ids: [ tag.id ])),
-        class: "bubble__tag btn btn--plain fill-transparent min-width", style: "color: #{bubble.color}" do %>
+        class: "bubble__tag btn btn--plain fill-transparent min-width", style: "color: #{bubble.color}", data: { turbo_frame: "_top" } do %>
     <span class="overflow-ellipsis"><%= tag.hashtag %></span>
   <% end %>
 <% end %>
diff --git a/app/views/bubbles/edit.html.erb b/app/views/bubbles/edit.html.erb
index 562bc096b..57bbed5c1 100644
--- a/app/views/bubbles/edit.html.erb
+++ b/app/views/bubbles/edit.html.erb
@@ -1,12 +1,15 @@
 <%= turbo_frame_tag @bubble, :edit do %>
-  <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), class: "flex flex-column gap full-width", data: { controller: "form" } do |form| %>
+  <%= form_with model: @bubble, url: bucket_bubble_path(@bubble.bucket, @bubble), class: "flex flex-column justify-center gap full-width", data: { controller: "form" } do |form| %>
     <%= form.label :title, class: "flex flex-column justify-center align-center" do %>
       <%= form.text_area :title, class: "input input--textara txt-align-center full-width borderless",
           required: true, rows: 5, autofocus: true, placeholder: "Name it…",
           data: { action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel focus->form#select" },
           style: "color: var(--spat-color); --input-border-radius: 0" %>
     <% end %>
-    <%= form.submit "Save", hidden: true %>
+    <%= form.button "Save", class: "btn btn--reversed txt-small center", type: :submit do %>
+      <%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
+      <span class="for-screen-reader">Save</span>
+    <% end %>
     <%= link_to "Close editor and discard changes", bucket_bubble_path(@bubble.bucket, @bubble), data: { form_target: "cancel" }, hidden: true %>
   <% end %>
 <% end %>