ali-ahnaf / ali-ahnaf/pocket_pixel

Internationalization (i18n) - Language Support & Switcher in Settings

未关闭
#96 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
epic frontend up for grabs
主要语言
TypeScript
星标
14
派生
91
PR 合并指标
30 天内没有已合并 PR

描述

## 🗺️ Context / Background

The app currently only supports English. To make it more accessible — especially for Bangla-speaking users — we want to add internationalization (i18n) support and a language switcher in the Settings page.

**Primary languages to support:**
1. 🇬🇧 English (`en`)
2. 🇧🇩 Bangla (`bn`)

---

## 🎯 Problem / Goal

Add i18n support to the Next.js frontend (`packages/ui`) and let users switch the app language from the Settings page. The selected language should persist across page refreshes.

---

## 🔧 Suggested Approach

### 1. Choose an i18n library
Recommended: **`next-intl`** (works well with Next.js 14 App Router).

Install it:
```bash
cd packages/ui && npm install next-intl
```

Docs: https://next-intl-docs.vercel.app/

### 2. Create translation files
Create message files under `packages/ui/src/messages/`:
```
packages/ui/src/messages/
en.json ← English strings
bn.json ← Bangla strings
```

Start by moving all hardcoded UI strings (nav labels, button text, page titles, dashboard labels, error messages) into `en.json`, then translate them into `bn.json`.

Example structure:
```json
{
"nav": {
"home": "Home",
"vaults": "Vaults",
"settings": "Settings"
},
"dashboard": {
"lootGained": "Loot Gained",
"lootSpent": "Loot Spent"
}
}
```

### 3. Configure next-intl
- Create `packages/ui/src/i18n.ts` as the next-intl config file
- Wrap the app in `packages/ui/src/app/layout.tsx` with the `NextIntlClientProvider`
- Follow the [App Router setup guide](https://next-intl-docs.vercel.app/docs/getting-started/app-router)

### 4. Replace hardcoded strings
Go through each page and component and replace hardcoded strings with the `useTranslations` hook:
```ts
const t = useTranslations('nav');
// {t('home')}
```

### 5. Add language switcher to Settings
In the Settings page (`packages/ui/src/app/settings/page.tsx`), add a **Language** setting with a dropdown or a set of buttons showing the available languages (English / বাংলা).

On selection:
- Update the active locale
- Persist the choice in `localStorage` (key: `preferred_locale`) so it survives refreshes
- Load the stored preference on app init

---

## ✅ Acceptance Criteria

- [ ] `next-intl` (or equivalent) is installed and configured for the App Router
- [ ] `en.json` and `bn.json` translation files exist and cover all visible UI strings
- [ ] All hardcoded UI strings are replaced with translation keys
- [ ] A language switcher is visible in the Settings page (English / বাংলা)
- [ ] Switching language immediately updates all visible text
- [ ] Selected language persists across page refreshes (via `localStorage`)
- [ ] No layout breakage when switching between English and Bangla (check for text overflow on narrow elements)

---

## 🔗 Dependencies

**Must be completed first:**
- Settings Page frontend issue ("Settings Page - Navigation & Income/Expense Visibility Toggles")

贡献指南

这个仓库没有索引到贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。