FEATURE: Show browser search tip when discourse search shows up in a topic (#15055)

app/assets/javascripts/discourse/app/widgets/search-menu.js

@@ -5,13 +5,14 @@ import discourseDebounce from "discourse-common/lib/debounce";
 import getURL from "discourse-common/lib/get-url";
 import { h } from "virtual-dom";
 import { iconNode } from "discourse-common/lib/icon-library";
-import { isiPad } from "discourse/lib/utilities";
+import { isiPad, translateModKey } from "discourse/lib/utilities";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { Promise } from "rsvp";
 import { search as searchCategoryTag } from "discourse/lib/category-tag-search";
 import userSearch from "discourse/lib/user-search";
 import { CANCELLED_STATUS } from "discourse/lib/autocomplete";
 import { cancel } from "@ember/runloop";
+import I18n from "I18n";
 
 const CATEGORY_SLUG_REGEXP = /(\#[a-zA-Z0-9\-:]*)$/gi;
 const USERNAME_REGEXP = /(\@[a-zA-Z0-9\-\_]*)$/gi;
@@ -279,6 +280,11 @@ export default createWidget("search-menu", {
       this.state.inTopicContext &&
       (!SearchHelper.includesTopics() || !searchData.term)
     ) {
+      const isMobileDevice = this.site.isMobileDevice;
+
+      if (!isMobileDevice) {
+        results.push(this.attach("browser-search-tip"));
+      }
       return results;
     }
 
@@ -500,3 +506,20 @@ export default createWidget("search-menu", {
     return false;
   },
 });
+
+createWidget("browser-search-tip", {
+  buildKey: () => "browser-search-tip",
+  tagName: "div.browser-search-tip",
+
+  html() {
+    return [
+      h(
+        "span.tip-label",
+        I18n.t("search.browser_tip", {
+          modifier: translateModKey("Meta"),
+        })
+      ),
+      h("span.tip-description", I18n.t("search.browser_tip_description")),
+    ];
+  },
+});

app/assets/stylesheets/common/base/search-menu.scss

@@ -242,24 +242,29 @@ $search-pad-horizontal: 0.5em;
         }
       }
     }
+  }
 
-    .search-random-quick-tip {
-      padding: $search-pad-vertical $search-pad-horizontal;
-      padding-bottom: 0;
-      font-size: var(--font-down-2);
-      color: var(--primary-medium);
-      .tip-label {
-        background-color: rgba(var(--tertiary-rgb), 0.1);
-        margin-right: 4px;
-        padding: 2px 4px;
-        display: inline-block;
-        &.tip-clickable {
-          cursor: pointer;
-        }
+  .browser-search-tip,
+  .search-random-quick-tip {
+    padding: $search-pad-vertical $search-pad-horizontal;
+    padding-bottom: 0;
+    font-size: var(--font-down-2);
+    color: var(--primary-medium);
+    .tip-label {
+      background-color: rgba(var(--tertiary-rgb), 0.1);
+      margin-right: 4px;
+      padding: 2px 4px;
+      display: inline-block;
+      &.tip-clickable {
+        cursor: pointer;
       }
     }
   }
 
+  .browser-search-tip {
+    padding-top: 0.5em;
+  }
+
   .searching {
     position: absolute;
     top: $search-pad-vertical + 0.2em;

config/locales/client.en.yml

@@ -2379,6 +2379,8 @@ en:
       in_topics_posts: "in all topics and posts"
       enter_hint: "or press Enter"
       in_posts_by: "in posts by %{username}"
+      browser_tip: "%{modifier} + f"
+      browser_tip_description: "again to use native browser search"
 
       type:
         default: "Topics/posts"