fix(mobile): wire i18n reactivity, translate all screens, sync language with server

- Add LocaleProvider + useLocale() hook with AsyncStorage persistence to mobile i18n
- Replace all hardcoded English strings in every screen with t() calls
- Add missing profile.settings/language keys to all 5 translation files (en/de/es/fr/it)
- Wrap app root in LocaleProvider; apply server preferred_language on login in AuthGuard
- Tab labels and header titles now re-render on language switch
- ProfileScreen: use useLocale() context, sync language to server via POST /api/i18n/language
- Backend: add preferred_language field to GET /api/mobile/whoami response
- Mobile API: add preferred_language to WhoAmIResponse type + setServerLanguage() method
- Tests: add test_whoami_returns_preferred_language and test_whoami_no_profile_preferred_language_is_null
- Docs: update MobileApp.md with language sync priority and whoami response format

Language priority: server preference > AsyncStorage > device locale > English fallback

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

mobile/app/(tabs)/_layout.tsx

@@ -11,10 +11,15 @@ import { Ionicons } from "@expo/vector-icons";
 import React from "react";
 import { usePushNotifications } from "../../src/hooks/usePushNotifications";
 import { useAuth } from "../../src/context/AuthContext";
+import { useLocale, t } from "../../src/i18n";
 
 export default function TabLayout() {
   const { isAuthenticated } = useAuth();
   usePushNotifications(isAuthenticated);
+  // Subscribe to language changes so tab labels re-render when the language
+  // is switched.  The `lang` variable is intentionally unused – its only
+  // purpose is to make this component a consumer of LocaleContext.
+  useLocale();
 
   return (
     <Tabs
@@ -37,8 +42,8 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: "Upload",
-          tabBarLabel: "Upload",
+          title: t("tabs.upload"),
+          tabBarLabel: t("tabs.upload"),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="cloud-upload-outline" size={size} color={color} />
           ),
@@ -48,23 +53,23 @@ export default function TabLayout() {
       <Tabs.Screen
         name="files"
         options={{
-          title: "Files",
-          tabBarLabel: "Files",
+          title: t("tabs.files"),
+          tabBarLabel: t("tabs.files"),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="document-text-outline" size={size} color={color} />
           ),
-          headerTitle: "My Documents",
+          headerTitle: t("files.title"),
         }}
       />
       <Tabs.Screen
         name="profile"
         options={{
-          title: "Profile",
-          tabBarLabel: "Profile",
+          title: t("tabs.profile"),
+          tabBarLabel: t("tabs.profile"),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="person-circle-outline" size={size} color={color} />
           ),
-          headerTitle: "Profile",
+          headerTitle: t("tabs.profile"),
         }}
       />
       {/* File detail screen – hidden from tab bar, accessed via navigation */}
@@ -72,8 +77,8 @@ export default function TabLayout() {
         name="file-detail"
         options={{
           href: null,
-          title: "File Details",
-          headerTitle: "File Details",
+          title: t("file_detail.title"),
+          headerTitle: t("file_detail.title"),
         }}
       />
     </Tabs>

mobile/app/_layout.tsx

@@ -23,6 +23,7 @@ import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { AuthProvider, useAuth } from "../src/context/AuthContext";
 import { ShareProvider, useShare } from "../src/context/ShareContext";
+import { LocaleProvider, useLocale, isLanguageSupported } from "../src/i18n";
 import { mimeTypeFromFilename } from "../src/utils/mimeTypes";
 
 // ---------------------------------------------------------------------------
@@ -100,11 +101,22 @@ function makeUrlHandler(addPendingFile: (f: { uri: string; filename: string; mim
 // ---------------------------------------------------------------------------
 
 function AuthGuard() {
-  const { isLoading, isAuthenticated } = useAuth();
+  const { isLoading, isAuthenticated, user } = useAuth();
   const { addPendingFile } = useShare();
+  const { setLang } = useLocale();
   const segments = useSegments();
   const router = useRouter();
 
+  // Apply the server-side language preference whenever the user profile is
+  // loaded (on login or app resume).  This syncs the language set on the
+  // desktop/web client to the mobile app.  If the server language is not
+  // supported by the mobile app, we leave the current language unchanged.
+  useEffect(() => {
+    if (user?.preferred_language && isLanguageSupported(user.preferred_language)) {
+      void setLang(user.preferred_language);
+    }
+  }, [user?.preferred_language, setLang]);
+
   // Listen for files shared from other apps (iOS Share Sheet / Android Intent).
   // Both cold-start (app was not running) and warm-start (app in background)
   // cases are handled.
@@ -162,11 +174,13 @@ function AuthGuard() {
 export default function RootLayout() {
   return (
     <SafeAreaProvider>
-      <ShareProvider>
-        <AuthProvider>
-          <AuthGuard />
-        </AuthProvider>
-      </ShareProvider>
+      <LocaleProvider>
+        <ShareProvider>
+          <AuthProvider>
+            <AuthGuard />
+          </AuthProvider>
+        </ShareProvider>
+      </LocaleProvider>
     </SafeAreaProvider>
   );
 }