Skip to content

feat(ui): show item count next to issue group headers#1924

Open
bluzername wants to merge 2 commits intopaperclipai:masterfrom
bluzername:fix/issue-group-header-counts
Open

feat(ui): show item count next to issue group headers#1924
bluzername wants to merge 2 commits intopaperclipai:masterfrom
bluzername:fix/issue-group-header-counts

Conversation

@bluzername
Copy link
Copy Markdown

@bluzername bluzername commented Mar 27, 2026

Thinking Path

  • Paperclip orchestrates ai-agents for zero-human companies
  • But humans want to watch the agents and oversee their work
  • So there is a UI where humans can see and manage issues
  • Issues can be grouped by status or priority using group headers
  • But the group headers only show the label, not how many issues are in each group
  • When groups are collapsed you cannot tell how many items are hidden inside
  • This PR add a small count number next to each group header label
  • The benefit is users can quickly see the size of each group without counting manually or expanding collapsed groups

Problem

When you group issues by status or priority in the issues list, each group header show the category name like "IN PROGRESS" or "HIGH" but no count. If I want to know how many issues are in each status group, I have to count them visually which is impossible when groups are collapsed.

This is a very standard pattern - every project management tool show counts on their group headers (Jira, Linear, GitHub Projects, etc).

What I changed

Added a small count number right next to the group label text. For example now it show "IN PROGRESS 5" instead of just "IN PROGRESS".

The count use:

  • text-xs text-muted-foreground so it don't compete visually with the bold label
  • tabular-nums for consistent width when numbers change
  • Spacing between label and count is handled by the parent gap-1.5 (no extra margin needed)

The count come from group.items.length which is already computed in the groupedContent memo - no new computation needed.

How to test

  1. Go to Issues page
  2. Click "Group" button and select "Status" or "Priority"
  3. Each group header should now show a count number next to the label
  4. Collapse a group and the count should still be visible so you know how many items are hidden

1 file, 3 lines added.

When issues are grouped by status or priority, the group headers
was showing only the label like "IN PROGRESS" or "HIGH" without
any count. User had to visually count the items in each group
to understand the distribution.

Added a small count number next to each group header label.
Uses muted text color and tabular-nums for consistent width.
The count come from group.items.length which is already
computed in the groupedContent memo.
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 27, 2026

Greptile Summary

This PR adds a small item count next to each group header label in the issues list view (e.g. "IN PROGRESS 5"). The change is a single, well-scoped 3-line addition that reuses the already-computed group.items.length — no new data fetching or computation is required.\n\n- The count is conditionally rendered inside the existing {group.label && (...)} guard, so it won't appear for ungrouped/unlabelled rows.\n- The parent CollapsibleTrigger already uses gap-1.5, making the extra ml-1.5 on the count span redundant — it doubles the spacing between the label text and the count compared to the chevron-to-label gap.\n- The PR description is missing the required "thinking path" and before/after screenshots called for in CONTRIBUTING.md.

Confidence Score: 5/5

Safe to merge; the only findings are a minor spacing inconsistency and missing PR description sections.

All findings are P2 (style/process): one redundant margin class and a missing thinking path / screenshots in the PR description. The code change itself is correct, uses existing data, and is properly guarded.

No files require special attention.

Important Files Changed

Filename Overview
ui/src/components/IssuesList.tsx Adds a count badge next to group header labels using group.items.length; minor double-margin issue with ml-1.5 on top of an existing gap-1.5 on the parent flex container.
Prompt To Fix All With AI
This is a comment left during a code review.
Path: ui/src/components/IssuesList.tsx
Line: 688-690

Comment:
**Redundant `ml-1.5` creates double spacing**

The parent `CollapsibleTrigger` already applies `gap-1.5` between all flex children. Adding `ml-1.5` to the count span means the gap between the label text and the count ends up being `gap-1.5 + ml-1.5` (roughly double), while the gap between the chevron and the label stays at just `gap-1.5`. Dropping the extra margin keeps the spacing consistent across all three children.

```suggestion
                  <span className="text-xs text-muted-foreground tabular-nums">
                    {group.items.length}
                  </span>
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: ui/src/components/IssuesList.tsx
Line: 688-690

Comment:
**PR description is missing required sections**

Per `CONTRIBUTING.md`, PRs should include:

1. **A "thinking path"** — a short narrative from the top of the project down to the specific problem being fixed (see the examples in `CONTRIBUTING.md`).
2. **Before / after screenshots** — this is a visible UI change (group headers now display a count), so screenshots are required.

Could you update the PR description to include both? This makes it much easier for maintainers to review and merge.

**Context Used:** CONTRIBUTING.md has a guide for a good PR message ... ([source](https://app.greptile.com/review/custom-context?memory=instruction-0))

How can I resolve this? If you propose a fix, please make it concise.

Reviews (1): Last reviewed commit: "feat(ui): show issue count on group head..." | Re-trigger Greptile

Comment on lines +688 to +690
<span className="text-xs text-muted-foreground tabular-nums ml-1.5">
{group.items.length}
</span>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Redundant ml-1.5 creates double spacing

The parent CollapsibleTrigger already applies gap-1.5 between all flex children. Adding ml-1.5 to the count span means the gap between the label text and the count ends up being gap-1.5 + ml-1.5 (roughly double), while the gap between the chevron and the label stays at just gap-1.5. Dropping the extra margin keeps the spacing consistent across all three children.

Suggested change
<span className="text-xs text-muted-foreground tabular-nums ml-1.5">
{group.items.length}
</span>
<span className="text-xs text-muted-foreground tabular-nums">
{group.items.length}
</span>
Prompt To Fix With AI
This is a comment left during a code review.
Path: ui/src/components/IssuesList.tsx
Line: 688-690

Comment:
**Redundant `ml-1.5` creates double spacing**

The parent `CollapsibleTrigger` already applies `gap-1.5` between all flex children. Adding `ml-1.5` to the count span means the gap between the label text and the count ends up being `gap-1.5 + ml-1.5` (roughly double), while the gap between the chevron and the label stays at just `gap-1.5`. Dropping the extra margin keeps the spacing consistent across all three children.

```suggestion
                  <span className="text-xs text-muted-foreground tabular-nums">
                    {group.items.length}
                  </span>
```

How can I resolve this? If you propose a fix, please make it concise.

Comment on lines +688 to +690
<span className="text-xs text-muted-foreground tabular-nums ml-1.5">
{group.items.length}
</span>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 PR description is missing required sections

Per CONTRIBUTING.md, PRs should include:

  1. A "thinking path" — a short narrative from the top of the project down to the specific problem being fixed (see the examples in CONTRIBUTING.md).
  2. Before / after screenshots — this is a visible UI change (group headers now display a count), so screenshots are required.

Could you update the PR description to include both? This makes it much easier for maintainers to review and merge.

Context Used: CONTRIBUTING.md has a guide for a good PR message ... (source)

Prompt To Fix With AI
This is a comment left during a code review.
Path: ui/src/components/IssuesList.tsx
Line: 688-690

Comment:
**PR description is missing required sections**

Per `CONTRIBUTING.md`, PRs should include:

1. **A "thinking path"** — a short narrative from the top of the project down to the specific problem being fixed (see the examples in `CONTRIBUTING.md`).
2. **Before / after screenshots** — this is a visible UI change (group headers now display a count), so screenshots are required.

Could you update the PR description to include both? This makes it much easier for maintainers to review and merge.

**Context Used:** CONTRIBUTING.md has a guide for a good PR message ... ([source](https://app.greptile.com/review/custom-context?memory=instruction-0))

How can I resolve this? If you propose a fix, please make it concise.

Parent CollapsibleTrigger already use gap-1.5 for spacing between children,
so ml-1.5 on the count span was creating double margin. Removed it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant