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/pages/privacy-policy-page.tsx

@@ -1,7 +1,9 @@
 import { ArrowLeft } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "@/contexts/i18n-context";
 
 export function PrivacyPolicyPage() {
+  const { t } = useTranslation();
   return (
     <div className="min-h-screen bg-background text-foreground">
       <div className="max-w-2xl mx-auto px-6 py-12">
@@ -10,10 +12,10 @@ export function PrivacyPolicyPage() {
           className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8"
         >
           <ArrowLeft className="h-4 w-4" />
-          Back to app
+          {t.common.back}
         </Link>
 
-        <h1 className="text-3xl font-bold mb-2">Privacy Policy</h1>
+        <h1 className="text-3xl font-bold mb-2">{t.common.privacyPolicy}</h1>
         <p className="text-sm text-muted-foreground mb-8">Last updated: April 22, 2026</p>
 
         <div className="space-y-6 text-sm leading-relaxed text-muted-foreground">
@@ -42,13 +44,13 @@ export function PrivacyPolicyPage() {
               SnapOtter includes optional, anonymous product analytics. When you choose to
               participate, the following is collected:
             </p>
-            <ul className="list-disc pl-5 mt-2 space-y-1">
+            <ul className="list-disc ps-5 mt-2 space-y-1">
               <li>Which tools you use (e.g., "crop tool used")</li>
               <li>Error reports without file data</li>
               <li>App version and performance metrics</li>
             </ul>
             <p className="mt-2 font-medium">What is never collected:</p>
-            <ul className="list-disc pl-5 mt-2 space-y-1">
+            <ul className="list-disc ps-5 mt-2 space-y-1">
               <li>Your images, PDFs, and files</li>
               <li>File names and contents</li>
               <li>Any personal information or IP addresses</li>