@pi-spi/app 1.3.0 → 1.4.0

package/src/core/storage.ts

@@ -1,5 +1,5 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import CryptoJS from 'crypto-js';
+import { cbc } from '@noble/ciphers/aes.js';
 import * as Crypto from 'expo-crypto';
 import * as SecureStore from 'expo-secure-store';
 
@@ -95,7 +95,7 @@ export class Box {
   constructor(
     readonly name: string,
     private readonly entries: Map<string, Item>,
-    private readonly dek: CryptoJS.lib.WordArray,
+    private readonly dek: Uint8Array,
   ) {}
 
   get length(): number {
@@ -142,7 +142,7 @@ export class Box {
     return `${KEY_PREFIX}box.${name}`;
   }
 
-  static async open(name: string, dek: CryptoJS.lib.WordArray): Promise<Box> {
+  static async open(name: string, dek: Uint8Array): Promise<Box> {
     const raw = await AsyncStorage.getItem(Box.storageKey(name));
     let entries = new Map<string, Item>();
     if (raw != null) {
@@ -159,26 +159,34 @@ export class Box {
   }
 }
 
-function encrypt(plain: string, key: CryptoJS.lib.WordArray): string {
-  const iv = bytesToWordArray(Crypto.getRandomBytes(16));
-  const encrypted = CryptoJS.AES.encrypt(plain, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
-  return `${CryptoJS.enc.Base64.stringify(iv)}:${encrypted.ciphertext.toString(CryptoJS.enc.Base64)}`;
+/**
+ * Chiffre en AES-256-CBC (padding PKCS7) : `<iv base64>:<texte chiffré base64>`.
+ * Même format que l'ancienne implémentation `crypto-js` : les données déjà
+ * enregistrées restent lisibles.
+ */
+export function encrypt(plain: string, key: Uint8Array): string {
+  const iv = Crypto.getRandomBytes(16);
+  const ciphertext = cbc(key, iv).encrypt(new TextEncoder().encode(plain));
+  return `${toBase64(iv)}:${toBase64(ciphertext)}`;
 }
 
-function decrypt(payload: string, key: CryptoJS.lib.WordArray): string {
+export function decrypt(payload: string, key: Uint8Array): string {
   const [ivB64, cipherB64] = payload.split(':');
-  const iv = CryptoJS.enc.Base64.parse(ivB64);
-  const params = CryptoJS.lib.CipherParams.create({ ciphertext: CryptoJS.enc.Base64.parse(cipherB64) });
-  const plain = CryptoJS.AES.decrypt(params, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
-  return plain.toString(CryptoJS.enc.Utf8);
+  const plain = cbc(key, fromBase64(ivB64)).decrypt(fromBase64(cipherB64));
+  return new TextDecoder().decode(plain);
 }
 
-function bytesToWordArray(bytes: Uint8Array): CryptoJS.lib.WordArray {
-  const words: number[] = [];
-  for (let i = 0; i < bytes.length; i++) {
-    words[i >>> 2] = (words[i >>> 2] ?? 0) | (bytes[i] << (24 - (i % 4) * 8));
-  }
-  return CryptoJS.lib.WordArray.create(words, bytes.length);
+export function toBase64(bytes: Uint8Array): string {
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+  return btoa(binary);
+}
+
+export function fromBase64(value: string): Uint8Array {
+  const binary = atob(value);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+  return bytes;
 }
 
 /**
@@ -195,7 +203,7 @@ export class AppStorage {
   static readonly keyId = 'DEK';
 
   /** The Data Encryption Key */
-  private static dek: CryptoJS.lib.WordArray;
+  private static dek: Uint8Array;
 
   /** Collections ouvertes (chargées entièrement en mémoire, comme les boîtes Hive). */
   static collections = new Map<string, Promise<Box>>();
@@ -206,12 +214,12 @@ export class AppStorage {
     const keyString = await secureStorage.read(AppStorage.keyId);
     if (keyString == null) {
       const key = Crypto.getRandomBytes(32);
-      await secureStorage.write(AppStorage.keyId, CryptoJS.enc.Base64.stringify(bytesToWordArray(key)));
-      AppStorage.dek = bytesToWordArray(key);
+      await secureStorage.write(AppStorage.keyId, toBase64(key));
+      AppStorage.dek = key;
     }
     // Sinon récupérer la clé existante
     else {
-      AppStorage.dek = CryptoJS.enc.Base64.parse(keyString);
+      AppStorage.dek = fromBase64(keyString);
     }
     AppStorage.isInit = true;
   }

package/src/l10n/app_localizations.ts

@@ -1027,6 +1027,8 @@ export interface AppLocalizations {
   readonly transactionSearchInputFilterCategoriesSensPayes: string;
   /** Apply */
   readonly transactionSearchInputFilterBtnAppliquer: string;
+  /** Reset */
+  readonly transactionSearchInputFilterBtnReinitialiser: string;
   /** Scan */
   readonly qrcodePageBtnScan: string;
   /** QR Code */
@@ -1343,6 +1345,44 @@ export interface AppLocalizations {
   notificationMAJMessage(systeme: string): string;
   /** Install */
   readonly notificationMAJBtn: string;
+  /** What would you like to do? */
+  readonly searchTitle: string;
+  /** Search for a feature */
+  readonly searchHint: string;
+  /** No feature matches “{motCle}” */
+  searchEmpty(motCle: string): string;
+  /** Send money to a contact */
+  readonly searchSendSubTitle: string;
+  /** Request money from a contact */
+  readonly searchReceiveSubTitle: string;
+  /** Scan a QR code */
+  readonly searchQrScanTitle: string;
+  /** Pay by scanning a QR code */
+  readonly searchQrScanSubTitle: string;
+  /** Receive money with your QR code */
+  readonly searchQrShowSubTitle: string;
+  /** Find a payment sent or received */
+  readonly searchTransactionsSubTitle: string;
+  /** See your scheduled payments */
+  readonly searchAbonnementsSubTitle: string;
+  /** Your details and your account */
+  readonly searchCompteSubTitle: string;
+  /** Theme, notifications and home screen */
+  readonly searchParametreSubTitle: string;
+  /** Manage your contacts and aliases */
+  readonly searchContactsSubTitle: string;
+  /** Frequently asked questions and support */
+  readonly searchAideSubTitle: string;
+  /** Voice search */
+  readonly searchVoiceStart: string;
+  /** Stop listening */
+  readonly searchVoiceStop: string;
+  /** Listening… */
+  readonly searchVoiceListening: string;
+  /** Tell me what you would like to do */
+  readonly searchVoicePrompt: string;
+  /** Voice search is not available. Check microphone access in settings. */
+  readonly searchVoiceUnavailable: string;
 }
 
 export const supportedLocales = ['fr', 'en', 'pt'] as const;

package/src/l10n/app_localizations_en.ts

@@ -524,6 +524,7 @@ Please try again later.`,
   transactionSearchInputFilterCategoriesSensRecus: `Received`,
   transactionSearchInputFilterCategoriesSensPayes: `Sent`,
   transactionSearchInputFilterBtnAppliquer: `Apply`,
+  transactionSearchInputFilterBtnReinitialiser: `Reset`,
   qrcodePageBtnScan: `Scan`,
   qrcodePageBtnMonCode: `QR Code`,
   qrcodePageBtnMonAlias: `My alias`,
@@ -683,4 +684,23 @@ Scanning will be automatic`,
   notificationMAJDate: (date: string) => `Since ${date}`,
   notificationMAJMessage: (systeme: string) => `A new version of the application is available on ${systeme}`,
   notificationMAJBtn: `Install`,
+  searchTitle: `What would you like to do?`,
+  searchHint: `Search for a feature`,
+  searchEmpty: (motCle: string) => `No feature matches “${motCle}”`,
+  searchSendSubTitle: `Send money to a contact`,
+  searchReceiveSubTitle: `Request money from a contact`,
+  searchQrScanTitle: `Scan a QR code`,
+  searchQrScanSubTitle: `Pay by scanning a QR code`,
+  searchQrShowSubTitle: `Receive money with your QR code`,
+  searchTransactionsSubTitle: `Find a payment sent or received`,
+  searchAbonnementsSubTitle: `See your scheduled payments`,
+  searchCompteSubTitle: `Your details and your account`,
+  searchParametreSubTitle: `Theme, notifications and home screen`,
+  searchContactsSubTitle: `Manage your contacts and aliases`,
+  searchAideSubTitle: `Frequently asked questions and support`,
+  searchVoiceStart: `Voice search`,
+  searchVoiceStop: `Stop listening`,
+  searchVoiceListening: `Listening…`,
+  searchVoicePrompt: `Tell me what you would like to do`,
+  searchVoiceUnavailable: `Voice search is not available. Check microphone access in settings.`,
 };

package/src/l10n/app_localizations_fr.ts

@@ -523,6 +523,7 @@ Merci de votre compréhension.`,
   transactionSearchInputFilterCategoriesSensRecus: `Reçus`,
   transactionSearchInputFilterCategoriesSensPayes: `Envoyés`,
   transactionSearchInputFilterBtnAppliquer: `Appliquer`,
+  transactionSearchInputFilterBtnReinitialiser: `Réinitialiser`,
   qrcodePageBtnScan: `Scan`,
   qrcodePageBtnMonCode: `Mon Code`,
   qrcodePageBtnMonAlias: `Mon alias`,
@@ -682,4 +683,23 @@ Le scan se fait automatiquement`,
   notificationMAJDate: (date: string) => `Depuis le ${date}`,
   notificationMAJMessage: (systeme: string) => `Une nouvelle version de l'application est disponible sur ${systeme}`,
   notificationMAJBtn: `Installer`,
+  searchTitle: `Que voulez-vous faire ?`,
+  searchHint: `Rechercher une fonctionnalité`,
+  searchEmpty: (motCle: string) => `Aucune fonctionnalité ne correspond à « ${motCle} »`,
+  searchSendSubTitle: `Envoyer de l’argent à un contact`,
+  searchReceiveSubTitle: `Demander de l’argent à un contact`,
+  searchQrScanTitle: `Scanner un QR code`,
+  searchQrScanSubTitle: `Payer en scannant un QR code`,
+  searchQrShowSubTitle: `Recevoir de l’argent avec votre QR code`,
+  searchTransactionsSubTitle: `Retrouver un paiement envoyé ou reçu`,
+  searchAbonnementsSubTitle: `Voir vos paiements programmés`,
+  searchCompteSubTitle: `Vos informations et votre compte`,
+  searchParametreSubTitle: `Thème, notifications et écran d’accueil`,
+  searchContactsSubTitle: `Gérer vos contacts et vos alias`,
+  searchAideSubTitle: `Questions fréquentes et assistance`,
+  searchVoiceStart: `Recherche vocale`,
+  searchVoiceStop: `Arrêter l’écoute`,
+  searchVoiceListening: `Je vous écoute…`,
+  searchVoicePrompt: `Dites-moi ce que vous souhaitez faire`,
+  searchVoiceUnavailable: `La recherche vocale n’est pas disponible. Vérifiez l’accès au micro dans les réglages.`,
 };

package/src/l10n/app_localizations_pt.ts

@@ -524,6 +524,7 @@ Por favor, tente novamente mais tarde`,
   transactionSearchInputFilterCategoriesSensRecus: `Recebidos`,
   transactionSearchInputFilterCategoriesSensPayes: `Enviados`,
   transactionSearchInputFilterBtnAppliquer: `Aplicar`,
+  transactionSearchInputFilterBtnReinitialiser: `Repor`,
   qrcodePageBtnScan: `Scan`,
   qrcodePageBtnMonCode: `Meu Código`,
   qrcodePageBtnMonAlias: `Meu alias`,
@@ -683,4 +684,23 @@ O scan é feito automaticamente`,
   notificationMAJDate: (date: string) => `Desde ${date}`,
   notificationMAJMessage: (systeme: string) => `Uma nova versão da aplicação está disponível em ${systeme}`,
   notificationMAJBtn: `Instalar`,
+  searchTitle: `O que deseja fazer?`,
+  searchHint: `Pesquisar uma funcionalidade`,
+  searchEmpty: (motCle: string) => `Nenhuma funcionalidade corresponde a «${motCle}»`,
+  searchSendSubTitle: `Enviar dinheiro a um contacto`,
+  searchReceiveSubTitle: `Pedir dinheiro a um contacto`,
+  searchQrScanTitle: `Digitalizar um código QR`,
+  searchQrScanSubTitle: `Pagar digitalizando um código QR`,
+  searchQrShowSubTitle: `Receber dinheiro com o seu código QR`,
+  searchTransactionsSubTitle: `Encontrar um pagamento enviado ou recebido`,
+  searchAbonnementsSubTitle: `Ver os seus pagamentos programados`,
+  searchCompteSubTitle: `Os seus dados e a sua conta`,
+  searchParametreSubTitle: `Tema, notificações e ecrã inicial`,
+  searchContactsSubTitle: `Gerir os seus contactos e alias`,
+  searchAideSubTitle: `Perguntas frequentes e assistência`,
+  searchVoiceStart: `Pesquisa por voz`,
+  searchVoiceStop: `Parar de ouvir`,
+  searchVoiceListening: `Estou a ouvir…`,
+  searchVoicePrompt: `Diga-me o que deseja fazer`,
+  searchVoiceUnavailable: `A pesquisa por voz não está disponível. Verifique o acesso ao microfone nas definições.`,
 };

package/src/modules/alias/presentation/pages/alias_page_create_options.tsx

@@ -4,7 +4,7 @@ import { Images } from '../../../../core/assets';
 import { useBloc } from '../../../../core/bloc_react';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { MenuActionItem, MenuActionsWiget } from '../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
 import { AliasBloc } from '../bloc/alias_bloc';
 import { CreateAliasMBNOEvent, CreateAliasSHIDEvent } from '../bloc/alias_event';
@@ -26,7 +26,7 @@ export function AliasPageCreateOptions({ compte }: { compte: string }) {
         <View style={styles.gap32} />
 
         {/* Bouton créer alias SHID */}
-        <MenuActionsWiget
+        <MenuActionsWidget
           items={[
             new MenuActionItem(
               Images.aliasIconUser,
@@ -40,7 +40,7 @@ export function AliasPageCreateOptions({ compte }: { compte: string }) {
         <View style={styles.gap20} />
 
         {/* - type MBNO */}
-        <MenuActionsWiget
+        <MenuActionsWidget
           items={[
             new MenuActionItem(
               Images.aliasIconPhone,

package/src/modules/alias/presentation/pages/alias_page_otp.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, type ReactNode } from 'react';
-import { Keyboard, StyleSheet, Text, TextInput, useWindowDimensions, View } from 'react-native';
+import { Keyboard, StyleSheet, Text, TextInput, useWindowDimensions, View, type TextInputInstance } from 'react-native';
 
 import { useTheme } from '../../../../core/theme';
 
@@ -30,7 +30,7 @@ export function AliasPageOtp({
   const theme = useTheme();
   const { width: largeur } = useWindowDimensions();
   const [values, setValues] = useState<string[]>(() => Array(pinLength).fill(''));
-  const inputs = useRef<(TextInput | null)[]>([]);
+  const inputs = useRef<(TextInputInstance | null)[]>([]);
 
   const isTablet = largeur >= 600;
   const paddingX = 20;

package/src/modules/categorie/presentation/pages/categorie_edit_icon_btn.tsx

@@ -12,7 +12,7 @@ import { ElevatedButton } from '../../../../shared/material/buttons';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { EmojiSelectWidget } from '../../../../shared/widgets/emoji_select_widget';
-import { MenuActionItem, MenuActionsWiget } from '../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
 import { CategorieIconType } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
 import { CategorieAddValidationEvent, CategorieEditValidationEvent } from '../bloc/categorie_event';
@@ -67,7 +67,7 @@ function CategorieEditIconOptions() {
       <ScrollView contentContainerStyle={styles.sheetContent}>
         <Text style={[theme.textTheme.headlineMedium, styles.title]}>{traductions.categorieFormIconSheetTitle}</Text>
         <Card>
-          <MenuActionsWiget
+          <MenuActionsWidget
             items={[
               // Emoji
               new MenuActionItem(Images.categorieIconEmoji, traductions.categorieFormIconSheetEmojiTitle, null, () => void selectEmoji(), {

package/src/modules/categorie/presentation/pages/categorie_select_widget.tsx

@@ -17,14 +17,18 @@ export function CategorieSelectWidget({
   const state = useBlocBuilder(categorieBloc);
   return (
     <View>
-      {/* Catégories personnalisées */}
-      <CategorieListeWidget
-        liste={state.categories}
-        editable={false}
-        defaultSelectedCategories={selectedCategories}
-        onSelectionChanged={onSelectionChanged}
-      />
-      <View style={styles.gap20} />
+      {/* Catégories personnalisées (pas de carte vide s'il n'y en a pas) */}
+      {state.categories.length > 0 && (
+        <>
+          <CategorieListeWidget
+            liste={state.categories}
+            editable={false}
+            defaultSelectedCategories={selectedCategories}
+            onSelectionChanged={onSelectionChanged}
+          />
+          <View style={styles.gap16} />
+        </>
+      )}
       {/* Catégories par défaut */}
       <CategorieListeWidget
         liste={Categorie.defaultListe}
@@ -35,4 +39,4 @@ export function CategorieSelectWidget({
   );
 }
 
-const styles = StyleSheet.create({ gap20: { height: 20 } });
+const styles = StyleSheet.create({ gap16: { height: 16 } });

package/src/modules/compte/presentation/pages/solde_widget_with_qr.tsx

@@ -157,8 +157,6 @@ function SoldeRow({ soldeState, compteSoldeBloc }: { soldeState: CompteSoldeStat
   const traductions = useAppLocalizations();
   const configBloc = useBloc(ConfigBloc);
   const displayEye = configBloc.state.configParams.params[ConfigKey.hideEye] !== '1';
-  const solde = soldeState.solde ?? 0;
-  const fontSize = solde < 100000000 ? 24 : solde < 1000000000 ? 20 : 18;
 
   return (
     <View>
@@ -167,7 +165,15 @@ function SoldeRow({ soldeState, compteSoldeBloc }: { soldeState: CompteSoldeStat
         {soldeState instanceof CompteSoldeStateInitial && <SkeletonWidget height={25} width={150} />}
         {soldeState instanceof CompteSoldeDisplayState && (
           <>
-            <AmountWidget montant={soldeState.solde} numberOfLines={1} style={{ ...theme.textTheme.headlineLarge, fontSize }} />
+            {/* Le montant prend la place disponible et se réduit s'il est trop long (8 chiffres et plus), au lieu de déborder */}
+            <View style={styles.amount}>
+              <AmountWidget
+                montant={soldeState.solde}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                style={{ ...theme.textTheme.headlineLarge, fontSize: 24 }}
+              />
+            </View>
             {displayEye && <EyeButton compteSoldeBloc={compteSoldeBloc} />}
           </>
         )}
@@ -281,6 +287,7 @@ const styles = StyleSheet.create({
   cardContent: { paddingLeft: 10, paddingRight: 10, paddingTop: 16, paddingBottom: 10 },
   row: { flexDirection: 'row', alignItems: 'flex-start' },
   inlineRow: { flexDirection: 'row', alignItems: 'center' },
+  amount: { flexShrink: 1 },
   expanded: { flex: 1 },
   libelle: { color: Themer.neural04Color, letterSpacing: 0.4 },
   bold: { fontWeight: '600' },

package/src/modules/home/presentation/pages/home_page.tsx

@@ -16,6 +16,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useBloc } from '../../../../core/bloc_react';
 import { CompteAliasStatus } from '../../../../core/compte_alias_status';
 import { Di } from '../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../core/router';
 import { Themer, useTheme } from '../../../../core/theme';
 import { useValueListenable } from '../../../../core/value_notifier';
 import { useAppLocalizations } from '../../../../l10n/localizations';
@@ -24,6 +25,8 @@ import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
 import { ContactListEvent } from '../../../contacts/presentation/bloc/contact_event';
 import { ParametreHideAmountBloc } from '../../../profile/presentation/bloc/hide_amount/hide_amount_bloc';
 import { ParametreHideAmountInitEvent } from '../../../profile/presentation/bloc/hide_amount/hide_amount_event';
+import type { Fonctionnalite } from '../../../search/domain/models/fonctionnalite';
+import { fonctionnalitesRecherchables } from '../../../search/presentation/pages/search_fonctionnalites';
 import { TransactionSendBloc } from '../../../transactions/presentation/bloc/transaction_send/transaction_send_bloc';
 import { TransactionSendUpdateStateEvent } from '../../../transactions/presentation/bloc/transaction_send/transaction_send_event';
 import { HomeTabCompte } from './home_tab_compte';
@@ -36,6 +39,7 @@ import { ComingSoon } from './pending_modules';
 export function HomePage({ selectedTab }: { selectedTab?: number }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
+  const router = useAppRouter();
   const insets = useSafeAreaInsets();
   const { width } = useWindowDimensions();
   const status = useValueListenable(Di.activeCompteAlias);
@@ -74,6 +78,17 @@ export function HomePage({ selectedTab }: { selectedTab?: number }) {
     listRef.current?.scrollToIndex({ index, animated: true });
   };
 
+  /**
+   * La recherche renvoie la fonctionnalité choisie au lieu de l'ouvrir :
+   * la navigation part de l'accueil, et le retour y ramène.
+   */
+  const ouvrirRecherche = async () => {
+    const choisie = await AppRouter.push<Fonctionnalite>(router, AppRouter.search, {
+      params: fonctionnalitesRecherchables(router, traductions, { ouvrirOnglet: goToTab }),
+    });
+    choisie?.ouvrir();
+  };
+
   const onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     setTab(Math.round(e.nativeEvent.contentOffset.x / pageWidth));
   };
@@ -91,8 +106,20 @@ export function HomePage({ selectedTab }: { selectedTab?: number }) {
         <View style={{ backgroundColor: theme.appBarTheme.backgroundColor }}>
           <View style={styles.toolbar}>
             <HomeToolbarLeading user={Di.config.user} enabled={hasAlias} />
-            {/* Notifications (grisé si le compte actif n'a pas d'alias) */}
-            <NotificationBtnOpenWidget enabled={hasAlias} />
+            <View style={styles.actions}>
+              {/* Recherche dans les fonctionnalités (grisé si le compte actif n'a pas d'alias) */}
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={traductions.searchTitle}
+                disabled={!hasAlias}
+                onPress={() => void ouvrirRecherche()}
+                style={[styles.action, { opacity: hasAlias ? 1 : 0.38 }]}
+              >
+                <MaterialIcons name="search" size={24} color={theme.appBarTheme.foregroundColor} />
+              </Pressable>
+              {/* Notifications (grisé si le compte actif n'a pas d'alias) */}
+              <NotificationBtnOpenWidget enabled={hasAlias} />
+            </View>
           </View>
           {/* Onglets */}
           <View style={styles.tabBar}>
@@ -161,6 +188,8 @@ export function HomePage({ selectedTab }: { selectedTab?: number }) {
 
 const styles = StyleSheet.create({
   toolbar: { height: 56, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  actions: { flexDirection: 'row', alignItems: 'center' },
+  action: { padding: 12 },
   tabBar: { flexDirection: 'row', paddingHorizontal: 20, height: 46, alignItems: 'center' },
   tab: { flex: 1, height: 36, marginHorizontal: 2, alignItems: 'center', justifyContent: 'center', borderRadius: 12.2 },
   tabSelected: { backgroundColor: '#151413' },

package/src/modules/home/presentation/pages/home_tab_compte_more_menu.tsx

@@ -6,7 +6,7 @@ import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
-import { MenuActionItem, MenuActionsWiget } from '../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
 
 /**
  * Menu « Plus » de l'accueil. Le participant peut personnaliser ce menu
@@ -18,6 +18,11 @@ export function HomeTabCompteMoreMenu() {
   const router = useAppRouter();
   const { height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
+  // Fermer le menu avant d'ouvrir la page : sinon il reste affiché par-dessus
+  const open = (location: string) => {
+    AppRouter.pop(router);
+    void AppRouter.push(router, location);
+  };
   return (
     <View
       style={[
@@ -27,14 +32,14 @@ export function HomeTabCompteMoreMenu() {
     >
       <Card>
         <ScrollView>
-          <MenuActionsWiget
+          <MenuActionsWidget
             items={[
               // Programmer un paiement
               new MenuActionItem(
                 Images.homeFooterTransfer,
                 traductions.homeActionMoreSheetProgrammerTitle,
                 traductions.homeActionMoreSheetProgrammerSubTitle,
-                () => void AppRouter.push(router, AppRouter.subscriptionSchedule),
+                () => open(AppRouter.subscriptionSchedule),
                 { iconSize: 20 },
               ),
               // Trouver un abonnement
@@ -42,7 +47,7 @@ export function HomeTabCompteMoreMenu() {
                 Images.homeMoreFindSubscription,
                 traductions.homeActionMoreSheetAbonnementTitle,
                 traductions.homeActionMoreSheetAbonnementSubTitle,
-                () => void AppRouter.push(router, AppRouter.subscriptionSubscribe),
+                () => open(AppRouter.subscriptionSubscribe),
                 { iconSize: 20 },
               ),
               // Partager dépenses
@@ -50,7 +55,7 @@ export function HomeTabCompteMoreMenu() {
                 Images.homeMoreSplitPayments,
                 traductions.homeActionMoreSheetPartagerTitle,
                 traductions.homeActionMoreSheetPartagerSubTitle,
-                () => void AppRouter.push(router, AppRouter.transactionSplitPaymentTx),
+                () => open(AppRouter.transactionSplitPaymentTx),
                 { iconSize: 20 },
               ),
             ]}

package/src/modules/notification/presentation/bloc/notification_bloc.ts

@@ -147,8 +147,13 @@ export class NotificationBloc extends Bloc<NotificationEvent, NotificationState>
   private async onList(event: NotificationListEvent, emit: Emitter<NotificationState>): Promise<void> {
     // En cours de rechargement
     emit(new NotificationLoadingState(emptyListe(), this.state.count, event.command));
+
+    // Repartir de la première page
+    const command = event.command;
+    command.index = null;
+    command.total = 0;
+
     try {
-      const command = event.command;
 
       // Rechercher d'abord en local et afficher
       const donneesLocales = await this.pNotificationInputPort.list(listParams(command));
@@ -186,7 +191,8 @@ export class NotificationBloc extends Bloc<NotificationEvent, NotificationState>
     if (this.paginating) return;
     this.paginating = true;
     const command = this.state.command;
-    const oldListe = this.state.notifications;
+    // Affiche le loader en bas de la liste
+    emit(new NotificationInitialState(this.state.notifications, this.state.count, command, true));
     try {
       // Récupérer les notifications depuis le serveur
       const liste = await this.pNotificationInputPort.search(listParams(command, event.index));
@@ -196,16 +202,19 @@ export class NotificationBloc extends Bloc<NotificationEvent, NotificationState>
       if (newNotifications.length > 0) {
         emit(
           new NotificationInitialState(
-            new NotificationListe([...oldListe.data, ...newNotifications], liste.meta),
+            new NotificationListe([...this.state.notifications.data, ...newNotifications], liste.meta),
             this.state.count,
             command,
           ),
         );
+        return;
       }
     } catch (e) {
       this.logger.e('Recuperer liste notification pagination error =>', { error: e });
     } finally {
       this.paginating = false;
     }
+    // Page vide ou erreur : on retire le loader
+    emit(new NotificationInitialState(this.state.notifications, this.state.count, command));
   }
 }

package/src/modules/notification/presentation/bloc/notification_state.ts

@@ -11,7 +11,17 @@ export abstract class NotificationState {
   ) {}
 }
 
-export class NotificationInitialState extends NotificationState {}
+export class NotificationInitialState extends NotificationState {
+  constructor(
+    notifications: NotificationListe,
+    count: number,
+    command: NotificationSearchCommand,
+    /** true pendant le chargement de la page suivante : un petit loader est affiché en bas de la liste. */
+    readonly isPaginating = false,
+  ) {
+    super(notifications, count, command);
+  }
+}
 
 export class NotificationLoadingState extends NotificationState {}
 

package/src/modules/notification/presentation/pages/notification_page_liste.tsx

@@ -6,9 +6,10 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { DateFormat } from '../../../../shared/utils/date_format';
+import { PaginationLoaderWidget } from '../../../../shared/widgets/pagination_loader_widget';
 import { NotificationBloc } from '../bloc/notification_bloc';
 import { NotificationListEvent, NotificationSearchPaginateEvent } from '../bloc/notification_event';
-import { NotificationLoadingState } from '../bloc/notification_state';
+import { NotificationInitialState, NotificationLoadingState } from '../bloc/notification_state';
 import { groupNotifications } from './notification_groups';
 import { NotificationPageListeEmpty } from './notification_page_liste_empty';
 import { NotificationPageListeItem } from './notification_page_liste_item';
@@ -54,6 +55,8 @@ export function NotificationPageListe() {
         if (command.canLoadMore()) bloc.add(new NotificationSearchPaginateEvent(command.index));
       }}
       onEndReachedThreshold={0.2}
+      // Chargement de la page suivante
+      ListFooterComponent={state instanceof NotificationInitialState && state.isPaginating ? <PaginationLoaderWidget /> : undefined}
       renderItem={({ item }) => (
         <View>
           {/* Jour */}

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_notifications.tsx

@@ -10,7 +10,7 @@ import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
-import { MenuActionItem, MenuActionsWiget } from '../../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../../shared/widgets/menu_actions_widget';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
@@ -116,7 +116,7 @@ export function ProfileParametrePageNotifications() {
         <View style={styles.gap20} />
         <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
         <View style={styles.gap10} />
-        <MenuActionsWiget
+        <MenuActionsWidget
           items={[
             new MenuActionItem(
               Images.iconsCloche,

package/src/modules/profile/presentation/pages/web/profile_web_page.tsx

@@ -23,7 +23,7 @@ export function ProfileWebPage({ url }: { url: string }) {
   const theme = useTheme();
   const router = useAppRouter();
   const insets = useSafeAreaInsets();
-  const webview = useRef<WebView>(null);
+  const webview = useRef<WebView<object>>(null);
   const [loading, setLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
 
@@ -47,7 +47,8 @@ export function ProfileWebPage({ url }: { url: string }) {
           />
         ) : null}
         <View style={hasError ? styles.hidden : styles.flex}>
-          <WebView
+          {/* react-native-webview 14 : sans paramètre de type, ses props valent `never` */}
+          <WebView<object>
             ref={webview}
             source={{ uri: url }}
             style={styles.web}