locale-string-extract.mdc

---
description: 
globs: 
alwaysApply: false
---
## Task
Extract strings into the specified `.json` locale file.

## Instructions
- Be mindful of common keys and reuse them instead of creating new ones.
- When updating the code file to match the extracted strings:
  - Populate the full key path into the `t(...)` function with the format of `namespace:key.subkey...`.
  - For components wrapper, use `Trans` (from `react-i18next`) instead of `t`.
  - NEVER extract elements that user can NOT see or interact with e.g. `aria-labels`, `alt` attributes, etc.

⚠️ IMPORTANT RESTRICTIONS:
- NEVER use or import the `useTranslation` hook
- ALWAYS use the `t(...)` function directly, NEVER import `t` because it is available globally (auto-imported)
- ONLY use `Trans` component for complex translations

## Examples
```json
{
  "pluginsPage": {
    "noPluginsFound": {
      "title": "No plugins found",
      "description": "Try adjusting your search term/filters or <url>request a new one</url> 😉"
    }
  }
}
```

```tsx
import { Trans } from "react-i18next";

<div>{t("dashboard-plugins-page:pluginsPage.noPluginsFound.title")}</div>
<Trans
  i18nKey="dashboard-plugins-page:pluginsPage.noPluginsFound.description"
  components={{
    url: (
      <a
        href="#"
        className="tw-underline tw-transition-colors hover:tw-text-foreground"
        target="_blank"
        rel="noreferrer"
      />
    ),
  }}
/>;
```