feat: add multi-language support for 20 locales

Add complete i18n infrastructure with 21 supported languages:
English, Simplified Chinese, Traditional Chinese, Japanese, Korean,
Spanish, French, Italian, Brazilian Portuguese, German, Dutch, Swedish,
Russian, Polish, Ukrainian, Arabic (RTL), Turkish, Hindi, Vietnamese,
Indonesian, and Thai.

- I18nProvider context with three-tier locale detection
  (user preference > navigator.languages > instance default > English)
- ~1500 translation keys per locale with TypeScript-enforced completeness
- Dynamic code-splitting: only the active locale is loaded at runtime
- Language selectors in footer, login page, settings, and mobile sidebar
- Arabic RTL support with CSS logical properties across all components
- Tool names, descriptions, and categories translated via i18n helpers
- Public API endpoint GET /api/v1/config/locale for instance default
- Multi-script font stack (CJK, Arabic, Devanagari, Thai, Cyrillic)
- format() and plural() helpers for interpolation and pluralization
- API error translation mapping (translateApiError)
- 36 Playwright e2e tests verifying all 21 locales load correctly
- 25 unit tests for format, plural, locale detection, and completeness
- Updated translations.md docs and CLAUDE.md conventions

apps/web/src/components/layout/tool-panel.tsx

@@ -1,11 +1,14 @@
 import { CATEGORIES, TOOLS } from "@snapotter/shared";
 import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "@/contexts/i18n-context";
+import { getCategoryName } from "@/lib/tool-i18n";
 import { useFeaturesStore } from "@/stores/features-store";
 import { useSettingsStore } from "@/stores/settings-store";
 import { SearchBar } from "../common/search-bar";
 import { ToolCard } from "../common/tool-card";
 
 export function ToolPanel() {
+  const { t } = useTranslation();
   const [search, setSearch] = useState("");
   const { disabledTools, experimentalEnabled, loaded, fetch } = useSettingsStore();
   const fetchFeatures = useFeaturesStore((s) => s.fetch);
@@ -54,7 +57,7 @@ export function ToolPanel() {
         {CATEGORIES.filter((cat) => groupedTools.has(cat.id)).map((category) => (
           <div key={category.id} className="mb-4">
             <h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-2">
-              {category.name}
+              {getCategoryName(t, category.id, category.name)}
             </h3>
             <div className="space-y-0.5">
               {groupedTools.get(category.id)?.map((tool) => (