Add filter options for search and similar resources

index.html

@@ -111,7 +111,7 @@
                 Enter keywords to search through descriptions. The search will
                 automatically update as you type.
               </p>
-              <div class="flex gap-2">
+              <div class="flex flex-wrap gap-2">
                 <select
                   id="searchTypeSelect"
                   class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
@@ -129,6 +129,54 @@
                   <option value="likes">Sort by likes</option>
                   <option value="downloads">Sort by downloads</option>
                 </select>
+                <div class="relative">
+                  <button
+                    onclick="toggleFilters('search')"
+                    class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none flex items-center gap-2"
+                  >
+                    <i data-lucide="filter"></i>
+                    Filters
+                    <span
+                      id="searchActiveFilters"
+                      class="hidden px-1.5 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full"
+                    ></span>
+                  </button>
+                  <div
+                    id="searchFiltersPopover"
+                    class="hidden absolute right-0 mt-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-10"
+                  >
+                    <div class="space-y-4">
+                      <div>
+                        <label
+                          class="block text-sm font-medium text-gray-700 mb-1"
+                          >Minimum Likes</label
+                        >
+                        <input
+                          type="number"
+                          id="searchMinLikes"
+                          placeholder="0"
+                          min="0"
+                          class="w-full text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                          onchange="handleFilterChange('search')"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          class="block text-sm font-medium text-gray-700 mb-1"
+                          >Minimum Downloads</label
+                        >
+                        <input
+                          type="number"
+                          id="searchMinDownloads"
+                          placeholder="0"
+                          min="0"
+                          class="w-full text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                          onchange="handleFilterChange('search')"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="relative">
@@ -156,7 +204,7 @@
                 Enter an ID to find similar resources. Popular items will appear
                 as you type.
               </p>
-              <div class="flex gap-2">
+              <div class="flex flex-wrap gap-2">
                 <select
                   id="similarTypeSelect"
                   class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
@@ -174,6 +222,54 @@
                   <option value="likes">Sort by likes</option>
                   <option value="downloads">Sort by downloads</option>
                 </select>
+                <div class="relative">
+                  <button
+                    onclick="toggleFilters('similar')"
+                    class="text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none flex items-center gap-2"
+                  >
+                    <i data-lucide="filter"></i>
+                    Filters
+                    <span
+                      id="similarActiveFilters"
+                      class="hidden px-1.5 py-0.5 bg-blue-100 text-blue-700 text-xs rounded-full"
+                    ></span>
+                  </button>
+                  <div
+                    id="similarFiltersPopover"
+                    class="hidden absolute right-0 mt-2 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-4 z-10"
+                  >
+                    <div class="space-y-4">
+                      <div>
+                        <label
+                          class="block text-sm font-medium text-gray-700 mb-1"
+                          >Minimum Likes</label
+                        >
+                        <input
+                          type="number"
+                          id="similarMinLikes"
+                          placeholder="0"
+                          min="0"
+                          class="w-full text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                          onchange="handleFilterChange('similar')"
+                        />
+                      </div>
+                      <div>
+                        <label
+                          class="block text-sm font-medium text-gray-700 mb-1"
+                          >Minimum Downloads</label
+                        >
+                        <input
+                          type="number"
+                          id="similarMinDownloads"
+                          placeholder="0"
+                          min="0"
+                          class="w-full text-sm border rounded-lg px-3 py-2 bg-white text-gray-700 focus:ring-2 focus:ring-blue-100 focus:border-blue-300 transition-all outline-none"
+                          onchange="handleFilterChange('similar')"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="flex gap-3">
@@ -300,6 +396,8 @@
       // Add these variables with other configurations
       let currentSort = "similarity";
       let currentType = INITIAL_TYPE;
+      let currentMinLikes = 0;
+      let currentMinDownloads = 0;
 
       // Initialize Lucide icons
       lucide.createIcons();
@@ -629,7 +727,7 @@
           const response = await fetch(
             `${endpoint}?${paramName}=${encodeURIComponent(resourceId)}&k=${
               RESULTS_PER_PAGE * page
-            }&sort_by=${currentSort}`
+            }&sort_by=${currentSort}&min_likes=${currentMinLikes}&min_downloads=${currentMinDownloads}`
           );
           if (!response.ok) throw new Error("Similarity search failed");
 
@@ -928,11 +1026,15 @@
 
         try {
           const endpoint = `${API_URL}/search/${currentType}`;
-          const response = await fetch(
-            `${endpoint}?query=${encodeURIComponent(query)}&k=${
-              RESULTS_PER_PAGE * page
-            }&sort_by=${currentSort}`
-          );
+          const params = new URLSearchParams({
+            query: query,
+            k: RESULTS_PER_PAGE * page,
+            sort_by: currentSort,
+            min_likes: currentMinLikes,
+            min_downloads: currentMinDownloads,
+          });
+
+          const response = await fetch(`${endpoint}?${params}`);
           if (!response.ok) throw new Error("Search failed");
 
           const data = await response.json();
@@ -1031,6 +1133,72 @@
           }
         }
       }
+
+      // Add these new functions to handle the filters UI
+      function toggleFilters(tab) {
+        const popover = document.getElementById(`${tab}FiltersPopover`);
+        popover.classList.toggle("hidden");
+
+        // Close other popovers
+        const otherTab = tab === "search" ? "similar" : "search";
+        document
+          .getElementById(`${otherTab}FiltersPopover`)
+          .classList.add("hidden");
+      }
+
+      // Close filters when clicking outside
+      document.addEventListener("click", (event) => {
+        const searchPopover = document.getElementById("searchFiltersPopover");
+        const similarPopover = document.getElementById("similarFiltersPopover");
+        const searchButton = event.target.closest(
+          "button[onclick=\"toggleFilters('search')\"]"
+        );
+        const similarButton = event.target.closest(
+          "button[onclick=\"toggleFilters('similar')\"]"
+        );
+
+        if (!searchButton && !event.target.closest("#searchFiltersPopover")) {
+          searchPopover.classList.add("hidden");
+        }
+        if (!similarButton && !event.target.closest("#similarFiltersPopover")) {
+          similarPopover.classList.add("hidden");
+        }
+      });
+
+      // Modify handleFilterChange to update the active filters indicator
+      function handleFilterChange(tab) {
+        const minLikesInput = document.getElementById(`${tab}MinLikes`);
+        const minDownloadsInput = document.getElementById(`${tab}MinDownloads`);
+        const activeFiltersSpan = document.getElementById(
+          `${tab}ActiveFilters`
+        );
+
+        currentMinLikes = parseInt(minLikesInput.value) || 0;
+        currentMinDownloads = parseInt(minDownloadsInput.value) || 0;
+
+        // Update active filters indicator
+        const activeCount =
+          (currentMinLikes > 0 ? 1 : 0) + (currentMinDownloads > 0 ? 1 : 0);
+        if (activeCount > 0) {
+          activeFiltersSpan.textContent = activeCount;
+          activeFiltersSpan.classList.remove("hidden");
+        } else {
+          activeFiltersSpan.classList.add("hidden");
+        }
+
+        // Re-run the current search with new filters
+        if (tab === "search") {
+          const searchQuery = document.getElementById("searchInput").value;
+          if (searchQuery.length >= MIN_SEARCH_LENGTH) {
+            searchResources(searchQuery, 1);
+          }
+        } else {
+          const resourceId = document.getElementById("resourceInput").value;
+          if (resourceId) {
+            findSimilarResources(1);
+          }
+        }
+      }
     </script>
   </body>
 </html>