Skip to content

fix(browser-shell): pluralize + group folder item count, add filename title - #23

Merged
messagesgoel-blip merged 1 commit into
2.xfrom
fix/file-tile-meta-polish
Jun 13, 2026
Merged

fix(browser-shell): pluralize + group folder item count, add filename title#23
messagesgoel-blip merged 1 commit into
2.xfrom
fix/file-tile-meta-polish

Conversation

@messagesgoel-blip

@messagesgoel-blip messagesgoel-blip commented Jun 13, 2026

Copy link
Copy Markdown

User description

What

Three small file-tile rendering fixes in BrowserShell:

  • Pluralize folder item count1 items1 item (count-aware).
  • Thousands separators14473 items14,473 items via toLocaleString().
  • Filename tooltip — add title={item.name} to the item-name span so truncated names (e.g. long UUID folders) are readable on hover.

Why

Surfaced during a Whimsy transfer-mode UI polish pass. The tile meta is rendered solely by the shell (no adapter override hook), so these had to land here.

Scope / risk

One render block, additive only. No API or type changes. dist is built on install via prepare.

Deploy note

Whimsy staging (feat/onboarding-wizard-stage) is already repinned to this branch's commit (0f12b369) and verified in the served bundle. Production whimsy still pins the previous SHA and is unaffected until separately repinned.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes
    • Improved tooltip display for truncated file and folder names so the full name appears on hover.
    • Enhanced folder metadata to display item counts with localized number formatting and correct pluralization (e.g., "1 item" vs. "2 items").
    • Preserved existing size formatting for non-folder items.

CodeAnt-AI Description

Show folder counts and file names more clearly in file tiles

What Changed

  • Folder tile counts now use the correct singular form for one item and add comma separators for large counts
  • Long file or folder names now show the full name on hover when the label is cut off

Impact

✅ Clearer folder counts
✅ Easier to read large item totals
✅ Readable full names for truncated tiles

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

@cr-gpt

cr-gpt Bot commented Jun 13, 2026

Copy link
Copy Markdown

Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information

@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@codeant-ai

codeant-ai Bot commented Jun 13, 2026

Copy link
Copy Markdown

CodeAnt AI is reviewing your PR.

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Sorry @messagesgoel-blip, you have reached your weekly rate limit of 2500000 diff characters.

Please try again later or upgrade to continue using Sourcery

@coderabbitai

coderabbitai Bot commented Jun 13, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a21c60fc-adba-4d7c-bb0c-b76de36d74d4

📥 Commits

Reviewing files that changed from the base of the PR and between 40e1714 and aa1fa7f.

📒 Files selected for processing (1)
  • packages/chonky/src/components/browser-shell/BrowserShell.tsx

📝 Walkthrough

Walkthrough

BrowserShell introduces a shared Intl.NumberFormat for folder child counts and updates BrowserShellItem rendering to add title={item.name} on item name elements and to show formatted folder child counts with correct "item/items" pluralization.

Changes

Item metadata and tooltip display

Layer / File(s) Summary
Item name tooltip and folder metadata display
packages/chonky/src/components/browser-shell/BrowserShell.tsx
Adds a module-level Intl.NumberFormat for folder childCount; item name elements gain title={item.name} tooltips; folder metadata shows childCount via the formatter with proper singular/plural "item/items".

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

  • Numeracode/whimsy-file-browser#19: Introduces the BrowserShell component and BrowserShellItem rendering that this PR enhances with tooltip and metadata improvements.

Suggested labels

size:XS, ui/ux, enhancement

Poem

🐰 I format the counts with a careful hop,
I tuck full names in titles when they crop,
One item or many, the label's just right,
Small tweaks that make the UI light,
Hooray — the list looks crisp tonight!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 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 changes: fixing pluralization and grouping of folder item counts, and adding a filename tooltip.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/file-tile-meta-polish

Comment @coderabbitai help to get the list of available commands and usage tips.

@codeant-ai codeant-ai Bot added the size:XS This PR changes 0-9 lines, ignoring generated files label Jun 13, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request improves the file browser UI by adding a title attribute to show truncated item names and formatting the folder child count with proper singular/plural forms. The review feedback suggests optimizing performance by reusing a module-level Intl.NumberFormat instance instead of calling toLocaleString() on every render.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment on lines +928 to +930
{item.kind === 'folder'
? `${(item.childCount ?? 0).toLocaleString()} ${item.childCount === 1 ? 'item' : 'items'}`
: formatSize(item.sizeBytes)}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

medium

Calling toLocaleString() on every render of BrowserShellItem can introduce a performance bottleneck, especially when rendering large lists or grids of files. Since toLocaleString() internally instantiates an Intl.NumberFormat instance on every call, it is highly recommended to reuse a single module-level Intl.NumberFormat instance instead.

To fix this, you can define a formatter at the top of the file (e.g., near line 43):

const numberFormatter = new Intl.NumberFormat();

And then use it here to format the child count:

numberFormatter.format(item.childCount ?? 0)

@codeant-ai

codeant-ai Bot commented Jun 13, 2026

Copy link
Copy Markdown

CodeAnt AI finished reviewing your PR.

… title

- Folder tile meta: "1 items" -> "1 item" (count-aware plural) and thousands
  separators via toLocaleString (e.g. 14,473 items)
- Item name span gains title={name} so truncated filenames are readable on hover

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@messagesgoel-blip
messagesgoel-blip force-pushed the fix/file-tile-meta-polish branch from 40e1714 to aa1fa7f Compare June 13, 2026 02:09
@cr-gpt

cr-gpt Bot commented Jun 13, 2026

Copy link
Copy Markdown

Seems you are using me but didn't get OPENAI_API_KEY seted in Variables/Secrets for this repo. you could follow readme for more information

@messagesgoel-blip

Copy link
Copy Markdown
Author

Addressed @gemini-code-assist's suggestion: hoisted a module-level Intl.NumberFormat (itemCountFormatter) and use .format() instead of per-render toLocaleString(). Rebuilt + verified on staging.

@sonarqubecloud

Copy link
Copy Markdown

@messagesgoel-blip
messagesgoel-blip merged commit 00a360e into 2.x Jun 13, 2026
4 checks passed
@messagesgoel-blip
messagesgoel-blip deleted the fix/file-tile-meta-polish branch June 13, 2026 02:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS This PR changes 0-9 lines, ignoring generated files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant