fix: missing i18n translation for Trans

[tomerqodo]

Benchmark PR from qodo-benchmark#281

[greptile-apps]

Greptile Summary

This PR fixes missing i18n translation configurations for Trans components and upgrades i18next libraries to support the new API. The changes correctly add explicit ns (namespace) props and adjust i18nKey values to match the updated i18next v25 requirements where namespace prefixes should not be included in the key itself.

Key changes:

• Fixed Trans component usage across 8 files by adding explicit ns props and removing namespace prefixes from i18nKey values
• Upgraded i18next from v23.16.8 to v25.7.3 and react-i18next from v15.7.4 to v16.5.0
• Fixed variable name inconsistency in email-change-modal.tsx (using email instead of mail at line 341)

Critical issue found:

• install.tsx contains a React Rules of Hooks violation where usePluginTaskList hook is called inside the handleInstall async function instead of at the component's top level. This will cause runtime errors and must be fixed before merging.

Confidence Score: 1/5

• This PR contains a critical bug that will cause runtime errors in production.
• While the i18n translation fixes are correct and well-structured, there is a critical React Rules of Hooks violation in install.tsx where a hook is called inside an async function. This will cause React to throw an error at runtime and break the plugin installation functionality.
• Critical attention needed: web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx - contains Rules of Hooks violation that must be fixed

Important Files Changed

Filename	Overview
web/app/account/(commonLayout)/account-page/email-change-modal.tsx	Fixed i18n Trans component by removing 'common.' prefix from i18nKey and adding explicit ns prop. Also fixed variable name from 'mail' to 'email' at line 341.
web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx	Critical bug: moved usePluginTaskList hook call inside handleInstall function, violating React Rules of Hooks. Also added missing 'ns' prop to Trans component.
web/package.json	Updated i18next from ^23.16.8 to ^25.7.3 and react-i18next from ^15.7.4 to ^16.5.0.

Sequence Diagram

sequenceDiagram
    participant Component as React Component
    participant Trans as Trans Component
    participant i18next as i18next Library
    participant Locale as Translation Files
    
    Note over Component,Locale: i18n Translation Resolution Flow
    
    Component->>Trans: Render with i18nKey and ns props
    Note over Trans: Updated to separate key and namespace
    
    Trans->>i18next: Request translation with key and namespace
    i18next->>Locale: Load from namespace file
    Note over Locale: Example: web/i18n/en-US/common.json
    Locale->>i18next: Return translated string
    i18next->>Trans: Formatted translation with interpolation
    Trans->>Component: Rendered translated content
    
    Note over Component: Critical Issue in install.tsx
    Component->>Component: User clicks Install button
    Component->>Component: handleInstall function called
    Note over Component: usePluginTaskList hook called here<br/>violates Rules of Hooks
    Component--xComponent: Runtime Error

Loading

[greptile-apps]

_{9 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: Violates React Rules of Hooks - usePluginTaskList cannot be called inside handleInstall function. Hooks must be called at the top level of the component, not inside callbacks or async functions. This will cause a runtime error.

Suggested change

	const handleInstall = async () => {
	const { handleRefetch } = usePluginTaskList(payload.category)
	const { handleRefetch } = usePluginTaskList(payload.category)
	const handleInstall = async () => {

Prompt To Fix With AI

This is a comment left during a code review.
Path: web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
Line: 68:69

Comment:
**logic:** Violates React Rules of Hooks - `usePluginTaskList` cannot be called inside `handleInstall` function. Hooks must be called at the top level of the component, not inside callbacks or async functions. This will cause a runtime error.

```suggestion
  const { handleRefetch } = usePluginTaskList(payload.category)
  const handleInstall = async () => {
```

How can I resolve this? If you propose a fix, please make it concise.