diff --git a/app/assets/stylesheets/components/sidebar.css b/app/assets/stylesheets/components/sidebar.css index 7ba842c..65bb103 100644 --- a/app/assets/stylesheets/components/sidebar.css +++ b/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); diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb index ad8cb23..c0bb10f 100644 --- a/app/controllers/topics_controller.rb +++ b/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? diff --git a/app/javascript/controllers/search_focus_controller.js b/app/javascript/controllers/search_focus_controller.js new file mode 100644 index 0000000..2b22439 --- /dev/null +++ b/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) + } +} diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index e10f080..4890e23 100644 --- a/app/views/layouts/application.html.slim +++ b/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" diff --git a/app/views/topics/_sidebar.html.slim b/app/views/topics/_sidebar.html.slim index 8043a9d..438dda4 100644 --- a/app/views/topics/_sidebar.html.slim +++ b/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 diff --git a/app/views/topics/search.html.slim b/app/views/topics/search.html.slim index b649ca4..277d85f 100644 --- a/app/views/topics/search.html.slim +++ b/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"