From 1a042593d599b76989f4dc5b971cafdd21edd3f1 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 13:17:32 +0200
Subject: [PATCH] Adopt shared WebUI structural primitives

---
 webui/src/components/GlobalSearch.tsx    |  5 +++--
 webui/src/features/search/SearchPage.tsx |  5 +++--
 webui/src/styles/search.css              | 15 ---------------
 3 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/webui/src/components/GlobalSearch.tsx b/webui/src/components/GlobalSearch.tsx
index dc648f1..6b74240 100644
--- a/webui/src/components/GlobalSearch.tsx
+++ b/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 &&
diff --git a/webui/src/features/search/SearchPage.tsx b/webui/src/features/search/SearchPage.tsx
index 0b9203d..cc6c3e3 100644
--- a/webui/src/features/search/SearchPage.tsx
+++ b/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 &&
diff --git a/webui/src/styles/search.css b/webui/src/styles/search.css
index 1586016..6e16561 100644
--- a/webui/src/styles/search.css
+++ b/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;