Add a filter tag when searching.

3 files changed, 31 insertions, 4 deletions

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index f46803e2..6f97422b 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -91,6 +91,14 @@ display: block;
     display: flex !important;
 }
 
+/* By default, we hide the search tag. We'll add it only when there's a search happening. */
+.tag.search-query {
+    display: none;
+}
+.tag.search-query .inner {
+    padding: 0;
+}
+
 /* Disable clicking on the checkbox itself. */
 /* Instead, we want to let the anchor tag handle clicks. */
 .filter-checkbox {
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 79c33cc7..713a7402 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -136,10 +136,19 @@ function updateURL() {
 function filterBySearch(resourceItems) {
     let searchQuery = $("#resource-search input").val();
 
+    /* Show and update the tag if there's a search query */
+    if (searchQuery) {
+        let tag = $(".tag.search-query");
+        let tagText = $(".tag.search-query span");
+        tagText.text(`Search: ${searchQuery}`);
+        tag.show();
+    }
+
     resourceItems.filter(function() {
         // Run a fuzzy search over the item. Does the search query match?
         let name = $(this).attr("name");
-        return Boolean(fuzzysort.single(searchQuery, name, fuzzysortOptions));
+        let result = fuzzysort.single(searchQuery, name, fuzzysortOptions);
+        return Boolean(result) && result.score > fuzzysortOptions.threshold;
     }).show();
 }
 
@@ -151,6 +160,7 @@ function updateUI() {
     let noTagsSelected = $(".no-tags-selected.tag");
     let closeFiltersButton = $(".close-filters-button");
     let searchQuery = $("#resource-search input").val();
+    let searchTag = $(".tag.search-query");
 
     // Update the URL to match the new filters.
     updateURL();
@@ -160,13 +170,15 @@ function updateUI() {
         // If we have a searchQuery, we need to run all resources through a search.
         if (searchQuery.length > 0) {
             resources.hide();
+            noTagsSelected.hide();
             filterBySearch(resources);
         } else {
             resources.show();
+            noTagsSelected.show();
+            $(".tag.search-query").hide();
         }
 
         filterTags.hide();
-        noTagsSelected.show();
         closeFiltersButton.hide();
         resourceTags.removeClass("active");
         $(`.filter-checkbox:checked`).prop("checked", false);
@@ -240,6 +252,7 @@ function updateUI() {
         filterBySearch(filteredResources);
     } else {
         filteredResources.show();
+        searchTag.hide();
     }
 
     // If there are no matches, show the no matches message
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 1f16e5ec..19750612 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -44,11 +44,17 @@
                             <div class="is-flex ml-auto">
                                 <div>
                                     {# A filter tag for when there are no filters active #}
-                                    <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
-                                            <i class="fas fa-ban mr-1"></i>
+                                    <span class="tag no-tags-selected is-secondary ml-2 mt-2">
+                                            <i class="fas fa-fw fa-ban mr-1"></i>
                                             No filters selected
                                     </span>
 
+                                    {# A filter tag for search queries #}
+                                    <span class="tag search-query is-secondary ml-2 mt-2">
+                                            <i class="fas fa-fw fa-magnifying-glass mr-1"></i>
+                                            <span class="tag inner">Search: ...</span>
+                                    </span>
+
                                     {% for filter_name, filter_data in filters.items %}
                                         {% for filter_item in filter_data.filters %}
                                             {% if filter_name == "Difficulty" %}