Refactor js and restore focus fix

app/javascript/stimulus/inline_edit_controller.js

@@ -26,16 +26,4 @@ export default class extends Controller {
     this.inputTarget.value = this.originalText
     this.submitForm()
   }
-
-  clear() {
-    this.inputTarget.value = ""
-    this.submitForm()
-  }
-
-  search() {
-    clearTimeout(this.timeout)
-    this.timeout = setTimeout(() => {
-      this.element.requestSubmit()
-    }, 900)
-  }
 }

app/javascript/stimulus/search_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input" ]
+
+  cursorToEnd() {
+    this.inputTarget.selectionStart =
+      this.inputTarget.selectionEnd =
+        this.inputTarget.value.length
+  }
+
+  clear() {
+    this.inputTarget.value = ""
+    this.element.requestSubmit()
+  }
+
+  search() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.element.requestSubmit()
+    }, 900)
+  }
+}

app/views/messages/_nav_column.html.erb

@@ -29,31 +29,32 @@
   id="search"
   class="pt-6 text-gray-950 dark:text-gray-100 select-none"
 >
-  <%= form_with(url: new_assistant_message_path(@assistant), data: { controller: "inline-edit" }, class: "contents", method: :get) do |form| %>
+  <%= form_with(url: new_assistant_message_path(@assistant), data: { controller: "search" }, class: "contents", method: :get) do |form| %>
     <div class="relative ml-2 mr-5">
       <%= form.text_field :query,
         value: @query,
         placeholder: "Search",
         id: "search-input",
+        autofocus: @query.nil? ? false : true,
         class: %|
           w-full
           p-2 py-1
           border border-gray-200 rounded-lg
           text-black dark:text-gray-800
       |,
       data: {
-        inline_edit_target: "input",
+        search_target: "input",
         action: %|
-          keydown.enter->inline-edit#cursorToEnd
-          input->inline-edit#search
+          keydown.enter->search#cursorToEnd
+          input->search#search
           %|
         }
       %>
       <%= icon "x-circle",
         variant: :mini,
         size: 18,
         class: "cursor-pointer absolute right-1 top-1/2 transform -translate-y-1/2",
-        data: { action: "click->inline-edit#clear" }
+        data: { action: "click->search#clear" }
       %>
     </div>
   <% end %>