Allow to save searches from the search interface

Also display if we are using a saved search

Author: dutow

app/assets/stylesheets/components/topics.css

@@ -931,3 +931,98 @@ a.topic-icon {
 .search-warnings-list li + li {
   margin-top: var(--spacing-1);
 }
+
+/* Saved search indicator and save prompt */
+.saved-search-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  margin: var(--spacing-3) var(--spacing-4) var(--spacing-4);
+  background: var(--color-primary-50);
+  border: var(--border-width) solid var(--color-primary-200);
+  border-radius: 999px;
+  color: var(--color-primary-700);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.save-search-prompt {
+  padding: var(--spacing-3) var(--spacing-4);
+  margin-bottom: var(--spacing-4);
+}
+
+.save-search-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+
+.save-search-toggle:hover {
+  color: var(--color-text-link);
+}
+
+.save-search-form {
+  margin-top: var(--spacing-3);
+}
+
+.save-search-form.is-hidden {
+  display: none;
+}
+
+.save-search-fields {
+  display: flex;
+  gap: var(--spacing-3);
+  align-items: center;
+}
+
+.save-search-input {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-4);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: 999px;
+  font-size: var(--font-size-sm);
+  background: var(--color-bg-input);
+  flex: 1;
+  min-width: 0;
+}
+
+.save-search-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+
+.save-search-button {
+  display: inline-flex;
+  width: auto;
+  margin: 0;
+  padding: var(--spacing-3) var(--spacing-6);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-bg-button);
+  color: var(--color-text-button);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
+}
+
+.save-search-button:hover {
+  background: #d9480f;
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.save-search-error {
+  color: var(--color-danger);
+  font-size: var(--font-size-sm);
+  margin-top: var(--spacing-2);
+}

app/controllers/settings/saved_searches_controller.rb

@@ -22,9 +22,15 @@ def create
       @saved_search = current_user.saved_searches.build(saved_search_params)
       @saved_search.scope = "user"
       if @saved_search.save
-        redirect_to settings_saved_searches_path, notice: "Saved search created"
+        respond_to do |format|
+          format.html { redirect_to settings_saved_searches_path, notice: "Saved search created" }
+          format.json { render json: { redirect_url: search_topics_path(saved_search_id: @saved_search.id) } }
+        end
       else
-        render :new, status: :unprocessable_entity
+        respond_to do |format|
+          format.html { render :new, status: :unprocessable_entity }
+          format.json { render json: { errors: @saved_search.errors.full_messages }, status: :unprocessable_entity }
+        end
       end
     end
 

app/controllers/topics_controller.rb

@@ -28,9 +28,24 @@ def index
 
   def new_topics_count
     @viewing_since = viewing_since_param
-    base_query = topics_base_query(search_query: params[:q])
+
+    search_query = if params[:saved_search_id].present?
+      base_scope = SavedSearch.visible_to(user_signed_in? ? current_user : nil)
+      saved_search = base_scope.find(params[:saved_search_id])
+      if params[:team_id].present? && saved_search.scope_team?
+        saved_search.resolve_query(team: Team.find(params[:team_id]))
+      else
+        saved_search.resolve_query
+      end
+    else
+      params[:q]
+    end
+
+    base_query = topics_base_query(search_query: search_query)
     @new_topics_count = count_new_topics(base_query, @viewing_since)
-    refresh_path = params[:q].present? ? search_topics_path(q: params[:q]) : topics_path
+
+    refresh_params = params[:saved_search_id].present? ? { saved_search_id: params[:saved_search_id], team_id: params[:team_id] }.compact : { q: params[:q] }
+    refresh_path = search_query.present? ? search_topics_path(**refresh_params) : topics_path
 
     render partial: "new_topics_banner", locals: { count: @new_topics_count, viewing_since: @viewing_since, refresh_path: refresh_path }
   end
@@ -202,7 +217,19 @@ def latest_patchset
   end
 
   def search
-    @search_query = params[:q].to_s.strip
+    if params[:saved_search_id].present?
+      base_scope = SavedSearch.visible_to(user_signed_in? ? current_user : nil)
+      @saved_search = base_scope.find(params[:saved_search_id])
+      if params[:team_id].present? && @saved_search.scope_team?
+        @saved_search_team = Team.find(params[:team_id])
+        @search_query = @saved_search.resolve_query(team: @saved_search_team)
+      else
+        @search_query = @saved_search.resolve_query
+      end
+    else
+      @search_query = params[:q].to_s.strip
+    end
+
     @viewing_since = viewing_since_param
     @new_topics_count = 0
 

app/javascript/controllers/save_search_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["form", "nameInput"]
+  static values = { url: String }
+
+  toggle() {
+    this.formTarget.classList.toggle("is-hidden")
+    if (!this.formTarget.classList.contains("is-hidden")) {
+      this.nameInputTarget.focus()
+    }
+  }
+
+  async submit(event) {
+    event.preventDefault()
+    const form = event.target.closest("form") || event.target
+    const formData = new FormData(form)
+
+    const response = await fetch(this.urlValue, {
+      method: "POST",
+      headers: {
+        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content,
+        "Accept": "application/json"
+      },
+      body: formData
+    })
+
+    if (response.ok) {
+      const data = await response.json()
+      window.location.href = data.redirect_url
+    } else {
+      const data = await response.json().catch(() => null)
+      const message = data?.errors?.join(", ") || "Failed to save search"
+      this.formTarget.insertAdjacentHTML("beforeend", `<p class="save-search-error">${message}</p>`)
+    }
+  }
+}

app/views/topics/_sidebar.html.slim

@@ -27,15 +27,16 @@
       .sidebar-section
         h3.sidebar-heading Saved searches
         .sidebar-content
-          - active_search = params[:q]
+          - active_ss_id = params[:saved_search_id]&.to_i
+          - active_team_id = params[:team_id]&.to_i
 
           - global_searches = @saved_searches.select(&:scope_global?)
           - if global_searches.any?
             .filter-subsection
               span.filter-subsection-label Global
               ul.quick-filters
                 - global_searches.each do |ss|
-                  li = link_to ss.name, search_topics_path(q: ss.query), class: ("quick-filter-link is-active" if active_search == ss.query)
+                  li = link_to ss.name, search_topics_path(saved_search_id: ss.id), class: ("quick-filter-link is-active" if active_ss_id == ss.id)
 
           - if user_signed_in?
             - user_searches = @saved_searches.select { |ss| ss.scope_user? && ss.user_id.present? }
@@ -46,7 +47,7 @@
                 span.filter-subsection-label My searches
                 ul.quick-filters
                   - all_user.each do |ss|
-                    li = link_to ss.name, search_topics_path(q: ss.query), class: ("quick-filter-link is-active" if active_search == ss.query)
+                    li = link_to ss.name, search_topics_path(saved_search_id: ss.id), class: ("quick-filter-link is-active" if active_ss_id == ss.id)
 
             - team_templates = @saved_searches.select { |ss| ss.scope_team? && ss.team_id.nil? }
             - team_specific = @saved_searches.select { |ss| ss.scope_team? && ss.team_id.present? }
@@ -58,7 +59,7 @@
                   span.filter-subsection-label = "#{team.name} searches"
                   ul.quick-filters
                     - all_team.each do |ss|
-                      li = link_to ss.name, search_topics_path(q: ss.resolve_query(team: team)), class: ("quick-filter-link is-active" if active_search == ss.resolve_query(team: team))
+                      li = link_to ss.name, search_topics_path(saved_search_id: ss.id, team_id: team.id), class: ("quick-filter-link is-active" if active_ss_id == ss.id && (!ss.scope_team? || active_team_id == team.id))
 
     - if user_signed_in? && @available_note_tags.present?
       .sidebar-section

app/views/topics/search.html.slim

@@ -2,8 +2,28 @@
 
 = render partial: "sidebar", locals: { available_note_tags: @available_note_tags, search_query: @search_query }
 
-#new-topics-banner data-controller="new-topics-banner" data-new-topics-banner-url-value=new_topics_count_topics_path(q: @search_query, viewing_since: @viewing_since.iso8601) data-new-topics-banner-interval-ms-value="180000"
-  = render partial: "new_topics_banner", locals: { count: @new_topics_count, viewing_since: @viewing_since, refresh_path: search_topics_path(q: @search_query) }
+- search_params = @saved_search ? { saved_search_id: @saved_search.id, team_id: @saved_search_team&.id }.compact : { q: @search_query }
+
+- if @saved_search
+  .saved-search-indicator
+    i.fas.fa-bookmark
+    span
+      |  Saved search:
+      strong<>  #{@saved_search.name}
+- elsif @search_query.present? && user_signed_in?
+  .save-search-prompt data-controller="save-search" data-save-search-url-value=settings_saved_searches_path
+    .save-search-toggle data-action="click->save-search#toggle"
+      i.far.fa-bookmark
+      span  Save this search
+    .save-search-form.is-hidden data-save-search-target="form"
+      = form_with url: settings_saved_searches_path, method: :post, data: { action: "submit->save-search#submit" } do |f|
+        .save-search-fields
+          = f.text_field "saved_search[name]", placeholder: "Name for this search...", class: "save-search-input", required: true, data: { "save-search-target": "nameInput" }
+          = f.hidden_field "saved_search[query]", value: @search_query
+          = f.submit "Save", class: "save-search-button"
+
+#new-topics-banner data-controller="new-topics-banner" data-new-topics-banner-url-value=new_topics_count_topics_path(**search_params, viewing_since: @viewing_since.iso8601) data-new-topics-banner-interval-ms-value="180000"
+  = render partial: "new_topics_banner", locals: { count: @new_topics_count, viewing_since: @viewing_since, refresh_path: search_topics_path(**search_params) }
 
 - if @search_error.present?
   .search-error
@@ -44,7 +64,7 @@
       - if @topics.size == 25
         - last_topic = @topics.last
         - cursor = "#{last_topic.last_activity.iso8601}_#{last_topic.id}"
-        = turbo_frame_tag "pagination", src: search_topics_path(q: @search_query, cursor: cursor, viewing_since: @viewing_since.iso8601, longpage: @current_longpage, format: :turbo_stream), loading: :lazy do
+        = turbo_frame_tag "pagination", src: search_topics_path(**search_params, cursor: cursor, viewing_since: @viewing_since.iso8601, longpage: @current_longpage, format: :turbo_stream), loading: :lazy do
           .loading-indicator Loading more results...
       - else
         = turbo_frame_tag "pagination"

app/views/topics/search.turbo_stream.slim

@@ -6,11 +6,13 @@
   = turbo_stream.append "user-state-requests" do
     = turbo_frame_tag frame_id, src: user_state_frame_topics_path(topic_ids: @topics.map(&:id), format: :turbo_stream), loading: :eager
 
+- search_params = @saved_search ? { saved_search_id: @saved_search.id, team_id: @saved_search_team&.id }.compact : { q: @search_query }
+
 - if @topics.size == 25
   - last_topic = @topics.last
   - cursor = "#{last_topic.last_activity.iso8601}_#{last_topic.id}"
   = turbo_stream.replace "pagination" do
-    = turbo_frame_tag "pagination", src: search_topics_path(q: @search_query, cursor: cursor, viewing_since: @viewing_since.iso8601, longpage: @current_longpage, format: :turbo_stream), loading: :lazy do
+    = turbo_frame_tag "pagination", src: search_topics_path(**search_params, cursor: cursor, viewing_since: @viewing_since.iso8601, longpage: @current_longpage, format: :turbo_stream), loading: :lazy do
       .loading-indicator Loading more results...
 - elsif params[:cursor].present?
   = turbo_stream.remove "pagination"

spec/requests/settings/saved_searches_spec.rb

@@ -85,6 +85,21 @@ def sign_in(user)
       search = SavedSearch.last
       expect(search.scope).to eq("user")
     end
+
+    context "with JSON format" do
+      it "returns JSON with redirect_url on success" do
+        user = create(:user)
+        sign_in(user)
+
+        post settings_saved_searches_path,
+          params: { saved_search: { name: "My New Search", query: "from:me" } },
+          headers: { "Accept" => "application/json" }
+        expect(response).to have_http_status(:success)
+        json = JSON.parse(response.body)
+        saved = SavedSearch.last
+        expect(json["redirect_url"]).to include("saved_search_id=#{saved.id}")
+      end
+    end
   end
 
   describe "PATCH /settings/saved_searches/:id" do