UX: Add category badges to category filter tip results (#34078)

jordanvidrine · martin-brennan · web-flow · commit acf3d73e6371 · 2025-08-05T13:46:18.000+10:00
This PR adds category badges to be shown in the filter tips menu.

---------

Co-authored-by: Martin Brennan &lt;martin@discourse.org&gt;
diff --git a/app/assets/javascripts/discourse/app/components/discovery/filter-navigation-menu.gjs b/app/assets/javascripts/discourse/app/components/discovery/filter-navigation-menu.gjs
@@ -10,6 +10,7 @@ import { TrackedObject } from "@ember-compat/tracked-built-ins";
 import { eq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import DropdownMenu from "discourse/components/dropdown-menu";
+import categoryBadge from "discourse/helpers/category-badge";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
 import withEventValue from "discourse/helpers/with-event-value";
@@ -32,12 +33,17 @@ const FilterNavigationMenuList = <template>
             }}
             @action={{fn @data.selectItem item}}
           >
-            <span class="filter-navigation__tip-name">
-              {{item.name}}
-            </span>
-            {{#if item.description}}
-              <span class="filter-navigation__tip-description">—
-                {{item.description}}</span>
+            {{#if item.category}}
+              {{categoryBadge item.category allowUncategorized=true}}
+            {{else}}
+              <span class="filter-navigation__tip-name">
+                {{item.name}}
+              </span>
+
+              {{#if item.description}}
+                <span class="filter-navigation__tip-description">—
+                  {{item.description}}</span>
+              {{/if}}
             {{/if}}
           </DButton>
         </dropdown.item>
diff --git a/app/assets/javascripts/discourse/app/lib/filter-suggestions.js b/app/assets/javascripts/discourse/app/lib/filter-suggestions.js
@@ -106,6 +106,7 @@ export default class FilterSuggestions {
         description: `${category.name}`,
         isSuggestion: true,
         term: category.slug,
+        category,
       }));
   }
 
diff --git a/app/assets/javascripts/discourse/tests/integration/components/discovery/filter-navigation-menu-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/discovery/filter-navigation-menu-test.gjs
@@ -222,6 +222,14 @@ module(
       await triggerEvent("#topic-query-filter-input", "focus");
       await fillIn("#topic-query-filter-input", "cat");
 
+      assert
+        .dom(".filter-navigation__tip-button")
+        .exists("category search results shown");
+
+      assert
+        .dom(".filter-navigation__tip-button")
+        .exists(".badge-category__wrapper", "category badge HTML shown");
+
       await triggerKeyEvent(
         "#topic-query-filter-input",
         "keydown",

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,7 @@ export default class FilterSuggestions {`
`106`	`106`	description: `${category.name}`,
`107`	`107`	`isSuggestion: true,`
`108`	`108`	`term: category.slug,`
	`109`	`+ category,`
`109`	`110`	`}));`
`110`	`111`	`}`
`111`	`112`