Show game counts on the All Games and Playing sidebar items

[Doezer]

Requested by Vincent · project thread

Description

Before: in the sidebar's Library group, only Wishlist showed a count.

After: All Games and Playing show one too. Playing uses its cyan status color (bg-cyan-600, the same as the Playing status badge). All Games uses a neutral outline badge so the library total doesn't compete with the status counts. Wishlist keeps its current style. A badge is hidden when its count is 0.

How: AppSidebar counts wanted and playing games in the same single pass over the /api/games query it already used, and All Games uses that list's length (non-hidden games, shelved included). Each nav item can now carry a badge variant and class. The sub-item aria-label reads "Playing, 3 games" (singular for 1). Added client/__tests__/AppSidebar.test.tsx and a CHANGELOG line under 1.5.0.

Screenshots

Captured with headless Chromium against npm run dev:test, with 9 seeded games (2 wanted, 3 playing). On phones the sidebar is replaced by the bottom nav, so the tablet capture (820x1180) is the narrowest width where it shows.

Desktop, dark:

Desktop, light:

Tablet, dark and light:

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• If this PR adds a new actor/integration, external interface, or security-relevant change, I have updated docs/ARCHITECTURE.md, docs/API.md, and/or docs/SECURITY_ASSESSMENT.md accordingly
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes (npm run check clean, new sidebar tests pass)
• If the database schema changed, SQLite and Postgres are both updated (no schema change)
• For UI changes, I have included a screenshot or recording of it running
• If AI is used to write the code (partially or entirely), provide the full model name (including version) and thinking level. Written with Claude Code (see session link below).

🤖 Generated with Claude Code

https://claude.ai/code/session_01EPHzuYPjAo8LK9QeSz38Fy

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • The sidebar now shows game counts for All Games and Playing, with distinct styling for each section.
  • Count badges are hidden when the library is empty.
  • Screen reader labels now use the correct singular or plural form for games.

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
questarr	🟢 Ready	View Preview	Oct 6, 2026, 11:41 AM

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-06T11:43:17.763047Z	dde4969	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: ec6f4dbb-558c-42a5-8af6-9acd3fb902e5

📥 Commits

Reviewing files that changed from the base of the PR and between 41cb4ca and dde4969.

📒 Files selected for processing (3)

• client/__tests__/AppSidebar.test.tsx
• client/src/components/AppSidebar.tsx
• docs/CHANGELOG.md

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 2 remain after this review.

---

📝 Walkthrough

Walkthrough

AppSidebar now displays game counts for All Games, Wishlist, and Playing. The Playing badge uses cyan styling, and child navigation labels use “game” or “games” based on the count.

Changes

Sidebar game counts

Layer / File(s)	Summary
Compute and render sidebar counts client/src/components/AppSidebar.tsx, client/__tests__/AppSidebar.test.tsx, docs/CHANGELOG.md	AppSidebar counts wanted and playing games in one memoized pass. It displays an outline badge for All Games and a cyan badge for Playing, and retains Wishlist and download badges. Child labels use count-specific wording. Tests cover the counts, styling, and empty-library state. The changelog describes the added counts.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Suggested reviewers: claude

Merge Risk: ⚪ Minimal · up to dde49

The game-count badges are ready to merge after normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding game counts to the All Games and Playing sidebar items.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 unsupported.)

• Fix all pre-merge checks with AI

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Doezer]

wshm · Automated triage by AI

📊 Automated PR Analysis

✨ Type	feature
🟢 Risk	low

Summary

Adds game count badges to the All Games and Playing items in the sidebar's Library group, alongside the existing Wishlist count. Playing uses the cyan status color matching its status badge, while All Games uses a neutral outline badge; badges hide when count is 0. Includes new AppSidebar tests and a CHANGELOG entry.

Review Checklist

• Tests present
• Breaking change
• Docs updated

---

Analyzed automatically by wshm · This is an automated analysis, not a human review.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!