diff --git a/assets/css/views/tags.css b/assets/css/views/tags.css index 62a87914..bc3ba2fc 100644 --- a/assets/css/views/tags.css +++ b/assets/css/views/tags.css @@ -98,12 +98,6 @@ .autocomplete__item__tag__count { color: var(--autocomplete-tag-count-color); - - /* - Reduce the space size between groups of 3 digits in big numbers like "1 000 000". - This way the number is more compact and easier to read. - */ - word-spacing: -3px; } .autocomplete__item:hover:not(.autocomplete__item--selected) { diff --git a/assets/js/utils/__tests__/suggestions.spec.ts b/assets/js/utils/__tests__/suggestions.spec.ts index 5e6c8774..63886cd7 100644 --- a/assets/js/utils/__tests__/suggestions.spec.ts +++ b/assets/js/utils/__tests__/suggestions.spec.ts @@ -213,6 +213,8 @@ describe('Suggestions', () => { describe('TagSuggestion', () => { it('should format suggested tags as tag name and the count', () => { + // The snapshots in this test contain a "narrow no-break space" + /* eslint-disable no-irregular-whitespace */ expectTagRender({ canonical: 'safe', images: 10 }).toMatchInlineSnapshot(` { "label": " safe 10", @@ -221,28 +223,29 @@ describe('Suggestions', () => { `); expectTagRender({ canonical: 'safe', images: 10_000 }).toMatchInlineSnapshot(` { - "label": " safe 10 000", + "label": " safe 10 000", "value": "safe", } `); expectTagRender({ canonical: 'safe', images: 100_000 }).toMatchInlineSnapshot(` { - "label": " safe 100 000", + "label": " safe 100 000", "value": "safe", } `); expectTagRender({ canonical: 'safe', images: 1000_000 }).toMatchInlineSnapshot(` { - "label": " safe 1 000 000", + "label": " safe 1 000 000", "value": "safe", } `); expectTagRender({ canonical: 'safe', images: 10_000_000 }).toMatchInlineSnapshot(` { - "label": " safe 10 000 000", + "label": " safe 10 000 000", "value": "safe", } `); + /* eslint-enable no-irregular-whitespace */ }); it('should display alias -> canonical for aliased tags', () => { diff --git a/assets/js/utils/suggestions.ts b/assets/js/utils/suggestions.ts index 19bd798f..5cfc8888 100644 --- a/assets/js/utils/suggestions.ts +++ b/assets/js/utils/suggestions.ts @@ -64,13 +64,11 @@ export class TagSuggestion { } static formatImageCount(count: number): string { - const chars = [...count.toString()]; + // We use the 'fr' (French) number formatting style with space-separated + // groups of 3 digits. + const formatter = new Intl.NumberFormat('fr', { useGrouping: true }); - for (let i = chars.length - 3; i > 0; i -= 3) { - chars.splice(i, 0, ' '); - } - - return chars.join(''); + return formatter.format(count); } }