Prioritize commands starting with search term in results

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);
+    });
   }
 }