desktop: project lists show the activity bar without count labels

Project cards and rows drop the textual commit/PR/issue stats and keep
only the segmented activity bar — the exact counts remain in the bar's
hover tooltips. Repository lists keep the text stats next to the bar.

Signed-off-by: Thomas Petersen <thomasp@squareup.com>
This commit is contained in:
Thomas Petersen
2026-08-11 10:51:03 -04:00
parent 1c6f4eee5f
commit bb6ce57087
2 changed files with 28 additions and 20 deletions
@@ -171,6 +171,10 @@ const PROJECT_STAT_ITEMS = [
},
] as const;
/**
* Textual commit/PR/issue counts. Repository lists show these next to the
* activity bar; project lists show the bar alone (counts via its tooltips).
*/
export function ProjectStatsRow({
summary,
fixedColumns = false,
@@ -226,7 +230,10 @@ export function ProjectActivityBar({
// z-10 lifts the bar above the card's full-surface open button so it
// can receive hover events. Fixed h-2 wrapper keeps layout stable
// while the inner bar grows on hover.
<div className="group/activity-bar relative z-10 flex h-2 w-full items-center">
<div
className="group/activity-bar relative z-10 flex h-2 w-full items-center"
data-testid="project-activity-bar"
>
<div className="flex h-1.5 w-full gap-px overflow-hidden rounded-full bg-muted/60 transition-all duration-150 group-hover/activity-bar:h-2">
{total > 0
? items
@@ -547,13 +554,8 @@ export function ProjectGridCard({
/>
</div>
<div className="mt-auto">
<div className="flex min-w-0 items-center px-4 pb-2 pt-1">
<ProjectStatsRow summary={summary} />
</div>
<div className="px-4 pb-3">
<ProjectActivityBar summary={summary} />
</div>
<div className="mt-auto px-4 pb-3 pt-2">
<ProjectActivityBar summary={summary} />
</div>
</div>
</Card>
@@ -618,11 +620,10 @@ export function ProjectListRow({
/>
</div>
<div
className="hidden items-center gap-3 xl:flex"
className="hidden items-center xl:flex"
data-testid="projects-row-summary"
>
<ProjectStatsRow fixedColumns summary={summary} />
<div className="w-20 shrink-0">
<div className="w-32 shrink-0">
<ProjectActivityBar summary={summary} />
</div>
</div>
@@ -73,10 +73,19 @@ test("top-level project lists align dates and overflow actions", async ({
).toBeVisible();
await expect(page.getByRole("menuitem", { name: "Local" })).toBeVisible();
await page.keyboard.press("Escape");
const projectPositions = await trailingPositions(
page.locator('[data-testid^="project-row-"]').first(),
{ summaryTestId: "projects-row-summary" },
);
const projectRow = page.locator('[data-testid^="project-row-"]').first();
const projectPositions = await trailingPositions(projectRow, {
summaryTestId: "projects-row-summary",
});
// Project rows show the activity bar alone — counts stay in its tooltips.
await expect(
projectRow
.getByTestId("projects-row-summary")
.getByTestId("project-activity-bar"),
).toBeVisible();
await expect(
projectRow.getByTestId("projects-row-summary"),
).not.toContainText("commits");
await page.getByTestId("projects-section-repositories").click();
await page.getByRole("button", { name: "Filter repositories" }).click();
@@ -100,11 +109,9 @@ test("top-level project lists align dates and overflow actions", async ({
dateTestId: "repositories-row-date",
summaryTestId: "repositories-row-summary",
});
expect(
Math.abs(
(repositoryPositions.summaryX ?? 0) - (projectPositions.summaryX ?? 0),
),
).toBeLessThanOrEqual(ALIGNMENT_TOLERANCE_PX);
// No summaryX comparison: repository rows carry text stats next to the bar
// while project rows show the bar alone, so the columns differ in width by
// design. The right-anchored date and menu still align across the lists.
expect(
Math.abs(repositoryPositions.rowHeight - projectPositions.rowHeight),
).toBeLessThanOrEqual(ALIGNMENT_TOLERANCE_PX);