Refactor translations to use cached values

[deleonio]

This pull request introduces a consistent approach to handling translations across multiple components by storing translated strings in private readonly variables. This change improves code readability and maintainability by centralizing translation logic and reducing repetitive calls to the translate function. Additionally, it updates various components to use these variables instead of direct translate calls.

Translation Centralization and Usage Updates:

General Guidelines:

• Updated AGENTS.md to include a guideline specifying that constant declarations should not precede import statements.

Component-Specific Changes:

1. KolCard Component (component.tsx):

   • Added translateClose variable and replaced direct calls to translate('kol-close') with this variable. [1] [2]

2. KolForm Component (shadow.tsx):

   • Introduced variables for form-related translations (translateErrorListMessage, translateErrorList, translateFormDescription) and updated their usage in JSX elements. [1] [2] [3]

3. KolInputFile Component (shadow.tsx):

   • Added translation variables (translateDataBrowseText, translateFilenameText) and replaced direct calls to translate with these variables. [1] [2] [3] [4]

4. KolInputPassword Component (shadow.tsx):

   • Added translateHidePassword and translateShowPassword variables for password toggle labels and updated their usage. [1] [2]

5. KolPagination Component (component.tsx):

   • Centralized pagination-related translations (translatePageFirst, translatePageBack, translatePageNext, translatePageLast, translateEntriesPerSite, translatePage, translatePagination) and updated their usage. [1] [2] [3] [4] [5] [6] [7] [8] [9]

6. KolSingleSelect Component (shadow.tsx):

   • Introduced translateDeleteSelection and translateNoResultsMessage variables and updated their usage in JSX elements. [1] [2] [3]

7. KolKolibri Component (shadow.tsx):

   • Added translateKolibriLogo variable for the Kolibri logo aria-label and updated its usage.

8. KolLinkWc Component (component.tsx):

   • Added translateOpenLinkInTab variable for external link labels and updated its usage. [1] [2] [3]

9. KolModal Component (shadow.tsx):

   • Added translateClose variable for modal close button label and updated its usage. [1] [2]

[github-actions]

Netlify Draft Deployment
URL: https://687e03f16112c1e0b0f61efb--kolibri-public-ui.netlify.app
Logs: https://app.netlify.com/projects/kolibri-public-ui/deploys/687e03f16112c1e0b0f61efb

[github-actions]

Hydration Benchmark Report (vs Baseline)

✅ Top 5 Improvements (Best Speedups)

Component	Current	Baseline	Δ%	Result
kol-input-radio	49.9ms	56.5ms	-11.7%	✅
kol-table-stateless	386.1ms	437ms	-11.6%	✅
kol-skip-nav	21ms	23.6ms	-11%	✅
kol-button	56.3ms	63ms	-10.6%	✅
kol-nav	30.8ms	33.9ms	-9.1%	➖

🔻 Flop 5 Regressions (Worst Slowdowns)

Component	Current	Baseline	Δ%	Result
kol-drawer	41.4ms	25.6ms	+61.7%	🔻
kol-card	29.5ms	22.6ms	+30.5%	🔻
kol-table-stateful	431.9ms	374.7ms	+15.3%	🔻
kol-modal	23ms	20.5ms	+12.2%	🔻
kol-button-link	56.7ms	50.7ms	+11.8%	🔻

📋 Show all results

Component	Current	Baseline	Δ%	Result
kol-abbr	20ms	19.8ms	+1%	➖
kol-accordion	135.2ms	131ms	+3.2%	➖
kol-alert	107.6ms	105.9ms	+1.6%	➖
kol-avatar	25.7ms	26.9ms	-4.5%	➖
kol-badge	66.6ms	70.1ms	-5%	➖
kol-breadcrumb	95.2ms	97.6ms	-2.5%	➖
kol-button	56.3ms	63ms	-10.6%	✅
kol-button-link	56.7ms	50.7ms	+11.8%	🔻
kol-card	29.5ms	22.6ms	+30.5%	🔻
kol-details	128.8ms	134.9ms	-4.5%	➖
kol-drawer	41.4ms	25.6ms	+61.7%	🔻
kol-form	35.9ms	35.6ms	+0.8%	➖
kol-heading	22.8ms	21.5ms	+6%	➖
kol-icon	64.7ms	65.1ms	-0.6%	➖
kol-image	19.2ms	19.3ms	-0.5%	➖
kol-input-checkbox	136.4ms	141.3ms	-3.5%	➖
kol-input-color	81.5ms	81.9ms	-0.5%	➖
kol-input-date	68.7ms	70.3ms	-2.3%	➖
kol-input-email	63.1ms	62.5ms	+1%	➖
kol-input-file	97.1ms	93.7ms	+3.6%	➖
kol-input-number	56.8ms	56.1ms	+1.2%	➖
kol-input-password	52.3ms	51.6ms	+1.4%	➖
kol-input-radio	49.9ms	56.5ms	-11.7%	✅
kol-input-text	60.6ms	59.3ms	+2.2%	➖
kol-link	51.5ms	49.8ms	+3.4%	➖
kol-link-button	59.1ms	56.5ms	+4.6%	➖
kol-modal	23ms	20.5ms	+12.2%	🔻
kol-nav	30.8ms	33.9ms	-9.1%	➖
kol-pagination	440.2ms	423.8ms	+3.9%	➖
kol-popover-button	71.2ms	71.3ms	-0.1%	➖
kol-progress	31.1ms	32.8ms	-5.2%	➖
kol-quote	19.8ms	19ms	+4.2%	➖
kol-select	118.8ms	117.1ms	+1.5%	➖
kol-skip-nav	21ms	23.6ms	-11%	✅
kol-spin	25.2ms	24.2ms	+4.1%	➖
kol-split-button	170.9ms	174.7ms	-2.2%	➖
kol-table-stateful	431.9ms	374.7ms	+15.3%	🔻
kol-table-stateless	386.1ms	437ms	-11.6%	✅
kol-tabs	30.5ms	32.3ms	-5.6%	➖
kol-textarea	51.4ms	54.1ms	-5%	➖
kol-toolbar	35ms	36ms	-2.8%	➖
kol-tree	27.1ms	26.5ms	+2.3%	➖
kol-tree-item	65.8ms	64ms	+2.8%	➖
kol-version	148.9ms	154.8ms	-3.8%	➖

[Copilot]

Pull Request Overview

This PR refactors translation handling across the component library by caching translation strings to avoid repeated translate() calls during rendering. Instead of calling translate() on every render, translations are now stored as constant values or private readonly properties that are computed once and reused.

Key changes include:

• Moving translate() calls from render methods to module-level constants in functional components
• Converting inline translate() calls to cached private readonly properties in class components
• Maintaining the same translation functionality while improving performance through caching

Reviewed Changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
FormFieldCounter.tsx	Cached translation strings for "of" and "characters" labels as module constants
CustomSuggestionsToggle.tsx	Cached dropdown translation string as module constant
AlertIcon.tsx	Cached all alert type translation strings as module constants
Alert.tsx	Cached close alert translation as module constant
version/shadow.tsx	Moved version translation to private readonly property
toaster/shadow.tsx	Moved toast close all translation to private readonly property
table-stateless/table-settings.tsx	Cached multiple table settings translations as private readonly properties
table-stateless/component.tsx	Cached no entries translation as private readonly property
spin/shadow.tsx	Cached action running/done translations as private readonly properties
single-select/shadow.tsx	Cached delete selection and no results translations as private readonly properties
pagination/component.tsx	Cached all pagination-related translations as private readonly properties
modal/shadow.tsx	Cached close translation as private readonly property
link/component.tsx	Cached open link in tab translation as private readonly property
kolibri/shadow.tsx	Cached kolibri logo translation as private readonly property
input-password/shadow.tsx	Cached hide/show password translations as private readonly properties
input-file/shadow.tsx	Cached browse text and filename translations as private readonly properties
form/shadow.tsx	Cached form-related error and description translations as private readonly properties
card/component.tsx	Cached close translation as private readonly property