feat: add filtering by tag to "List of rules" page

js/lint_rules.ts

@@ -1,17 +1,50 @@
-const searchbar = document.getElementById("lint-rule-search");
+const searchbar = document.getElementById("lint-rule-search") as
+  | HTMLInputElement
+  | null;
+const tagButtons = document.querySelectorAll<HTMLButtonElement>(
+  "[data-tag-btn]",
+);
+const activeTags = new Set<string>();
+
+/**
+ * Shows or hides each rule box based on the current search query and active tag filters.
+ */
+function updateVisibility() {
+  const searchQuery = searchbar?.value ?? "";
+  const allBoxes = document.querySelectorAll<HTMLElement>(".lint-rule-box");
+
+  for (const box of allBoxes) {
+    const matchesSearch = !searchQuery || box.id.includes(searchQuery);
+    const boxTags = (box.dataset.tags ?? "").split(",").filter(Boolean);
+    const matchesFilter = activeTags.size === 0 ||
+      boxTags.some((tag) => activeTags.has(tag));
+
+    box.style.display = matchesSearch && matchesFilter ? "" : "none";
+  }
+}
+
+/**
+ * Toggles a tag filter button on or off and updates the rule list accordingly.
+ */
+function handleTagFilterButtonClick(button: HTMLButtonElement) {
+  const tag = button.dataset.tagBtn!;
+  const isActive = activeTags.has(tag);
+
+  if (isActive) {
+    activeTags.delete(tag);
+    button.setAttribute("aria-pressed", "false");
+  } else {
+    activeTags.add(tag);
+    button.setAttribute("aria-pressed", "true");
+  }
+
+  updateVisibility();
+}
 
 if (searchbar) {
-  searchbar.addEventListener("input", (e) => {
-    const query = e.currentTarget?.value;
-
-    const allBoxes = document.querySelectorAll(".lint-rule-box");
-
-    for (const box of allBoxes) {
-      if (!box.id.includes(query)) {
-        box.style.display = "none";
-      } else {
-        box.style.display = "block";
-      }
-    }
-  });
+  searchbar.addEventListener("input", updateVisibility);
+}
+
+for (const button of tagButtons) {
+  button.addEventListener("click", () => handleTagFilterButtonClick(button));
 }

lint/index.page.tsx

@@ -84,8 +84,15 @@ export default function LintRulesIndex(
 
         <ul class="flex flex-wrap gap-2 mb-8 !list-none !pl-0">
           {TAGS.map((iconType) => (
-            <li class="p-1.5 px-3 rounded-md bg-background-secondary/30 border border-background-secondary w-max max-w-full !m-0 whitespace-pre-wrap">
-              {getLintIcon(iconType)}&ensp;{getReadableIconName(iconType)}
+            <li class="!m-0">
+              <button
+                class="flex items-center p-1.5 px-3 rounded-md bg-background-secondary/30 border border-background-secondary aria-pressed:bg-background-secondary aria-pressed:border-background-tertiary w-max max-w-full whitespace-pre-wrap cursor-pointer transition-colors duration-150 ease-in-out"
+                data-tag-btn={iconType}
+                aria-pressed="false"
+                title={`Filter by ${getReadableIconName(iconType)}`}
+              >
+                {getLintIcon(iconType)}&ensp;{getReadableIconName(iconType)}
+              </button>
             </li>
           ))}
         </ul>
@@ -96,6 +103,7 @@ export default function LintRulesIndex(
           <li
             class="border-t md:border md:rounded-md pt-8 pb-4 md:p-4 lint-rule-box dark:border-gray-700 !mt-0"
             id={lintRule.title}
+            data-tags={lintRule.tags.join(",")}
           >
             <div class="flex flex-row justify-start items-center gap-4 mb-2">
               <a href={lintRule.href} class="block font-mono">