Rework tagging UI to use new menu lisdt

app/assets/stylesheets/tags.css

@@ -0,0 +1,21 @@
+.tag-picker {
+  --panel-border-radius: 2em;
+  --panel-padding: 0.5em 0.7em;
+  --panel-size: max-content;
+
+  inline-size: auto !important;
+  inset: 0 auto auto 0;
+  max-inline-size: var(--panel-size) !important;
+  position: absolute;
+  z-index: 2;
+
+  &[open] {
+    display: flex;
+  }
+
+  .input {
+    --input-padding: 0.2em 0.5em;
+
+    inline-size: 18ch;
+  }
+}

app/views/bubbles/_tags.html.erb

@@ -1,11 +1,3 @@
-<% bubble.tags.each do |tag| %>
+<% bubble.tags.last(3).each do |tag| %>
   <%= link_to tag.hashtag, bubbles_path(bucket_id: bubble.bucket, tag_ids: tag), class: "bubble__bubble bubble__meta bubble__tag" %>
 <% end %>
-
-<% if bubble.tags.size < 3 %>
-  <span class="bubble__bubble bubble__meta bubble__tag" id="new-tag" hidden>
-    <%= turbo_frame_tag :new_tag do %>
-      <%= link_to "#", new_bucket_bubble_tag_path(bubble.bucket, bubble), class: "bubble__tag--new" %>
-    <% end %>
-  </span>
-<% end %>

app/views/bubbles/show.html.erb

@@ -35,8 +35,35 @@
       </label>
     <% end %>
 
+    <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close">
+      <button class="btn full-width justify-start borderless" data-action="dialog#toggle">
+        <%= image_tag "tag.svg", aria: { hidden: true }, size: 24 %>
+        <span>Tag this</span>
+      </button>
+
+      <dialog class="tag-picker panel fill-white shadow gap-half align-center" data-dialog-target="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+        <%= image_tag "tag.svg", aria: { hidden: true }, size: 24 %>
+
+        <%= form_with model: Tag.new, url: bucket_bubble_tags_path(@bubble.bucket, @bubble), class: "min-width flex-item-grow", data: { turbo_frame: "_top" } do |form| %>
+          <%= form.text_field :title, class: "input", autofocus: "on", list: "tags-list" %>
+          <%= form.submit "Create Tag", hidden: true %>
+
+          <datalist id="tags-list">
+            <%= Current.account.tags.each do |tag| %>
+              <option value="<%= tag.title %>"></option>
+            <% end %>
+          </datalist>
+        <% end %>
+
+        <form method="dialog">
+          <button class="btn txt-small" title="Close (esc)">
+            <%= image_tag "remove.svg", aria: { hidden: true }, size: 24 %>
+            <span class="for-screen-reader">Close</span>
+          </button>
+        </form>
+      </dialog>
+    </div>
 
-    <%= bubble_action_button('new-tag', 'tag', 'Tag this') %>
     <%= bubble_action_button('new-attachment', 'picture-add', 'Attach a file') %>
     <%= bubble_action_button('new-boost', 'thumb-up', 'Boost this') %>
   </div>

app/views/tags/new.html.erb

@@ -1,12 +0,0 @@
-<%= turbo_frame_tag :new_tag do %>
-  <%= form_with model: Tag.new, url: bucket_bubble_tags_path(@bubble.bucket, @bubble), data: { turbo_frame: "_top" } do |form| %>
-    <%= form.text_field :title, class: "input borderless", autofocus: "on", list: "tags-list" %>
-    <%= form.submit "Create Tag", hidden: true %>
-
-    <datalist id="tags-list">
-      <%= Current.account.tags.each do |tag| %>
-        <option value="<%= tag.title %>"></option>
-      <% end %>
-    </datalist>
-  <% end %>
-<% end %>