From 44bb733b0867cb09ceac606bb96014f2417cda35 Mon Sep 17 00:00:00 2001
From: Yuriy Kurant <yuriy@discourse.org>
Date: Thu, 15 May 2025 16:41:44 +0800
Subject: [PATCH 1/4] Revert "UX: header search mobile support - follow up
 (#32306)"

This reverts commit ff334fde8e9b98af4b7ee540a3b23a87bcc88b6c.
---
 .../discourse/app/components/header.gjs       |  3 ---
 .../discourse/app/components/search-menu.gjs  |  8 +++---
 .../search-menu/advanced-button.gjs           |  2 +-
 .../components/search-menu/clear-button.gjs   | 17 +++++++-----
 .../app/modifiers/delayed-destroy.js          |  2 +-
 .../tests/acceptance/search-mobile-test.js    |  6 ++---
 .../stylesheets/common/base/menu-panel.scss   | 26 +++++++------------
 .../desktop/components/header-search.scss     |  2 +-
 8 files changed, 30 insertions(+), 36 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/header.gjs b/app/assets/javascripts/discourse/app/components/header.gjs
index 6a589d73fdce2..e71e5cf647de9 100644
--- a/app/assets/javascripts/discourse/app/components/header.gjs
+++ b/app/assets/javascripts/discourse/app/components/header.gjs
@@ -116,7 +116,6 @@ export default class GlimmerHeader extends Component {
   handleAnimationComplete() {
     this.hasClosingAnimation = false;
     this.search.visible = false;
-    this.toggleBodyScrolling(false);
   }
 
   @action
@@ -170,11 +169,9 @@ export default class GlimmerHeader extends Component {
     }
 
     if (this.site.mobileView && this.search.visible) {
-      // hide is delayed for the duration of `search-slide-out` animation
       this.hasClosingAnimation = true;
     } else {
       this.search.visible = !this.search.visible;
-      this.toggleBodyScrolling(true);
     }
 
     if (!this.search.visible) {
diff --git a/app/assets/javascripts/discourse/app/components/search-menu.gjs b/app/assets/javascripts/discourse/app/components/search-menu.gjs
index 5932d0c8806c8..4d16d984d83ec 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu.gjs
@@ -188,7 +188,9 @@ export default class SearchMenu extends Component {
   }
 
   @bind
-  clearSearch() {
+  clearSearch(e) {
+    e.stopPropagation();
+    e.preventDefault();
     this.search.activeGlobalSearchTerm = "";
     this.search.focusSearchInput();
     this.triggerSearch();
@@ -469,8 +471,8 @@ export default class SearchMenu extends Component {
           <DButton
             @action={{this.cancelMobileSearch}}
             @translatedLabel={{i18n "cancel_value"}}
-            class="btn-flat btn-cancel-mobile-search"
-            data-test-button="cancel-mobile-search"
+            class="btn-flat"
+            data-test-button="cancel-search-mobile"
           />
         {{/if}}
       </div>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
index 092dbe68e97d5..e9db1ad774df1 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
@@ -3,7 +3,7 @@ import { i18n } from "discourse-i18n";
 
 <template>
   <DButton
-    class="btn-transparent show-advanced-search"
+    class="show-advanced-search btn-transparent"
     data-test-button="show-advanced-search"
     title={{i18n "search.open_advanced"}}
     @action={{@openAdvancedSearch}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
index 8d09bb1509c23..79d67e7a553a1 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
@@ -1,13 +1,16 @@
-import DButton from "discourse/components/d-button";
+import { on } from "@ember/modifier";
+import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
 <template>
-  <DButton
-    class="btn-transparent clear-search"
-    data-test-button="clear-search-input"
+  <a
+    class="clear-search"
+    data-test-anchor="clear-search-input"
     aria-label="clear_input"
     title={{i18n "search.clear_search"}}
-    @action={{@clearSearch}}
-    @icon="xmark"
-  />
+    href
+    {{on "click" @clearSearch}}
+  >
+    {{icon "xmark"}}
+  </a>
 </template>
diff --git a/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js b/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
index b9235ad4a6185..5fb7fa67b83d1 100644
--- a/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
+++ b/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
@@ -15,7 +15,7 @@ export default modifier(
   (
     element,
     posArgs,
-    { animate = false, onComplete = () => {}, elementSelector, delay = 200 }
+    { animate = false, onComplete = () => {}, elementSelector, delay = 300 }
   ) => {
     if (animate) {
       const targetEl = elementSelector
diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
index bd914b8f5b784..d394623fc933c 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
@@ -52,7 +52,7 @@ acceptance("Search - Mobile", function (needs) {
         "search results are listed on search value present"
       );
 
-      await click('[data-test-button="clear-search-input"]');
+      await click('[data-test-anchor="clear-search-input"]');
 
       assert
         .dom('[data-test-selector="search-menu-results"]')
@@ -64,7 +64,7 @@ acceptance("Search - Mobile", function (needs) {
     test("with empty input search", async function (assert) {
       await visit("/");
       await click("#search-button");
-      await click('[data-test-button="cancel-mobile-search"]');
+      await click('[data-test-button="cancel-search-mobile"]');
 
       assert
         .dom('[data-test-selector="menu-panel"]')
@@ -82,7 +82,7 @@ acceptance("Search - Mobile", function (needs) {
         "search results are listed on search value present"
       );
 
-      await click('[data-test-button="cancel-mobile-search"]');
+      await click('[data-test-button="cancel-search-mobile"]');
       await click("#search-button");
 
       assert.dom('[data-test-input="search-term"]').hasNoValue();
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 6f8a2a77a5fcf..69d24fa006efe 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -244,44 +244,36 @@
     &.search-menu-panel {
       width: 100vw;
       max-width: 100vw;
-      padding: 0;
-      transform-origin: 66%;
-      transition: height 0.2s ease-in;
 
       &.empty-panel {
-        height: 4rem;
+        height: auto;
       }
 
       &.slide-in {
-        animation: search-slide-in 0.2s ease-out forwards;
+        animation: search-slidein 0.3s ease-out forwards;
       }
 
       &.is-destroying {
-        animation: search-slide-out 0.2s ease-in forwards;
+        animation: search-slideout 0.3s ease-in forwards;
       }
 
-      @keyframes search-slide-in {
+      @keyframes search-slidein {
         from {
           opacity: 0;
-          transform: scaleX(0);
+          transform: translateY(-100%);
         }
       }
 
-      @keyframes search-slide-out {
-        from {
-          transform: scaleX(1);
+      @keyframes search-slideout {
+        80% {
           opacity: 1;
         }
 
-        to {
+        100% {
           opacity: 0;
-          transform: scaleX(0);
+          transform: translateY(-100%);
         }
       }
-
-      .btn-cancel-mobile-search {
-        align-self: stretch;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/desktop/components/header-search.scss b/app/assets/stylesheets/desktop/components/header-search.scss
index 7c6d3f1c828fd..8497aa2cb3c24 100644
--- a/app/assets/stylesheets/desktop/components/header-search.scss
+++ b/app/assets/stylesheets/desktop/components/header-search.scss
@@ -74,7 +74,7 @@
             justify-content: flex-end;
 
             .show-advanced-search,
-            .clear-search {
+            a.clear-search {
               display: inline-flex;
               align-items: center;
             }

From fa35a362a841e459da27db4a5c126c4eb231cff1 Mon Sep 17 00:00:00 2001
From: Yuriy Kurant <yuriy@discourse.org>
Date: Thu, 15 May 2025 18:27:33 +0800
Subject: [PATCH 2/4] Revert "UX: header search mobile support (#31711)"

This reverts commit 8b5da219d805bd8668e77a6bab7f1ada96d736c8.
---
 .../discourse/app/components/header.gjs       |  43 ++---
 .../components/header/search-menu-wrapper.gjs |   6 +-
 .../discourse/app/components/menu-panel.gjs   |   6 +-
 .../app/components/search-menu-panel.gjs      |   7 +-
 .../discourse/app/components/search-menu.gjs  | 151 +++++++-----------
 .../components/search-menu/active-filters.gjs |  30 ----
 .../search-menu/advanced-button.gjs           |   6 +-
 .../components/search-menu/clear-button.gjs   |   6 +-
 .../search-menu/mobile-search-button.gjs      |  12 --
 .../app/components/search-menu/results.gjs    |  32 +---
 .../search-menu/results/assistant-item.gjs    |   2 -
 .../search-menu/results/assistant.gjs         |  15 +-
 .../search-menu/results/initial-options.gjs   |  39 ++---
 .../search-menu/results/more-link.gjs         |   1 -
 .../search-menu/results/random-quick-tip.gjs  |   2 +-
 .../search-menu/results/recent-searches.gjs   |   3 +-
 .../components/search-menu/results/types.gjs  |   3 +-
 .../components/search-menu/search-term.gjs    |   5 +-
 .../app/modifiers/delayed-destroy.js          |  32 ----
 .../discourse/app/services/search.js          |   2 +-
 .../tests/acceptance/search-mobile-test.js    | 135 +---------------
 .../discourse/tests/acceptance/search-test.js |   7 +-
 .../components/search-menu-test.gjs           |   7 +-
 .../modifiers/delayed-destroy-test.gjs        |  58 -------
 .../stylesheets/common/base/menu-panel.scss   |  37 -----
 .../stylesheets/common/base/search-menu.scss  |  40 ++---
 spec/support/shared_examples/core_features.rb |   2 -
 spec/system/page_objects/pages/search.rb      |   6 +-
 spec/system/search_spec.rb                    |   4 -
 .../system/user_page/user_page_search_spec.rb |   1 -
 30 files changed, 138 insertions(+), 562 deletions(-)
 delete mode 100644 app/assets/javascripts/discourse/app/components/search-menu/active-filters.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/components/search-menu/mobile-search-button.gjs
 delete mode 100644 app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
 delete mode 100644 app/assets/javascripts/discourse/tests/integration/modifiers/delayed-destroy-test.gjs

diff --git a/app/assets/javascripts/discourse/app/components/header.gjs b/app/assets/javascripts/discourse/app/components/header.gjs
index e71e5cf647de9..7470b635e6de4 100644
--- a/app/assets/javascripts/discourse/app/components/header.gjs
+++ b/app/assets/javascripts/discourse/app/components/header.gjs
@@ -10,7 +10,7 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import DAG from "discourse/lib/dag";
 import scrollLock from "discourse/lib/scroll-lock";
 import { scrollTop } from "discourse/lib/scroll-top";
-import delayedDestroy from "discourse/modifiers/delayed-destroy";
+import DiscourseURL from "discourse/lib/url";
 import AuthButtons from "./header/auth-buttons";
 import Contents from "./header/contents";
 import HamburgerDropdownWrapper from "./header/hamburger-dropdown-wrapper";
@@ -48,7 +48,7 @@ export default class GlimmerHeader extends Component {
   @service appEvents;
   @service header;
 
-  @tracked hasClosingAnimation = false;
+  @tracked skipSearchContext = this.site.mobileView;
 
   appEventsListeners = modifierFn(() => {
     this.appEvents.on(
@@ -112,12 +112,6 @@ export default class GlimmerHeader extends Component {
     };
   });
 
-  @action
-  handleAnimationComplete() {
-    this.hasClosingAnimation = false;
-    this.search.visible = false;
-  }
-
   @action
   closeCurrentMenu() {
     if (this.search.visible) {
@@ -159,21 +153,23 @@ export default class GlimmerHeader extends Component {
 
   @action
   toggleSearchMenu() {
-    if (
-      this.site.mobileView &&
-      this.router.currentRouteName === "full-page-search"
-    ) {
-      scrollTop();
-      document.querySelector(".full-page-search").focus();
-      return false;
-    }
+    if (this.site.mobileView) {
+      const context = this.search.searchContext;
+      let params = "";
+      if (context) {
+        params = `?context=${context.type}&context_id=${context.id}&skip_context=${this.skipSearchContext}`;
+      }
 
-    if (this.site.mobileView && this.search.visible) {
-      this.hasClosingAnimation = true;
-    } else {
-      this.search.visible = !this.search.visible;
+      if (this.router.currentRouteName === "full-page-search") {
+        scrollTop();
+        document.querySelector(".full-page-search").focus();
+        return false;
+      } else {
+        return DiscourseURL.routeTo("/search" + params);
+      }
     }
 
+    this.search.visible = !this.search.visible;
     if (!this.search.visible) {
       this.search.highlightTerm = "";
       this.search.inTopicContext = false;
@@ -300,13 +296,8 @@ export default class GlimmerHeader extends Component {
           {{#if this.search.visible}}
             <SearchMenuWrapper
               @closeSearchMenu={{this.toggleSearchMenu}}
-              @searchInputId="icon-search-input"
               {{this.handleFocus}}
-              {{delayedDestroy
-                animate=this.hasClosingAnimation
-                elementSelector=".menu-panel.search-menu-panel.slide-in"
-                onComplete=this.handleAnimationComplete
-              }}
+              @searchInputId="icon-search-input"
             />
           {{else if this.header.hamburgerVisible}}
             <HamburgerDropdownWrapper
diff --git a/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs b/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs
index 2b11285a5fca7..925a96529f4d4 100644
--- a/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs
@@ -1,10 +1,12 @@
 import SearchMenuPanel from "../search-menu-panel";
 
-<template>
+const SearchMenuWrapper = <template>
   <div class="search-menu glimmer-search-menu" aria-live="polite" ...attributes>
     <SearchMenuPanel
       @searchInputId={{@searchInputId}}
       @closeSearchMenu={{@closeSearchMenu}}
     />
   </div>
-</template>
+</template>;
+
+export default SearchMenuWrapper;
diff --git a/app/assets/javascripts/discourse/app/components/menu-panel.gjs b/app/assets/javascripts/discourse/app/components/menu-panel.gjs
index fd9cff4f76513..5a7acec8001d6 100644
--- a/app/assets/javascripts/discourse/app/components/menu-panel.gjs
+++ b/app/assets/javascripts/discourse/app/components/menu-panel.gjs
@@ -1,10 +1,9 @@
 import concatClass from "discourse/helpers/concat-class";
 
-<template>
+const MenuPanel = <template>
   <div
     class={{concatClass "menu-panel" @panelClass @animationClass}}
     data-max-width="500"
-    data-test-selector="menu-panel"
   >
     <div class="panel-body">
       <div class="panel-body-contents">
@@ -12,4 +11,5 @@ import concatClass from "discourse/helpers/concat-class";
       </div>
     </div>
   </div>
-</template>
+</template>;
+export default MenuPanel;
diff --git a/app/assets/javascripts/discourse/app/components/search-menu-panel.gjs b/app/assets/javascripts/discourse/app/components/search-menu-panel.gjs
index 71b70c4f968c0..28a2fa2c02493 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu-panel.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu-panel.gjs
@@ -2,10 +2,8 @@ import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import MenuPanel from "discourse/components/menu-panel";
 import SearchMenu from "discourse/components/search-menu";
-import concatClass from "discourse/helpers/concat-class";
 
 export default class SearchMenuPanel extends Component {
-  @service search;
   @service site;
 
   get animationClass() {
@@ -17,10 +15,7 @@ export default class SearchMenuPanel extends Component {
   <template>
     <MenuPanel
       @animationClass={{this.animationClass}}
-      @panelClass={{concatClass
-        "search-menu-panel"
-        (unless this.search.activeGlobalSearchTerm "empty-panel")
-      }}
+      @panelClass="search-menu-panel"
     >
       <SearchMenu
         @onClose={{@closeSearchMenu}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu.gjs b/app/assets/javascripts/discourse/app/components/search-menu.gjs
index 4d16d984d83ec..de4f391ff2293 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu.gjs
@@ -10,10 +10,8 @@ import { Promise } from "rsvp";
 import DButton from "discourse/components/d-button";
 import MenuPanel from "discourse/components/menu-panel";
 import PluginOutlet from "discourse/components/plugin-outlet";
-import ActiveFilters from "discourse/components/search-menu/active-filters";
 import AdvancedButton from "discourse/components/search-menu/advanced-button";
 import ClearButton from "discourse/components/search-menu/clear-button";
-import MobileSearchButton from "discourse/components/search-menu/mobile-search-button";
 import Results from "discourse/components/search-menu/results";
 import SearchTerm from "discourse/components/search-menu/search-term";
 import concatClass from "discourse/helpers/concat-class";
@@ -31,7 +29,6 @@ import {
 } from "discourse/lib/search";
 import DiscourseURL from "discourse/lib/url";
 import userSearch from "discourse/lib/user-search";
-import { i18n } from "discourse-i18n";
 
 const CATEGORY_SLUG_REGEXP = /(\#[a-zA-Z0-9\-:]*)$/gi;
 const USERNAME_REGEXP = /(\@[a-zA-Z0-9\-\_]*)$/gi;
@@ -42,12 +39,12 @@ export const DEFAULT_TYPE_FILTER = "exclude_topics";
 export default class SearchMenu extends Component {
   @service search;
   @service currentUser;
-  @service site;
   @service siteSettings;
   @service appEvents;
 
   @tracked loading = false;
-  @tracked inPMInboxContext = this.search.contextType === "private_messages";
+  @tracked
+  inPMInboxContext = this.search.searchContext?.type === "private_messages";
   @tracked typeFilter = DEFAULT_TYPE_FILTER;
   @tracked suggestionKeyword = false;
   @tracked suggestionResults = [];
@@ -116,10 +113,6 @@ export default class SearchMenu extends Component {
     return false;
   }
 
-  get inHeaderMobileView() {
-    return this.args.location === "header" && this.site.mobileView;
-  }
-
   @action
   onKeydown(event) {
     if (event.key === "Escape") {
@@ -215,12 +208,6 @@ export default class SearchMenu extends Component {
     }
   }
 
-  @action
-  mobileSearch() {
-    this.updateTypeFilter(null);
-    this.triggerSearch();
-  }
-
   @action
   updateTypeFilter(value) {
     this.typeFilter = value;
@@ -232,19 +219,8 @@ export default class SearchMenu extends Component {
   }
 
   @action
-  cancelMobileSearch() {
-    this.close();
-
-    if (this.search.inTopicContext) {
-      this.search.inTopicContext = false;
-    }
-
-    this.clearPMInboxContext();
-
-    if (this.search.activeGlobalSearchTerm) {
-      this.search.activeGlobalSearchTerm = "";
-      this.triggerSearch();
-    }
+  clearTopicContext() {
+    this.search.inTopicContext = false;
   }
 
   // for cancelling debounced search
@@ -311,14 +287,17 @@ export default class SearchMenu extends Component {
     this.suggestionKeyword = false;
 
     if (!this.search.activeGlobalSearchTerm) {
-      this.abortPerform({
-        noResults: this.site.mobileView,
-        invalidTerm: false,
-      });
+      this.search.noResults = false;
+      this.search.results = {};
+      this.loading = false;
+      this.invalidTerm = false;
     } else if (
       !isValidSearchTerm(this.search.activeGlobalSearchTerm, this.siteSettings)
     ) {
-      this.abortPerform({ noResults: true, invalidTerm: true });
+      this.search.noResults = true;
+      this.search.results = {};
+      this.loading = false;
+      this.invalidTerm = true;
     } else {
       this.loading = true;
       this.invalidTerm = false;
@@ -379,14 +358,6 @@ export default class SearchMenu extends Component {
     return false;
   }
 
-  abortPerform({ noResults, invalidTerm }) {
-    this.search.noResults = noResults;
-    this.invalidTerm = invalidTerm;
-    this.search.results = {};
-    this.loading = false;
-    this.typeFilter = DEFAULT_TYPE_FILTER;
-  }
-
   @action
   triggerSearch() {
     this.search.noResults = false;
@@ -420,60 +391,58 @@ export default class SearchMenu extends Component {
       {{! template-lint-disable no-invalid-interactive }}
       {{on "keydown" this.onKeydown}}
     >
-      <div class="search-input-wrapper">
-        <div
-          class={{concatClass
-            "search-input"
-            (concat "search-input--" @location)
-          }}
-        >
-          {{#if this.inHeaderMobileView}}
-            <MobileSearchButton @onTap={{this.mobileSearch}} />
-          {{else}}
-            <ActiveFilters
-              @inPMInboxContext={{this.inPMInboxContext}}
-              @clearPMInboxContext={{this.clearPMInboxContext}}
-            />
-          {{/if}}
-
-          <PluginOutlet
-            @name="search-menu-before-term-input"
-            @outletArgs={{hash openSearchMenu=this.open}}
+      <div
+        class={{concatClass "search-input" (concat "search-input--" @location)}}
+      >
+        {{#if this.search.inTopicContext}}
+          <DButton
+            @icon="xmark"
+            @label="search.in_this_topic"
+            @title="search.in_this_topic_tooltip"
+            @action={{this.clearTopicContext}}
+            class="btn-small search-context"
           />
-
-          <SearchTerm
-            @searchTermChanged={{this.searchTermChanged}}
-            @typeFilter={{this.typeFilter}}
-            @updateTypeFilter={{this.updateTypeFilter}}
-            @triggerSearch={{this.triggerSearch}}
-            @fullSearch={{this.fullSearch}}
-            @clearPMInboxContext={{this.clearPMInboxContext}}
-            @closeSearchMenu={{this.close}}
-            @openSearchMenu={{this.open}}
-            @autofocus={{@autofocusInput}}
-            @inputId={{this.searchInputId}}
-            data-test-input="search-term"
+        {{else if this.inPMInboxContext}}
+          <DButton
+            @icon="xmark"
+            @label="search.in_messages"
+            @title="search.in_messages_tooltip"
+            @action={{this.clearPMInboxContext}}
+            class="btn-small search-context"
           />
+        {{/if}}
+
+        <PluginOutlet
+          @name="search-menu-before-term-input"
+          @outletArgs={{hash openSearchMenu=this.open}}
+        />
+
+        <SearchTerm
+          @searchTermChanged={{this.searchTermChanged}}
+          @typeFilter={{this.typeFilter}}
+          @updateTypeFilter={{this.updateTypeFilter}}
+          @triggerSearch={{this.triggerSearch}}
+          @fullSearch={{this.fullSearch}}
+          @clearPMInboxContext={{this.clearPMInboxContext}}
+          @clearTopicContext={{this.clearTopicContext}}
+          @closeSearchMenu={{this.close}}
+          @openSearchMenu={{this.open}}
+          @autofocus={{@autofocusInput}}
+          @inputId={{this.searchInputId}}
+        />
 
+        {{#if this.loading}}
           <div class="searching">
-            {{#if this.loading}}
-              {{loadingSpinner}}
-            {{else}}
-              <PluginOutlet @name="search-menu-before-advanced-search" />
-              {{#if this.search.activeGlobalSearchTerm}}
-                <ClearButton @clearSearch={{this.clearSearch}} />
-              {{/if}}
-              <AdvancedButton @openAdvancedSearch={{this.openAdvancedSearch}} />
+            {{loadingSpinner}}
+          </div>
+        {{else}}
+          <div class="searching">
+            <PluginOutlet @name="search-menu-before-advanced-search" />
+            {{#if this.search.activeGlobalSearchTerm}}
+              <ClearButton @clearSearch={{this.clearSearch}} />
             {{/if}}
+            <AdvancedButton @openAdvancedSearch={{this.openAdvancedSearch}} />
           </div>
-        </div>
-        {{#if this.inHeaderMobileView}}
-          <DButton
-            @action={{this.cancelMobileSearch}}
-            @translatedLabel={{i18n "cancel_value"}}
-            class="btn-flat"
-            data-test-button="cancel-search-mobile"
-          />
         {{/if}}
       </div>
 
@@ -486,8 +455,6 @@ export default class SearchMenu extends Component {
           @suggestionResults={{this.suggestionResults}}
           @searchTopics={{this.includesTopics}}
           @inPMInboxContext={{this.inPMInboxContext}}
-          @inHeaderMobileView={{this.inHeaderMobileView}}
-          @clearPMInboxContext={{this.clearPMInboxContext}}
           @triggerSearch={{this.triggerSearch}}
           @updateTypeFilter={{this.updateTypeFilter}}
           @closeSearchMenu={{this.close}}
@@ -504,8 +471,6 @@ export default class SearchMenu extends Component {
             @suggestionResults={{this.suggestionResults}}
             @searchTopics={{this.includesTopics}}
             @inPMInboxContext={{this.inPMInboxContext}}
-            @inHeaderMobileView={{this.inHeaderMobileView}}
-            @clearPMInboxContext={{this.clearPMInboxContext}}
             @triggerSearch={{this.triggerSearch}}
             @updateTypeFilter={{this.updateTypeFilter}}
             @closeSearchMenu={{this.close}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/active-filters.gjs b/app/assets/javascripts/discourse/app/components/search-menu/active-filters.gjs
deleted file mode 100644
index 3ec95d564955a..0000000000000
--- a/app/assets/javascripts/discourse/app/components/search-menu/active-filters.gjs
+++ /dev/null
@@ -1,30 +0,0 @@
-import Component from "@glimmer/component";
-import { fn } from "@ember/helper";
-import { service } from "@ember/service";
-import DButton from "discourse/components/d-button";
-
-export default class ActiveFilters extends Component {
-  @service search;
-
-  <template>
-    {{#if this.search.inTopicContext}}
-      <DButton
-        @icon="xmark"
-        @label="search.in_this_topic"
-        @title="search.in_this_topic_tooltip"
-        @action={{fn (mut this.search.inTopicContext) false}}
-        class="btn-small search-context"
-        data-test-button="search-in-this-topic"
-      />
-    {{else if @inPMInboxContext}}
-      <DButton
-        @icon="xmark"
-        @label="search.in_messages"
-        @title="search.in_messages_tooltip"
-        @action={{@clearPMInboxContext}}
-        class="btn-small search-context"
-        data-test-button="search-in-messages"
-      />
-    {{/if}}
-  </template>
-}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
index e9db1ad774df1..77940b1aba6e5 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
@@ -1,12 +1,12 @@
 import DButton from "discourse/components/d-button";
 import { i18n } from "discourse-i18n";
 
-<template>
+const AdvancedButton = <template>
   <DButton
     class="show-advanced-search btn-transparent"
-    data-test-button="show-advanced-search"
     title={{i18n "search.open_advanced"}}
     @action={{@openAdvancedSearch}}
     @icon="sliders"
   />
-</template>
+</template>;
+export default AdvancedButton;
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
index 79d67e7a553a1..b70375e06ddf3 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
@@ -2,10 +2,9 @@ import { on } from "@ember/modifier";
 import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
-<template>
+const ClearButton = <template>
   <a
     class="clear-search"
-    data-test-anchor="clear-search-input"
     aria-label="clear_input"
     title={{i18n "search.clear_search"}}
     href
@@ -13,4 +12,5 @@ import { i18n } from "discourse-i18n";
   >
     {{icon "xmark"}}
   </a>
-</template>
+</template>;
+export default ClearButton;
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/mobile-search-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/mobile-search-button.gjs
deleted file mode 100644
index 597b70af55417..0000000000000
--- a/app/assets/javascripts/discourse/app/components/search-menu/mobile-search-button.gjs
+++ /dev/null
@@ -1,12 +0,0 @@
-import DButton from "discourse/components/d-button";
-import { i18n } from "discourse-i18n";
-
-<template>
-  <DButton
-    class="mobile-search-button btn-transparent"
-    title={{i18n "search.title"}}
-    data-test-button="mobile-search"
-    @action={{@onTap}}
-    @icon="magnifying-glass"
-  />
-</template>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results.gjs
index 56de02cedc5a6..16cc1a899a81f 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results.gjs
@@ -1,15 +1,14 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { hash } from "@ember/helper";
 import { service } from "@ember/service";
-import { and, not, or } from "truth-helpers";
+import { and, not } from "truth-helpers";
 import ConditionalLoadingSection from "discourse/components/conditional-loading-section";
 import PluginOutlet from "discourse/components/plugin-outlet";
-import ActiveFilters from "discourse/components/search-menu/active-filters";
 import Assistant from "discourse/components/search-menu/results/assistant";
 import InitialOptions from "discourse/components/search-menu/results/initial-options";
 import MoreLink from "discourse/components/search-menu/results/more-link";
 import Types from "discourse/components/search-menu/results/types";
-import concatClass from "discourse/helpers/concat-class";
 import { i18n } from "discourse-i18n";
 import CategoryViewComponent from "./results/type/category";
 import GroupViewComponent from "./results/type/group";
@@ -30,6 +29,8 @@ const SEARCH_RESULTS_COMPONENT_TYPE = {
 export default class Results extends Component {
   @service search;
 
+  @tracked searchTopics = this.args.searchTopics;
+
   get renderInitialOptions() {
     return !this.search.activeGlobalSearchTerm && !this.args.inPMInboxContext;
   }
@@ -62,30 +63,9 @@ export default class Results extends Component {
   }
 
   <template>
-    {{#if
-      (and
-        @inHeaderMobileView (or this.search.inTopicContext @inPMInboxContext)
-      )
-    }}
-      <ActiveFilters
-        @inPMInboxContext={{@inPMInboxContext}}
-        @clearPMInboxContext={{@clearPMInboxContext}}
-      />
-    {{/if}}
-
     {{#unless this.inTopicContext}}
       <ConditionalLoadingSection @isLoading={{this.loading}}>
-        <div
-          class={{concatClass
-            "results"
-            (if
-              (and @inHeaderMobileView this.search.activeGlobalSearchTerm)
-              "with-search-term"
-            )
-            (if this.search.contextType "has-context")
-          }}
-          data-test-selector="search-menu-results"
-        >
+        <div class="results">
           <PluginOutlet
             @name="search-menu-results-top"
             @outletArgs={{hash
@@ -109,7 +89,6 @@ export default class Results extends Component {
           {{else if this.renderInitialOptions}}
             <InitialOptions
               @searchInputId={{@searchInputId}}
-              @inHeaderMobileView={{@inHeaderMobileView}}
               @closeSearchMenu={{@closeSearchMenu}}
               @searchTermChanged={{@searchTermChanged}}
             />
@@ -118,7 +97,6 @@ export default class Results extends Component {
               {{! render the first couple suggestions before a search has been performed}}
               <InitialOptions
                 @searchInputId={{@searchInputId}}
-                @inHeaderMobileView={{@inHeaderMobileView}}
                 @closeSearchMenu={{@closeSearchMenu}}
                 @searchTermChanged={{@searchTermChanged}}
               />
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/assistant-item.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/assistant-item.gjs
index afe00d52b5be6..7562f92343263 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/assistant-item.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/assistant-item.gjs
@@ -23,7 +23,6 @@ export function resetItemSelectCallbacks() {
 
 export default class AssistantItem extends Component {
   @service search;
-  @service site;
   @service appEvents;
 
   icon = this.args.icon || "magnifying-glass";
@@ -135,7 +134,6 @@ export default class AssistantItem extends Component {
     {{! template-lint-disable no-pointer-down-event-binding }}
     {{! template-lint-disable no-invalid-interactive }}
     <li
-      ...attributes
       class={{concatClass @typeClass "search-menu-assistant-item"}}
       {{on "keydown" this.onKeydown}}
       {{on "click" this.onClick}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/assistant.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/assistant.gjs
index 579974e3a1b27..8a7c954bfccc1 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/assistant.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/assistant.gjs
@@ -132,7 +132,7 @@ export default class Assistant extends Component {
         <PluginOutlet
           @name="search-menu-results-assistant-tag-intersection-top"
         />
-        {{#each @results as |result index|}}
+        {{#each @results as |result|}}
           <AssistantItem
             @tag={{result.tagName}}
             @additionalTags={{result.additionalTags}}
@@ -144,14 +144,13 @@ export default class Assistant extends Component {
             @searchTermChanged={{@searchTermChanged}}
             @suggestionKeyword={{@suggestionKeyword}}
             @typeClass="tag-intersection"
-            data-test-assistant-item="result-category-{{index}}"
           />
         {{/each}}
       {{else if (eq this.suggestionType "categoryOrTag")}}
         <PluginOutlet
           @name="search-menu-results-assistant-category-or-tag-top"
         />
-        {{#each @results as |result index|}}
+        {{#each @results as |result|}}
           {{#if result.model}}
             {{! render category }}
             <AssistantItem
@@ -162,7 +161,6 @@ export default class Assistant extends Component {
               @searchTermChanged={{@searchTermChanged}}
               @suggestionKeyword={{@suggestionKeyword}}
               @typeClass="category"
-              data-test-assistant-item="result-model-{{index}}"
             />
           {{else}}
             {{! render tag }}
@@ -174,7 +172,6 @@ export default class Assistant extends Component {
               @searchTermChanged={{@searchTermChanged}}
               @suggestionKeyword={{@suggestionKeyword}}
               @typeClass="tag"
-              data-test-assistant-item="result-name-{{index}}"
             />
           {{/if}}
         {{/each}}
@@ -190,7 +187,6 @@ export default class Assistant extends Component {
             @searchTermChanged={{@searchTermChanged}}
             @suggestionKeyword={{@suggestionKeyword}}
             @typeClass="user"
-            data-test-assistant-item="result-user-in-topics-posts"
           />
 
           <AssistantItem
@@ -200,10 +196,9 @@ export default class Assistant extends Component {
             @searchTermChanged={{@searchTermChanged}}
             @suggestionKeyword={{@suggestionKeyword}}
             @typeClass="user"
-            data-test-assistant-item="result-user-in-this-topic"
           />
         {{else}}
-          {{#each @results as |result index|}}
+          {{#each @results as |result|}}
             <AssistantItem
               @user={{result}}
               @slug={{concat this.prefix "@" result.username}}
@@ -211,7 +206,6 @@ export default class Assistant extends Component {
               @searchTermChanged={{@searchTermChanged}}
               @suggestionKeyword={{@suggestionKeyword}}
               @typeClass="user"
-              data-test-assistant-item="result-user-{{index}}"
             />
           {{/each}}
         {{/if}}
@@ -220,7 +214,7 @@ export default class Assistant extends Component {
           @name="search-menu-results-assistant-shortcut-top"
           @outletArgs={{hash suggestionShortcuts=this.suggestionShortcuts}}
         />
-        {{#each this.suggestionShortcuts as |item index|}}
+        {{#each this.suggestionShortcuts as |item|}}
           <AssistantItem
             @slug={{concat this.prefix item}}
             @label={{item}}
@@ -228,7 +222,6 @@ export default class Assistant extends Component {
             @searchTermChanged={{@searchTermChanged}}
             @suggestionKeyword={{@suggestionKeyword}}
             @typeClass="shortcut"
-            data-test-assistant-item="result-shortcut-{{index}}"
           />
         {{/each}}
       {{/if}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.gjs
index a1a176329d389..eaa9ca8f3261b 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/initial-options.gjs
@@ -1,7 +1,7 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import { service } from "@ember/service";
-import { and, not, or } from "truth-helpers";
+import { and, or } from "truth-helpers";
 import PluginOutlet from "discourse/components/plugin-outlet";
 import { MODIFIER_REGEXP } from "discourse/components/search-menu";
 import AssistantItem from "discourse/components/search-menu/results/assistant-item";
@@ -46,10 +46,6 @@ export default class InitialOptions extends Component {
     }
   }
 
-  get hideForEmptyMobileSearch() {
-    return this.args.inHeaderMobileView && !this.search.activeGlobalSearchTerm;
-  }
-
   get termMatchesContextTypeKeyword() {
     return this.search.activeGlobalSearchTerm?.match(MODIFIER_REGEXP);
   }
@@ -152,10 +148,7 @@ export default class InitialOptions extends Component {
   }
 
   <template>
-    <ul
-      class="search-menu-initial-options"
-      data-test-selector="search-menu-initial-options"
-    >
+    <ul class="search-menu-initial-options">
       <PluginOutlet
         @name="search-menu-initial-options"
         @outletArgs={{hash
@@ -178,7 +171,6 @@ export default class InitialOptions extends Component {
             @closeSearchMenu={{@closeSearchMenu}}
             @searchTermChanged={{@searchTermChanged}}
             @suggestionKeyword={{this.contextTypeKeyword}}
-            data-test-assistant-item="search-with-modifier"
           />
         {{else}}
           {{#if
@@ -192,31 +184,26 @@ export default class InitialOptions extends Component {
                 @extraHint={{true}}
                 @searchTermChanged={{@searchTermChanged}}
                 @suggestionKeyword={{this.contextTypeKeyword}}
-                data-test-assistant-item="search-in-topics-posts"
               />
             {{/if}}
 
             {{#if this.search.searchContext}}
-              {{#unless this.hideForEmptyMobileSearch}}
-                <this.contextTypeComponent
-                  @slug={{this.slug}}
-                  @suggestionKeyword={{this.contextTypeKeyword}}
-                  @results={{this.initialResults}}
-                  @withInLabel={{this.withInLabel}}
-                  @suffix={{this.suffix}}
-                  @label={{this.label}}
-                  @closeSearchMenu={{@closeSearchMenu}}
-                  @searchTermChanged={{@searchTermChanged}}
-                  data-test-context-item="context-type"
-                />
-              {{/unless}}
+              <this.contextTypeComponent
+                @slug={{this.slug}}
+                @suggestionKeyword={{this.contextTypeKeyword}}
+                @results={{this.initialResults}}
+                @withInLabel={{this.withInLabel}}
+                @suffix={{this.suffix}}
+                @label={{this.label}}
+                @closeSearchMenu={{@closeSearchMenu}}
+                @searchTermChanged={{@searchTermChanged}}
+              />
 
               {{#if
                 (and
                   this.currentUser
                   this.siteSettings.log_search_queries
                   this.displayInitialOptions
-                  (not @inHeaderMobileView)
                 )
               }}
                 <RecentSearches
@@ -225,7 +212,7 @@ export default class InitialOptions extends Component {
                 />
               {{/if}}
             {{/if}}
-          {{else if (not @inHeaderMobileView)}}
+          {{else}}
             <RandomQuickTip
               @searchInputId={{@searchInputId}}
               @searchTermChanged={{@searchTermChanged}}
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.gjs
index ae9edc238817b..546d5439a9681 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/more-link.gjs
@@ -55,7 +55,6 @@ export default class MoreLink extends Component {
             href={{this.moreUrl}}
             {{on "click" this.transitionToMoreUrl}}
             class="filter search-link"
-            data-test-anchor="show-more"
           >
             {{i18n "more"}}...
           </a>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.gjs
index d6adb98c0648a..d38ca488d6487 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/random-quick-tip.gjs
@@ -74,7 +74,7 @@ export default class RandomQuickTip extends Component {
   }
 
   <template>
-    <li class="search-random-quick-tip" data-test-item="random-quick-tip">
+    <li class="search-random-quick-tip">
       <button
         class={{concatClass
           "tip-label"
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.gjs
index bab4f8df08102..79d692215007a 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/recent-searches.gjs
@@ -61,7 +61,7 @@ export default class RecentSearches extends Component {
           />
         </div>
 
-        {{#each this.currentUser.recent_searches as |slug index|}}
+        {{#each this.currentUser.recent_searches as |slug|}}
           <AssistantItem
             @icon="clock-rotate-left"
             @label={{slug}}
@@ -70,7 +70,6 @@ export default class RecentSearches extends Component {
             @searchTermChanged={{@searchTermChanged}}
             @usage="recent-search"
             @concatSlug={{true}}
-            data-test-assistant-item="recent-search-{{index}}"
           />
         {{/each}}
       </div>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/results/types.gjs b/app/assets/javascripts/discourse/app/components/search-menu/results/types.gjs
index 3463ca206589c..4edbf0d8f9cb6 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/results/types.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/results/types.gjs
@@ -82,12 +82,11 @@ export default class Types extends Component {
           class="list"
           aria-label={{concat (i18n "search.results") " " resultType.type}}
         >
-          {{#each resultType.results as |result index|}}
+          {{#each resultType.results as |result|}}
             {{! template-lint-disable no-pointer-down-event-binding }}
             {{! template-lint-disable no-invalid-interactive }}
             <li
               class="item"
-              data-test-type-item="search-result-{{resultType.type}}-{{index}}"
               {{on
                 "keydown"
                 (fn this.onKeydown (hash resultType=resultType result=result))
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/search-term.gjs b/app/assets/javascripts/discourse/app/components/search-menu/search-term.gjs
index 8256dbfd11140..270e8bc090f58 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/search-term.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/search-term.gjs
@@ -91,9 +91,7 @@ export default class SearchTerm extends Component {
       if (!e.target.value) {
         // only clear context if we're not in the middle of a search
         if (this.searchCleared) {
-          if (this.search.inTopicContext) {
-            this.search.inTopicContext = false;
-          }
+          this.args.clearTopicContext();
           this.args.clearPMInboxContext();
           this.focus(e.target);
         }
@@ -114,7 +112,6 @@ export default class SearchTerm extends Component {
 
   <template>
     <input
-      ...attributes
       id={{@inputId}}
       class="search-term__input"
       type="search"
diff --git a/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js b/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
deleted file mode 100644
index 5fb7fa67b83d1..0000000000000
--- a/app/assets/javascripts/discourse/app/modifiers/delayed-destroy.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { modifier } from "ember-modifier";
-import discourseLater from "discourse/lib/later";
-
-/**
- * A modifier that handles delayed destruction of elements allowing animation to run.
- * @param {HTMLElement} element - The element to be modified
- * @param {Array} posArgs - Positional arguments (unused)
- * @param {Object} namedArgs - Named arguments
- * @param {boolean} [namedArgs.animate=false] - Whether to animate the destruction
- * @param {Function} [namedArgs.onComplete=()=>{}] - Callback function to execute after destruction
- * @param {string} [namedArgs.elementSelector] - Optional CSS selector to target a child element
- * @param {number} [namedArgs.delay=300] - Delay in milliseconds before completing destruction
- */
-export default modifier(
-  (
-    element,
-    posArgs,
-    { animate = false, onComplete = () => {}, elementSelector, delay = 300 }
-  ) => {
-    if (animate) {
-      const targetEl = elementSelector
-        ? element.querySelector(elementSelector)
-        : element;
-      targetEl?.classList.add("is-destroying");
-
-      discourseLater(() => {
-        targetEl?.classList.remove("is-destroying");
-        onComplete();
-      }, delay);
-    }
-  }
-);
diff --git a/app/assets/javascripts/discourse/app/services/search.js b/app/assets/javascripts/discourse/app/services/search.js
index 6b0460c07a6c7..7a0261e60992e 100644
--- a/app/assets/javascripts/discourse/app/services/search.js
+++ b/app/assets/javascripts/discourse/app/services/search.js
@@ -15,7 +15,7 @@ export default class Search extends Service {
   @tracked inTopicContext = false;
   @tracked visible = false;
   @tracked results = {};
-  @tracked noResults = false; // TODO: shouldn't `noResults` default value be `true`?
+  @tracked noResults = false;
   @tracked welcomeBannerSearchInViewport = false;
 
   // only relative for the widget search menu
diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
index d394623fc933c..a2595176d776b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/search-mobile-test.js
@@ -1,140 +1,15 @@
-import { click, fillIn, findAll, visit } from "@ember/test-helpers";
-import { module, test } from "qunit";
+import { click, fillIn, visit } from "@ember/test-helpers";
+import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
-import { i18n } from "discourse-i18n";
 
 acceptance("Search - Mobile", function (needs) {
   needs.mobileView();
-  needs.user();
 
-  module("search behaviour", function () {
-    test("on initial render (empty input search)", async function (assert) {
-      await visit("/");
-      await click("#search-button");
-
-      assert
-        .dom('[data-test-button="mobile-search"]')
-        .isVisible("should show search button");
-      assert
-        .dom('[data-test-item="random-quick-tip"]')
-        .doesNotExist("should not show random quick tip");
-      assert
-        .dom('[data-test-assistant-item^="recent-search-"]')
-        .doesNotExist("should not show recent search suggestions");
-      assert
-        .dom('[data-test-selector="search-menu-initial-options"]')
-        .hasNoText("should not render any contents inside initial options");
-    });
-
-    test("with search term present", async function (assert) {
-      await visit("/");
-      await click("#search-button");
-      await fillIn('[data-test-input="search-term"]', "find");
-
-      assert.strictEqual(
-        findAll('[data-test-type-item^="search-result-topic-"]').length,
-        5,
-        "search results are listed on search value present"
-      );
-      assert
-        .dom('[data-test-anchor="show-more"]')
-        .exists("should show 'Show more' link");
-    });
-
-    test("on search term clear", async function (assert) {
-      await visit("/");
-      await click("#search-button");
-      await fillIn('[data-test-input="search-term"]', "find");
-
-      assert.strictEqual(
-        findAll('[data-test-type-item^="search-result-topic-"]').length,
-        5,
-        "search results are listed on search value present"
-      );
-
-      await click('[data-test-anchor="clear-search-input"]');
-
-      assert
-        .dom('[data-test-selector="search-menu-results"]')
-        .hasNoText("search results should be empty");
-    });
-  });
-
-  module("cancel search", function () {
-    test("with empty input search", async function (assert) {
-      await visit("/");
-      await click("#search-button");
-      await click('[data-test-button="cancel-search-mobile"]');
-
-      assert
-        .dom('[data-test-selector="menu-panel"]')
-        .doesNotExist("cancel button should close search panel");
-    });
-
-    test("with search term present", async function (assert) {
-      await visit("/");
-      await click("#search-button");
-      await fillIn('[data-test-input="search-term"]', "search");
-
-      assert.strictEqual(
-        findAll('[data-test-type-item^="search-result-"]').length,
-        5,
-        "search results are listed on search value present"
-      );
-
-      await click('[data-test-button="cancel-search-mobile"]');
-      await click("#search-button");
-
-      assert.dom('[data-test-input="search-term"]').hasNoValue();
-      assert.strictEqual(
-        findAll('[data-test-type-item^="search-result-"]').length,
-        0,
-        "search results are reset"
-      );
-    });
-  });
-
-  module("filtered search", function () {
-    test("private message search scope - shows 'in messages' button when in an inbox", async function (assert) {
-      await visit("/u/charlie/messages");
-      await click("#search-button");
-
-      assert
-        .dom('[data-test-button="search-in-messages"]')
-        .isVisible('should show "in messages" filter selected');
-    });
-
-    test("initial options - topic search scope", async function (assert) {
-      await visit("/t/internationalization-localization/280");
-      await click("#search-button");
-      await fillIn("#icon-search-input", "sm");
-
-      assert
-        .dom('[data-test-assistant-item="search-in-topics-posts"]')
-        .includesText(
-          `sm ${i18n("search.in_topics_posts")} ${i18n("search.mobile_enter_hint")}`,
-          "should show mobile specific copy"
-        );
-      assert
-        .dom('[data-test-context-item="context-type"]')
-        .hasText(
-          `sm ${i18n("search.in_this_topic")}`,
-          "should show topic context suggestion"
-        );
-
-      await click('[data-test-context-item="context-type"]');
-
-      assert.dom('[data-test-context-item="context-type"]').doesNotExist();
-      assert
-        .dom('[data-test-button="search-in-this-topic"]')
-        .isVisible('should show "in topic" filter selected');
-    });
-  });
-
-  test("full page search", async function (assert) {
+  test("search", async function (assert) {
     await visit("/");
+
     await click("#search-button");
-    await click('[data-test-button="show-advanced-search"]');
+
     assert
       .dom("input.full-page-search")
       .exists("it shows the full page search form");
diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-test.js
index 46b32175e2848..191cf916fea05 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/search-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/search-test.js
@@ -63,15 +63,10 @@ acceptance("Search - Anonymous", function (needs) {
   test("random quick tips", async function (assert) {
     await visit("/");
     await click("#search-button");
-
-    assert
-      .dom('[data-test-item="random-quick-tip"]')
-      .isVisible("quick tip is shown by default");
-
     await fillIn("#icon-search-input", "dev");
 
     assert
-      .dom('[data-test-item="random-quick-tip"]')
+      .dom(".search-menu .results ul li.search-random-quick-tip")
       .doesNotExist("quick tip is no longer shown");
   });
 
diff --git a/app/assets/javascripts/discourse/tests/integration/components/search-menu-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/search-menu-test.gjs
index 986a80a1c376c..f80b0dd6b76fa 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/search-menu-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/search-menu-test.gjs
@@ -77,9 +77,10 @@ module("Integration | Component | search-menu", function (hooks) {
   test("clicking outside results hides and blurs input", async function (assert) {
     await render(
       <template>
-        <div id="click-me">
-          <SearchMenu @location="test" @searchInputId="icon-search-input" />
-        </div>
+        <div id="click-me"><SearchMenu
+            @location="test"
+            @searchInputId="icon-search-input"
+          /></div>
       </template>
     );
     await click("#icon-search-input");
diff --git a/app/assets/javascripts/discourse/tests/integration/modifiers/delayed-destroy-test.gjs b/app/assets/javascripts/discourse/tests/integration/modifiers/delayed-destroy-test.gjs
deleted file mode 100644
index 96f21dd6f4074..0000000000000
--- a/app/assets/javascripts/discourse/tests/integration/modifiers/delayed-destroy-test.gjs
+++ /dev/null
@@ -1,58 +0,0 @@
-import { renderSettled } from "@ember/renderer";
-import { render, waitFor } from "@ember/test-helpers";
-import { setupRenderingTest } from "ember-qunit";
-import { module, test } from "qunit";
-import delayedDestroy from "discourse/modifiers/delayed-destroy";
-
-module("Integration | Modifier | delayed-destroy", function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("does nothing with no properties provided", async function (assert) {
-    void render(
-      <template>
-        <div {{delayedDestroy}}></div>
-      </template>
-    );
-
-    await renderSettled();
-    assert.dom("div").doesNotHaveClass("is-destroying");
-  });
-
-  test("adds/removes `.is-destroying` class with animation", async function (assert) {
-    let hasAnimation = true;
-    const onComplete = () => (hasAnimation = false);
-
-    void render(
-      <template>
-        <div
-          {{delayedDestroy animate=hasAnimation onComplete=onComplete delay=10}}
-        ></div>
-      </template>
-    );
-
-    await renderSettled();
-    assert.dom("div").hasClass("is-destroying");
-
-    await waitFor("div:not(.is-destroying)", { timeout: 10 });
-
-    assert.dom("div").doesNotHaveClass("is-destroying");
-    assert.false(hasAnimation, "onComplete callback was executed");
-  });
-
-  test("works with elementSelector parameter", async function (assert) {
-    void render(
-      <template>
-        <div {{delayedDestroy animate=true elementSelector=".target" delay=10}}>
-          <span class="target">Target</span>
-          <span class="other">Other</span>
-        </div>
-      </template>
-    );
-
-    await renderSettled();
-    assert.dom(".target").hasClass("is-destroying");
-
-    await waitFor(".target:not(.is-destroying)", { timeout: 10 });
-    assert.dom(".target").doesNotHaveClass("is-destroying");
-  });
-});
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 69d24fa006efe..7bafa316eb9a8 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -239,43 +239,6 @@
 
 .search-menu .menu-panel {
   width: 500px;
-
-  @include viewport.until(sm) {
-    &.search-menu-panel {
-      width: 100vw;
-      max-width: 100vw;
-
-      &.empty-panel {
-        height: auto;
-      }
-
-      &.slide-in {
-        animation: search-slidein 0.3s ease-out forwards;
-      }
-
-      &.is-destroying {
-        animation: search-slideout 0.3s ease-in forwards;
-      }
-
-      @keyframes search-slidein {
-        from {
-          opacity: 0;
-          transform: translateY(-100%);
-        }
-      }
-
-      @keyframes search-slideout {
-        80% {
-          opacity: 1;
-        }
-
-        100% {
-          opacity: 0;
-          transform: translateY(-100%);
-        }
-      }
-    }
-  }
 }
 
 .user-menu.revamped {
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index 44df0ea0c7fe9..84f5702e3a23e 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@@ -35,21 +35,8 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
     overflow-y: auto;
   }
 
-  .search-input-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .search-menu-panel & {
-      @include viewport.from(sm) {
-        padding: $search-result-element-padding;
-      }
-    }
-  }
-
   .search-input {
     position: relative;
-    flex-grow: 1;
     display: flex;
     align-items: center;
     background: var(--d-input-bg-color);
@@ -61,17 +48,22 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
       background: none;
       border: 0;
       margin-bottom: 0;
-      width: 0;
-      flex: 1 1 auto;
+      width: auto;
+      flex-grow: 1;
 
       &:focus {
         outline: none;
       }
     }
 
-    @include viewport.until(sm) {
-      .mobile-search-button ~ input.search-term__input {
-        padding-inline: 0;
+    .btn.search-context {
+      margin: 2px;
+      margin-right: 0;
+      white-space: nowrap;
+      background-color: var(--primary-200);
+
+      &:hover {
+        background-color: var(--primary-medium);
       }
     }
 
@@ -133,19 +125,9 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
   .results {
     display: flex;
     flex-direction: column;
+    padding-top: $search-pad-vertical;
     border-radius: var(--d-border-radius);
 
-    @include viewport.until(sm) {
-      &.with-search-term {
-        padding-top: calc(var(--header-offset));
-      }
-
-      // temporary solution while waiting for dev to add conditional class
-      :has(.search-context) & {
-        padding-top: calc(var(--header-offset) + 2.25em);
-      }
-    }
-
     .heading {
       padding: 0.5em 0 0 1rem;
       display: flex;
diff --git a/spec/support/shared_examples/core_features.rb b/spec/support/shared_examples/core_features.rb
index 0b9ccf077e824..a39d70dcf97c7 100644
--- a/spec/support/shared_examples/core_features.rb
+++ b/spec/support/shared_examples/core_features.rb
@@ -170,7 +170,6 @@
           it "searches using the quick search" do
             visit("/")
             search_page.click_search_icon
-            expect(page).to have_css(".search-menu-container")
             search_page.type_in_search_menu(topics.first.title)
             search_page.click_search_menu_link
             expect(search_page).to have_topic_title_for_first_search_result(topics.first.title)
@@ -196,7 +195,6 @@
           it "searches using the quick search" do
             visit("/")
             search_page.click_search_icon
-            expect(page).to have_css(".search-menu-container")
             search_page.type_in_search_menu(topics.first.title)
             search_page.click_search_menu_link
             expect(search_page).to have_topic_title_for_first_search_result(topics.first.title)
diff --git a/spec/system/page_objects/pages/search.rb b/spec/system/page_objects/pages/search.rb
index 8ae8eb8cb6efa..4c18b41f70a6b 100644
--- a/spec/system/page_objects/pages/search.rb
+++ b/spec/system/page_objects/pages/search.rb
@@ -44,11 +44,7 @@ def expand_dropdown
 
       def click_search_icon
         find(".d-header #search-button").click
-        self
-      end
-
-      def click_advanced_search_icon
-        find(".d-header .show-advanced-search").click
+        has_css?(is_mobile? ? ".search-container" : ".search-menu-container")
         self
       end
 
diff --git a/spec/system/search_spec.rb b/spec/system/search_spec.rb
index 43b34e4909a21..fc882a6a018b0 100644
--- a/spec/system/search_spec.rb
+++ b/spec/system/search_spec.rb
@@ -40,9 +40,7 @@
       expect(page).to have_current_path("/")
 
       search_page.click_search_icon
-      search_page.click_advanced_search_icon
 
-      expect(page).to have_css(".search-container")
       expect(search_page).to have_no_search_result
       expect(search_page).to have_heading_text("Search")
     end
@@ -108,7 +106,6 @@
     it "still displays last topic search results after navigating away, then back" do
       visit("/")
       search_page.click_search_icon
-      expect(page).to have_css(".search-menu-container")
       search_page.type_in_search_menu("test")
       search_page.click_search_menu_link
       expect(search_page).to have_topic_title_for_first_search_result(topic.title)
@@ -122,7 +119,6 @@
 
       visit("/")
       search_page.click_search_icon
-      expect(page).to have_css(".search-menu-container")
       search_page.type_in_search_menu("test")
       search_page.click_search_menu_link
 
diff --git a/spec/system/user_page/user_page_search_spec.rb b/spec/system/user_page/user_page_search_spec.rb
index c8e367c5bd514..a01dcb6258d1f 100644
--- a/spec/system/user_page/user_page_search_spec.rb
+++ b/spec/system/user_page/user_page_search_spec.rb
@@ -11,7 +11,6 @@
     search_page.click_search_icon
     search_page.click_in_posts_by_user
 
-    expect(page).to have_css(".search-menu-container")
     expect(search_page).to have_found_no_results
     expect(search_page.search_term).to eq("@#{user.username}")
   end

From 919145545b2834d3ab0588818a88658242d5c155 Mon Sep 17 00:00:00 2001
From: Yuriy Kurant <yuriy@discourse.org>
Date: Thu, 15 May 2025 18:39:49 +0800
Subject: [PATCH 3/4] DEV: lints gjs export template

---
 .../javascripts/discourse/app/components/menu-panel.gjs      | 5 ++---
 .../discourse/app/components/search-menu/advanced-button.gjs | 5 ++---
 .../discourse/app/components/search-menu/clear-button.gjs    | 5 ++---
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/menu-panel.gjs b/app/assets/javascripts/discourse/app/components/menu-panel.gjs
index 5a7acec8001d6..d2fe8972c07e9 100644
--- a/app/assets/javascripts/discourse/app/components/menu-panel.gjs
+++ b/app/assets/javascripts/discourse/app/components/menu-panel.gjs
@@ -1,6 +1,6 @@
 import concatClass from "discourse/helpers/concat-class";
 
-const MenuPanel = <template>
+<template>
   <div
     class={{concatClass "menu-panel" @panelClass @animationClass}}
     data-max-width="500"
@@ -11,5 +11,4 @@ const MenuPanel = <template>
       </div>
     </div>
   </div>
-</template>;
-export default MenuPanel;
+</template>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
index 77940b1aba6e5..57eb5f062eb89 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/advanced-button.gjs
@@ -1,12 +1,11 @@
 import DButton from "discourse/components/d-button";
 import { i18n } from "discourse-i18n";
 
-const AdvancedButton = <template>
+<template>
   <DButton
     class="show-advanced-search btn-transparent"
     title={{i18n "search.open_advanced"}}
     @action={{@openAdvancedSearch}}
     @icon="sliders"
   />
-</template>;
-export default AdvancedButton;
+</template>
diff --git a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
index b70375e06ddf3..a5f414df286fe 100644
--- a/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
+++ b/app/assets/javascripts/discourse/app/components/search-menu/clear-button.gjs
@@ -2,7 +2,7 @@ import { on } from "@ember/modifier";
 import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
-const ClearButton = <template>
+<template>
   <a
     class="clear-search"
     aria-label="clear_input"
@@ -12,5 +12,4 @@ const ClearButton = <template>
   >
     {{icon "xmark"}}
   </a>
-</template>;
-export default ClearButton;
+</template>

From dc58be44fcd14c3a0ae7b1eb3d24007a9edeba41 Mon Sep 17 00:00:00 2001
From: Yuriy Kurant <yuriy@discourse.org>
Date: Thu, 15 May 2025 18:59:58 +0800
Subject: [PATCH 4/4] DEV: lints gjs export template 2

---
 .../discourse/app/components/header/search-menu-wrapper.gjs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs b/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs
index 925a96529f4d4..2b11285a5fca7 100644
--- a/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs
+++ b/app/assets/javascripts/discourse/app/components/header/search-menu-wrapper.gjs
@@ -1,12 +1,10 @@
 import SearchMenuPanel from "../search-menu-panel";
 
-const SearchMenuWrapper = <template>
+<template>
   <div class="search-menu glimmer-search-menu" aria-live="polite" ...attributes>
     <SearchMenuPanel
       @searchInputId={{@searchInputId}}
       @closeSearchMenu={{@closeSearchMenu}}
     />
   </div>
-</template>;
-
-export default SearchMenuWrapper;
+</template>