Add i18n support with Chinese/English translations

Lightweight React Context + JSON translation system (no external deps).
Language preference persisted in localStorage, switchable from Settings.

- Add src/i18n/ with I18nProvider, useI18n hook, en.json (558 keys), zh.json
- Add language switcher (English/中文) to Settings > General tab
- Replace hardcoded UI strings with t() calls across 35 components
- Sync document.documentElement.lang with active locale
- Fix MapLibre flyTo crash on rapid market switching (stop in-flight animations)
- Memoize I18nProvider context value and filter option arrays to avoid unnecessary re-renders

Market data (titles, outcomes, rules) from Polymarket API intentionally not translated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: AmazingAng

src/app/page.tsx

@@ -4,13 +4,15 @@ import { useMemo, useState } from "react";
 import type { ProcessedMarket } from "@/types";
 import { detectArbitrage, type ArbitrageOpportunity } from "@/lib/arbitrage";
 import { CATEGORY_COLORS } from "@/lib/categories";
+import { useI18n } from "@/i18n";
 
 interface ArbitragePanelProps {
   markets: ProcessedMarket[];
   onSelectMarket?: (slug: string) => void;
 }
 
 export default function ArbitragePanel({ markets, onSelectMarket }: ArbitragePanelProps) {
+  const { t } = useI18n();
   const [expanded, setExpanded] = useState<string | null>(null);
 
   const opportunities = useMemo(() => detectArbitrage(markets), [markets]);
@@ -20,7 +22,7 @@ export default function ArbitragePanel({ markets, onSelectMarket }: ArbitragePan
   if (opportunities.length === 0) {
     return (
       <div className="text-[12px] text-[var(--text-ghost)] py-4 text-center font-mono">
-        No arbitrage opportunities detected
+        {t("arbitrage.noOpportunities")}
       </div>
     );
   }
@@ -29,8 +31,7 @@ export default function ArbitragePanel({ markets, onSelectMarket }: ArbitragePan
     <div className="font-mono">
       {/* Summary */}
       <div className="px-1.5 py-1 mb-1 text-[10px] text-[var(--text-dim)] border-b border-[var(--border-subtle)]">
-        {opportunities.length} opportunities found, best edge:{" "}
-        <span className="text-[#22c55e] font-bold">{(bestEdge * 100).toFixed(2)}%</span>
+        {t("arbitrage.opportunitiesFound", { count: opportunities.length, percent: (bestEdge * 100).toFixed(2) })}
       </div>
 
       {/* List */}
@@ -60,6 +61,7 @@ function ArbitrageRow({
   onToggle: () => void;
   onSelect: () => void;
 }) {
+  const { t } = useI18n();
   const catColor = CATEGORY_COLORS[opp.category as keyof typeof CATEGORY_COLORS] || "var(--text-faint)";
   const deviationColor = opp.direction === "over" ? "#ff4444" : "#22c55e";
 
@@ -113,7 +115,7 @@ function ArbitrageRow({
             </div>
           ))}
           <div className="flex items-center gap-2 text-[10px] pt-0.5 border-t border-[var(--border-subtle)]">
-            <span className="text-[var(--text-faint)]">Sum</span>
+            <span className="text-[var(--text-faint)]">{t("arbitrage.sum")}</span>
             <span className="tabular-nums font-bold" style={{ color: deviationColor }}>
               {(opp.sumProb * 100).toFixed(1)}%
             </span>

src/components/AlertManager.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState } from "react";
 import type { ProcessedMarket, Category } from "@/types";
 import { CATEGORY_COLORS } from "@/lib/categories";
+import { useI18n } from "@/i18n";
 
 interface CalendarPanelProps {
   markets: ProcessedMarket[];
@@ -85,7 +86,28 @@ function buildCalendar(markets: ProcessedMarket[], categoryFilter: Category | "A
   return grouped;
 }
 
+const CATEGORY_LABEL_KEYS: Record<string, string> = {
+  All: "common.all",
+  Politics: "calendar.politics",
+  Crypto: "calendar.crypto",
+  Sports: "calendar.sports",
+  Finance: "calendar.finance",
+  Tech: "calendar.tech",
+  Culture: "calendar.culture",
+  Other: "calendar.other",
+};
+
+const GROUP_LABEL_KEYS: Record<string, string> = {
+  Today: "calendar.todayGroup",
+  Tomorrow: "calendar.tomorrowGroup",
+  "This Week": "calendar.thisWeek",
+  "Next Week": "calendar.nextWeek",
+  "This Month": "calendar.thisMonth",
+  Later: "calendar.later",
+};
+
 export default function CalendarPanel({ markets, onSelectMarket }: CalendarPanelProps) {
+  const { t } = useI18n();
   const [categoryFilter, setCategoryFilter] = useState<Category | "All">("All");
   const [collapsed, setCollapsed] = useState<Set<TimeGroup>>(new Set());
   const [now, setNow] = useState<Date>(() => new Date());
@@ -129,14 +151,14 @@ export default function CalendarPanel({ markets, onSelectMarket }: CalendarPanel
               border: `1px solid ${categoryFilter === cat ? "rgba(34,197,94,0.3)" : "transparent"}`,
             }}
           >
-            {cat}
+            {t(CATEGORY_LABEL_KEYS[cat] || cat)}
           </button>
         ))}
       </div>
 
       {totalEvents === 0 ? (
         <div className="text-[12px] text-[var(--text-ghost)] py-4 text-center">
-          No upcoming events
+          {t("calendar.noUpcoming")}
         </div>
       ) : (
         <div>
@@ -153,7 +175,7 @@ export default function CalendarPanel({ markets, onSelectMarket }: CalendarPanel
                   className="w-full flex items-center gap-1 px-1.5 py-1 text-[10px] text-[var(--text-faint)] hover:text-[var(--text-muted)] transition-colors"
                 >
                   <span className="text-[9px]">{isCollapsed ? "\u25B6" : "\u25BC"}</span>
-                  <span className="font-bold uppercase tracking-wide">{group}</span>
+                  <span className="font-bold uppercase tracking-wide">{t(GROUP_LABEL_KEYS[group] || group)}</span>
                   <span className="text-[var(--text-ghost)]">({events.length})</span>
                 </button>
 
@@ -207,7 +229,7 @@ export default function CalendarPanel({ markets, onSelectMarket }: CalendarPanel
                                 color: ev.market.impactLevel === "critical" ? "#ff4444" : "#f59e0b",
                               }}
                             >
-                              {ev.market.impactLevel}
+                              {t(ev.market.impactLevel === "critical" ? "calendar.critical" : "calendar.high")}
                             </span>
                           )}
                         </div>

src/components/ArbitragePanel.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useRef, useCallback, useMemo, memo } from "react";
 import type { ProcessedMarket } from "@/types";
 import { SERIES_COLORS, MA_COLORS } from "@/lib/chartConstants";
+import { useI18n } from "@/i18n";
 
 type TimeRange = "1h" | "24h" | "7d" | "30d";
 type ChartMode = "candle" | "line";
@@ -134,6 +135,7 @@ function getLightweightCharts() {
 }
 
 function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps) {
+  const { t } = useI18n();
   const [timeRange, setTimeRange] = useState<TimeRange>("24h");
   const [chartMode, setChartMode] = useState<ChartMode>("candle");
   const [showMA, setShowMA] = useState(true);
@@ -471,7 +473,7 @@ function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps)
   if (!selectedMarket) {
     return (
       <div className="text-[12px] text-[var(--text-muted)] font-mono p-2">
-        select a market to view price chart
+        {t("chart.selectMarket")}
       </div>
     );
   }
@@ -503,24 +505,24 @@ function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps)
               <div className="w-px h-3 bg-[#2a2a2a]" />
               <div className="flex items-center gap-2 text-[9px] tabular-nums">
                 {selectedMarket.indicators.momentum !== null && (
-                  <span title="Momentum: price change acceleration">
-                    <span className="text-[#555]">Mtm </span>
+                  <span title={t("chart.momentumDesc")}>
+                    <span className="text-[#555]">{t("chart.momentumIndicator")} </span>
                     <span style={{ color: selectedMarket.indicators.momentum > 0.01 ? "#22c55e" : selectedMarket.indicators.momentum < -0.01 ? "#ff4444" : "#888" }}>
                       {selectedMarket.indicators.momentum > 0 ? "+" : ""}{(selectedMarket.indicators.momentum * 100).toFixed(2)}%
                     </span>
                   </span>
                 )}
                 {selectedMarket.indicators.volatility !== null && (
-                  <span title="Volatility: 24h prob standard deviation">
-                    <span className="text-[#555]">Vol{"\u03C3"} </span>
+                  <span title={t("chart.volatilityDesc")}>
+                    <span className="text-[#555]">{t("chart.volatilityIndicator")}{"\u03C3"} </span>
                     <span style={{ color: selectedMarket.indicators.volatility > 0.05 ? "#f59e0b" : "#888" }}>
                       {(selectedMarket.indicators.volatility * 100).toFixed(1)}%
                     </span>
                   </span>
                 )}
                 {selectedMarket.indicators.orderFlowImbalance !== null && (
-                  <span title="Order flow imbalance: (smart buys - sells) / total">
-                    <span className="text-[#555]">Flow </span>
+                  <span title={t("chart.flowDesc")}>
+                    <span className="text-[#555]">{t("chart.flowIndicator")} </span>
                     <span style={{ color: selectedMarket.indicators.orderFlowImbalance > 0.1 ? "#22c55e" : selectedMarket.indicators.orderFlowImbalance < -0.1 ? "#ff4444" : "#888" }}>
                       {selectedMarket.indicators.orderFlowImbalance > 0 ? "+" : ""}{(selectedMarket.indicators.orderFlowImbalance * 100).toFixed(0)}%
                     </span>
@@ -543,7 +545,7 @@ function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps)
           <button onClick={() => setUseUTC(v => !v)}
             className="px-1.5 py-0.5 text-[9px] transition-all"
             style={{ color: "#888", background: useUTC ? "#2a2a2a" : "transparent", border: "1px solid #222", borderRadius: 2 }}
-            title={useUTC ? "Showing UTC time — click for local" : "Showing local time — click for UTC"}>
+            title={useUTC ? t("chart.showingUtc") : t("chart.showingLocal")}>
             {useUTC ? "UTC" : "Local"}
           </button>
         </div>
@@ -591,7 +593,7 @@ function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps)
                   <span style={{ color: MA_COLORS.ma20 }}>MA20</span>
                 </>
               )}
-              <span className="text-[#444]">hover chart for details</span>
+              <span className="text-[#444]">{t("chart.hoverForDetails")}</span>
             </>
           )}
         </div>
@@ -607,7 +609,7 @@ function ChartPanelInner({ selectedMarket, lineOnly = false }: ChartPanelProps)
         {error && !loading && (
           <div className="absolute inset-0 flex items-center justify-center z-10" style={{ background: "#0d0d0d99" }}>
             <div className="text-[11px] text-[var(--red)] font-mono text-center" aria-live="polite">
-              {error} <button onClick={() => { retryCount.current = 0; setChartData(null); }} className="ml-2 underline">retry</button>
+              {t("common.loadFailed")} <button onClick={() => { retryCount.current = 0; setChartData(null); }} className="ml-2 underline">{t("common.retry")}</button>
             </div>
           </div>
         )}

src/components/CalendarPanel.tsx

@@ -6,6 +6,7 @@ import { getCountryFlag, marketMatchesCountry } from "@/lib/countries";
 import { getParentCountry } from "@/lib/geo";
 import { formatVolume } from "@/lib/format";
 import MarketCard from "./MarketCard";
+import { useI18n } from "@/i18n";
 
 interface CountryPanelProps {
   countryName: string;
@@ -24,6 +25,7 @@ export default function CountryPanel({
   isWatched,
   onToggleWatch,
 }: CountryPanelProps) {
+  const { t } = useI18n();
   const parentCountry = getParentCountry(countryName);
   const displayName = parentCountry ? `${countryName}, ${parentCountry}` : countryName;
   const flagSource = parentCountry || countryName;
@@ -90,7 +92,7 @@ export default function CountryPanel({
       const data = await res.json();
       if (data.summary) setAiSummary(data.summary);
     } catch {
-      setAiSummary("Failed to generate summary");
+      setAiSummary(t("country.summaryFailed"));
     }
     setAiLoading(false);
   }, [countryName, displayName, countryMarkets, aiLoading]);
@@ -105,7 +107,7 @@ export default function CountryPanel({
           onClick={fetchCountrySummary}
           disabled={aiLoading || countryMarkets.length === 0}
           className="shrink-0 text-[var(--text-faint)] hover:text-[#f59e0b] transition-colors disabled:opacity-50 ml-auto"
-          title="AI Summary"
+          title={t("country.aiSummary")}
         >
           {aiLoading ? (
             <span className="inline-block w-3 h-3 border border-[#f59e0b] border-t-transparent rounded-full animate-spin" />
@@ -127,29 +129,29 @@ export default function CountryPanel({
       {countryMarkets.length > 0 && (
         <div className="grid grid-cols-3 gap-1.5 mb-2 text-[11px]">
           <div className="border border-[var(--border-subtle)] rounded-sm px-2 py-1.5">
-            <div className="text-[9px] uppercase tracking-[0.1em] text-[var(--text-faint)] mb-0.5">total vol</div>
+            <div className="text-[9px] uppercase tracking-[0.1em] text-[var(--text-faint)] mb-0.5">{t("country.totalVol")}</div>
             <div className="text-[var(--text-secondary)]">{formatVolume(totalVol)}</div>
           </div>
           <div className="border border-[var(--border-subtle)] rounded-sm px-2 py-1.5">
-            <div className="text-[9px] uppercase tracking-[0.1em] text-[var(--text-faint)] mb-0.5">active</div>
+            <div className="text-[9px] uppercase tracking-[0.1em] text-[var(--text-faint)] mb-0.5">{t("common.active")}</div>
             <div className="text-[var(--text-secondary)]">{activeCount}</div>
           </div>
           <div className="border border-[var(--border-subtle)] rounded-sm px-2 py-1.5">
-            <div className="text-[9px] uppercase tracking-[0.1em] text-[var(--text-faint)] mb-0.5">closed</div>
+            <div className="text-[9px] uppercase tracking-[0.1em] text-[var(--text-faint)] mb-0.5">{t("common.closed")}</div>
             <div className="text-[var(--text-secondary)]">{closedCount}</div>
           </div>
         </div>
       )}
 
       {/* Market count */}
       <div className="text-[10px] uppercase tracking-[0.15em] text-[var(--text-faint)] mb-1.5">
-        {countryMarkets.length} market{countryMarkets.length !== 1 ? "s" : ""}
+        {t("country.marketsCount", { count: countryMarkets.length })}
       </div>
 
       {/* Markets list */}
       {countryMarkets.length === 0 ? (
         <div className="text-[12px] text-[var(--text-ghost)] py-4">
-          no markets found for this region
+          {t("country.noMarkets")}
         </div>
       ) : (
         <div>

src/components/ChartPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import { useI18n } from "@/i18n";
 
 export interface FilterGroup {
   label: string;
@@ -22,6 +23,7 @@ function isAllSelected(group: FilterGroup) {
 }
 
 export default function FilterDropdown({ groups, label }: FilterDropdownProps) {
+  const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -60,7 +62,7 @@ export default function FilterDropdown({ groups, label }: FilterDropdownProps) {
           color: hasFilter ? "#22c55e" : "var(--text-faint)",
           border: `1px solid ${hasFilter ? "rgba(34,197,94,0.3)" : "var(--border-subtle, #333)"}`,
         }}
-        title="Filter"
+        title={t("common.filter")}
       >
         {label && <span className="text-[9px]">{label}</span>}
         <svg width="9" height="9" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
@@ -94,7 +96,7 @@ export default function FilterDropdown({ groups, label }: FilterDropdownProps) {
                     style={{ color: isAllSelected(group) ? "#22c55e" : "var(--text-muted)" }}
                   >
                     <Checkbox checked={isAllSelected(group)} />
-                    All
+                    {t("filterDropdown.all")}
                   </button>
                 )}
 

src/components/CountryPanel.tsx

@@ -1,13 +1,24 @@
 "use client";
 
-const LINKS = [
-  { label: "About", href: "/about", external: true },
-  { label: "Docs", href: "/docs", external: true },
-  { label: "GitHub", href: "https://github.com/AmazingAng/polyworld", external: true },
-  { label: "X", href: "https://x.com/0xAA_Science", external: true },
+import { useI18n } from "@/i18n";
+
+const LINK_KEYS = [
+  { key: "about", href: "/about", external: true },
+  { key: "docs", href: "/docs", external: true },
+  { key: "github", href: "https://github.com/AmazingAng/polyworld", external: true },
+  { key: "x", href: "https://x.com/0xAA_Science", external: true },
 ];
 
 export default function Footer() {
+  const { t } = useI18n();
+
+  const linkLabels: Record<string, string> = {
+    about: t("footer.about"),
+    docs: t("footer.docs"),
+    github: t("footer.github"),
+    x: "X",
+  };
+
   return (
     <footer className="flex items-center justify-between px-4 py-2.5 border-t border-[var(--border)] bg-[var(--surface)] font-mono text-[12px] text-[var(--text-dim)] shrink-0">
       <div className="flex items-center gap-1.5">
@@ -18,14 +29,14 @@ export default function Footer() {
         <span style={{ fontFamily: "'Inter Tight', sans-serif", fontWeight: 800, letterSpacing: '-0.02em' }} className="text-[13px] text-[var(--text-secondary)]">PolyWorld</span>
       </div>
       <div className="flex items-center gap-5">
-        {LINKS.map(({ label, href, external }) => (
+        {LINK_KEYS.map(({ key, href, external }) => (
           <a
-            key={label}
+            key={key}
             href={href}
             {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
             className="hover:text-[var(--accent)] transition-colors"
           >
-            {label}
+            {linkLabels[key]}
           </a>
         ))}
       </div>