fix: move skills.sh badge before download count (#3376)

src/__tests__/home-listing-section.claw591.test.tsx

@@ -1,6 +1,7 @@
 /* @vitest-environment jsdom */
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "../components/ui/tooltip";
 import type { CanonicalTrendingItem } from "../lib/trendingApi";
 
 const navigateMock = vi.fn();
@@ -128,7 +129,7 @@ describe("HomeListingSection", () => {
     expect(screen.queryByRole("button", { name: "Grid view" })).toBeNull();
   });
 
-  it("identifies skills.sh rows by their source owner and upstream install count", () => {
+  it("identifies skills.sh rows by their source owner and upstream install count", async () => {
     const external = {
       ...makeTrending("reddit-automation", "reddit-automation", 0, 12_345, 0),
       id: "skills-sh:doany-skills/skills/reddit-automation",
@@ -152,12 +153,21 @@ describe("HomeListingSection", () => {
       },
     };
 
-    render(<HomeListingSection initialListing={initialTrending([external])} />);
+    render(
+      <TooltipProvider delayDuration={0}>
+        <HomeListingSection initialListing={initialTrending([external])} />
+      </TooltipProvider>,
+    );
 
     expect(screen.getByText("@doany-skills")).toBeTruthy();
     const sourceBadge = screen.getByText("skills.sh");
-    expect(sourceBadge.getAttribute("title")).toBe("Synced from skills.sh");
-    expect(screen.getByLabelText("Downloads").textContent).toContain("12.3k");
+    const downloads = screen.getByLabelText("Downloads");
+    expect(downloads.firstElementChild).toBe(sourceBadge);
+    expect(sourceBadge.getAttribute("title")).toBeNull();
+    expect(downloads.textContent).toContain("12.3k");
+
+    fireEvent.pointerMove(sourceBadge);
+    expect((await screen.findByRole("tooltip")).textContent).toBe("Synced from skills.sh");
   });
 
   it("keeps skills.sh provenance visible when the upstream install count is unavailable", () => {
@@ -184,10 +194,14 @@ describe("HomeListingSection", () => {
       },
     };
 
-    render(<HomeListingSection initialListing={initialTrending([external])} />);
+    render(
+      <TooltipProvider delayDuration={0}>
+        <HomeListingSection initialListing={initialTrending([external])} />
+      </TooltipProvider>,
+    );
 
     const sourceBadge = screen.getByText("skills.sh");
-    expect(sourceBadge.getAttribute("title")).toBe("Synced from skills.sh");
+    expect(sourceBadge.getAttribute("title")).toBeNull();
     expect(screen.getByLabelText("Downloads").textContent).toBe("skills.sh");
   });
 

src/components/HomeListingSection.tsx

@@ -23,6 +23,7 @@ import { PUBLIC_CATALOG_NAME_PREVIEW_LENGTH, truncateText } from "../lib/truncat
 import { OfficialBadge } from "./OfficialBadge";
 import { BrowseResultsSkeleton } from "./skeletons/BrowseResultsSkeleton";
 import { Badge } from "./ui/badge";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 const SKILL_LISTING_TABS: Array<{ id: ListingTab; label: string }> = [
   { id: "trending", label: "Trending" },
@@ -145,14 +146,21 @@ function HomeListingSkillRow({ entry }: { entry: SkillPageEntry }) {
         </div>
         {isSkillsSh ? (
           <div className="home-v2-listing-row-stats is-skills-sh" aria-label="Downloads">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge variant="compact" size="sm">
+                  skills.sh
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent side="top" align="center">
+                Synced from skills.sh
+              </TooltipContent>
+            </Tooltip>
             {typeof upstreamInstalls === "number" ? (
               <span title={`${upstreamInstalls.toLocaleString()} skills.sh installs`}>
                 {formatCompactStat(upstreamInstalls)}
               </span>
             ) : null}
-            <Badge variant="compact" size="sm" title="Synced from skills.sh">
-              skills.sh
-            </Badge>
           </div>
         ) : typeof item.metrics.trending24hDownloads === "number" ? (
           <div className="home-v2-listing-row-stats" aria-label="Downloads">