feat(tabs): Many changes

src/components/Home/Header.tsx

@@ -7,7 +7,9 @@ import { useTheme } from "@react-navigation/native";
 import { useCurrentAccount } from "@/stores/account";
 import Reanimated, {
   Easing,
-  FadeInRight
+  FadeInRight,
+  ZoomIn,
+  ZoomOut
 } from "react-native-reanimated";
 
 import { get_home_widgets } from "@/addons/addons";
@@ -21,6 +23,8 @@ import Widget from "./Widget";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { RouteParameters } from "@/router/helpers/types";
 import type { Tab } from "@/stores/account/types";
+import { animPapillon } from "@/utils/ui/animations";
+import PapillonSpinner from "../Global/PapillonSpinner";
 
 const Header: React.FC<{
   scrolled: boolean
@@ -38,6 +42,7 @@ const Header: React.FC<{
 
   const [addons] = useState<AddonHomePageInfo[]>([]);
   const [addonsTitle, setAddonsTitle] = useState<string[]>([]);
+  const [click, setClick] = useState<false | true>(false);
 
   const dims = Dimensions.get("window");
   const tablet = dims.width > 600;
@@ -165,7 +170,11 @@ const Header: React.FC<{
 
               <PressableScale
                 onPress={() => {
-                  navigation.navigate("SettingsTabs");
+                  setClick(true);
+                  setTimeout(() => {
+                    navigation.navigate("SettingsTabs");
+                    setClick(false);
+                  }, 10);
                 }}
                 style={{
                   height: 38,
@@ -182,10 +191,20 @@ const Header: React.FC<{
                   opacity: 0.5,
                 }}
               >
-                <CopyPlus
-                  size={24}
-                  color="#fff"
-                />
+                {click ? (
+                  <PapillonSpinner
+                    size={18}
+                    color="white"
+                    strokeWidth={2.8}
+                    entering={animPapillon(ZoomIn)}
+                    exiting={animPapillon(ZoomOut)}
+                  />
+                ) : (
+                  <CopyPlus
+                    size={24}
+                    color="#fff"
+                  />
+                )}
 
                 <Text
                   style={{

src/router/helpers/PapillonTabNavigator.tsx

@@ -161,10 +161,6 @@ const BasePapillonBar: React.FC<Omit<ReturnType<typeof useNavigationBuilder>, "N
                 alignItems: "center",
                 justifyContent: "center",
                 gap: 4.5,
-                opacity: theme.dark ?
-                  isFocused ? 1 : 0.25
-                  :
-                  isFocused ? 1 : 0.5,
               }}
               activeScale={0.85}
               weight="light"

src/views/settings/Settings.tsx

@@ -11,7 +11,9 @@ import Reanimated, {
   FadeOut,
   runOnJS,
   useAnimatedScrollHandler,
-  useSharedValue
+  useSharedValue,
+  ZoomIn,
+  ZoomOut
 } from "react-native-reanimated";
 
 import {
@@ -42,6 +44,8 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import {AddonPlacementManifest} from "@/addons/types";
 import { useFlagsStore } from "@/stores/flags";
 import { useAlert } from "@/providers/AlertProvider";
+import PapillonSpinner from "@/components/Global/PapillonSpinner";
+import { animPapillon } from "@/utils/ui/animations";
 
 const Settings: Screen<"Settings"> = ({ route, navigation }) => {
   const theme = useTheme();
@@ -51,6 +55,7 @@ const Settings: Screen<"Settings"> = ({ route, navigation }) => {
   const [ addons, setAddons ] = useState<Array<AddonPlacementManifest>>([]);
   const [devModeEnabled, setDevModeEnabled] = useState(false);
   const defined = useFlagsStore(state => state.defined);
+  const [click, setClick] = useState<true | false>(false);
 
   const removeAccount = useAccounts((store) => store.remove);
 
@@ -152,15 +157,24 @@ const Settings: Screen<"Settings"> = ({ route, navigation }) => {
       label: "Avancé",
       tabs: [
         {
-          icon: <Route />,
+          icon: click ? (
+            <PapillonSpinner
+              size={18}
+              color="white"
+              strokeWidth={2.8}
+              entering={animPapillon(ZoomIn)}
+              exiting={animPapillon(ZoomOut)}
+            />) : <Route />,
           color: "#7E1174",
           label: "Onglets & Navigation",
           onPress: async () => {
-            if (Platform.OS === "ios") {
-              navigation.goBack();
-            }
+            setClick(true);
             setTimeout(() => {
+              if (Platform.OS === "ios") {
+                navigation.goBack();
+              }
               navigation.navigate("SettingsTabs");
+              setClick(false);
             }, 10);
           },
         },
@@ -186,12 +200,6 @@ const Settings: Screen<"Settings"> = ({ route, navigation }) => {
       label: "Projet Papillon",
       tabs: [
         {
-          icon: <HandCoins />,
-          color: "#CBA024",
-          label: "Soutenir Papillon",
-          onPress: () => {
-            Platform.OS === "android" ? openUrl("https://papillon.bzh/donate") : undefined;
-          },
           icon: <Scroll />,
           color: "#c75110",
           label: "Quoi de neuf ?",
@@ -203,6 +211,12 @@ const Settings: Screen<"Settings"> = ({ route, navigation }) => {
           label: "À propos de Papillon",
           onPress: () => navigation.navigate("SettingsAbout"),
         },
+        Platform.OS === "android" && {
+          icon: <HandCoins />,
+          color: "#CBA024",
+          label: "Soutenir Papillon",
+          onPress: () => openUrl("https://papillon.bzh/donate")
+        },
       ],
     },
     {

src/views/settings/SettingsTabs.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { View, Switch } from "react-native";
+import { View, Switch, Platform, Alert } from "react-native";
 import {
   NativeItem,
   NativeList,
@@ -36,6 +36,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { defaultTabs } from "@/consts/DefaultTabs";
 import { animPapillon } from "@/utils/ui/animations";
 import { log } from "@/utils/logger/logger";
+import { useAlert } from "@/providers/AlertProvider";
 
 // Types for Tab and Account
 interface Tab {
@@ -64,6 +65,7 @@ const SettingsTabs = () => {
 
   const safeTabs = ["Home"];
 
+  const [loading, setLoading] = useState<true | false>(true);
   const [tabs, setTabs] = useState<Tab[]>([]);
   const [newTabs, setNewTabs] = useState<Tab[]>([]);
   const [hideTabTitles, setHideTabTitles] = useState(false);
@@ -147,6 +149,7 @@ const SettingsTabs = () => {
 
       setHideTabTitles(account.personalization.hideTabTitles ?? false);
       setShowTabBackground(account.personalization.showTabBackground ?? false);
+      setLoading(false);
     };
 
     loadTabs();
@@ -175,6 +178,7 @@ const SettingsTabs = () => {
         newTabs.splice(4, 0, homeTab);
         setTabs(newTabs);
       }
+      setLoading(false);
     })();
   }, [tabs]);
 
@@ -201,6 +205,8 @@ const SettingsTabs = () => {
     setShowTabBackground(false);
   };
 
+  const { showAlert } = useAlert();
+
   return (
     <View>
       <NestableScrollContainer
@@ -266,8 +272,8 @@ const SettingsTabs = () => {
                         }}
                         onPress={() => {
                           setPreviewIndex(index);
-                          lottieRefs.current[index].current?.reset();
-                          lottieRefs.current[index].current?.play();
+                          lottieRefs.current[index]?.current?.reset();
+                          lottieRefs.current[index]?.current?.play();
                         }}
                       >
                         <Reanimated.View
@@ -404,11 +410,11 @@ const SettingsTabs = () => {
                 <ShadowDecorator>
                   <View style={{ backgroundColor: theme.colors.card }}>
                     <NativeItem
-                      onPress={async () => {
-                        toggleTab(item.tab);
+                      onLongPress={() => {
+                        setLoading(true);
+                        drag();
                       }}
-                      onLongPress={drag}
-                      delayLongPress={200}
+                      delayLongPress={50}
                       chevron={false}
                       separator={(getIndex() ?? +Infinity) < tabs.length - 1}
                       leading={
@@ -436,12 +442,35 @@ const SettingsTabs = () => {
                               entering={ZoomIn.springify().mass(1).damping(20).stiffness(300)}
                               exiting={ZoomOut.duration(300)}
                             >
-                              <PapillonCheckbox
-                                checked={item.enabled}
-                                onPress={() => {
-                                  toggleTab(item.tab);
-                                }}
-                              />
+                              {!loading && (
+                                <PapillonCheckbox
+                                  checked={item.enabled}
+                                  onPress={() => {
+                                    if (!item.enabled && tabs.filter(t => t.enabled).length === 5) {
+                                      if (Platform.OS === "ios") {
+                                        Alert.alert("Information", "Vous ne pouvez pas ajouter plus de 5 onglets sur la page d'accueil.", [
+                                          {
+                                            text: "OK",
+                                          },
+                                        ]);
+                                      } else {
+                                        showAlert({
+                                          title: "Information",
+                                          message: "Vous ne pouvez pas ajouter plus de 5 onglets sur la page d'accueil.",
+                                          actions: [
+                                            {
+                                              title: "OK",
+                                              onPress: () => {},
+                                              backgroundColor: theme.colors.card,
+                                            },
+                                          ],
+                                        });
+                                      }
+                                    }
+                                    toggleTab(item.tab);
+                                  }}
+                                />
+                              )}
                             </Reanimated.View>
                           )}
 
@@ -539,4 +568,4 @@ const SettingsTabs = () => {
   );
 };
 
-export default SettingsTabs;
+export default SettingsTabs;