feat(fe): standardize i18n, fix active header highlight and convert template... (!8) · Merge Requests · ThinhNC / upgrade-data-crawler-fe

feat(fe): standardize i18n, fix active header highlight and convert template...

Overview & Objective

This PR cleans up bilingual translations (Vietnamese & English), fixes active navigation highlighting in the top navbar, customizes the date-time formatting according to active locale, and upgrades the extraction template selector from a native HTML <select> element into a polished, organic biophilic custom dropdown matching the ThemeToggle design system.

Key Changes

1. UI & Design System Upgrades

Custom Template Dropdown (ThemeToggle Pattern):
- Replaced the default browser <select> with a rounded, biophilic custom dropdown matching ThemeToggle style.
- Added backdrop blur (backdrop-blur-xl), smooth 180° chevron rotation, emerald highlight styling, and dynamic <Check /> icons for active selections.
- Handled click-outside detection and Escape key listeners for accessibility.
Active Navigation Highlighting:
- Integrated usePathname() in Navbar.
- Automatically highlights "Crawl Tasks" (/crawl-jobs and /crawl-jobs/[id]) in emerald green when visiting task-related routes instead of keeping "Dashboard" permanently active.

2. Localization (i18n) & Purity Enhancements

Eliminated Vietnamese Parenthesized English Labels:
- Cleaned up vi.dialog by removing redundant English tags (e.g., converted URL mục tiêu (Target URL) $\rightarrow$ URL mục tiêu, Độ sâu (Depth) $\rightarrow$ Độ sâu, Số trang tối đa (Pages) $\rightarrow$ Số trang tối đa, (SCRAPE) / (CRAWL) $\rightarrow$ pure Vietnamese descriptions).
- Cleaned up vi.jobDetail and vi.diff by stripping symbol wrappers like (+), (~), (-), (=), and (JSON).
Synchronized English Translations:
- Added complete, 1:1 English dictionaries for dialog, jobDetail, pages, logs, and diff (36+ missing keys added).
- Localized hardcoded strings in crawler-task-form.tsx and crawler-task-table.tsx.
Dynamic Locale Date-Time Formatting:
- Updated formatDate(date, locale) to support both en-US and vi-VN.
- Resolved the issue where Vietnamese month abbreviations (thg) leaked into English mode (Started: Sep 6, 2026, 08:47 PM).

## Overview & Objective
This PR cleans up bilingual translations (Vietnamese & English), fixes active navigation highlighting in the top navbar, customizes the date-time formatting according to active locale, and upgrades the extraction template selector from a native HTML `<select>` element into a polished, organic biophilic custom dropdown matching the `ThemeToggle` design system.

---

## Key Changes

### 1. UI & Design System Upgrades
- **Custom Template Dropdown (`ThemeToggle` Pattern)**:
  - Replaced the default browser `<select>` with a rounded, biophilic custom dropdown matching `ThemeToggle` style.
  - Added backdrop blur (`backdrop-blur-xl`), smooth 180° chevron rotation, emerald highlight styling, and dynamic `<Check />` icons for active selections.
  - Handled click-outside detection and `Escape` key listeners for accessibility.
- **Active Navigation Highlighting**:
  - Integrated `usePathname()` in `Navbar`.
  - Automatically highlights **"Crawl Tasks"** (`/crawl-jobs` and `/crawl-jobs/[id]`) in emerald green when visiting task-related routes instead of keeping **"Dashboard"** permanently active.

### 2. Localization (i18n) & Purity Enhancements
- **Eliminated Vietnamese Parenthesized English Labels**:
  - Cleaned up `vi.dialog` by removing redundant English tags (e.g., converted `URL mục tiêu (Target URL)` $\rightarrow$ `URL mục tiêu`, `Độ sâu (Depth)` $\rightarrow$ `Độ sâu`, `Số trang tối đa (Pages)` $\rightarrow$ `Số trang tối đa`, `(SCRAPE)` / `(CRAWL)` $\rightarrow$ pure Vietnamese descriptions).
  - Cleaned up `vi.jobDetail` and `vi.diff` by stripping symbol wrappers like `(+)`, `(~)`, `(-)`, `(=)`, and `(JSON)`.
- **Synchronized English Translations**:
  - Added complete, 1:1 English dictionaries for `dialog`, `jobDetail`, `pages`, `logs`, and `diff` (36+ missing keys added).
  - Localized hardcoded strings in `crawler-task-form.tsx` and `crawler-task-table.tsx`.
- **Dynamic Locale Date-Time Formatting**:
  - Updated `formatDate(date, locale)` to support both `en-US` and `vi-VN`.
  - Resolved the issue where Vietnamese month abbreviations (`thg`) leaked into English mode (`Started: Sep 6, 2026, 08:47 PM`).