@pi-spi/app 2.0.0 → 2.2.0

package/src/modules/search/presentation/pages/search_fonctionnalites.ts

@@ -5,7 +5,7 @@ import { Di } from '../../../../core/di';
 import { AppEnv } from '../../../../core/env';
 import { AppRouter, type SdkRouter } from '../../../../core/router';
 import type { AppLocalizations } from '../../../../l10n/app_localizations';
-import { Fonctionnalite } from '../../domain/models/fonctionnalite';
+import { Fonctionnalite, FonctionnaliteRubrique } from '../../domain/models/fonctionnalite';
 
 /**
  * Catalogue des fonctionnalités accessibles depuis la recherche.
@@ -34,6 +34,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.arrowUp,
       titre: traductions.homeActionSend,
+      rubrique: FonctionnaliteRubrique.paiements,
+      raccourci: true,
       sousTitre: traductions.searchSendSubTitle,
       motsCles: ['envoi', 'transfert', 'payer', 'virement', 'send', 'pay', 'transfer', 'enviar', 'pagar'],
       ouvrir: () => aller(AppRouter.transactionSend),
@@ -41,6 +43,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.arrowDown,
       titre: traductions.homeActionRequest,
+      rubrique: FonctionnaliteRubrique.paiements,
+      raccourci: true,
       sousTitre: traductions.searchReceiveSubTitle,
       motsCles: ['demander', 'demande', 'rtp', 'request', 'receive', 'pedir', 'receber'],
       ouvrir: () => aller(AppRouter.transactionReceive),
@@ -48,6 +52,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeFooterQrcode,
       titre: traductions.searchQrScanTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
       sousTitre: traductions.searchQrScanSubTitle,
       motsCles: ['qr', 'qrcode', 'scanner', 'scan', 'camera'],
       // Le QR scanné ouvre directement l'envoi, comme depuis l'accueil.
@@ -56,6 +61,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeFooterQr,
       titre: traductions.qrcodePagePartageQrCodeTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
+      raccourci: true,
       sousTitre: traductions.searchQrShowSubTitle,
       motsCles: ['qr', 'qrcode', 'partager', 'share', 'partilhar'],
       ouvrir: () => aller(AppRouter.qrcodeShow),
@@ -63,6 +70,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconSend,
       titre: traductions.transactionSearchTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
       sousTitre: traductions.searchTransactionsSubTitle,
       motsCles: ['historique', 'paiement', 'operation', 'releve', 'history', 'payment', 'historico', 'pagamento'],
       ouvrir: () => aller(AppRouter.transactionSearch),
@@ -70,6 +78,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsCloche,
       titre: traductions.searchNotificationsTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
       sousTitre: traductions.searchNotificationsSubTitle,
       motsCles: ['notification', 'alerte', 'message', 'nouveau', 'alert', 'news', 'notificacao', 'alerta'],
       ouvrir: () => aller(AppRouter.notifications),
@@ -79,6 +88,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.transactionPlanifier,
       titre: traductions.homeActionMoreSheetProgrammerTitle,
+      rubrique: FonctionnaliteRubrique.abonnements,
+      raccourci: true,
       sousTitre: traductions.homeActionMoreSheetProgrammerSubTitle,
       motsCles: ['programmer', 'planifier', 'recurrent', 'schedule', 'agendar'],
       ouvrir: () => aller(AppRouter.subscriptionSchedule),
@@ -86,6 +97,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeMoreFindSubscription,
       titre: traductions.homePageToolbarTabbarAbonnement,
+      rubrique: FonctionnaliteRubrique.abonnements,
       sousTitre: traductions.searchAbonnementsSubTitle,
       motsCles: ['abonnement', 'echeance', 'programme', 'subscription', 'assinatura'],
       ouvrir: () => ouvrirOnglet(1),
@@ -93,6 +105,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeMoreFindSubscription,
       titre: traductions.homeActionMoreSheetAbonnementTitle,
+      rubrique: FonctionnaliteRubrique.abonnements,
       sousTitre: traductions.homeActionMoreSheetAbonnementSubTitle,
       motsCles: ['abonnement', 'subscription', 'assinatura'],
       ouvrir: () => aller(AppRouter.subscriptionSubscribe),
@@ -100,6 +113,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeMoreSplitPayments,
       titre: traductions.homeActionMoreSheetPartagerTitle,
+      rubrique: FonctionnaliteRubrique.abonnements,
       sousTitre: traductions.homeActionMoreSheetPartagerSubTitle,
       motsCles: ['partager', 'repartir', 'diviser', 'amis', 'split', 'share', 'dividir'],
       ouvrir: () => aller(AppRouter.transactionSplitPaymentTx),
@@ -109,6 +123,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsCircleUser,
       titre: traductions.profilePageMenuCompteTitle,
+      rubrique: FonctionnaliteRubrique.profil,
       sousTitre: traductions.searchCompteSubTitle,
       motsCles: ['profil', 'compte', 'iban', 'rib', 'profile', 'account', 'perfil', 'conta'],
       ouvrir: () => aller(AppRouter.profileCompte),
@@ -116,6 +131,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsSetting,
       titre: traductions.profilePageMenuParametreTitle,
+      rubrique: FonctionnaliteRubrique.profil,
       sousTitre: traductions.searchParametreSubTitle,
       motsCles: ['parametre', 'reglage', 'theme', 'langue', 'notification', 'sombre', 'settings', 'language', 'dark', 'definicoes', 'idioma'],
       ouvrir: () => aller(AppRouter.profileParametre),
@@ -126,6 +142,7 @@ export function fonctionnalitesRecherchables(
           new Fonctionnalite({
             icon: Images.iconsTheme,
             titre: traductions.searchThemeTitle,
+            rubrique: FonctionnaliteRubrique.profil,
             sousTitre: traductions.searchThemeSubTitle,
             motsCles: ['theme', 'apparence', 'sombre', 'clair', 'couleur', 'mode', 'appearance', 'dark', 'light', 'color', 'tema', 'aparencia', 'escuro', 'claro', 'cor'],
             ouvrir: () => aller(AppRouter.profileParametreTheme),
@@ -135,6 +152,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsCloche,
       titre: traductions.searchNotificationsParametreTitle,
+      rubrique: FonctionnaliteRubrique.profil,
       sousTitre: traductions.searchNotificationsParametreSubTitle,
       motsCles: ['notification', 'son', 'vibration', 'sonnerie', 'style', 'sound', 'vibrate', 'som', 'vibracao', 'estilo'],
       ouvrir: () => aller(AppRouter.profileParametreNotifications),
@@ -147,6 +165,7 @@ export function fonctionnalitesRecherchables(
           new Fonctionnalite({
             icon: Images.iconTransactionSendByAlias,
             titre: traductions.profilePageMenuAliasContactTitle,
+            rubrique: FonctionnaliteRubrique.profil,
             sousTitre: traductions.searchContactsSubTitle,
             motsCles: ['contact', 'alias', 'repertoire', 'contacts', 'contactos'],
             ouvrir: () => aller(AppRouter.profileContacts),
@@ -157,6 +176,7 @@ export function fonctionnalitesRecherchables(
                 new Fonctionnalite({
                   icon: Images.iconsHelp,
                   titre: traductions.profilePageMenuHelpTitle,
+                  rubrique: FonctionnaliteRubrique.profil,
                   sousTitre: traductions.searchAideSubTitle,
                   motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
                   ouvrir: () => aller(AppRouter.profileHelpCenter),

package/src/modules/search/presentation/pages/search_page.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
 import { createAudioPlayer, type AudioPlayer } from 'expo-audio';
 import { ExpoSpeechRecognitionModule, useSpeechRecognitionEvent } from 'expo-speech-recognition';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { Keyboard, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../core/router';
@@ -12,9 +13,8 @@ import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
 import { CustomSnackBar } from '../../../../shared/widgets/custom_snack_bar';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
-import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
-import { Fonctionnalite } from '../../domain/models/fonctionnalite';
+import { withAlpha } from '../../../../shared/utils/color';
+import { Fonctionnalite, FonctionnaliteRubrique } from '../../domain/models/fonctionnalite';
 import { SearchPageVoiceButton } from './search_page_voice_button';
 
 /**
@@ -214,55 +214,151 @@ export function SearchPage({
   const resultats = Fonctionnalite.rechercher(fonctionnalites, recherche);
   const voixActive = ecoute || annonce;
 
-  /** Ligne de résultat : ferme la recherche en renvoyant [item]. */
-  const ligne = (item: Fonctionnalite) =>
-    new MenuActionItem(item.icon, item.titre, item.sousTitre, () => AppRouter.pop(router, { value: item }), {
-      iconSize: 20,
-      trailing: (
-        <MaterialIcons
-          name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'}
-          size={16}
-          color={Themer.neural03Color}
-        />
-      ),
+  const primaire = theme.colorScheme.primary;
+  const saisie = recherche.trim().length > 0;
+  const [focus, setFocus] = useState(false);
+  const actif = focus || voixActive;
+  const fermer = (item: Fonctionnalite) => AppRouter.pop(router, { value: item });
+
+  /** [texte] avec les parties qui correspondent à la saisie en gras, de la couleur principale. */
+  const surligner = (texte: string) => {
+    const parties = Fonctionnalite.correspondances(texte, recherche);
+    if (parties.length === 0) return texte;
+    const morceaux: ReactNode[] = [];
+    let position = 0;
+    parties.forEach(([debut, fin], i) => {
+      if (debut > position) morceaux.push(texte.substring(position, debut));
+      morceaux.push(
+        <Text key={i} style={[styles.gras, { color: primaire }]}>
+          {texte.substring(debut, fin)}
+        </Text>,
+      );
+      position = fin;
     });
+    if (position < texte.length) morceaux.push(texte.substring(position));
+    return morceaux;
+  };
+
+  /** Ligne de fonctionnalité : pastille, titre (partie trouvée en gras), sous-titre ; ferme la recherche en renvoyant [item]. */
+  const ligne = (item: Fonctionnalite) => (
+    <Pressable
+      key={item.titre}
+      accessibilityRole="button"
+      onPress={() => fermer(item)}
+      style={({ pressed }) => [styles.ligne, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
+    >
+      <View style={[styles.pastille, { backgroundColor: withAlpha(primaire, 0.1) }]}>
+        <Image source={item.icon} style={styles.pastilleIcone} tintColor={primaire} contentFit="contain" />
+      </View>
+      <View style={styles.textes}>
+        <Text numberOfLines={2} style={[theme.textTheme.displayLarge, styles.titreLigne]}>
+          {surligner(item.titre)}
+        </Text>
+        {item.sousTitre != null && item.sousTitre.length > 0 && (
+          <Text numberOfLines={2} style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+            {item.sousTitre}
+          </Text>
+        )}
+      </View>
+      <MaterialIcons name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'} size={16} color={Themer.neural03Color} />
+    </Pressable>
+  );
+
+  /** Liste de fonctionnalités dans une carte */
+  const liste = (items: Fonctionnalite[]) => (
+    <Card style={styles.carte}>
+      <View style={styles.carteContenu}>{items.map(ligne)}</View>
+    </Card>
+  );
+
+  /** Titre de rubrique */
+  const titre = (texte: string) => (
+    <Text style={[theme.textTheme.displayMedium, styles.titreRubrique, { color: Themer.neural03Color }]}>{texte}</Text>
+  );
+
+  /** Avant toute saisie : raccourcis en pastilles, puis toutes les fonctionnalités groupées par rubrique. */
+  const accueil = () => {
+    const raccourcis = fonctionnalites.filter((item) => item.raccourci);
+    const libelles: Record<FonctionnaliteRubrique, string> = {
+      [FonctionnaliteRubrique.paiements]: traductions.searchRubriquePaiements,
+      [FonctionnaliteRubrique.abonnements]: traductions.searchRubriqueAbonnements,
+      [FonctionnaliteRubrique.servicesBancaires]: traductions.searchRubriqueServicesBancaires,
+      [FonctionnaliteRubrique.profil]: traductions.searchRubriqueProfil,
+    };
+    return (
+      <>
+        {raccourcis.length > 0 && (
+          <>
+            {titre(traductions.searchShortcutsTitle)}
+            <View style={styles.raccourcis}>
+              {raccourcis.map((item) => (
+                <Pressable
+                  key={item.titre}
+                  accessibilityRole="button"
+                  onPress={() => fermer(item)}
+                  style={({ pressed }) => [
+                    styles.raccourci,
+                    { backgroundColor: withAlpha(primaire, pressed ? 0.16 : 0.08), borderColor: withAlpha(primaire, 0.15) },
+                  ]}
+                >
+                  <Image source={item.icon} style={styles.raccourciIcone} tintColor={primaire} contentFit="contain" />
+                  <Text style={[theme.textTheme.displayMedium, styles.raccourciTexte]}>{item.titre}</Text>
+                </Pressable>
+              ))}
+            </View>
+            <View style={styles.gap24} />
+          </>
+        )}
+        {Object.values(FonctionnaliteRubrique).map((rubrique) => {
+          const items = fonctionnalites.filter((item) => item.rubrique === rubrique);
+          if (items.length === 0) return null;
+          return (
+            <View key={rubrique}>
+              {titre(libelles[rubrique])}
+              {liste(items)}
+              <View style={styles.gap24} />
+            </View>
+          );
+        })}
+      </>
+    );
+  };
 
   return (
     <Scaffold
       appBar={
         <AppBar
-          title={<Text style={theme.textTheme.headlineMedium}>{traductions.searchTitle}</Text>}
           onBack={() => AppRouter.pop(router)}
-        />
-      }
-    >
-      <MyPageContainer>
-        <Pressable accessible={false} style={styles.flex} onPress={Keyboard.dismiss}>
-          <View style={styles.gap10} />
-          {/* Champ de recherche : loupe à gauche ; à droite, la croix pour effacer (hors voix) et le bouton micro */}
-          <Card>
-            <View style={[styles.champ, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
-              <MaterialIcons name="search" size={18} color={Themer.neural03Color} />
+          centerTitle={false}
+          title={
+            // Champ de recherche à la place du titre : loupe à gauche ; à droite, la croix pour effacer (hors voix) et le bouton micro
+            <View
+              style={[
+                styles.champ,
+                {
+                  backgroundColor: theme.cardColor,
+                  borderColor: actif ? primaire : withAlpha(Themer.neural03Color, 0.2),
+                  borderWidth: actif ? 1.5 : 1,
+                },
+              ]}
+            >
+              <MaterialIcons name="search" size={20} color={actif ? primaire : Themer.neural03Color} />
               <TextInput
                 value={recherche}
                 onChangeText={setRecherche}
                 autoFocus
+                onFocus={() => setFocus(true)}
+                onBlur={() => setFocus(false)}
                 style={[theme.textTheme.displayLarge, styles.input]}
                 // Le texte d'aide suit l'état de la voix.
                 placeholder={
-                  annonce
-                    ? traductions.searchVoicePrompt
-                    : ecoute
-                      ? traductions.searchVoiceListening
-                      : traductions.searchHint
+                  annonce ? traductions.searchVoicePrompt : ecoute ? traductions.searchVoiceListening : traductions.searchTitle
                 }
                 placeholderTextColor={Themer.neural03Color}
                 returnKeyType="search"
                 // « Entrée » ouvre le résultat le plus pertinent.
                 onSubmitEditing={() => {
-                  if (recherche.trim().length > 0 && resultats.length > 0) {
-                    AppRouter.pop(router, { value: resultats[0] });
-                  }
+                  if (saisie && resultats.length > 0) fermer(resultats[0]);
                 }}
               />
               {recherche.length > 0 && !voixActive && (
@@ -277,38 +373,51 @@ export function SearchPage({
                 onPress={() => void basculerEcoute()}
               />
             </View>
-          </Card>
-          <View style={styles.gap16} />
-          <View style={styles.flex}>
-            {resultats.length === 0 ? (
-              <View style={styles.vide}>
-                <MaterialIcons name="search-off" size={40} color={Themer.neural03Color} />
-                <View style={styles.gap12} />
-                <Text style={[theme.textTheme.displayMedium, styles.centre, { color: Themer.neural04Color }]}>
-                  {traductions.searchEmpty(recherche.trim())}
-                </Text>
-              </View>
-            ) : (
-              <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
-                <MenuActionsWidget items={resultats.map(ligne)} />
-              </ScrollView>
-            )}
+          }
+        />
+      }
+    >
+      <Pressable accessible={false} style={styles.flex} onPress={Keyboard.dismiss}>
+        {saisie && resultats.length === 0 ? (
+          <View style={styles.vide}>
+            <MaterialIcons name="search-off" size={40} color={Themer.neural03Color} />
+            <View style={styles.gap12} />
+            <Text style={[theme.textTheme.displayMedium, styles.centre, { color: Themer.neural04Color }]}>
+              {traductions.searchEmpty(recherche.trim())}
+            </Text>
           </View>
-        </Pressable>
-      </MyPageContainer>
+        ) : (
+          <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
+            {/* Avant toute saisie : raccourcis puis rubriques */}
+            {saisie ? liste(resultats) : accueil()}
+          </ScrollView>
+        )}
+      </Pressable>
     </Scaffold>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  gap10: { height: 10 },
   gap12: { height: 12 },
-  gap16: { height: 16 },
-  champ: { height: 40, flexDirection: 'row', alignItems: 'center', paddingLeft: 12, paddingRight: 4 },
+  gap24: { height: 24 },
+  champ: { alignSelf: 'stretch', height: 48, borderRadius: 14, flexDirection: 'row', alignItems: 'center', paddingLeft: 12, paddingRight: 4 },
   input: { flex: 1, marginLeft: 8, paddingVertical: 0 },
   effacer: { paddingHorizontal: 6 },
-  vide: { paddingTop: 32, alignItems: 'center' },
+  vide: { paddingTop: 32, paddingHorizontal: 20, alignItems: 'center' },
   centre: { textAlign: 'center' },
-  liste: { paddingBottom: 20 },
+  liste: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 20 },
+  titreRubrique: { fontWeight: '700', paddingHorizontal: 4, paddingBottom: 10 },
+  raccourcis: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  raccourci: { flexDirection: 'row', alignItems: 'center', paddingLeft: 12, paddingRight: 14, paddingVertical: 9, borderRadius: 999, borderWidth: 1 },
+  raccourciIcone: { width: 18, height: 18 },
+  raccourciTexte: { marginLeft: 8, fontWeight: '600' },
+  carte: { margin: 0 },
+  carteContenu: { padding: 6 },
+  ligne: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 8, paddingVertical: 10, borderRadius: 14 },
+  pastille: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+  pastilleIcone: { width: 20, height: 20 },
+  textes: { flex: 1, marginHorizontal: 14 },
+  titreLigne: { fontWeight: '500' },
+  gras: { fontWeight: '800' },
 });

package/src/modules/subscription/presentation/pages/subscription_create/subscription_create_page.tsx

@@ -5,7 +5,7 @@ import { useBloc, useBlocListener } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { Frequence, FrequenceCommand } from '../../../../../shared/models/frequence_command';
 import { CustomLoadingDialog } from '../../../../../shared/widgets/loading_page';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
@@ -25,6 +25,8 @@ import { TransactionSendPageError } from '../../../../transactions/presentation/
 import { TransactionSendPageSuccess } from '../../../../transactions/presentation/pages/transaction_send/transaction_send_page_succes';
 import { Subscription } from '../../../domain/models/subscription';
 import { SubscriptionCreatePageList } from './subscription_create_page_list';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Souscrire à un abonnement à partir d'un paiement passé (route `subscriptionSubscribe`) */
 export function SubscriptionCreatePage() {
@@ -92,7 +94,7 @@ export function SubscriptionCreatePage() {
   };
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={useAppLocalizations().subscriptionMenuSubscribeTitle} />}>
       <MyPageContainer>
         <View style={styles.flex}>
           <SubscriptionCreatePageList selectTransaction={selectTransaction} />

package/src/modules/subscription/presentation/pages/subscription_create/subscription_create_page_list.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { BlocProvider, useCreateBloc } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { TransactionSens, type Transaction } from '../../../../transactions/domain/models/transaction';
 import { TransactionSearchCommand } from '../../../../transactions/domain/models/transaction_search/transaction_search_command';
@@ -33,11 +33,11 @@ export function SubscriptionCreatePageList({ selectTransaction }: { selectTransa
   return (
     <BlocProvider blocs={[searchBloc]}>
       <View style={styles.flex}>
-        {/* Titre */}
-        <Text style={theme.textTheme.titleSmall}>{traductions.subscriptionMenuSubscribeTitle}</Text>
+        {/* Sous-titre (titre dans la barre du haut) */}
         <View style={styles.gap8} />
-        {/* Sous-titre */}
-        <Text style={theme.textTheme.displaySmall}>{traductions.subscriptionMenuSubscribeSubtitle2}</Text>
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.subscriptionMenuSubscribeSubtitle2}
+        </Text>
         <View style={styles.gap16} />
         {/* Liste des transactions */}
         <TransactionSearchPageListe

package/src/modules/subscription/presentation/pages/subscription_details/subscription_details_page.tsx

@@ -116,7 +116,6 @@ export function SubscriptionDetailsPage({
 
   const editNote = async () => {
     const value = await showModalBottomSheet<string>(router, {
-      themed: true,
       builder: () => <SubscriptionDetailsPageNoteSheet note={subscription.motif} />,
     });
     if (value != null && value !== subscription.motif) bloc.add(new SubscriptionDetailsNoteUpdateEvent(value));

package/src/modules/subscription/presentation/pages/subscription_details/subscription_details_page_actions.tsx

@@ -25,7 +25,6 @@ import { SubscriptionAction, SubscriptionDetailsPageActionsConfirm } from './sub
 
 function confirm(router: SdkRouter, action: SubscriptionAction, subscription: Subscription): Promise<boolean | undefined> {
   return showModalBottomSheet<boolean>(router, {
-    themed: true,
     builder: () => <SubscriptionDetailsPageActionsConfirm action={action} isSubcription={subscription.frequence != null} />,
   });
 }

package/src/modules/subscription/presentation/pages/subscription_details/subscription_details_page_note_sheet.tsx

@@ -1,13 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Keyboard, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useState } from 'react';
+import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { CustomTextMultipleInput } from '../../../../../shared/widgets/input_text_multiple';
-import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { SelectionSheet } from '../../../../../shared/widgets/selection';
 import {
   TransactionSendCommandMotif,
   TransactionSendCommandMotifError,
@@ -15,35 +13,15 @@ import {
 
 /**
  * Modifier la note de l'abonnement (feuille du bas, se ferme avec la
- * nouvelle note). Comme le `AnimatedContainer` Flutter, la feuille prend
- * 70 % de l'écran quand le champ a le focus, sa hauteur naturelle sinon.
+ * nouvelle note). La note défile, Enregistrer reste visible au-dessus du
+ * clavier.
  */
 export function SubscriptionDetailsPageNoteSheet({ note }: { note?: string | null }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height: screenHeight } = useWindowDimensions();
-  const maxHeight = screenHeight * 0.7;
 
   const [command] = useState(() => new TransactionSendCommandMotif({ value: note ?? undefined }));
   const [, setVersion] = useState(0);
-  const [focused, setFocused] = useState(false);
-  const [contentHeight, setContentHeight] = useState<number | null>(null);
-  const height = useRef(new Animated.Value(0)).current;
-  const measured = useRef(false);
-
-  const naturalHeight = contentHeight == null ? 0 : Math.min(contentHeight, maxHeight);
-  useEffect(() => {
-    if (contentHeight == null) return;
-    const target = focused ? maxHeight : naturalHeight;
-    if (!measured.current) {
-      measured.current = true;
-      height.setValue(target);
-      return;
-    }
-    Animated.timing(height, { toValue: target, duration: 300, easing: Easing.inOut(Easing.ease), useNativeDriver: false }).start();
-  }, [focused, contentHeight, naturalHeight, maxHeight, height]);
 
   const canSave = command.value != null && command.value.length > 0 && command.isValid() && command.value !== note;
 
@@ -53,52 +31,35 @@ export function SubscriptionDetailsPageNoteSheet({ note }: { note?: string | nul
   };
 
   return (
-    <Animated.View
-      style={[
-        styles.box,
-        { backgroundColor: theme.colorScheme.surface, maxHeight },
-        contentHeight != null ? { height } : null,
-      ]}
-    >
-      {/* Avant la mesure du contenu, la feuille prend sa hauteur naturelle (pas de flex) */}
-      <Pressable style={contentHeight != null ? styles.flex : null} onPress={Keyboard.dismiss} accessible={false}>
-        <MyPageContainer style={contentHeight != null ? null : styles.noFlex}>
-          <ScrollView
-            keyboardShouldPersistTaps="handled"
-            onContentSizeChange={(_w, h) => setContentHeight(h)}
-            contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}
-          >
-            {/* Titre */}
-            <Text style={theme.textTheme.headlineLarge}>{traductions.transactionFormMotifLabel}</Text>
-            <View style={styles.gap15} />
+    <SelectionSheet
+      titre={traductions.transactionFormMotifLabel}
+      contenu={
+        <>
+          <ScrollView keyboardShouldPersistTaps="handled" style={styles.defile} contentContainerStyle={styles.content}>
             <CustomTextMultipleInput
               defaultValue={note ?? undefined}
               labelText={traductions.transactionFormMotifHint}
               // Message d'erreur à afficher
               messageError={command.error === TransactionSendCommandMotifError.invalid ? traductions.transactionFormMotifInvalid : null}
-              onFocusChange={setFocused}
               onChange={(value) => {
                 command.value = value;
                 command.isValid();
                 setVersion((v) => v + 1);
               }}
             />
-            {/* Bouton */}
-            <View style={styles.btn}>
-              <ElevatedButton onPress={canSave ? () => saveNote(command.value!) : undefined}>{traductions.btnTextSave}</ElevatedButton>
-            </View>
           </ScrollView>
-        </MyPageContainer>
-      </Pressable>
-    </Animated.View>
+          {/* Enregistrer, toujours visible au-dessus du clavier */}
+          <View style={styles.btn}>
+            <ElevatedButton onPress={canSave ? () => saveNote(command.value!) : undefined}>{traductions.btnTextSave}</ElevatedButton>
+          </View>
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  noFlex: { flex: 0 },
-  box: { borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden' },
-  content: { paddingTop: 20 },
-  gap15: { height: 15 },
-  btn: { paddingVertical: 16 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  btn: { paddingHorizontal: 20, paddingBottom: 12 },
 });

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_empty_widget.tsx

@@ -29,7 +29,7 @@ export function SubscriptionListEmptyWidget() {
         <Text style={[theme.textTheme.displaySmall, styles.flex]}>{traductions.subscriptionEmptySubTitle}</Text>
         <ElevatedButton
           style={styles.btn}
-          onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <SubscriptionMenuWidget /> })}
+          onPress={() => void showModalBottomSheet(router, { builder: () => <SubscriptionMenuWidget /> })}
         >
           {traductions.subscriptionEmptyBtnCreate}
         </ElevatedButton>

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_widget.tsx

@@ -36,7 +36,7 @@ export function SubscriptionListWidget() {
   if (state instanceof SubscriptionListLoadingState) return <SubscriptionListLoadingWidget />;
 
   const { subscriptions, paiementProgramme } = state;
-  const openMenu = () => void showModalBottomSheet(router, { themed: true, builder: () => <SubscriptionMenuWidget /> });
+  const openMenu = () => void showModalBottomSheet(router, { builder: () => <SubscriptionMenuWidget /> });
 
   const section = (title: string, liste: Subscription[], createFn: () => void) => (
     <View>