UX: Show shortcut for admin sidbar filter (#27258)

This adds a small indicator of the Ctrl+/ shortcut that
exists for the admin sidebar filter, since it's not very
obvious that you can do that. This should help people
who are struggling with the long list of links -- it's
much faster to use the keyboard and search for what
you are looking for.

app/assets/javascripts/discourse/app/components/sidebar/filter.gjs

@@ -3,6 +3,7 @@ import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import { translateModKey } from "discourse/lib/utilities";
 import i18n from "discourse-common/helpers/i18n";
 
 export default class Filter extends Component {
@@ -45,25 +46,40 @@ export default class Filter extends Component {
     document.querySelector(".sidebar-filter__input").focus();
   }
 
+  get showShortcutCombo() {
+    return !this.displayClearFilter;
+  }
+
+  get sidebarShortcutCombo() {
+    return `${translateModKey("Meta")}+/`;
+  }
+
   <template>
     {{#if this.shouldDisplay}}
       <div class="sidebar-filter">
-        <input
-          {{on "input" this.setFilter}}
-          {{on "keydown" this.handleEscape}}
-          value={{this.sidebarState.filter}}
-          placeholder={{i18n "sidebar.filter"}}
-          type="text"
-          class="sidebar-filter__input"
-        />
-
-        {{#if this.displayClearFilter}}
-          <DButton
-            @action={{this.clearFilter}}
-            @icon="times"
-            class="sidebar-filter__clear"
+        <div class="sidebar-filter__input-container">
+          <input
+            {{on "input" this.setFilter}}
+            {{on "keydown" this.handleEscape}}
+            value={{this.sidebarState.filter}}
+            placeholder={{i18n "sidebar.filter"}}
+            type="text"
+            class="sidebar-filter__input"
           />
-        {{/if}}
+          {{#if this.showShortcutCombo}}
+            <span
+              class="sidebar-filter__shortcut-hint"
+            >{{this.sidebarShortcutCombo}}</span>
+          {{/if}}
+
+          {{#if this.displayClearFilter}}
+            <DButton
+              @action={{this.clearFilter}}
+              @icon="times"
+              class="sidebar-filter__clear"
+            />
+          {{/if}}
+        </div>
       </div>
     {{/if}}
   </template>

app/assets/stylesheets/common/base/sidebar.scss

@@ -323,12 +323,29 @@
 
   &:focus-within {
     border-color: var(--tertiary);
-    outline: 2px solid var(--tertiary);
-    outline-offset: -2px;
+    outline: 1px solid var(--tertiary);
+    outline-offset: -1px;
+  }
+
+  &__input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--secondary);
+    border-radius: var(--d-input-border-radius);
+  }
+
+  &__shortcut-hint {
+    background-color: rgba(var(--tertiary-rgb), 0.1);
+    padding: 0.25em 0.5em;
+    margin-right: 0.5em;
+    font-size: var(--font-down-3);
+    color: var(--primary-medium);
   }
 
   &__input[type="text"] {
     border: 0;
+    background: none;
     margin-bottom: 0;
     width: 50px;
     height: 2em;

config/locales/client.en.yml

@@ -4788,7 +4788,7 @@ en:
       panels:
         forum:
           label: Forum
-      filter: "Filter"
+      filter: "Filter..."
       clear_filter: "Clear filter"
       no_results:
         title: "No results"