Issue #16 - [FEATURE] Add Request Count Badge to Collection Folders in Sidebar

[rogelio-cmj]

Motivation

When working with large API collections, users need to quickly understand the scope and organization of their workspace. Currently, collection folders in the sidebar show only their name and icon, with no indication of how many requests they contain. This makes it difficult to assess at a glance which collections are actively used, which are empty, or which might need reorganization.

Adding a count badge to display the number of requests in each collection would improve the user experience by providing immediate visual feedback about collection size.

Current Behavior

Collection folders in the API Client sidebar display only the folder name and icon. Users must expand each folder to see its contents and cannot tell at a glance how many requests are contained within each collection.

Reproduction Steps:

1. Open the Scalar API Client
2. Create multiple collections with varying numbers of requests (e.g., one with 1 request, another with 2, another empty)
3. Look at the sidebar where collections are listed
4. Observe: Only collection names and icons are visible
5. Note: There is no visual indicator of how many requests each collection contains

Expected Behavior

Each collection folder in the sidebar should display a small badge showing the number of requests it contains. The badge should be visually distinct but not overwhelming, positioned near the collection name. Empty collections (0 requests) might show no badge or show "0" depending on UX preference.

Acceptance Criteria:

• A badge displaying the request count appears next to each collection name in the sidebar
• The count accurately reflects the total number of requests in the collection (including nested folders)
• The badge updates dynamically when requests are added or removed
• The badge styling is consistent with the application's design system
• Empty collections either show no badge

Steps To Test

1. Start the API Client with pnpm dev:client
2. Create a new collection and add 3-5 requests to it
3. Verify a badge appears showing the correct count
4. Add another request and verify the count increments
5. Delete a request and verify the count decrements
6. Create a collection with nested folders containing requests and verify the count includes all nested requests
7. Create an empty collection and verify it shows no badge

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx