Merge remote-tracking branch 'origin/fix/linter' into fix/linter

# Conflicts:
#	src/views/settings/SettingsAbout.tsx

Author: camarm-dev

src/components/Templates/LoginView.tsx

@@ -41,6 +41,10 @@ const LoginView: React.FC<{
     customFields: Record<string, string>
   ) => unknown;
   customFields?: LoginViewCustomInput[];
+  usernameLabel?: string;
+  usernamePlaceholder?: string;
+  passwordLabel?: string;
+  passwordPlaceholder?: string;
 }> = ({
   serviceIcon,
   serviceName,
@@ -49,6 +53,10 @@ const LoginView: React.FC<{
   autoCapitalize = "none",
   onLogin,
   customFields = [],
+  usernameLabel = "Identifiant",
+  usernamePlaceholder = "Nom d'utilisateur",
+  passwordLabel = "Mot de passe",
+  passwordPlaceholder = "Mot de passe",
 }) => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
@@ -156,13 +164,13 @@ const LoginView: React.FC<{
           </NativeList>
         )}
 
-        <NativeListHeader label="Identifiant" />
+        <NativeListHeader label={usernameLabel} />
         <NativeList>
           <NativeItem>
             <TextInput
               value={username}
               onChangeText={setUsername}
-              placeholder="Nom d'utilisateur"
+              placeholder={usernamePlaceholder}
               autoCapitalize={autoCapitalize}
               placeholderTextColor={theme.colors.text + "55"}
               style={{
@@ -175,7 +183,7 @@ const LoginView: React.FC<{
           </NativeItem>
         </NativeList>
 
-        <NativeListHeader label="Mot de passe" />
+        <NativeListHeader label={passwordLabel} />
         <NativeList>
           <NativeItem>
             <View
@@ -188,7 +196,7 @@ const LoginView: React.FC<{
               <TextInput
                 value={password}
                 onChangeText={setPassword}
-                placeholder="Mot de passe"
+                placeholder={passwordPlaceholder}
                 placeholderTextColor={theme.colors.text + "55"}
                 autoCapitalize={autoCapitalize}
                 style={{

src/router/helpers/PapillonTabNavigator.tsx

@@ -6,9 +6,9 @@ import {
   TabRouter,
   useNavigationBuilder,
 } from "@react-navigation/native";
-import { Text } from "react-native";
+import { Platform, Text } from "react-native";
 
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { View, Dimensions } from "react-native";
 
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -22,10 +22,14 @@ import colorsList from "@/utils/data/colors.json";
 
 import Reanimated, {
   useAnimatedStyle,
-  useSharedValue,
   withTiming,
+  withSpring,
+  interpolate,
+  useSharedValue,
+  Easing,
 } from "react-native-reanimated";
 import * as Haptics from "expo-haptics";
+import getCorners from "@/utils/ui/corner-radius";
 
 type DescriptorOptions = {
   tabBarLabel?: string;
@@ -432,41 +436,124 @@ const BottomTabNavigator: React.ComponentType<any> = ({
 }) => {
   const dims = Dimensions.get("window");
   const tablet = dims.width > 600;
+  const mainNavigator = useRef(null);
+
+  // Track previous index to determine direction
+  const [previousIndex, setPreviousIndex] = useState(0);
+
+  // Animation shared values
+  const slideAnim = useSharedValue(0);
+  const fadeAnim = useSharedValue(1);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const corners = useMemo(() => getCorners(), []);
+
+  const {
+    state,
+    descriptors,
+    navigation,
+    NavigationContent
+  } = useNavigationBuilder(TabRouter, {
+    initialRouteName,
+    backBehavior,
+    children,
+    screenOptions,
+  });
+
+  // Handle tab change animations
+  useEffect(() => {
+    if(Platform.OS !== "ios") return;
+    if (state.index === previousIndex) return;
 
-  const { state, descriptors, navigation, NavigationContent } =
-    useNavigationBuilder(TabRouter, {
-      initialRouteName,
-      backBehavior,
-      children,
-      screenOptions,
+    // Determine animation direction
+    const isMovingForward = state.index > previousIndex;
+    setIsAnimating(true);
+
+    // Reset animations with direction
+    fadeAnim.value = 0;
+    slideAnim.value = isMovingForward ? 80 : -80;
+
+    fadeAnim.value = withTiming(1, {
+      duration: 200,
+      easing: Easing.inOut(Easing.ease),
+    });
+    slideAnim.value = withTiming(0, {
+      duration: 400,
+      easing: Easing.out(Easing.exp),
     });
 
+    // Update previous index
+    setPreviousIndex(state.index);
+    setTimeout(() => {
+      setIsAnimating(false);
+    }, 300);
+  }, [state.index, dims.width]);
+
+  // Create animated styles
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: fadeAnim.value,
+      transform: [
+        {
+          translateX: slideAnim.value,
+        },
+      ],
+    };
+  });
+
   return (
     <NavigationContent>
       <View
         style={[
           {
             flex: 1,
+            overflow: "hidden", // Prevent content from showing outside bounds during animation
           },
           tablet && {
             flexDirection: "row-reverse",
           },
         ]}
       >
-        <BottomTabView
-          {...rest}
-          state = { state }
-          navigation = { navigation }
-          descriptors = { descriptors }
-        />
-        {!tablet ?
-          <BasePapillonBar state={state} descriptors={descriptors} navigation={navigation} />
-          :
-          <LargePapillonBar state={state} descriptors={descriptors} navigation={navigation} />
-        }
+        <Reanimated.View
+          ref={mainNavigator}
+          style={[
+            {
+              flex: 1,
+            },
+            Platform.OS === "ios" && isAnimating && {
+              borderTopLeftRadius: corners,
+              borderTopRightRadius: corners,
+              borderCurve: "continuous",
+              overflow: "hidden",
+            },
+            animatedStyles,
+          ]}
+        >
+          <BottomTabView
+            {...rest}
+            state={state}
+            navigation={navigation}
+            descriptors={descriptors}
+          />
+        </Reanimated.View>
+
+        {!tablet ? (
+          <BasePapillonBar
+            state={state}
+            descriptors={descriptors}
+            navigation={navigation}
+          />
+        ) : (
+          <LargePapillonBar
+            state={state}
+            descriptors={descriptors}
+            navigation={navigation}
+          />
+        )}
       </View>
     </NavigationContent>
   );
 };
 
+
 export default createNavigatorFactory(BottomTabNavigator);

src/views/account/Home/Home.tsx

@@ -222,7 +222,7 @@ const Home: Screen<"HomeScreen"> = ({ navigation }) => {
   return (
     <View style={{flex: 1}}>
       {!modalOpen && focused && (
-        <StatusBar barStyle="light-content" />
+        <StatusBar barStyle="light-content" backgroundColor={"transparent"} translucent />
       )}
       <ContextMenu
         style={[{

src/views/settings/ExternalAccount/Izly.tsx

@@ -32,6 +32,9 @@ const ExternalIzlyLogin: Screen<"ExternalIzlyLogin"> = ({ navigation }) => {
       onLogin={(username, password) => handleLogin(username, password)}
       loading={loading}
       error={error}
+      usernamePlaceholder="Identifiant ou adresse e-mail"
+      passwordLabel="Code Izly"
+      passwordPlaceholder="Code Izly à 6 chiffres"
     />
   );
 };

src/views/settings/ExternalAccount/IzlyActivation.tsx

@@ -78,7 +78,7 @@ const IzlyActivation: Screen<"IzlyActivation"> = ({ navigation, route }) => {
           style={styles.container}
         >
           <PapillonShineBubble
-            message={"Un lien d'activation à était envoyé, peux-tu me le donner ?"}
+            message={"Tu viens de recevoir un lien par SMS, peux tu me l'indiquer ?"}
             width={270}
             numberOfLines={2}
             offsetTop={insets.top}
@@ -125,6 +125,19 @@ const IzlyActivation: Screen<"IzlyActivation"> = ({ navigation, route }) => {
             </View>
           </View>
 
+          <NativeText
+            pointerEvents="none"
+            style={{
+              width: "100%",
+              paddingHorizontal: 16,
+              fontSize: 14,
+              color: colors.text + "55",
+              textAlign: "center",
+            }}
+          >
+            Papillon ne donnera jamais vos informations d'authentification à des tiers.
+          </NativeText>
+
 
           <View style={styles.buttons}>
             <ButtonCta

src/views/settings/SettingsAbout.tsx

@@ -187,9 +187,11 @@ const SettingsAbout: Screen<"SettingsAbout"> = ({ navigation }) => {
           <NativeText variant="title">
             Version des dépendances
           </NativeText>
-          <NativeText variant="subtitle">
-            RN : {PackageJSON.dependencies["react-native"].split("^")[1]} | Expo : {PackageJSON.devDependencies.expo.split("~")[1]}
-          </NativeText>
+          {PackageJSON.dependencies["react-native"] && PackageJSON.devDependencies.expo &&
+              <NativeText variant="subtitle">
+                RN : {PackageJSON.dependencies["react-native"].split("^")[1]} | Expo : {PackageJSON.devDependencies.expo.split("^")[1]}
+              </NativeText>
+          }
         </NativeItem>
       </NativeList>