From b75906c90d268b0c408d470dd01821ec3dd2b47c Mon Sep 17 00:00:00 2001
From: Karthik Konaparthi <konapk@amazon.com>
Date: Wed, 29 Apr 2026 14:33:17 -0700
Subject: [PATCH] feat: add category filtering to commands page sidebar

Clicking a command category in the sidebar now hides all other
command groups, showing only the selected category. Previously,
clicking a category only scrolled to the heading while all 200+
commands across 20+ groups remained visible.

Changes:
- Add hashchange event listener that filters command groups
- Add active state styling on the selected sidebar link
- Add 'Show All' option to restore the full command list
- Clear search box when filtering by category
- Filter on initial page load if URL contains a hash

Follows the same show/hide pattern used by the existing
searchCommands() function.

Fixes #525

Signed-off-by: Karthik Konaparthi <konapk@amazon.com>
---
 sass/_valkey.scss       |  6 ++++
 templates/commands.html | 62 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/sass/_valkey.scss b/sass/_valkey.scss
index 4c59ffb8..a19feb4a 100644
--- a/sass/_valkey.scss
+++ b/sass/_valkey.scss
@@ -1462,6 +1462,12 @@ pre table {
   }
 }
 
+.category-link.active,
+.show-all-link.active {
+  font-weight: 700;
+  color: $link-color;
+}
+
 .index-entry {
   padding: 0.5em 1em;
   margin-bottom: 0.5em;
diff --git a/templates/commands.html b/templates/commands.html
index 9736970b..f9c8b26f 100644
--- a/templates/commands.html
+++ b/templates/commands.html
@@ -92,11 +92,70 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
     // Show/hide no results message based on search results
     noResultsMessage.style.display = totalVisible === 0 ? "block" : "none";
 }
+
+function filterByCategory() {
+    var hash = window.location.hash.substring(1);
+    var groups = document.querySelectorAll(".command-group");
+    var sidebarLinks = document.querySelectorAll(".category-link");
+    var noResultsMessage = document.getElementById("no-results-message");
+
+    // Clear search box when filtering by category
+    var searchBox = document.getElementById("search-box");
+    if (searchBox) searchBox.value = "";
+
+    // Update active state on sidebar links
+    sidebarLinks.forEach(function (link) {
+        link.classList.remove("active");
+        if (link.getAttribute("href") === "#" + hash) {
+            link.classList.add("active");
+        }
+    });
+
+    // If no hash or hash is "top", show all groups
+    if (!hash || hash === "top") {
+        groups.forEach(function (group) {
+            group.style.display = "";
+            group.querySelectorAll(".command-entry").forEach(function (item) {
+                item.style.display = "";
+            });
+        });
+        noResultsMessage.style.display = "none";
+        sidebarLinks.forEach(function (link) { link.classList.remove("active"); });
+        var showAllLink = document.querySelector(".show-all-link");
+        if (showAllLink) showAllLink.classList.add("active");
+        return;
+    }
+
+    // Show only the matching group
+    var found = false;
+    groups.forEach(function (group) {
+        var heading = group.querySelector("h2");
+        if (heading && heading.id === hash) {
+            group.style.display = "";
+            group.querySelectorAll(".command-entry").forEach(function (item) {
+                item.style.display = "";
+            });
+            found = true;
+        } else {
+            group.style.display = "none";
+        }
+    });
+
+    noResultsMessage.style.display = found ? "none" : "block";
+}
 </script>
 
 <script>
 document.addEventListener("DOMContentLoaded", function() {
     document.getElementById("search-box").focus();
+
+    // Filter on initial page load if URL has a hash
+    if (window.location.hash) {
+        filterByCategory();
+    }
+
+    // Filter when hash changes (sidebar link clicked)
+    window.addEventListener("hashchange", filterByCategory);
 });
 </script>
 {% endblock main_content %}
@@ -104,10 +163,11 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
 {% block related_content %}
 <h2 id="top">Command Categories</h2>
 <ul>
+<li><a href="#top" class="show-all-link active" onclick="window.location.hash='top';">Show All</a></li>
 {% if group_descriptions %}
 {% for command_group_name, group_description in group_descriptions %}
     {% set replaced_group_id = command_group_name | replace(from="-", to="_") %}
-    {% if grouped[replaced_group_id]  %}<li>  <a href="#{{ command_group_name }}">{{ group_description.display }}</a></li>{% endif %}
+    {% if grouped[replaced_group_id]  %}<li>  <a href="#{{ command_group_name }}" class="category-link">{{ group_description.display }}</a></li>{% endif %}
 {% endfor %}
 {% endif %}
 </ul>