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: ( ({ diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx index b2480f47..1a2b4841 100644 --- a/frontend/src/components/Tabs.tsx +++ b/frontend/src/components/Tabs.tsx @@ -1,5 +1,6 @@ import { type LucideIcon } from "lucide-react"; import { useAccountPersistedState } from "../lib/storage"; +import CountBadge from "./CountBadge"; // Reusable pill tab-rail for in-page sub-navigation (Configuration, Users & roles, the Settings // sections, the Stats overview/system split…). Horizontal by default; `orientation="vertical"` gives @@ -55,15 +56,7 @@ export default function Tabs({ > {Icon && } {tb.label} - {tb.badge != null && tb.badge > 0 && ( - - {tb.badge} - - )} + {tb.badge != null && tb.badge > 0 && } ); })}