fix(web): simplify official publisher activity (#3426)

src/__tests__/official-route.test.tsx

@@ -39,6 +39,7 @@ vi.mock("../components/PublisherListItem", () => ({
   PublisherListItem: (props: {
     publisher: { _id: string };
     showOfficialBadge?: boolean;
+    showPublishedRail?: boolean;
     variant?: string;
   }) => {
     publisherListItemMock(props);
@@ -152,6 +153,7 @@ describe("official route", () => {
     expect(publisherListItemMock).toHaveBeenCalledWith(
       expect.objectContaining({
         showOfficialBadge: false,
+        showPublishedRail: false,
         variant: "list",
       }),
     );

src/components/PublisherListItem.test.tsx

@@ -39,6 +39,26 @@ describe("PublisherListItem", () => {
     expect(screen.queryByText("34")).toBeNull();
   });
 
+  it("renders plain activity without grouped item icons", () => {
+    const publisher = makePublisher();
+    publisher.publishedItems = [
+      { kind: "skill", displayName: "Example Skill", slug: "example-skill" } as never,
+    ];
+
+    const { container } = render(
+      <PublisherListItem publisher={publisher} showPublishedRail={false} />,
+    );
+
+    expect(container.querySelector(".publisher-published-rail")).toBeNull();
+    expect(container.querySelector(".publisher-card-main > .marketplace-icon")).toBeTruthy();
+    expect(container.querySelector(".publisher-card-stat.is-primary svg")).toBeTruthy();
+    expect(screen.getByText("2")).toBeTruthy();
+    expect(screen.getByText("published")).toBeTruthy();
+    expect(screen.getByText("12")).toBeTruthy();
+    expect(screen.getByText("downloads")).toBeTruthy();
+    expect(container.querySelector(".publisher-card-stat-separator")?.textContent).toBe("·");
+  });
+
   it("renders legacy preview metrics as downloads", () => {
     const publisher = makePublisher();
     publisher.publishedItems = [

src/components/PublisherListItem.tsx

@@ -15,6 +15,7 @@ import { OfficialBadge } from "./OfficialBadge";
 type PublisherListItemProps = {
   publisher: PublicPublisherListItem;
   showOfficialBadge?: boolean;
+  showPublishedRail?: boolean;
   variant?: "list" | "grid" | "highlight";
 };
 
@@ -38,6 +39,7 @@ function PublishedRail({ items }: { items: PublicPublisherPublishedItem[] }) {
 export function PublisherListItem({
   publisher,
   showOfficialBadge = true,
+  showPublishedRail = true,
   variant = "list",
 }: PublisherListItemProps) {
   const handle = publisher.handle.trim();
@@ -98,12 +100,17 @@ export function PublisherListItem({
         </div>
       </div>
       {summaryInMain ? null : <p className="publisher-card-summary">{truncateText(summary, 80)}</p>}
-      <div className="publisher-card-stats">
+      <div className={`publisher-card-stats${showPublishedRail ? "" : " is-plain"}`}>
         <span className="publisher-card-stat">
-          <PublishedRail items={publisher.publishedItems} />
+          {showPublishedRail ? <PublishedRail items={publisher.publishedItems} /> : null}
           <strong>{formatCompactStat(publishedCount)}</strong>
           published
         </span>
+        {showPublishedRail ? null : (
+          <span className="publisher-card-stat-separator" aria-hidden="true">
+            ·
+          </span>
+        )}
         <span className="publisher-card-stat is-primary">
           <Download size={14} aria-hidden="true" />
           <strong>{formatCompactStat(publisher.stats.downloads)}</strong>

src/routes/official/index.tsx

@@ -257,6 +257,7 @@ function OfficialIndex() {
                     publisher={publisher}
                     variant="list"
                     showOfficialBadge={false}
+                    showPublishedRail={false}
                   />
                 ))}
               </div>

src/styles.css

@@ -18031,6 +18031,19 @@ a.agentic-risk-finding-title:focus-visible {
   color: var(--oc-text-muted);
 }
 
+.publisher-card-list .publisher-card-stats.is-plain {
+  display: flex;
+  gap: var(--oc-space-2);
+}
+
+.publisher-card-list .publisher-card-stats.is-plain .publisher-card-stat.is-primary::before {
+  content: none;
+}
+
+.publisher-card-stat-separator {
+  color: var(--oc-text-muted);
+}
+
 .publisher-card-stat svg {
   color: color-mix(in srgb, var(--ink-soft) 76%, var(--bg));
 }
@@ -18240,10 +18253,18 @@ a.agentic-risk-finding-title:focus-visible {
     text-align: right;
   }
 
+  .publisher-card-stats.is-plain {
+    display: grid;
+  }
+
   .publisher-card-list .publisher-card-stat.is-primary::before {
     content: none;
   }
 
+  .publisher-card-stat-separator {
+    display: none;
+  }
+
   .publisher-published-rail {
     padding-left: 7px;
   }