Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
messagesgoel-blip merged 1 commit into from
Jun 13, 2026
Merged

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions packages/chonky/src/components/browser-shell/BrowserShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,10 @@
return sorted;
};

// Reused across every item render so we don't allocate an Intl.NumberFormat per
// tile (large grids would otherwise pay that cost on each render).
const itemCountFormatter = new Intl.NumberFormat();

const formatSize = (sizeBytes?: number): string => {
if (typeof sizeBytes !== 'number') return '';
if (sizeBytes < 1024) return `${sizeBytes} B`;
Expand Down Expand Up @@ -922,9 +926,12 @@
)}
</div>
<div style={styles.itemBody}>
<span style={styles.itemName}>{item.name}</span>
{/* title exposes the full name when the label is truncated. */}
<span style={styles.itemName} title={item.name}>{item.name}</span>
<span style={styles.itemMeta}>
{item.kind === 'folder' ? `${item.childCount ?? 0} items` : formatSize(item.sizeBytes)}
{item.kind === 'folder'
? `${itemCountFormatter.format(item.childCount ?? 0)} ${item.childCount === 1 ? 'item' : 'items'}`

Check warning on line 933 in packages/chonky/src/components/browser-shell/BrowserShell.tsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Extract this nested ternary operation into an independent statement. 


See more on https://sonarcloud.io/project/issues?id=Numeracode_whimsy-file-browser&issues=AZ6-vpkcMTyUN8RmEHyM&open=AZ6-vpkcMTyUN8RmEHyM&pullRequest=23
: formatSize(item.sizeBytes)}
Comment on lines +932 to +934

@gemini-code-assist gemini-code-assist Bot Jun 13, 2026

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)

{item.source?.label ? ` · ${item.source.label}` : ''}
</span>
</div>
Expand Down
Loading