@pi-spi/app 2.1.0 → 2.2.0

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_menu_widget.tsx

@@ -3,7 +3,7 @@ import { ScrollView, StyleSheet, View } from 'react-native';
 import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { SbSelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
+import { SelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 
 /** Menu de création : programmer un paiement ou souscrire à un abonnement (feuille du bas) */
 export function SubscriptionMenuWidget() {
@@ -20,7 +20,7 @@ export function SubscriptionMenuWidget() {
       contenu={
         <ScrollView bounces={false} contentContainerStyle={styles.content}>
           {/* Programmer */}
-          <SbSelectionOption
+          <SelectionOption
             image={Images.homeFooterTransfer}
             titre={traductions.subscriptionMenuScheduleTitle}
             sousTitre={traductions.subscriptionMenuScheduleSubtitle}
@@ -28,7 +28,7 @@ export function SubscriptionMenuWidget() {
           />
           <View style={styles.gap10} />
           {/* Souscrire à un abonnement */}
-          <SbSelectionOption
+          <SelectionOption
             image={Images.iconRepeat}
             titre={traductions.subscriptionMenuSubscribeTitle}
             sousTitre={traductions.subscriptionMenuSubscribeSubtitle}

package/src/modules/transactions/domain/models/transaction_send/transaction_send_command_othr.ts

@@ -26,8 +26,7 @@ export class TransactionSendCommandOthr {
 
   isValid(): boolean {
     const compte = this.compte();
-    // `else if` ici : en Dart, l'erreur « vide » était aussitôt écrasée
-    // (et un compte absent faisait planter le test de longueur).
+    // Un compte vide ou absent est refusé (« vide »), avant le test de longueur
     if (compte == null || compte.length === 0) {
       this.error = TransactionSendCommandOthrError.empty;
     } else if (compte.length > 34) {

package/src/modules/transactions/presentation/bloc/transaction_send/transaction_send_bloc.ts

@@ -125,6 +125,20 @@ export class TransactionSendBloc extends Bloc<TransactionSendEvent, TransactionS
         }
         this.state.participants = await this.participantInputPort.search();
       }
+      // Formulaire affiché : le solde vient d'arriver (récupéré après
+      // l'ouverture), on revalide le montant déjà rempli (formulaire
+      // prérempli depuis une transaction) pour afficher « solde
+      // insuffisant » et désactiver « Continuer ». Seul le montant est
+      // revalidé : un formulaire vierge ne doit pas afficher d'erreurs.
+      const current = this.state;
+      if (solde != null && current instanceof TransactionSendFormInputState && current.command.amount?.value != null) {
+        const form = current.command;
+        form.solde = current.solde ?? undefined;
+        form.amount!.solde = current.solde ?? undefined;
+        form.amount!.isValid();
+        emit(new TransactionSendFormInputState(form, this.data()));
+        return;
+      }
       this.emitUpdated(emit);
     } catch {
       // On garde l'état courant
@@ -169,6 +183,9 @@ export class TransactionSendBloc extends Bloc<TransactionSendEvent, TransactionS
   private onFormChanged(event: TransactionSendFormChangedEvent, emit: Emitter<TransactionSendState>) {
     const form = event.command;
     form.solde = this.state.solde ?? undefined;
+    // Le contrôle du solde se fait sur le montant : un montant prérempli
+    // (envoi depuis une transaction) n'a pas encore de solde
+    if (form.amount != null) form.amount.solde = form.solde;
     if (form.othr != null) {
       form.method = form.othr.isValidIban() ? TransactionSendMethod.iban : TransactionSendMethod.othr;
     }

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_input_date.tsx

@@ -1,20 +1,22 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { Pressable, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
 import { useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { DateFormat } from '../../../../../shared/utils/date_format';
-import { CustomTextInput } from '../../../../../shared/widgets/input_text';
 import { plageText, showSelectDate, showSelectDateRange } from '../../../../../shared/widgets/select_date_widget';
+import { SelectionPastille, SelectionChamp } from '../../../../../shared/widgets/selection';
 import type { Transaction } from '../../../domain/models/transaction';
 import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
 import { TransactionSendCommandScheduleError } from '../../../domain/models/transaction_send/transaction_send_command_schedule';
 import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
 import { TransactionSendScheduleEvent } from '../../bloc/transaction_send/transaction_send_event';
 
-/** Date (une fois) ou plage de dates (fréquence) de la programmation, à partir de demain. */
+/**
+ * Date (une fois) ou plage de dates (fréquence) de la programmation, à
+ * partir de demain : carte qui ouvre le calendrier.
+ */
 export function TransactionSendFormInputDate({
   command,
   transaction,
@@ -32,7 +34,7 @@ export function TransactionSendFormInputDate({
   const schedule = command.schedule!;
   const withFrequence = schedule.frequence?.value != null;
 
-  let text = '';
+  let text: string | null = null;
   if (schedule.dateDebut != null) {
     text = withFrequence ? plageText(traductions, formatter, schedule.dateDebut, schedule.dateFin) : formatter.format(schedule.dateDebut);
   }
@@ -68,17 +70,24 @@ export function TransactionSendFormInputDate({
     bloc.add(new TransactionSendScheduleEvent(command, transaction));
   };
 
+  const erreur = schedule.error === TransactionSendCommandScheduleError.debutEmpty ? traductions.aliasFormEmpty : '';
+
   return (
-    <Pressable onPress={() => void select()}>
-      <View pointerEvents="none">
-        <CustomTextInput
-          labelText={withFrequence ? traductions.transactionFormScheduleDateRangeLabel : traductions.transactionFormScheduleDateLabel}
-          value={text}
-          readOnly
-          suffixIcon={<MaterialIcons name="date-range" size={24} color={theme.colorScheme.onSurface} />}
-          messageError={schedule.error === TransactionSendCommandScheduleError.debutEmpty ? traductions.aliasFormEmpty : ''}
-        />
-      </View>
-    </Pressable>
+    <View>
+      <SelectionChamp
+        libelle={withFrequence ? traductions.transactionFormScheduleDateRangeLabel : traductions.transactionFormScheduleDateLabel}
+        valeur={text}
+        pastille={<SelectionPastille icone={withFrequence ? 'date-range' : 'event'} />}
+        onPress={() => void select()}
+      />
+      {/* Message d'erreur */}
+      {erreur.length > 0 && (
+        <Text style={[theme.textTheme.displaySmall, styles.erreur, { color: Themer.systemErrorColor }]}>{erreur}</Text>
+      )}
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  erreur: { paddingHorizontal: 16, paddingTop: 4 },
+});

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_input_pays.tsx

@@ -5,10 +5,10 @@ import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
 import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
 import {
-  SbSelectionLigne,
-  SbSelectionListe,
-  SbSelectionPastille,
-  SbSelectionRecherche,
+  SelectionLigne,
+  SelectionListe,
+  SelectionPastille,
+  SelectionRecherche,
   selectionContient,
   SelectionChamp,
   SelectionSheet,
@@ -49,7 +49,7 @@ export function TransactionSendFormInputPays({
     <SelectionChamp
       libelle={traductions.transactionFormOthrPaysLabel}
       valeur={selected?.name}
-      pastille={selected != null ? <SbSelectionPastille code={selected.iso3} /> : undefined}
+      pastille={selected != null ? <SelectionPastille code={selected.iso3} /> : undefined}
       onPress={() => void select()}
     />
   );
@@ -72,14 +72,14 @@ export function SelectPays({ selected }: { selected?: UEMOACountry }) {
   return (
     <SelectionSheet
       titre={traductions.transactionFormOthrPaysLabel}
-      entete={<SbSelectionRecherche hintText={traductions.transactionFormOthrPaysRecherche} onChanged={setRecherche} />}
+      entete={<SelectionRecherche hintText={traductions.transactionFormOthrPaysRecherche} onChanged={setRecherche} />}
       contenu={
-        <SbSelectionListe
+        <SelectionListe
           vide={traductions.transactionFormOthrPaysAucun}
           lignes={pays.map((p) => (
-            <SbSelectionLigne
+            <SelectionLigne
               key={p.iso}
-              pastille={<SbSelectionPastille code={p.iso3} choisie={p.iso === selected?.iso} />}
+              pastille={<SelectionPastille code={p.iso3} choisie={p.iso === selected?.iso} />}
               texte={p.name}
               choisie={p.iso === selected?.iso}
               onPress={() => AppRouter.pop(router, { value: p })}

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_input_psp.tsx

@@ -5,10 +5,10 @@ import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
 import {
-  SbSelectionLigne,
-  SbSelectionListe,
-  SbSelectionPastille,
-  SbSelectionRecherche,
+  SelectionLigne,
+  SelectionListe,
+  SelectionPastille,
+  SelectionRecherche,
   selectionContient,
   SelectionChamp,
   SelectionSheet,
@@ -47,7 +47,7 @@ export function TransactionSendFormInputPsp({
     <SelectionChamp
       libelle={traductions.transactionFormOthrNomLabel}
       valeur={psp?.nomMembre}
-      pastille={psp != null ? <SbSelectionPastille icone="account-balance" /> : undefined}
+      pastille={psp != null ? <SelectionPastille icone="account-balance" /> : undefined}
       onPress={() => void select()}
     />
   );
@@ -82,17 +82,17 @@ export function SelectPsp({
   return (
     <SelectionSheet
       titre={traductions.transactionFormOthrNomLabel}
-      entete={<SbSelectionRecherche hintText={traductions.transactionFormOthrPspRecherche} onChanged={setRecherche} />}
+      entete={<SelectionRecherche hintText={traductions.transactionFormOthrPspRecherche} onChanged={setRecherche} />}
       contenu={
-        <SbSelectionListe
+        <SelectionListe
           vide={traductions.transactionFormOthrPspAucune}
           lignes={psps.map((psp) => {
             const choisie = psp.codeMembre === selected?.codeMembre;
             const indisponible = !canSelectDisablePsp && psp.isDisable();
             return (
               <View key={psp.codeMembre} style={indisponible ? styles.indisponible : null}>
-                <SbSelectionLigne
-                  pastille={<SbSelectionPastille icone="account-balance" choisie={choisie} />}
+                <SelectionLigne
+                  pastille={<SelectionPastille icone="account-balance" choisie={choisie} />}
                   texte={psp.nomMembre}
                   detail={indisponible ? traductions.indisponible : undefined}
                   choisie={choisie}

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page.tsx

@@ -30,7 +30,7 @@ import {
 } from '../../bloc/transaction_send/transaction_send_state';
 import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
 import { TransactionSendPageSuccess } from '../transaction_send/transaction_send_page_succes';
-import { TransactionFormPageAlias } from './transaction_form_page_alias';
+import { pageTitle, TransactionFormPageAlias } from './transaction_form_page_alias';
 import { TransactionFormPageOthr } from './transaction_form_page_othr';
 
 export function showTransactionError(router: SdkRouter, error: string, method?: TransactionSendMethod | null) {
@@ -144,9 +144,27 @@ export function TransactionFormPage() {
 /** Barre du haut : le destinataire choisi parmi les contacts (nom, alias, photo) */
 function FormAppBar({ command: cmd, onBack: back }: { command: TransactionSendCommand; onBack: () => void }) {
   const theme = useTheme();
+  const traductions = useAppLocalizations();
   const contact = cmd.contact;
   // Destinataire choisi parmi les contacts : son nom, son alias et sa photo
-  if (contact == null || cmd.method !== TransactionSendMethod.alias) return <AppBar onBack={back} />;
+  if (contact == null || cmd.method !== TransactionSendMethod.alias) {
+    // Titre de la page dans la barre du haut
+    const titre = [TransactionSendMethod.iban, TransactionSendMethod.othr].includes(cmd.method)
+      ? traductions.transactionsSendFormOthrTitle
+      : pageTitle(traductions, cmd);
+    return (
+      <AppBar
+        onBack={back}
+        title={
+          titre.length === 0 ? undefined : (
+            <Text numberOfLines={1} style={[theme.textTheme.headlineMedium, { color: theme.appBarTheme.foregroundColor }]}>
+              {titre}
+            </Text>
+          )
+        }
+      />
+    );
+  }
   return (
     <AppBar
       onBack={back}

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_alias.tsx

@@ -72,16 +72,12 @@ export function TransactionFormPageAlias() {
   return (
     <View>
       {/* Titre de la page */}
-      {cmd.contact == null && (
-        <>
-          <Text style={theme.textTheme.titleSmall}>{pageTitle(traductions, cmd)}</Text>
-          <View style={styles.gap5} />
-        </>
-      )}
+      {/* Titre dans la barre du haut (voir pageTitle, utilisé par TransactionFormPage) */}
+      {cmd.contact == null && <View style={styles.gap8} />}
       {cmd.contact == null && cmd.method !== TransactionSendMethod.qrcode ? (
         <>
           {/* Sous-titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>{traductions.transactionsSendFormAliasSubtitle}</Text>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionsSendFormAliasSubtitle}</Text>
           <View style={showAmount ? styles.gap32 : styles.gap10} />
           {/* Alias */}
           <TransactionFormInputAlias
@@ -138,7 +134,8 @@ export function TransactionFormPageAlias() {
   );
 }
 
-function pageTitle(traductions: AppLocalizations, cmd: TransactionSendCommand): string {
+/** Titre de la page, affiché dans la barre du haut par TransactionFormPage (vide pour un envoi à un contact) */
+export function pageTitle(traductions: AppLocalizations, cmd: TransactionSendCommand): string {
   if (cmd.contact != null) return '';
   if (cmd.action === TransactionSendCommand.actionSendNow || cmd.action === TransactionSendCommand.actionSendSchedule) {
     if (cmd.method === TransactionSendMethod.qrcode) {
@@ -157,6 +154,7 @@ function pageTitle(traductions: AppLocalizations, cmd: TransactionSendCommand):
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   gap5: { height: 5 },
   gap6: { height: 6 },
   gap10: { height: 10 },