feat(policies): reuse filter status component, give consistent styles [c9s-210] (#2723)

app/react/components/StatusSummaryBar/FilterBarActiveIndicator.tsx

@@ -18,7 +18,7 @@ export function FilterBarActiveIndicator({ label, onClear }: Props) {
       </span>
       <button
         type="button"
-        className="cursor-pointer border-0 bg-transparent p-0 text-[21px] font-bold leading-none text-[var(--button-close-color)] opacity-[var(--button-opacity)] hover:opacity-[var(--button-opacity-hover)]"
+        className="cursor-pointer border-0 bg-transparent p-0 text-xl font-bold leading-none text-[var(--button-close-color)] opacity-[var(--button-opacity)] hover:opacity-[var(--button-opacity-hover)]"
         onClick={onClear}
         aria-label="Clear filter"
         data-cy="clear-filter-button"

app/react/components/StatusSummaryBar/StatusSummaryBar.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import clsx from 'clsx';
 
 import { FilterBarButton, Color } from './FilterBarButton';
@@ -19,6 +20,7 @@ interface Props<TValue> {
   ariaLabel?: string;
   isLoading?: boolean;
   'data-cy'?: string;
+  rightSlot?: ReactNode;
 }
 
 export function StatusSummaryBar<TValue extends string = string>({
@@ -30,6 +32,7 @@ export function StatusSummaryBar<TValue extends string = string>({
   ariaLabel = 'Filter by status',
   isLoading = false,
   'data-cy': dataCy = 'status-summary-bar',
+  rightSlot,
 }: Props<TValue>) {
   const isAllSelected = !value || value === 'all' || value === 'custom';
   const activeLabel = segments.find((s) => s.key === value)?.label;
@@ -76,14 +79,20 @@ export function StatusSummaryBar<TValue extends string = string>({
         />
       ))}
 
-      {activeLabel && (
-        <div className="ml-auto hidden xl:flex">
-          <Separator />
-          <FilterBarActiveIndicator
-            label={activeLabel}
-            onClear={() => onChange(null)}
-          />
+      {rightSlot ? (
+        <div className="ml-auto flex items-center">
+          <div className="flex items-center px-3">{rightSlot}</div>
         </div>
+      ) : (
+        activeLabel && (
+          <div className="ml-auto hidden xl:!flex">
+            <Separator />
+            <FilterBarActiveIndicator
+              label={activeLabel}
+              onClear={() => onChange(null)}
+            />
+          </div>
+        )
       )}
     </div>
   );