feat: search form shortcut (#1420)

Author: lukasvinclav

src/unfold/static/unfold/js/app.js

@@ -26,7 +26,26 @@ const sortRecords = (e) => {
 };
 
 /*************************************************************
- * Searh dropdown
+ * Search form
+ *************************************************************/
+function searchForm() {
+  return {
+    applyShortcut(event) {
+      if (
+        event.key === "/" &&
+        document.activeElement.tagName.toLowerCase() !== "input" &&
+        document.activeElement.tagName.toLowerCase() !== "textarea" &&
+        !document.activeElement.isContentEditable
+      ) {
+        event.preventDefault();
+        this.$refs.searchInput.focus();
+      }
+    },
+  };
+}
+
+/*************************************************************
+ * Search dropdown
  *************************************************************/
 function searchDropdown() {
   return {

src/unfold/templates/admin/search_form.html

@@ -2,13 +2,22 @@
 
 {% if cl.search_fields %}
     <div id="toolbar">
-        <form id="changelist-search" method="get" role="search">
-            <div class="bg-white border border-base-200 flex rounded-default overflow-hidden shadow-xs lg:w-96 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 dark:bg-base-900 dark:border-base-700">
-                <input class="font-medium grow min-w-0 h-9 px-3 text-font-default-light text-sm focus:outline-hidden dark:bg-base-900 dark:text-font-default-dark placeholder-shown:truncate placeholder-base-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
-
-                <button type="submit" class="flex items-center px-2 focus:outline-hidden" id="searchbar-submit">
+        <form id="changelist-search" method="get" role="search" x-data="searchForm()">
+            <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-full focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 lg:w-96 dark:bg-base-900 dark:border-base-700">
+                <button type="submit" class="flex items-center focus:outline-hidden" id="searchbar-submit">
                     <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
                 </button>
+
+                <input type="text"
+                       x-ref="searchInput"
+                       x-on:keydown.window="applyShortcut($event)"
+                       class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
+                       name="{{ search_var }}"
+                       value="{{ cl.query }}"
+                       id="searchbar"
+                       placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
+
+                {% include "unfold/helpers/shortcut.html" with shortcut="/" %}
             </div>
 
             {% for pair in cl.filter_params.items %}

src/unfold/templates/unfold/helpers/search.html

@@ -22,9 +22,7 @@
                    placeholder="{% translate 'Search apps and models...' %}"
                    aria-label="{% translate 'Filter navigation items' %}">
 
-            <kbd class="bg-base-50 border border-base-200 font-mono text-xs text-font-subtle-light rounded-xs px-1">
-                t
-            </kbd>
+            {% include "unfold/helpers/shortcut.html" with shortcut="t" %}
         </div>
 
         <div id="search-results" x-show="openSearchResults"></div>

src/unfold/templates/unfold/helpers/shortcut.html

@@ -0,0 +1,3 @@
+<kbd class="bg-base-50 border border-base-200 font-mono text-xs text-font-subtle-light rounded-xs px-1 dark:bg-white/[.04] dark:border-base-700 dark:text-font-subtle-dark">
+    {{ shortcut }}
+</kbd>