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.

Author: mich-elle-luna

static/js/commands-filters.js

@@ -103,17 +103,51 @@ 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;
 
       const elementValue = key == 'alpha' ? element.dataset['name'] : element.dataset[key];
       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);
+    });
   }
 }