From 011acd919ec2c25e500c9b9667f2277a4617cd73 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Fri, 21 Aug 2026 20:37:36 +0200
Subject: [PATCH] feat(toolbar): lead the Plex toolbar with ItemCount too,
 unify its gaps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plex browse now uses the same fixed-width ItemCount pill as the feed (its title count → "N items"),
placed as the leading element, and the toolbar gap tightened 2 → 1.5 to match. One consistent
toolbar shape across the source modules.
---
 frontend/src/components/PlexBrowse.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/PlexBrowse.tsx b/frontend/src/components/PlexBrowse.tsx
index 4e85f1a2..f49eeeac 100644
--- a/frontend/src/components/PlexBrowse.tsx
+++ b/frontend/src/components/PlexBrowse.tsx
@@ -29,6 +29,7 @@ import SegmentedToggle from "./SegmentedToggle";
 import PlexDiscover from "./PlexDiscover";
 import { PageToolbar } from "./PageShell";
 import ActiveFilterChips from "./ActiveFilterChips";
+import ItemCount from "./ItemCount";
 import { StateMessage } from "./QueryState";
 import { usePlexActiveFilters, usePlexClearFilters } from "./usePlexActiveFilters";
 import { usePlex, usePlexActions } from "./PlexProvider";
@@ -388,17 +389,11 @@ export default function PlexBrowse() {
       {/* The title count is fixed chrome — it portals into the shell's fixed band so it stays put
           while only the poster grid scrolls. */}
       <PageToolbar>
-        <div className="px-4 pt-2 pb-1 max-w-[1600px] mx-auto flex items-center gap-2">
+        <div className="px-4 pt-2 pb-1 max-w-[1600px] mx-auto flex items-center gap-1.5">
+          <ItemCount count={browseQ.isLoading ? undefined : total} />
           {viewToggle}
-          <p className="text-xs text-muted">
-            {browseQ.isLoading
-              ? " "
-              : dq
-                ? t("plex.searchCount", { count: total })
-                : t("plex.count", { count: total })}
-          </p>
           {/* Sort moved out of the filter sidebar to the row above the cards (S3), like the Feed. */}
-          <div className="ml-auto flex items-center gap-2">
+          <div className="ml-auto flex items-center gap-1.5">
             <SortControl
               options={sortOptions}
               sort={sortState}