feat(i18n): add internationalization with i18next and expo-localization

src/features/templates/screens/TemplatesScreen.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { View, Text, Pressable, FlatList, Alert } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -5,13 +6,14 @@ import type { WorkoutStackParamList } from "@navigation/types";
 import { useTemplates } from "../hooks/useTemplates";
 
 export function TemplatesScreen() {
+  const { t } = useTranslation("common");
   const navigation = useNavigation<NativeStackNavigationProp<WorkoutStackParamList>>();
   const { templates, remove, toggleFavorite } = useTemplates();
 
   const handleDelete = (id: string, name: string) => {
-    Alert.alert("Delete Template", `Delete "${name}"?`, [
-      { text: "Cancel", style: "cancel" },
-      { text: "Delete", style: "destructive", onPress: () => remove(id) },
+    Alert.alert(t("alert.deleteTemplate"), t("alert.deleteConfirm", { name }), [
+      { text: t("cancel"), style: "cancel" },
+      { text: t("delete"), style: "destructive", onPress: () => remove(id) },
     ]);
   };
 
@@ -23,9 +25,9 @@ export function TemplatesScreen() {
         contentContainerClassName="p-4"
         ListEmptyComponent={
           <View className="py-12 items-center">
-            <Text className="text-slate-400 text-lg">No templates yet</Text>
+            <Text className="text-slate-400 text-lg">{t("alert.deleteTemplate")}</Text>
             <Text className="text-slate-400 text-sm mt-1">
-              Save a workout as a template to reuse it
+              {t("noTemplatesYet")}
             </Text>
           </View>
         }
@@ -38,7 +40,7 @@ export function TemplatesScreen() {
               <View className="flex-1">
                 <Text className="font-semibold text-slate-900 text-base">{item.name}</Text>
                 <Text className="text-slate-500 text-sm mt-1">
-                  {item.poolLength}m pool
+                  {t("pool", { length: item.poolLength })}
                 </Text>
               </View>
               <View className="flex-row gap-2">