feat: Adaptation de Papillon pour les tablettes

app.json

@@ -4,7 +4,7 @@
     "slug": "papillonvex",
     "scheme": "papillon",
     "version": "7.5.0",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "primaryColor": "#32AB8E",

src/components/Home/Header.tsx

@@ -43,9 +43,21 @@ const Header: React.FC<{
   const [addons] = useState<AddonHomePageInfo[]>([]);
   const [addonsTitle, setAddonsTitle] = useState<string[]>([]);
   const [click, setClick] = useState<false | true>(false);
+  const [tablet, setTablet] = useState<boolean>(false);
 
-  const dims = Dimensions.get("window");
-  const tablet = dims.width > 600;
+  useEffect(() => {
+    const updateTabletOrientation = () => {
+      const dims = Dimensions.get("screen");
+      const tabletWidth = dims.width;
+      const tabletHeight = dims.height;
+      const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+      setTablet(tabletDiagl >= 6.9);
+    };
+    updateTabletOrientation(); // 1ère fois qu'on arrive sur la page
+
+    const subscription = Dimensions.addEventListener("change", updateTabletOrientation); // Dès qu'on change de rotation
+    return () => subscription.remove(); // Permet d'éviter les fuites de mémoire
+  }, []);
 
   useEffect(() => {
     // On récupère le fichier principal de chaque extension.

src/router/helpers/PapillonTabNavigator.tsx

@@ -237,32 +237,20 @@ const BasePapillonBar: React.FC<Omit<ReturnType<typeof useNavigationBuilder>, "N
   );
 };
 
-export const LargePapillonBar: React.FC<Omit<ReturnType<typeof useNavigationBuilder>, "NavigationContent">> = ({ state, descriptors, navigation }) => {
+const LargePapillonBar: React.FC<Omit<ReturnType<typeof useNavigationBuilder>, "NavigationContent">> = ({ state, descriptors, navigation }) => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
 
   const account = useCurrentAccount(store => store.account!);
-  const [shouldShowLabel, setShouldShowLabel] = React.useState(true);
-
-  const [transparentTabBar, setTransparentTabBar] = React.useState(false);
-  const [hideTabBar, setHideTabBar] = React.useState(false);
-
-  const [showTabBackground, setShowTabBackground] = React.useState(false);
+  const [hideTabBar, setHideTabBar] = useState(false);
 
   useEffect(() => {
-    setShouldShowLabel(!account.personalization.hideTabTitles);
-    setShowTabBackground(account.personalization.showTabBackground ?? false);
-    setTransparentTabBar(account.personalization.transparentTabBar ?? false);
     setHideTabBar(account.personalization.hideTabBar ?? false);
   }, [account.personalization]);
 
   const bottomAnim = useSharedValue(1);
 
-  const animatedStyles = useAnimatedStyle(() => ({
-    opacity: withTiming(bottomAnim.value, { duration: 200 }),
-  }));
-
-  React.useEffect(() => {
+  useEffect(() => {
     bottomAnim.value = hideTabBar ? 0 : 1;
   }, [hideTabBar]);
 
@@ -434,8 +422,11 @@ const BottomTabNavigator: React.ComponentType<any> = ({
   screenOptions,
   ...rest
 }) => {
-  const dims = Dimensions.get("window");
-  const tablet = dims.width > 600;
+  const dims = Dimensions.get("screen");
+  const tabletWidth = dims.width;
+  const tabletHeight = dims.height;
+  const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+  const tablet = tabletDiagl >= 6.9;
   const mainNavigator = useRef(null);
 
   // Track previous index to determine direction

src/router/screens/account/stack.tsx

@@ -65,8 +65,11 @@ const AccountStackScreen: Screen<"AccountStack"> = () => {
     }
   }, [params]);
 
-  const dims = Dimensions.get("window");
-  const tablet = dims.width > 600;
+  const dims = Dimensions.get("screen");
+  const tabletWidth = dims.width;
+  const tabletHeight = dims.height;
+  const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+  const tablet = tabletDiagl >= 6.9;
 
   let newAccountScreens = screens;
 

src/views/account/Homeworks/Homeworks.tsx

@@ -65,11 +65,17 @@ const formatDate = (date: string | number | Date): string => {
 
 const WeekView: Screen<"Homeworks"> = ({ route, navigation }) => {
   const flatListRef: React.MutableRefObject<FlatList> = useRef(null) as any as React.MutableRefObject<FlatList>;
-  const { width } = Dimensions.get("window");
-  const finalWidth = width - (width > 600 ? (
-    320 > width * 0.35 ? width * 0.35 :
+
+  const dims = Dimensions.get("screen");
+  const tabletWidth = dims.width;
+  const tabletHeight = dims.height;
+  const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+  const tablet = tabletDiagl >= 6.9;
+  const finalWidth = tabletWidth - (tablet ? (
+    320 > tabletWidth * 0.35 ? tabletWidth * 0.35 :
       320
   ) : 0);
+
   const insets = useSafeAreaInsets();
 
   const outsideNav = route.params?.outsideNav;
@@ -111,7 +117,7 @@ const WeekView: Screen<"Homeworks"> = ({ route, navigation }) => {
     length: finalWidth,
     offset: finalWidth * index,
     index,
-  }), [width]);
+  }), [finalWidth]);
 
   const keyExtractor = useCallback((item: any) => item.toString(), []);
 
@@ -470,7 +476,7 @@ const WeekView: Screen<"Homeworks"> = ({ route, navigation }) => {
                 ]}
                 layout={animPapillon(LinearTransition)}
                 >
-                  {width > 370 ? "Semaine" : "sem."}
+                  {tabletWidth > 370 ? "Semaine" : "sem."}
                 </Reanimated.Text>
 
                 <Reanimated.View
@@ -539,7 +545,7 @@ const WeekView: Screen<"Homeworks"> = ({ route, navigation }) => {
           />
         }
 
-        {showPickerButtons && !searchHasFocus && width > 330 &&
+        {showPickerButtons && !searchHasFocus && tabletWidth > 330 &&
         <Reanimated.View
           layout={animPapillon(LinearTransition)}
           entering={animPapillon(FadeInLeft).delay(100)}

src/views/account/Homeworks/HomeworksHeader.tsx

@@ -13,15 +13,18 @@ import { epochWMToCalendarWeekNumber } from "@/utils/epochWeekNumber";
 const HeaderCalendar: React.FC<{ epochWeekNumber: number, oldPageIndex: number, showPicker: () => void, changeIndex: (index: number) => void }> = ({ epochWeekNumber, oldPageIndex, showPicker, changeIndex }) => {
   const { colors } = useTheme();
 
-  const dims = Dimensions.get("window");
-  const tablet = dims.width > 600;
+  const dims = Dimensions.get("screen");
+  const tabletWidth = dims.width;
+  const tabletHeight = dims.height;
+  const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+  const tablet = tabletDiagl >= 6.9;
 
   const index = epochWeekNumber;
 
   return (
     <Reanimated.View
       style={{
-        width: Dimensions.get("window").width - 50 - (tablet ? 400 : 0),
+        width: tabletWidth - 50 - (tablet ? 400 : 0),
         alignItems: "center",
         justifyContent: "center",
       }}

src/views/account/Lessons/Lessons.tsx

@@ -43,6 +43,16 @@ const Lessons: Screen<"Lessons"> = ({ route, navigation }) => {
   const loadedWeeks = useRef<Set<number>>(new Set());
   const currentlyLoadingWeeks = useRef<Set<number>>(new Set());
 
+  const dims = Dimensions.get("screen");
+  const tabletWidth = dims.width;
+  const tabletHeight = dims.height;
+  const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+  const tablet = tabletDiagl >= 6.9;
+  const finalWidth = tabletWidth - (tablet ? (
+    320 > tabletWidth * 0.35 ? tabletWidth * 0.35 :
+      320
+  ) : 0);
+
   useEffect(() => {
     // add all week numbers in timetables to loadedWeeks
     for (const week in timetables) {
@@ -81,8 +91,8 @@ const Lessons: Screen<"Lessons"> = ({ route, navigation }) => {
   const loadTimetableWeek = async (weekNumber: number, force = false) => {
     if (
       (currentlyLoadingWeeks.current.has(weekNumber) ||
-				loadedWeeks.current.has(weekNumber)) &&
-			!force
+        loadedWeeks.current.has(weekNumber)) &&
+      !force
     ) {
       return;
     }
@@ -132,51 +142,55 @@ const Lessons: Screen<"Lessons"> = ({ route, navigation }) => {
       return date;
     });
   });
-  const renderItem = useCallback(({ item: date }: { item: Date }) => {
-    const weekNumber = getWeekFromDate(date);
-    return (
-      <View style={{ width: Dimensions.get("window").width }}>
-        <Page
-          paddingTop={outsideNav ? 80 : insets.top + 56}
-          current={date.getTime() === pickerDate.getTime()}
-          date={date}
-          day={getAllLessonsForDay(date)}
-          weekExists={
-            timetables[weekNumber] && timetables[weekNumber].length > 0
-          }
-          refreshAction={() => loadTimetableWeek(weekNumber, true)}
-          loading={loadingWeeks.includes(weekNumber)}
-        />
-      </View>
-    );
-  },
-  [
-    pickerDate,
-    timetables,
-    loadingWeeks,
-    outsideNav,
-    insets,
-    getAllLessonsForDay,
-    loadTimetableWeek,
-  ],
+  const renderItem = useCallback(
+    ({ item: date }: { item: Date }) => {
+      const weekNumber = getWeekFromDate(date);
+      return (
+        <View style={{ width: finalWidth, height: "100%" }}>
+          <Page
+            paddingTop={outsideNav ? 80 : insets.top + 56}
+            current={date.getTime() === pickerDate.getTime()}
+            date={date}
+            day={getAllLessonsForDay(date)}
+            weekExists={
+              timetables[weekNumber] && timetables[weekNumber].length > 0
+            }
+            refreshAction={() => loadTimetableWeek(weekNumber, true)}
+            loading={loadingWeeks.includes(weekNumber)}
+          />
+        </View>
+      );
+    },
+    [
+      pickerDate,
+      timetables,
+      loadingWeeks,
+      outsideNav,
+      insets,
+      finalWidth,
+      getAllLessonsForDay,
+      loadTimetableWeek,
+    ]
   );
 
-  const onViewableItemsChanged = useCallback(({ viewableItems }: { viewableItems: ViewToken<Date>[] }) => {
-    if (viewableItems.length > 0) {
-      const newDate = viewableItems[0].item;
-      setPickerDate(newDate);
-      loadTimetableWeek(getWeekFromDate(newDate), false);
-    }
-  },
-  [loadTimetableWeek],
+  const onViewableItemsChanged = useCallback(
+    ({ viewableItems }: { viewableItems: ViewToken<Date>[] }) => {
+      if (viewableItems.length > 0) {
+        const newDate = viewableItems[0].item;
+        setPickerDate(newDate);
+        loadTimetableWeek(getWeekFromDate(newDate), false);
+      }
+    },
+    [loadTimetableWeek]
   );
 
-  const getItemLayout = useCallback((_: any, index: number) => ({
-    length: Dimensions.get("window").width,
-    offset: Dimensions.get("window").width * index,
-    index,
-  }),
-  [],
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: finalWidth,
+      offset: finalWidth * index,
+      index,
+    }),
+    [finalWidth]
   );
 
   const askForReview = async () => {
@@ -281,8 +295,8 @@ const Lessons: Screen<"Lessons"> = ({ route, navigation }) => {
               label: "Importer un iCal",
               onPress: () => {
                 navigation.navigate("LessonsImportIcal", {});
-              }
-            }
+              },
+            },
           ]}
         >
           <PapillonHeaderAction
@@ -327,7 +341,7 @@ const Lessons: Screen<"Lessons"> = ({ route, navigation }) => {
           newDate.setHours(0, 0, 0, 0);
           setPickerDate(newDate);
           const index = data.findIndex(
-            (d) => d.getTime() === newDate.getTime(),
+            (d) => d.getTime() === newDate.getTime()
           );
           if (index !== -1) {
             flatListRef.current?.scrollToIndex({ index, animated: false });

src/views/account/Lessons/LessonsHeader.tsx

@@ -22,6 +22,12 @@ interface HeaderCalendarProps {
 }
 
 const HeaderCalendar: React.FC<HeaderCalendarProps> = () => {
+  const dims = Dimensions.get("screen");
+  const tabletWidth = dims.width;
+  const tabletHeight = dims.height;
+  const tabletDiagl = (tabletWidth / tabletHeight) * 10;
+  const tablet = tabletDiagl >= 6.9;
+
   return (
     <Reanimated.View
       style={[{

src/views/login/pronote/PronoteInstanceSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import type { Screen } from "@/router/helpers/types";
-import { TextInput, TouchableOpacity, View, StyleSheet, ActivityIndicator, Keyboard, KeyboardEvent } from "react-native";
+import { TextInput, TouchableOpacity, View, StyleSheet, ActivityIndicator, Keyboard, KeyboardEvent, SafeAreaView } from "react-native";
 import pronote from "pawnote";
 import Reanimated, { LinearTransition, FlipInXDown, FadeInUp, FadeOutUp, ZoomIn, ZoomOut, Easing, ZoomInEasyDown } from "react-native-reanimated";
 import determinateAuthenticationView from "@/services/pronote/determinate-authentication-view";
@@ -101,17 +101,10 @@ const PronoteInstanceSelector: Screen<"PronoteInstanceSelector"> = ({
   }, [search, originalInstances]);
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          paddingTop: insets.top,
-        }
-      ]}
-    >
+    <SafeAreaView style={styles.container}>
       <MaskStars />
 
-      <View style={{height: insets.top}} />
+      <View style={{ height: insets.top, marginTop: "10%" }} />
 
       {!keyboardOpen &&
         <Reanimated.View
@@ -123,9 +116,8 @@ const PronoteInstanceSelector: Screen<"PronoteInstanceSelector"> = ({
           <PapillonShineBubble
             message={"Voici les établissements que j'ai trouvé !"}
             numberOfLines={2}
-            width={250}
+            width={260}
             noFlex
-            style={{ marginTop: 0, zIndex: 9999 }}
           />
         </Reanimated.View>
       }
@@ -264,17 +256,15 @@ const PronoteInstanceSelector: Screen<"PronoteInstanceSelector"> = ({
         </Reanimated.View>
 
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: "center",
-    justifyContent: "center",
     gap: 20,
-    paddingTop: -40,
   },
 
   overScrollContainer: {