mirror of
https://github.com/block/buzz.git
synced 2026-08-18 06:50:31 +02:00
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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user