rework search behavior with anchor

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/controllers/topics_controller.rb

@@ -97,8 +97,8 @@ def search
 
     if @search_query.blank?
       respond_to do |format|
-        format.html { redirect_to topics_path(focus: 1) }
-        format.turbo_stream { redirect_to topics_path(focus: 1) }
+        format.html { redirect_to topics_path(anchor: "search") }
+        format.turbo_stream { redirect_to topics_path(anchor: "search") }
       end
       return
     end

app/javascript/controllers/search_focus_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "section"]
+
+  connect() {
+    this._onHashChange = this.focusIfHash.bind(this)
+    this._onTurboLoad = this.focusIfHash.bind(this)
+    this._onLinkClick = this.handleLinkClick.bind(this)
+    window.addEventListener("hashchange", this._onHashChange)
+    document.addEventListener("turbo:load", this._onTurboLoad)
+    document.addEventListener("click", this._onLinkClick)
+    this.focusIfHash()
+  }
+
+  disconnect() {
+    window.removeEventListener("hashchange", this._onHashChange)
+    document.removeEventListener("turbo:load", this._onTurboLoad)
+    document.removeEventListener("click", this._onLinkClick)
+  }
+
+  focusIfHash() {
+    const isSearch = window.location.hash === "#search"
+    if (this.hasSectionTarget) {
+      this.sectionTarget.classList.toggle("is-search-focus", isSearch)
+    }
+    if (isSearch && this.hasInputTarget) {
+      this.inputTarget.focus()
+    }
+  }
+
+  handleLinkClick(event) {
+    if (event.defaultPrevented) return
+    const link = event.target.closest('a[href="#search"]')
+    if (!link) return
+    window.location.hash = "search"
+    setTimeout(() => this.focusIfHash(), 0)
+  }
+}

app/views/layouts/application.html.slim

@@ -42,7 +42,8 @@ html data-theme="light"
         span.tagline PostgreSQL Hackers Archive
       .nav-links
         = link_to "Topics", topics_path, class: "nav-link"
-        = link_to "Search", topics_path(focus: 1), class: "nav-link"
+        - search_link = content_for?(:search_sidebar) ? "#search" : topics_path(anchor: "search")
+        = link_to "Search", search_link, class: "nav-link"
         = link_to "Statistics", stats_path, class: "nav-link"
       .nav-right
         button.nav-link.theme-toggle type="button" aria-label="Toggle theme" data-controller="theme" data-action="click->theme#toggle"

app/views/topics/_sidebar.html.slim

@@ -1,4 +1,5 @@
 - content_for :sidebar do
+  - content_for :search_sidebar, true
   .sidebar
 
     - if user_signed_in?
@@ -8,11 +9,10 @@
             button.mark-aware-button data-action="click->topics-aware#markVisibleAware" Mark displayed threads aware
             button.mark-aware-button.secondary data-action="click->topics-aware#markAllAware" Mark everything up to now aware
 
-    .sidebar-section class=(params[:focus].present? ? "is-search-focus" : nil)
-      h3.sidebar-heading Search
+    .sidebar-section#search data-controller="search-focus" data-search-focus-target="section"
       .sidebar-search.sidebar-content
         = form_with url: search_topics_path, method: :get, local: true do |f|
-          = f.text_field :q, placeholder: "Search topics and messages...", class: "search-input", value: search_query, autofocus: params[:focus].present?
+          = f.text_field :q, placeholder: "Search topics and messages...", class: "search-input", value: search_query, data: { "search-focus-target": "input" }
           = f.submit "Search", class: "search-button"
 
     .sidebar-section