Fix search

app/assets/stylesheets/conversation.css

@@ -1,4 +1,17 @@
 @layer components {
+  .conversation {
+    height: 100%;
+  }
+
+  .conversation__header {
+    align-items: center;
+    display: flex;
+    inset: 0 0 auto 0;
+    justify-content: flex-end;
+    padding: var(--block-space-half);
+    position: absolute;
+  }
+
   .conversation__composer-input {
     --focus-ring-size: 0;
     --input-border-radius: 0;

app/javascript/controllers/bar_controller.js

@@ -23,12 +23,21 @@ export default class extends Controller {
     this.#hideItem(this.searchInputTarget)
   }
 
+  showModalAndSubmit(event) {
+    event.preventDefault()
+
+    const form = event.target.closest("form")
+
+    this.showModal()
+    form.requestSubmit()
+  }
+
   showModal() {
     this.dialogOutlet.open()
   }
 
   search(event) {
-    this.#openInTurboFrame("search", this.searchUrlValue)
+    this.#openInTurboFrame(this.searchUrlValue)
 
     this.#showItem(this.searchInputTarget)
     this.#hideItem(this.askInputTarget)
@@ -37,7 +46,7 @@ export default class extends Controller {
 
   ask(event) {
     this.#initializeConversation()
-    this.#openInTurboFrame("conversation", this.askUrlValue)
+    this.#openInTurboFrame(this.askUrlValue)
 
     this.#showItem(this.askInputTarget)
     this.#hideItem(this.searchInputTarget)
@@ -45,13 +54,11 @@ export default class extends Controller {
   }
 
   #clearTurboFrame() {
-    this.turboFrameTarget.removeAttribute("id")
     this.turboFrameTarget.removeAttribute("src")
     this.turboFrameTarget.innerHtml = ""
   }
 
-  #openInTurboFrame(name, url) {
-    this.turboFrameTarget.id = name
+  #openInTurboFrame(url) {
     this.turboFrameTarget.src = url
   }
 

app/views/bar/_bar.html.erb

@@ -44,6 +44,6 @@
       dialog_target: "dialog",
       dialog_modal_value: "false",
       action: "keydown.esc->bar#reset" } do %>
-    <%= turbo_frame_tag "fizzy-bar", data: { bar_target: "turboFrame" } %>
+    <%= turbo_frame_tag "bar-content", data: { bar_target: "turboFrame" } %>
   <% end %>
 <% end %>

app/views/conversations/show.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_tag "conversation" do %>
+<%= turbo_frame_tag "bar-content" do %>
   <%= turbo_stream_from Current.user, :conversation %>
 
   <div class="conversation">

app/views/searches/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with url: search_path, method: :get, class: "search__form flex align-center", data: { turbo_frame: "search" } do |form| %>
+<%= form_with url: search_path, method: :get, class: "search__form flex align-center", data: { turbo_frame: "bar-content" } do |form| %>
   <%= form.label :q, "Search Fizzy", class: "font-weight-black txt-nowrap" %>
   <%= text_field_tag :q, query_terms,
         class: "search__form-input input",
@@ -6,6 +6,5 @@
         placeholder: "Find something in Cards and Comments…",
         autocomplete: "off",
         data: {
-          action: "keydown.enter->bar#showModal keydown.esc->bar#reset"
-        } %>
+          action: "keydown.enter->bar#showModalAndSubmit keydown.esc->bar#reset" } %>
 <% end %>

app/views/searches/show.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_tag "search", target: :_top do %>
+<%= turbo_frame_tag "bar-content" do %>
   <div class="search__header">
     <button class="btn txt-x-small" data-action="bar#reset">
       <%= icon_tag "remove-med" %>