feat(ui): show item count next to issue group headers#1924
feat(ui): show item count next to issue group headers#1924bluzername wants to merge 2 commits intopaperclipai:masterfrom
Conversation
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 SummaryThis 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 Confidence Score: 5/5Safe 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
Prompt To Fix All With AIThis 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 |
ui/src/components/IssuesList.tsx
Outdated
| <span className="text-xs text-muted-foreground tabular-nums ml-1.5"> | ||
| {group.items.length} | ||
| </span> |
There was a problem hiding this 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.
| <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.
ui/src/components/IssuesList.tsx
Outdated
| <span className="text-xs text-muted-foreground tabular-nums ml-1.5"> | ||
| {group.items.length} | ||
| </span> |
There was a problem hiding this comment.
PR description is missing required sections
Per CONTRIBUTING.md, PRs should include:
- 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). - 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.
Thinking Path
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-foregroundso it don't compete visually with the bold labeltabular-numsfor consistent width when numbers changegap-1.5(no extra margin needed)The count come from
group.items.lengthwhich is already computed in the groupedContent memo - no new computation needed.How to test
1 file, 3 lines added.