feat(search): add dynamic slash icon to search-container

Author: micahkepe

sass/parts/_search.scss

@@ -1,15 +1,40 @@
+/* Container for search elements */
+.search-container {
+  position: relative;
+  flex-grow: 1;
+  max-width: 400px;
+}
+
 /* Style the magnifying glass SVG */
 .search-icon {
   position: absolute;
   left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
   width: 24px;
   height: 24px;
   /* default gray */
   stroke: var(--text-color, #757575);
   /* Adjust icon color */
   pointer-events: none;
-  /* Ensure the SVG doesn't block input interaction */
-  padding: 2.5px 0px;
+}
+
+/* Style the slash-square icon */
+.slash-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  opacity: 0.6;
+  pointer-events: none;
+  stroke: var(--text-color, #757575);
+}
+
+.slash-icon.hidden {
+  opacity: 0;
+  visibility: hidden;
 }
 
 /* Input field styling */

static/icons/slash-square.svg

@@ -196,6 +196,7 @@ function initSearch() {
   var $searchInput = document.getElementById("search");
   var $searchResults = document.querySelector(".search-results");
   var $searchResultsItems = document.querySelector(".search-results__items");
+  var $slashIcon = document.getElementById("slash-icon");
   var MAX_ITEMS = 10;
 
   var options = {
@@ -250,6 +251,27 @@ function initSearch() {
     return index;
   };
 
+  // Function to toggle slash icon visibility
+  function updateSlashIconVisibility() {
+    if ($slashIcon) {
+      // Hide if field is focused OR has text, show only when unfocused AND empty
+      if (document.activeElement === $searchInput || $searchInput.value.trim() !== "") {
+        $slashIcon.classList.add("hidden");
+      } else {
+        $slashIcon.classList.remove("hidden");
+      }
+    }
+  }
+
+  // Update slash icon visibility on input
+  $searchInput.addEventListener("input", updateSlashIconVisibility);
+
+  // Hide slash icon when search field is focused
+  $searchInput.addEventListener("focus", updateSlashIconVisibility);
+
+  // Show slash icon when search field loses focus (if empty)
+  $searchInput.addEventListener("blur", updateSlashIconVisibility);
+
   $searchInput.addEventListener(
     "keyup",
     debounce(async function () {
@@ -293,6 +315,8 @@ function initSearch() {
       // clear search query to go back to placeholder
       $searchInput.value = "";
       $searchInput.blur();
+      // Show slash icon again since input is now empty
+      updateSlashIconVisibility();
     }
   });
 

static/js/search.js

@@ -23,23 +23,31 @@
     </nav>
     <aside class="user-actions-container">
       {% if config.extra.enable_search %}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        class="search-icon"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      <div class="search-container">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          class="search-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+          />
+        </svg>
+        <input type="text" id="search" placeholder="Search..." />
+        <img
+          src="{{ get_url(path='icons/slash-square.svg') }}"
+          id="slash-icon"
+          class="slash-icon"
+          alt="Press / to search"
         />
-      </svg>
-      <input type="text" id="search" placeholder="Search..." />
-      <section class="search-results" aria-live="polite">
-        <article class="search-results__items" role="list"></article>
-      </section>
+        <section class="search-results" aria-live="polite">
+          <article class="search-results__items" role="list"></article>
+        </section>
+      </div>
       {% endif %} {% if config.extra.theme | default(value="toggle") ==
       "toggle" %}
       <a id="dark-mode-toggle" href="#">