From ea4a73165b10734c1d45b3f08ebeaca3557d0602 Mon Sep 17 00:00:00 2001
From: mich-elle-luna <michelle.luna@redis.com>
Date: Wed, 15 Oct 2025 15:50:04 -0700
Subject: [PATCH] Prioritize commands starting with search term in results

- Modified filter() function to sort visible commands after filtering
- Commands that start with the search term now appear first
- Commands that only contain the search term appear after
- Both groups maintain alphabetical order within their group
- Improves UX: searching 'set' now shows SET, SETEX, SETNX first
- Previously all matching commands (RESET, GETSET, etc.) were mixed together

This makes it much easier to find the exact command you're looking for
when searching, especially for common commands like SET, GET, etc.
---
 static/js/commands-filters.js | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/static/js/commands-filters.js b/static/js/commands-filters.js
index d399d61c53..3e2c9665e1 100644
--- a/static/js/commands-filters.js
+++ b/static/js/commands-filters.js
@@ -103,7 +103,12 @@ function filter() {
     return;
   }
 
+  const visibleElements = [];
+  const nameFilterValue = FILTERS.name.element.value.toLowerCase();
+
   for (const element of commandElements) {
+    let shouldHide = false;
+
     for (const [key, filter] of Object.entries(FILTERS)) {
       if (!filter.element.value) continue;
 
@@ -111,9 +116,38 @@ function filter() {
       if (!match(filter, elementValue)) {
         element.style.display = 'none';
         hiddenCards.push(element);
+        shouldHide = true;
         break;
       }
     }
+
+    if (!shouldHide) {
+      visibleElements.push(element);
+    }
+  }
+
+  // Sort visible elements: commands starting with search term first, then others
+  if (nameFilterValue) {
+    const grid = document.querySelector('#commands-grid');
+
+    visibleElements.sort((a, b) => {
+      const aName = a.dataset.name.toLowerCase();
+      const bName = b.dataset.name.toLowerCase();
+      const aStarts = aName.startsWith(nameFilterValue);
+      const bStarts = bName.startsWith(nameFilterValue);
+
+      // If one starts with the search term and the other doesn't, prioritize the one that starts
+      if (aStarts && !bStarts) return -1;
+      if (!aStarts && bStarts) return 1;
+
+      // Otherwise maintain alphabetical order
+      return aName.localeCompare(bName);
+    });
+
+    // Re-append elements in sorted order
+    visibleElements.forEach(element => {
+      grid.appendChild(element);
+    });
   }
 }