ENH: Add search button that looks like field (#1233)

* ENH: Add search button that looks like field

* refactor: make the button field the default search

* fstyle: resize search-field-button

* style: use same class for ctrl and k

* reroll package-lock.json

* align package and pakage-lock on main

* Restore package.json

* restore package-lock.json

* Fix search field button padding on mobile screens

---------

Co-authored-by: Rambaud Pierrick <12rambau@users.noreply.github.com>
Co-authored-by: Pierrick Rambaud <pierrick.rambaud49@gmail.com>

src/pydata_sphinx_theme/assets/styles/components/_search.scss

@@ -117,3 +117,43 @@
     font-size: var(--pst-font-size-icon);
   }
 }
+
+/**
+ * The search button component that looks like a field.
+ * Lives at components/search-button-field.html
+ */
+.search-button-field {
+  display: inline-flex;
+  align-items: center;
+  border: var(--pst-color-border) solid 1px;
+  border-radius: 1.5em;
+  color: var(--pst-color-text-muted);
+  padding: 0.5em;
+
+  &:hover,
+  &:focus {
+    background-color: var(--pst-color-surface);
+    border-color: var(--pst-color-primary);
+  }
+
+  // The keyboard shotcut text
+  .search-button__kbd-shortcut {
+    font-size: var(--bs-nav-link-font-size);
+    font-weight: var(--bs-nav-link-font-weight);
+    margin-right: 0.5em;
+    margin-left: 0.5em;
+  }
+
+  .kbd-shortcut__modifier {
+    font-size: 0.75em;
+  }
+
+  // Only the icon should be visible on narrow screens
+  :not(i) {
+    display: none;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+  }
+}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html

@@ -0,0 +1,13 @@
+{# Behaves the same as `search-button.html` but looks more like a search field.
+  #
+  # As this function will only work when JavaScript is enabled, we add it through JavaScript.
+  #}
+ <script>
+ document.write(`
+   <button class="btn navbar-btn search-button-field search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+    <i class="fa-solid fa-magnifying-glass"></i>
+    <span class="search-button__kbd-shortcut">{{ _('Search') }}</span>
+    <span><kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd class="kbd-shortcut__modifier">K</kbd></span>
+   </button>
+ `);
+ </script>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/theme.conf

@@ -40,7 +40,7 @@ logo =
 navbar_start = navbar-logo.html
 navbar_center = navbar-nav.html
 navbar_end = theme-switcher.html, navbar-icon-links.html
-navbar_persistent = search-button.html
+navbar_persistent = search-button-field.html
 article_header_start = breadcrumbs.html
 article_header_end =
 article_footer_items =