When formatting UI output, treat localization/wording and interactive semantics as part of code style:
- Build user-facing summaries from self-contained, fully translated phrases (avoid assembling with hardcoded “read/search/folder” fragments and manual punctuation).
- Use locale-aware list/joining (e.g., Intl.ListFormat) and localized verb phrases so languages with different grammar (e.g., Korean) don’t produce unnatural text.
- Preserve semantic correctness for controls: use the right HTML element for the action (e.g., a real button for click/keyboard activation) even if it’s styled like a link.
- Prefer shared UI primitives/components (e.g., standard icon components/imports) to keep style consistent and easy to verify.
Example (pattern):
const parts: string[] = [];
if (counts.read > 0) parts.push(t('chatView:toolGroup.files', { count: counts.read }));
if (counts.list > 0) parts.push(t('chatView:toolGroup.folders', { count: counts.list }));
// ...
if (parts.length === 0) return t('chatView:toolGroup.contextFallback');
return t('chatView:toolGroup.summary', { items: new Intl.ListFormat(locale).format(parts) });
And for interactivity:
<button type="button" onClick={handleModelButtonClick}>Choose model</button>