From 13dda041931930d3e175122aa92db99aceaea661 Mon Sep 17 00:00:00 2001
From: 44yu5h <meet44yu5h@gmail.com>
Date: Thu, 10 Apr 2025 10:17:05 +0530
Subject: [PATCH] Add Search feature to Browse and Download Pages

---
 assets/dashboard-tailwind-src.css | 10 ++++++----
 assets/dashboard.js               | 14 ++++++++++++++
 templates/base.html               | 16 ++++++++++++++--
 templates/download.html           |  4 +++-
 templates/home.html               |  1 +
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/assets/dashboard-tailwind-src.css b/assets/dashboard-tailwind-src.css
index 6852d40..79e07e9 100644
--- a/assets/dashboard-tailwind-src.css
+++ b/assets/dashboard-tailwind-src.css
@@ -49,10 +49,6 @@ select {
   border-color: transparent;
   --tw-bg-opacity: 1;
   background-color: oklch(1 0 0);
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
-  background-size: 4px 4px, 4px 4px;
-  background-repeat: no-repeat;
 }
 
 [dir="rtl"] .select {
@@ -61,6 +57,12 @@ select {
     calc(0% + 16px) calc(1px + 50%);
 }
 
+.dropdown {
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16.1px) calc(1px + 50%);
+    background-size: 4px 4px, 4px 4px;
+    background-repeat: no-repeat;
+}
 
 .max-w-xs {
   max-width: 20rem;
diff --git a/assets/dashboard.js b/assets/dashboard.js
index 395667d..fcb633b 100644
--- a/assets/dashboard.js
+++ b/assets/dashboard.js
@@ -73,6 +73,7 @@ const Filtering = class {
   order_dir = 'desc';
   only_lang = '';
   only_category = '';
+  only_search = '';
 
   constructor(order_by, order_dir, only_lang, only_category) {
     this.order_by = order_by || this.order_by;
@@ -86,6 +87,7 @@ const Filtering = class {
     this.order_dir = 'desc';
     this.only_lang = '';
     this.only_category = '';
+    this.only_search = '';
   }
 
   toString() {
@@ -146,6 +148,13 @@ const Filtering = class {
         visible = false;
       if (visible && this.only_category && this.only_category != category)
         visible = false;
+      if (visible && this.only_search.trim() !== '') {
+        const nameAttr = elems[i].getAttribute('data-name').toLowerCase();
+        const descAttr = elems[i].getAttribute('data-desc') ? elems[i].getAttribute('data-desc').toLowerCase() : '';
+        if (!nameAttr.includes(this.only_search.toLowerCase()) && !descAttr.includes(this.only_search.toLowerCase())) {
+          visible = false;
+        }
+      }
 
       if (visible)
         removeClass(elems[i], 'hidden');
@@ -334,6 +343,11 @@ function run() {
 
   live('#reset-filters', 'click', resetMobileFiltersButtonClick)
 
+  live('#search-bar', 'input', function(el, ev) {
+    filter.only_search = el.value;
+    filter.render(true);
+  });
+
   filter.render(true);
 }
 
diff --git a/templates/base.html b/templates/base.html
index 6404dfd..4983af9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -249,7 +249,7 @@
           >Languages</label>
           <select
             id="languages-list"
-            class="select select-bordered select-sm max-w-[10rem]"
+            class="select select-bordered select-sm dropdown max-w-[10rem]"
           >
             <option value="">All</option>
             {% for code, name in languages.items() %}<option value="{{ code }}">{{ name }}</option>{% endfor %}
@@ -262,12 +262,24 @@
           >Categories</label>
           <select
             id="categories-list"
-            class="select select-bordered select-sm max-w-xs dm-sans"
+            class="select select-bordered select-sm dropdown max-w-xs dm-sans"
           >
             <option value="">All</option>
             {% for category in categories %}<option value="{{ category }}">{{ category }}</option>{% endfor %}
           </select>
         </div>
+        <div class="text-start ml-[2em] xl:ml-[4em]">
+          <label
+            for="search-bar"
+            class="hidden lg:inline-block kiwix-{{page }}-filter-label text-[0.9em] me-[1em] dm-sans"
+          >Search</label>
+          <input
+            id="search-bar"
+            type="text"
+            placeholder="Search..."
+            class="select select-bordered select-sm max-w-xs dm-sans h-[2.25rem]"
+          />
+        </div>
         {% endif %}
       </nav>
     </div>
diff --git a/templates/download.html b/templates/download.html
index d04d452..e782f70 100644
--- a/templates/download.html
+++ b/templates/download.html
@@ -58,7 +58,9 @@
           data-category="{{ package.category }}"
           data-langs="{% if package.langs %}{% for lang in package.langs %}{{ lang.alpha_3 }} {% endfor %}{% endif %}"
           data-name="{{ package.title }}"
-          data-size="{% if package.download and package.download.size %}{{ package.download.size }}{% else %}0{% endif %}">
+          data-size="{% if package.download and package.download.size %}{{ package.download.size }}{% else %}0{% endif %}"
+          data-desc="{{ package.description|default('')|escape }}"
+        >
 
           <div
             data-tip="{{ package.title }}"
diff --git a/templates/home.html b/templates/home.html
index 9534465..3a31084 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -67,6 +67,7 @@
           data-langs="{% if package.langs %}{% for lang in package.langs %}{{ lang.alpha_3 }} {% endfor %}{% endif %}"
           data-name="{{ package.title }}"
           data-size="{% if package.download and package.download.size %}{{ package.download.size }}{% else %}0{% endif %}"
+          data-desc="{{ package.description|default('')|escape }}"
         >
           <div class="
             flex