Change the search button click behavior and always show topics

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

Author: ImTheKai

app/assets/stylesheets/components/sidebar.css

@@ -8,6 +8,29 @@
   margin-bottom: var(--spacing-8);
 }
 
+.sidebar-section.is-search-focus .sidebar-heading {
+  background: linear-gradient(135deg, var(--color-bg-sidebar-header), var(--color-primary-2));
+  border-radius: 999px;
+  box-shadow: var(--shadow-sm);
+}
+
+.sidebar-section.is-search-focus .sidebar-content {
+  border-radius: 16px;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-primary-200);
+}
+
+.sidebar-section.is-search-focus .search-input {
+  border-color: var(--color-primary-300);
+  box-shadow: var(--shadow-focus);
+}
+
+.sidebar-section.is-search-focus .search-button {
+  border-color: var(--color-primary-300);
+  background: var(--color-bg-hover);
+}
+
 .sidebar .search-input {
   width: 100%;
   padding: var(--spacing-3) var(--spacing-4);

app/controllers/topics_controller.rb

@@ -95,14 +95,16 @@ def read_all
   def search
     @search_query = params[:q].to_s.strip
 
-    if @search_query.present?
-      load_cached_search_results
-    else
-      base_query = topics_base_query(search_query: @search_query)
-      apply_cursor_pagination(base_query)
-      @new_topics_count = 0
+    if @search_query.blank?
+      respond_to do |format|
+        format.html { redirect_to topics_path(anchor: "search") }
+        format.turbo_stream { redirect_to topics_path(anchor: "search") }
+      end
+      return
     end
 
+    load_cached_search_results
+
     preload_commitfest_summaries
     preload_participation_flags if user_signed_in?
 

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", search_topics_path, 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
-      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
+          = 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

app/views/topics/search.html.slim

@@ -34,9 +34,3 @@
       h3 No results found
       p Try different search terms or browse all topics
       = link_to "Browse All Topics", topics_path, class: "browse-link"
-
-- else
-  .search-help
-    h3 Search the PostgreSQL Hackers Archive
-    p Enter keywords to search through topic titles and message content
-    = link_to "Browse All Topics", topics_path, class: "browse-link"