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>