Complete client UI i18n migration

Adds client-side i18n support, language settings, translated UI copy, and locale parity coverage.

packages/app/src/components/add-host-method-modal.tsx

@@ -1,12 +1,11 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Pressable, Text, View } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { QrCode, Link2, ClipboardPaste } from "lucide-react-native";
 import { AdaptiveModalSheet, type SheetHeader } from "./adaptive-modal-sheet";
 import { isNative } from "@/constants/platform";
 
-const ADD_CONNECTION_HEADER: SheetHeader = { title: "Add connection" };
-
 const styles = StyleSheet.create((theme) => ({
   option: {
     flexDirection: "row",
@@ -49,6 +48,8 @@ export function AddHostMethodModal({
   onPasteLink,
 }: AddHostMethodModalProps) {
   const { theme } = useUnistyles();
+  const { t } = useTranslation();
+  const header = useMemo<SheetHeader>(() => ({ title: t("pairing.connectionMethods.title") }), [t]);
 
   const handleDirect = useCallback(() => {
     onDirectConnection();
@@ -64,7 +65,7 @@ export function AddHostMethodModal({
 
   return (
     <AdaptiveModalSheet
-      header={ADD_CONNECTION_HEADER}
+      header={header}
       visible={visible}
       onClose={onClose}
       testID="add-host-method-modal"
@@ -73,13 +74,15 @@ export function AddHostMethodModal({
         style={styles.option}
         onPress={handleDirect}
         accessibilityRole="button"
-        accessibilityLabel="Direct connection"
+        accessibilityLabel={t("pairing.connectionMethods.direct.title")}
         testID="add-host-method-direct"
       >
         <Link2 size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
-          <Text style={styles.optionText}>Direct connection</Text>
-          <Text style={styles.optionSubtext}>Local network or VPN.</Text>
+          <Text style={styles.optionText}>{t("pairing.connectionMethods.direct.title")}</Text>
+          <Text style={styles.optionSubtext}>
+            {t("pairing.connectionMethods.direct.description")}
+          </Text>
         </View>
       </Pressable>
 
@@ -88,12 +91,14 @@ export function AddHostMethodModal({
           style={styles.option}
           onPress={handleScan}
           accessibilityRole="button"
-          accessibilityLabel="Scan QR code"
+          accessibilityLabel={t("pairing.connectionMethods.scanQr.title")}
         >
           <QrCode size={18} color={theme.colors.foreground} />
           <View style={styles.optionBody}>
-            <Text style={styles.optionText}>Scan QR code</Text>
-            <Text style={styles.optionSubtext}>Encrypted relay connection.</Text>
+            <Text style={styles.optionText}>{t("pairing.connectionMethods.scanQr.title")}</Text>
+            <Text style={styles.optionSubtext}>
+              {t("pairing.connectionMethods.scanQr.description")}
+            </Text>
           </View>
         </Pressable>
       ) : null}
@@ -102,13 +107,15 @@ export function AddHostMethodModal({
         style={styles.option}
         onPress={handlePaste}
         accessibilityRole="button"
-        accessibilityLabel="Paste pairing link"
+        accessibilityLabel={t("pairing.connectionMethods.pasteLink.title")}
         testID="add-host-method-pair-link"
       >
         <ClipboardPaste size={18} color={theme.colors.foreground} />
         <View style={styles.optionBody}>
-          <Text style={styles.optionText}>Paste pairing link</Text>
-          <Text style={styles.optionSubtext}>Encrypted relay connection.</Text>
+          <Text style={styles.optionText}>{t("pairing.connectionMethods.pasteLink.title")}</Text>
+          <Text style={styles.optionSubtext}>
+            {t("pairing.connectionMethods.pasteLink.description")}
+          </Text>
         </View>
       </Pressable>
     </AdaptiveModalSheet>