fix(home) : Utilisation plus simple de la page d'accueil (Android) + Quelques nouveautés

src/components/Home/AccountSwitcher.tsx

@@ -4,8 +4,8 @@ import { useTheme } from "@react-navigation/native";
 import { ChevronDown } from "lucide-react-native";
 
 import Reanimated, {
-  interpolateColor,
-  LinearTransition, useAnimatedStyle,
+  LinearTransition,
+  SharedValue,
   ZoomIn,
   ZoomOut,
 } from "react-native-reanimated";
@@ -14,16 +14,16 @@ import { useCurrentAccount } from "@/stores/account";
 import { defaultProfilePicture } from "@/utils/ui/default-profile-picture";
 import PapillonSpinner from "../Global/PapillonSpinner";
 import { animPapillon } from "@/utils/ui/animations";
-import Animated from "react-native-reanimated";
 import { BlurView } from "expo-blur";
+import Animated from "react-native-reanimated";
 
 const ReanimatedBlurView = Reanimated.createAnimatedComponent(BlurView);
 
 const AccountSwitcher: React.FC<{
   small?: boolean,
   opened?: boolean,
   modalOpen?: boolean,
-  translationY?: Reanimated.SharedValue<number>,
+  translationY?: SharedValue<number>,
   loading?: boolean,
 }> = ({ small, opened, modalOpen, translationY, loading }) => {
   const theme = useTheme();
@@ -33,51 +33,12 @@ const AccountSwitcher: React.FC<{
 
   const shouldHideName = account.personalization.hideNameOnHomeScreen || false;
   const shouldHidePicture = account.personalization.hideProfilePicOnHomeScreen || false;
-
-  const borderAnimatedStyle = useAnimatedStyle(() => ({
-    borderWidth: 1,
-    borderRadius: 80,
-    borderColor: interpolateColor(
-      translationY?.value || 0, // Should think to pass a default value
-      [200, 251],
-      ["#ffffff50", colors.border],
-    ),
-    backgroundColor: interpolateColor(
-      translationY?.value || 0, // Should think to pass a default value
-      [200, 251],
-      ["#ffffff30", "transparent"],
-    ),
-  }));
-
-  const textAnimatedStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(
-      translationY?.value || 0, // Should think to pass a default value
-      [200, 251],
-      ["#FFF", colors.text],
-    ),
-    fontSize: 16,
-    fontFamily: "semibold",
-    maxWidth: 140,
-  }));
-
-
   const AnimatedChevronDown = Animated.createAnimatedComponent(ChevronDown);
-  const iconAnimatedStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(
-      translationY?.value || 0, // Should think to pass a default value
-      [200, 251],
-      ["#FFF", colors.text],
-    ),
-    marginLeft: -6,
-  }));
 
   return (
     <Reanimated.View
       style={{
-        backgroundColor:
-          opened ?
-            theme.dark && !modalOpen ? "#00000044" : "#FFFFFF22"
-            : modalOpen ? colors.text + "10" : "#FFFFFF12",
+        backgroundColor: colors.primary + "70",
         borderRadius: 12,
         borderCurve: "continuous",
         overflow: "hidden",
@@ -211,10 +172,6 @@ const styles = StyleSheet.create({
     borderColor: "#00000020",
     borderWidth: 1,
   },
-
-  accountSwitcherText: {
-
-  },
 });
 
 export default AccountSwitcher;

src/views/account/Home/Animations/HomeAnimations.tsx

@@ -0,0 +1,137 @@
+import {
+  useAnimatedStyle,
+  interpolate,
+  Extrapolate,
+  type SharedValue,
+} from "react-native-reanimated";
+import type { EdgeInsets } from "react-native-safe-area-context";
+
+const HEADER_HEIGHT_FACTOR = 1.5;
+const CORNER_RADIUS_FACTOR = 4;
+const OVER_HEADER_HEIGHT_FACTOR = 2;
+
+const stylezAnim = (translationY: SharedValue<number>, headerHeight: number) => useAnimatedStyle(() => {
+  const opacity = interpolate(
+    translationY.value,
+    [10, 240],
+    [1, 0],
+    Extrapolate.CLAMP
+  );
+
+  const translateY = interpolate(
+    translationY.value,
+    [0 - headerHeight, 0, headerHeight],
+    [(0 - headerHeight) / HEADER_HEIGHT_FACTOR, 0, headerHeight / 1.5],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    transform: [{ translateY }],
+    opacity,
+  };
+});
+
+const overHeaderAnimAnim = (translationY: SharedValue<number>, headerHeight: number) => useAnimatedStyle(() => {
+  const opacity = interpolate(
+    translationY.value,
+    [headerHeight - 48, headerHeight],
+    [0, 1],
+    Extrapolate.CLAMP
+  );
+
+  const translateY = interpolate(
+    translationY.value,
+    [headerHeight - 48, headerHeight],
+    [48, 0],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    opacity,
+    transform: [{ translateY }],
+  };
+});
+
+const cardStyleAnim = (translationY: SharedValue<number>, headerHeight: number) => useAnimatedStyle(() => {
+  const scale = interpolate(
+    translationY.value,
+    [0, headerHeight / 3, headerHeight],
+    [1, 0.94, 1],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    transform: [{ scale }],
+  };
+});
+
+const cornerStyleAnim = (translationY: SharedValue<number>, headerHeight: number, corners: number) => useAnimatedStyle(() => {
+  const animatedCorners = interpolate(
+    translationY.value,
+    [100, headerHeight - 1, headerHeight],
+    [14, corners, 0],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    borderTopLeftRadius: animatedCorners,
+    borderTopRightRadius: animatedCorners,
+  };
+});
+
+const backdropStyleAnim = (translationY: SharedValue<number>, headerHeight: number) => useAnimatedStyle(() => {
+  const opacity = interpolate(
+    translationY.value,
+    [headerHeight - 180, headerHeight],
+    [0, 0.6],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    opacity,
+  };
+});
+
+const paddingTopItemStyleAnim = (translationY: SharedValue<number>, insets: EdgeInsets, headerHeight: number, overHeaderHeight: number) => useAnimatedStyle(() => {
+  const paddingTop = interpolate(
+    translationY.value,
+    [1, headerHeight],
+    [20, insets.top + overHeaderHeight],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    paddingTop,
+  };
+});
+
+const accountSwitcherAnim = (translationY: SharedValue<number>, insets: EdgeInsets, headerHeight: number) => useAnimatedStyle(() => {
+  const top = interpolate(
+    translationY.value,
+    [0, headerHeight],
+    [0, 0 - insets.top * OVER_HEADER_HEIGHT_FACTOR],
+    Extrapolate.CLAMP
+  );
+
+  const opacity = interpolate(
+    translationY.value,
+    [0, headerHeight / 1.5],
+    [1, 0],
+    Extrapolate.CLAMP
+  );
+
+  return {
+    top,
+    opacity,
+  };
+});
+
+export {
+  stylezAnim,
+  overHeaderAnimAnim,
+  cardStyleAnim,
+  cornerStyleAnim,
+  backdropStyleAnim,
+  paddingTopItemStyleAnim,
+  accountSwitcherAnim,
+};

src/views/account/Home/Elements/GradesElement.tsx

@@ -90,7 +90,7 @@ const GradesElement: React.FC<GradesElementProps> = ({ onImportance }) => {
             navigation={PapillonNavigation.current}
             index={index}
             totalItems={lastThreeGrades.length}
-            allGrades={[]}
+            allGrades={grades[defaultPeriod] || []}
           />
         ))}
       </NativeList>