feat(ui): implement light-dark-system theme and bilingual en-vi support (!2) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(ui): implement light-dark-system theme and bilingual en-vi support

Summary of Changes

This PR implements full Light / Dark / System theme switching alongside Bilingual English - Vietnamese (en / vi) localization for the Data Crawler Frontend, and locks these requirements into the project's permanent AI guidelines.

Key Additions & Updates

1. Multi-Theme Support (Light / Dark / System)

Engine: Integrated next-themes with attribute="class", hydration suppression, and system theme auto-detection (prefers-color-scheme).
Biophilic Color Tokens (globals.css):
- Light Mode: Warm sand / soft cream background (#FBFBF9), crisp card containers, soft dark charcoal text (#1C2826), and emerald accents (#059669).
- Dark Mode: Deep moss / dark forest background (#090D16), deep slate cards (#0F172A), and vivid emerald highlights (#10B981).
ThemeToggle Component: Segmented pill control supporting Sun (Light), Moon (Dark), and Monitor (System) modes with organic rounded corners.

2. Bilingual i18n Localization (English & Tiếng Việt)

LanguageProvider: Type-safe React context supporting instant language toggling with localStorage persistence (data_crawler_lang) and browser locale fallback.
Centralized Dictionary (src/lib/i18n/translations.ts): Comprehensive translation keys for Navigation, Hero, Stats, Dialogs, Tables, and Status badges.
LanguageToggle Component: Compact header button with smooth transition between VI and EN.

3. Component & Layout Synchronization

Navbar: Added ThemeToggle and LanguageToggle controls directly into the sticky header.
RootLayout & Providers: Wrapped application tree with both ThemeProvider and LanguageProvider.
Dashboard & UI Primitives: Updated page.tsx, StatCard, and Card components to dynamically consume useLanguage() and adapt to active theme variables without color clipping.

4. Mandatory AI Rule Enforcement

AGENTS.md (Section 7): Enforced mandatory 3-theme and bilingual requirements for all AI pair programming assistants.
.agents/rules/crawler-fe-rules.md: Updated always_on Antigravity rules to require useLanguage and theme compatibility for all new components.
ai/prompts/system/frontend-expert.md: Added theme and localization criteria to the frontend expert role.
ai/evals/scorecards/ui-ux-scorecard.md: Allocated 20/100 points for theme transition quality and bilingual completeness.

## Summary of Changes

This PR implements full **Light / Dark / System** theme switching alongside **Bilingual English - Vietnamese (`en` / `vi`)** localization for the Data Crawler Frontend, and locks these requirements into the project's permanent AI guidelines.

---

### Key Additions & Updates

#### 1. Multi-Theme Support (Light / Dark / System)
- **Engine**: Integrated `next-themes` with `attribute="class"`, hydration suppression, and system theme auto-detection (`prefers-color-scheme`).
- **Biophilic Color Tokens** (`globals.css`):
  - **Light Mode**: Warm sand / soft cream background (`#FBFBF9`), crisp card containers, soft dark charcoal text (`#1C2826`), and emerald accents (`#059669`).
  - **Dark Mode**: Deep moss / dark forest background (`#090D16`), deep slate cards (`#0F172A`), and vivid emerald highlights (`#10B981`).
- **`ThemeToggle` Component**: Segmented pill control supporting Sun (Light), Moon (Dark), and Monitor (System) modes with organic rounded corners.

#### 2. Bilingual i18n Localization (English & Tiếng Việt)
- **`LanguageProvider`**: Type-safe React context supporting instant language toggling with `localStorage` persistence (`data_crawler_lang`) and browser locale fallback.
- **Centralized Dictionary** (`src/lib/i18n/translations.ts`): Comprehensive translation keys for Navigation, Hero, Stats, Dialogs, Tables, and Status badges.
- **`LanguageToggle` Component**: Compact header button with smooth transition between `VI` and `EN`.

#### 3. Component & Layout Synchronization
- **Navbar**: Added `ThemeToggle` and `LanguageToggle` controls directly into the sticky header.
- **RootLayout & Providers**: Wrapped application tree with both `ThemeProvider` and `LanguageProvider`.
- **Dashboard & UI Primitives**: Updated `page.tsx`, `StatCard`, and `Card` components to dynamically consume `useLanguage()` and adapt to active theme variables without color clipping.

#### 4. Mandatory AI Rule Enforcement
- **`AGENTS.md` (Section 7)**: Enforced mandatory 3-theme and bilingual requirements for all AI pair programming assistants.
- **`.agents/rules/crawler-fe-rules.md`**: Updated `always_on` Antigravity rules to require `useLanguage` and theme compatibility for all new components.
- **`ai/prompts/system/frontend-expert.md`**: Added theme and localization criteria to the frontend expert role.
- **`ai/evals/scorecards/ui-ux-scorecard.md`**: Allocated 20/100 points for theme transition quality and bilingual completeness.