From aa1fa7f23dc3c18facc2ea6dddd0d83d264c1789 Mon Sep 17 00:00:00 2001
From: Sanjay Goel <messagesgoel-blip@users.noreply.github.com>
Date: Fri, 12 Jun 2026 21:20:37 -0400
Subject: [PATCH] fix(browser-shell): pluralize + group folder item count, add
 filename 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>
---
 .../src/components/browser-shell/BrowserShell.tsx     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/chonky/src/components/browser-shell/BrowserShell.tsx b/packages/chonky/src/components/browser-shell/BrowserShell.tsx
index 0b4ef018..f35094d1 100644
--- a/packages/chonky/src/components/browser-shell/BrowserShell.tsx
+++ b/packages/chonky/src/components/browser-shell/BrowserShell.tsx
@@ -115,6 +115,10 @@ const sortItems = (items: readonly BrowserItem[], sort: BrowserSortState): reado
     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`;
@@ -922,9 +926,12 @@ const BrowserShellItem: React.FC<BrowserShellItemProps> = (props) => {
                 )}
             </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'}`
+                        : formatSize(item.sizeBytes)}
                     {item.source?.label ? ` · ${item.source.label}` : ''}
                 </span>
             </div>