Adopt shared WebUI structural primitives

webui/src/components/GlobalSearch.tsx

@@ -12,6 +12,7 @@ import {
 import { useLocation } from "react-router";
 import { ActionToolbar,
   Button,
+  CountBadge,
   Dialog,
   DocumentationHelpLink,
   DismissibleAlert,
@@ -496,9 +497,9 @@ export default function GlobalSearch({ settings }: GlobalSearchProps) {
                   <Filter size={16} aria-hidden="true" />
                   <span>Filters</span>
                   {activeFilterCount > 0 &&
-                  <span className="search-filter-count" aria-label={`${activeFilterCount} active filters`}>
+                  <CountBadge size="compact" aria-label={`${activeFilterCount} active filters`}>
                       {activeFilterCount}
-                    </span>
+                    </CountBadge>
                   }
                 </Button>
                 {filtersOpen &&

webui/src/features/search/SearchPage.tsx

@@ -10,6 +10,7 @@ import {
 import { useSearchParams } from "react-router";
 import { ActionToolbar,
   Button,
+  CountBadge,
   DocumentationHelpLink,
   DismissibleAlert,
   IconButton,
@@ -231,9 +232,9 @@ export default function SearchPage({ settings }: PlatformRouteContext) {
             <Filter size={16} aria-hidden="true" />
             <span>Filters</span>
             {activeFilterCount > 0 &&
-            <span className="search-filter-count" aria-label={`${activeFilterCount} active filters`}>
+            <CountBadge size="compact" aria-label={`${activeFilterCount} active filters`}>
                 {activeFilterCount}
-              </span>
+              </CountBadge>
             }
           </Button>
           {filtersOpen &&

webui/src/styles/search.css

@@ -238,21 +238,6 @@
   color: var(--text-strong);
 }
 
-.search-filter-count {
-  min-width: 19px;
-  height: 19px;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--accent);
-  color: var(--on-accent);
-  padding: 0 5px;
-  font-size: 11px;
-  line-height: 1;
-}
-
 .search-filter-popover {
   position: absolute;
   z-index: 400;