From 8b21b5a57005f74e8e48959287189f2d7d2d8fcb Mon Sep 17 00:00:00 2001
From: "Stanko K.R." <stanko@stanko.io>
Date: Thu, 21 Aug 2025 16:01:37 +0200
Subject: [PATCH] Fix search

---
 app/assets/stylesheets/conversation.css      | 13 +++++++++++++
 app/javascript/controllers/bar_controller.js | 17 ++++++++++++-----
 app/views/bar/_bar.html.erb                  |  2 +-
 app/views/conversations/show.html.erb        |  2 +-
 app/views/searches/_form.html.erb            |  5 ++---
 app/views/searches/show.html.erb             |  2 +-
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/conversation.css b/app/assets/stylesheets/conversation.css
index c042d0a4d..6daae6c9f 100644
--- a/app/assets/stylesheets/conversation.css
+++ b/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;
diff --git a/app/javascript/controllers/bar_controller.js b/app/javascript/controllers/bar_controller.js
index 429280748..8cf84190e 100644
--- a/app/javascript/controllers/bar_controller.js
+++ b/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
   }
 
diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb
index aeadf3d02..5b95f78f9 100644
--- a/app/views/bar/_bar.html.erb
+++ b/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 %>
diff --git a/app/views/conversations/show.html.erb b/app/views/conversations/show.html.erb
index af6582c3f..16f8d7de1 100644
--- a/app/views/conversations/show.html.erb
+++ b/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">
diff --git a/app/views/searches/_form.html.erb b/app/views/searches/_form.html.erb
index 94efe250a..54fa6b1cc 100644
--- a/app/views/searches/_form.html.erb
+++ b/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 %>
diff --git a/app/views/searches/show.html.erb b/app/views/searches/show.html.erb
index f2e9016dd..5eafd9295 100644
--- a/app/views/searches/show.html.erb
+++ b/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" %>