diff --git a/frontend/src/components/CountBadge.tsx b/frontend/src/components/CountBadge.tsx
new file mode 100644
index 00000000..a99265bb
--- /dev/null
+++ b/frontend/src/components/CountBadge.tsx
@@ -0,0 +1,15 @@
+// A small count pill shown beside a tab label or filter chip (pending requests, item counts). One
+// source for the count-badge token so Tabs and FilterChipGroup can't drift. The `active` variant sits
+// on an accent-filled parent (a pressed tab/chip), so it tints against accent-fg; the resting variant
+// carries its own accent tint. Callers guard on `count > 0` — this just renders the pill.
+export default function CountBadge({ count, active }: { count: number; active?: boolean }) {
+ return (
+
+ {count}
+
+ );
+}
diff --git a/frontend/src/components/FilterChipGroup.tsx b/frontend/src/components/FilterChipGroup.tsx
index e5ae5db6..99bc79d9 100644
--- a/frontend/src/components/FilterChipGroup.tsx
+++ b/frontend/src/components/FilterChipGroup.tsx
@@ -1,4 +1,5 @@
import { type ReactNode } from "react";
+import CountBadge from "./CountBadge";
// Canonical filter-chip geometry — the rounded-full "Filters bar" look used app-wide for a selectable
// filter chip. Exported so single-select groups (this component) AND standalone/multi-select filter
@@ -48,15 +49,7 @@ export default function FilterChipGroup({
>
{o.icon}
{o.label}
- {o.count != null && (
-
- {o.count}
-
- )}
+ {o.count != null && o.count > 0 && }
);
})}
diff --git a/frontend/src/components/PlexSidebar.tsx b/frontend/src/components/PlexSidebar.tsx
index ce96be23..236865cf 100644
--- a/frontend/src/components/PlexSidebar.tsx
+++ b/frontend/src/components/PlexSidebar.tsx
@@ -373,7 +373,12 @@ export default function PlexSidebar({ layout, setLayout, collapsed, onToggleColl
body: (