@pi-spi/app 2.0.0 → 2.2.0

package/src/modules/contacts/presentation/pages/contact_select_page.tsx

@@ -1,18 +1,20 @@
 import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { Keyboard, Pressable, ScrollView, StyleSheet, Text, TextInput, useWindowDimensions, View } from 'react-native';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import { useBloc } from '../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../core/router';
 import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../shared/material/buttons';
-import { Card } from '../../../../shared/material/card';
-import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../shared/material/scaffold';
 import { AliasPI } from '../../../../shared/models/alias_pi';
+import { withAlpha } from '../../../../shared/utils/color';
 import { CircleAvatarWidget } from '../../../../shared/widgets/circle_avatar_widget';
 import { CustomSnackBar } from '../../../../shared/widgets/custom_snack_bar';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { SelectionBoutons } from '../../../../shared/widgets/selection';
+import { ProfileAppBar } from '../../../profile/presentation/pages/profile_app_bar';
 import { ContactPI } from '../../domain/contact_pi';
 import type { PhoneContact } from '../../domain/phone_contact';
 import { ContactBloc } from '../bloc/contact_bloc';
@@ -36,7 +38,6 @@ export function ContactSelectPage({ onContinue, title, minSelected, maxSelected,
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const window = useWindowDimensions();
   const contactBloc = useBloc(ContactBloc);
   const [selectedContacts, setSelectedContacts] = useState<ContactPI[]>([]);
   const [searchHasFocus, setSearchHasFocus] = useState(false);
@@ -96,16 +97,28 @@ export function ContactSelectPage({ onContinue, title, minSelected, maxSelected,
 
   const canContinue = selectedContacts.length >= (minSelected ?? 1);
 
+  const primaire = theme.colorScheme.primary;
+
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
-      <MyPageContainer>
-        <Text style={theme.textTheme.titleSmall}>{title ?? traductions.transactionSplitTitle}</Text>
-        <View style={styles.gap10} />
-        {/* Recherche */}
-        <Card>
-          <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
-            <MaterialIcons name="search" size={24} color={Themer.neural03Color} />
+    // Titre dans la barre, comme dans le profil
+    <Scaffold appBar={<ProfileAppBar titre={title ?? traductions.transactionSplitTitle} />}>
+      <View style={styles.flex}>
+        <MyPageContainer>
+          <View style={styles.gap8} />
+          {/* Recherche : contour de la couleur principale quand elle a le focus */}
+          <View
+            style={[
+              styles.search,
+              {
+                backgroundColor: theme.cardColor,
+                borderColor: searchHasFocus ? primaire : withAlpha(Themer.neural03Color, 0.2),
+                borderWidth: searchHasFocus ? 1.5 : 1,
+              },
+            ]}
+          >
+            <MaterialIcons name="search" size={22} color={searchHasFocus ? primaire : Themer.neural03Color} />
             <TextInput
+              value={searchKeyword ?? ''}
               style={[theme.textTheme.displayLarge, styles.searchInput]}
               placeholder={traductions.transactionsSendInputHint}
               placeholderTextColor={Themer.neural03Color}
@@ -116,79 +129,98 @@ export function ContactSelectPage({ onContinue, title, minSelected, maxSelected,
                 setSearchKeyword(value.length > 0 ? value : null);
               }}
             />
+            {(searchKeyword ?? '').length > 0 && (
+              <Pressable
+                accessibilityRole="button"
+                hitSlop={8}
+                style={styles.effacer}
+                onPress={() => {
+                  contactBloc.add(new ContactSearchEvent(''));
+                  setSearchKeyword(null);
+                }}
+              >
+                <MaterialIcons name="close" size={18} color={Themer.neural03Color} />
+              </Pressable>
+            )}
+          </View>
+          {/* Contacts sélectionnés : rangée d'avatars sur un fond léger */}
+          {hasSelection && (
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              style={[styles.selected, { backgroundColor: withAlpha(primaire, 0.06) }]}
+              contentContainerStyle={styles.selectedList}
+            >
+              {selectedContacts.map((contact) => (
+                <View key={contact.alias ?? contact.name} style={styles.chip}>
+                  <View>
+                    <CircleAvatarWidget nom={contact.name} rounded radius={44} />
+                    <Pressable
+                      accessibilityRole="button"
+                      hitSlop={8}
+                      onPress={() => removeContact(contact.alias!)}
+                      style={[styles.remove, { backgroundColor: theme.colorScheme.error, borderColor: theme.colorScheme.surface }]}
+                    >
+                      <MaterialIcons name="close" size={12} color="white" />
+                    </Pressable>
+                  </View>
+                  <View style={styles.gap4} />
+                  <Text numberOfLines={1} style={[theme.textTheme.displaySmall, styles.chipName]}>
+                    {contact.name}
+                  </Text>
+                </View>
+              ))}
+            </ScrollView>
+          )}
+          <View style={styles.gap12} />
+          {/* Liste des contacts */}
+          <View style={styles.flex}>
+            <ContactAliasListWidget
+              hideTitle
+              expanded
+              selectedContacts={selectedContacts}
+              onSelect={(contact, alias, isSelected) => void handleContactSelected(contact, alias, isSelected)}
+              searchKeyword={searchKeyword}
+            />
           </View>
-        </Card>
-        <View style={styles.gap10} />
-        {/* Contacts sélectionnés */}
+        </MyPageContainer>
+        {/* Continuer (avec le nombre de contacts choisis), fixé en bas */}
         {hasSelection && (
-          <>
-            <View style={{ height: window.height * 0.12 }}>
-              <Card style={styles.selectedCard}>
-                <ScrollView horizontal contentContainerStyle={styles.selectedList} showsHorizontalScrollIndicator={false}>
-                  {selectedContacts.map((contact) => (
-                    <View key={contact.alias ?? contact.name} style={styles.chip}>
-                      <View>
-                        <CircleAvatarWidget nom={contact.name} rounded radius={32} />
-                        <Pressable
-                          accessibilityRole="button"
-                          hitSlop={8}
-                          onPress={() => removeContact(contact.alias!)}
-                          style={[styles.remove, { backgroundColor: theme.colorScheme.error, borderColor: theme.colorScheme.surface }]}
-                        >
-                          <MaterialIcons name="close" size={12} color="white" />
-                        </Pressable>
-                      </View>
-                      <View style={styles.gap6} />
-                      <Text numberOfLines={1} style={[theme.textTheme.bodySmall, styles.chipName]}>
-                        {contact.name}
-                      </Text>
-                    </View>
-                  ))}
-                </ScrollView>
-              </Card>
-            </View>
-            <View style={styles.gap10} />
-          </>
-        )}
-        {/* Liste des contacts */}
-        <View style={styles.flex}>
-          <ContactAliasListWidget
-            hideTitle
-            expanded
-            selectedContacts={selectedContacts}
-            onSelect={(contact, alias, isSelected) => void handleContactSelected(contact, alias, isSelected)}
-            searchKeyword={searchKeyword}
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton
+                key="continuer"
+                onPress={
+                  canContinue
+                    ? () => {
+                        Keyboard.dismiss();
+                        onContinue(selectedContacts);
+                      }
+                    : undefined
+                }
+              >
+                {traductions.contactSelectBtnContinue(String(selectedContacts.length))}
+              </ElevatedButton>,
+            ]}
           />
-        </View>
-        {hasSelection && (
-          <ElevatedButton
-            onPress={
-              canContinue
-                ? () => {
-                    Keyboard.dismiss();
-                    onContinue(selectedContacts);
-                  }
-                : undefined
-            }
-          >
-            {traductions.btnTextContinue}
-          </ElevatedButton>
         )}
-      </MyPageContainer>
+      </View>
     </Scaffold>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  gap6: { height: 6 },
-  gap10: { height: 10 },
-  search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
+  gap4: { height: 4 },
+  gap8: { height: 8 },
+  gap12: { height: 12 },
+  search: { height: 48, borderRadius: 14, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
   searchInput: { flex: 1, marginLeft: 8, paddingVertical: 0 },
-  selectedCard: { flex: 1, marginHorizontal: 8, borderRadius: 16, elevation: 1 },
-  selectedList: { padding: 8, alignItems: 'center' },
-  chip: { alignItems: 'center', marginRight: 12 },
-  chipName: { width: 70, textAlign: 'center', fontWeight: '500' },
+  effacer: { paddingHorizontal: 4 },
+  selected: { flexGrow: 0, marginTop: 12, borderRadius: 16 },
+  selectedList: { paddingHorizontal: 12, paddingVertical: 10, alignItems: 'center' },
+  chip: { width: 56, alignItems: 'center', marginRight: 14 },
+  chipName: { width: 56, textAlign: 'center', fontWeight: '500' },
   remove: {
     position: 'absolute',
     right: -4,

package/src/modules/contacts/presentation/pages/create/contact_create_page.tsx

@@ -1,18 +1,22 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useReducer, useState } from 'react';
 import { Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useBloc, useBlocBuilder, useBlocListener, useCreateBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { AliasPI } from '../../../../../shared/models/alias_pi';
+import { withAlpha } from '../../../../../shared/utils/color';
+import { CircleAvatarWidget } from '../../../../../shared/widgets/circle_avatar_widget';
 import { InputAliasWidget } from '../../../../../shared/widgets/input_alias_widget';
 import { CustomTextInput } from '../../../../../shared/widgets/input_text';
 import { CustomLoadingDialog } from '../../../../../shared/widgets/loading_page';
-import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { SelectionBoutons } from '../../../../../shared/widgets/selection';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 import { ContactPI } from '../../../domain/contact_pi';
 import { contactIdOf, type PhoneContact } from '../../../domain/phone_contact';
 import { ContactBloc } from '../../bloc/contact_bloc';
@@ -87,28 +91,54 @@ export function ContactCreatePage({ contact: phoneContact, contactAlias, mbnoFor
     !(s instanceof ContactCreateLoadingState) && contact.name.length > 0 && aliasCommand.isValid();
   const valid = isFormValid(state);
 
+  const nom = contact.name.trim();
+  const primaire = theme.colorScheme.primary;
+
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
-      <MyPageContainer>
-        <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
-          {/* Titre de la page */}
-          <Text style={theme.textTheme.titleSmall}>{title(traductions, phoneContact, contactAlias)}</Text>
-          <View style={styles.gap5} />
-          {/* Sous titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>{subtitle(traductions, phoneContact, contactAlias)}</Text>
-          <View style={styles.gap32} />
-          {/* Champ Nom du contact */}
-          <CustomTextInput
-            readOnly={phoneContact != null}
-            defaultValue={contact.name}
-            labelText={traductions.contactCreateNameLabel}
-            messageError={contact.name.length === 0 ? traductions.contactCreateNameErrorEmpty : ''}
-            onChange={(value) => {
-              contact.name = value;
-              rebuild();
-            }}
-          />
-          <View style={styles.gap16} />
+    // Titre dans la barre, comme dans le profil
+    <Scaffold appBar={<ProfileAppBar titre={title(traductions, phoneContact, contactAlias)} />}>
+      <View style={styles.flex}>
+        <ScrollView style={styles.flex} contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+          {/* Avatar (photo ou initiales du nom saisi), nom en modification, sous-titre */}
+          <View style={styles.entete}>
+            {nom.length === 0 ? (
+              <View style={[styles.pastille, { backgroundColor: withAlpha(primaire, 0.12) }]}>
+                <MaterialIcons name="person-add-alt-1" size={32} color={primaire} />
+              </View>
+            ) : (
+              <CircleAvatarWidget nom={nom} photo={phoneContact?.photo} rounded radius={72} />
+            )}
+            {phoneContact != null && nom.length > 0 ? (
+              <>
+                <View style={styles.gap12} />
+                <Text numberOfLines={2} style={[theme.textTheme.headlineSmall, styles.centre, styles.nom]}>
+                  {nom}
+                </Text>
+                <View style={styles.gap4} />
+              </>
+            ) : (
+              <View style={styles.gap12} />
+            )}
+            <Text style={[theme.textTheme.displaySmall, styles.centre, { color: Themer.neural03Color }]}>
+              {subtitle(traductions, phoneContact, contactAlias)}
+            </Text>
+          </View>
+          <View style={styles.gap28} />
+          {/* Champ Nom du contact (création seulement ; en modification, le nom est sous l'avatar) */}
+          {phoneContact == null && (
+            <>
+              <CustomTextInput
+                defaultValue={contact.name}
+                labelText={traductions.contactCreateNameLabel}
+                messageError={contact.name.length === 0 ? traductions.contactCreateNameErrorEmpty : ''}
+                onChange={(value) => {
+                  contact.name = value;
+                  rebuild();
+                }}
+              />
+              <View style={styles.gap16} />
+            </>
+          )}
           {/* Champ Alias */}
           <InputAliasWidget
             command={aliasCommand}
@@ -118,26 +148,30 @@ export function ContactCreatePage({ contact: phoneContact, contactAlias, mbnoFor
             }}
           />
         </ScrollView>
-        <View style={styles.bottom}>
-          <ElevatedButton
-            onPress={
-              valid
-                ? () => {
-                    Keyboard.dismiss();
-                    contactBloc.add(
-                      new ContactCreateSubmitEvent(contact, {
-                        contactId: phoneContact != null ? contactIdOf(phoneContact) : null,
-                        contactOldAlias: contactAlias,
-                      }),
-                    );
-                  }
-                : undefined
-            }
-          >
-            {traductions.contactBtnSave}
-          </ElevatedButton>
-        </View>
-      </MyPageContainer>
+        {/* Enregistrer, fixé en bas */}
+        <SelectionBoutons
+          boutons={[
+            <ElevatedButton
+              key="enregistrer"
+              onPress={
+                valid
+                  ? () => {
+                      Keyboard.dismiss();
+                      contactBloc.add(
+                        new ContactCreateSubmitEvent(contact, {
+                          contactId: phoneContact != null ? contactIdOf(phoneContact) : null,
+                          contactOldAlias: contactAlias,
+                        }),
+                      );
+                    }
+                  : undefined
+              }
+            >
+              {traductions.contactBtnSave}
+            </ElevatedButton>,
+          ]}
+        />
+      </View>
     </Scaffold>
   );
 }
@@ -156,8 +190,13 @@ function subtitle(traductions: AppLocalizations, contact?: PhoneContact | null,
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  gap5: { height: 5 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  entete: { alignItems: 'center' },
+  pastille: { width: 72, height: 72, borderRadius: 36, alignItems: 'center', justifyContent: 'center' },
+  centre: { textAlign: 'center' },
+  nom: { fontWeight: '600' },
+  gap4: { height: 4 },
+  gap12: { height: 12 },
   gap16: { height: 16 },
-  gap32: { height: 32 },
-  bottom: { paddingVertical: 16 },
+  gap28: { height: 28 },
 });

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

@@ -26,6 +26,7 @@ import { ContactListEvent } from '../../../contacts/presentation/bloc/contact_ev
 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 { SearchBtnWidget } from '../../../search/presentation/pages/search_btn_widget';
 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';
@@ -108,15 +109,7 @@ export function HomePage({ selectedTab }: { selectedTab?: number }) {
             <HomeToolbarLeading user={Di.config.user} 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>
+              <SearchBtnWidget onPress={hasAlias ? () => void ouvrirRecherche() : undefined} />
               {/* Notifications (grisé si le compte actif n'a pas d'alias) */}
               <NotificationBtnOpenWidget enabled={hasAlias} />
             </View>

package/src/modules/introduction/presentation/pages/introduction.tsx

@@ -10,6 +10,7 @@ import {
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { Themer } from '../../../../core/theme';
+import { TextButton } from '../../../../shared/material/buttons';
 import type { SupportedLocaleCode } from '../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { IntroductionItem } from './introduction_item';
@@ -104,10 +105,17 @@ export function IntroductionPage() {
           />
         )}
       />
+      {/* Passer : directement au dernier écran */}
+      {currentPage < nbItems - 1 && (
+        <TextButton style={styles.passer} textStyle={{ color: Themer.whiteColor }} onPress={() => goTo(nbItems - 1)}>
+          {localizations.introductionPasser}
+        </TextButton>
+      )}
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   page: { flex: 1, backgroundColor: Themer.brownColor },
+  passer: { position: 'absolute', top: 40, right: 8 },
 });

package/src/modules/introduction/presentation/pages/introduction_footer.tsx

@@ -1,8 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
-
 import { useBloc } from '../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { Themer, useTheme } from '../../../../core/theme';
 import type { AppLocalizations } from '../../../../l10n/app_localizations';
 import { ElevatedButton } from '../../../../shared/material/buttons';
 import { ConfigBloc } from '../../../config/adapters/ui/bloc/config_bloc';
@@ -10,48 +7,31 @@ import { ConfigChangeEvent } from '../../../config/adapters/ui/bloc/config_event
 import { ConfigKey } from '../../../config/domain/models/config_keys';
 import type { IntroductionItem } from './introduction_item';
 
+/**
+ * Pied de chaque écran de l'introduction : « Continuer », toujours visible,
+ * pour ne pas obliger à faire défiler toutes les vidéos.
+ */
 export function IntroductionFooter({
-  item,
-  pageSize,
   traductions,
 }: {
   item: IntroductionItem;
   pageSize: number;
   traductions: AppLocalizations;
 }) {
-  const theme = useTheme();
   const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
-
-  if (item.position === pageSize - 1) {
-    return (
-      <ElevatedButton
-        style={styles.button}
-        onPress={() => {
-          configBloc.add(new ConfigChangeEvent(ConfigKey.introductionPassed, '1'));
-          // Contrairement à l'app de référence (qui enchaîne sur la
-          // connexion/session), le SDK n'a pas de login : l'utilisateur est
-          // déjà authentifié par l'hôte, donc on enchaîne directement sur
-          // la demande de permission contacts.
-          AppRouter.pushReplacement(router, AppRouter.permissions);
-        }}
-      >
-        <Text style={[theme.textTheme.titleSmall, styles.center]}>{traductions.btnTextContinue}</Text>
-      </ElevatedButton>
-    );
-  }
   return (
-    <View style={styles.column}>
-      <Text style={[theme.textTheme.bodyLarge, { color: Themer.whiteColor }]}>{traductions.introductionFooterTitle}</Text>
-      <View style={styles.gap5} />
-      <Text style={[theme.textTheme.bodyLarge, { color: Themer.amberColor }]}>{traductions.introductionFooterSubtitle}</Text>
-    </View>
+    <ElevatedButton
+      onPress={() => {
+        configBloc.add(new ConfigChangeEvent(ConfigKey.introductionPassed, '1'));
+        // Contrairement à l'app de référence (qui enchaîne sur la
+        // connexion/session), le SDK n'a pas de login : l'utilisateur est
+        // déjà authentifié par l'hôte, donc on enchaîne directement sur
+        // la demande de permission contacts.
+        AppRouter.pushReplacement(router, AppRouter.permissions);
+      }}
+    >
+      {traductions.btnTextContinue}
+    </ElevatedButton>
   );
 }
-
-const styles = StyleSheet.create({
-  button: { minHeight: 60 },
-  center: { textAlign: 'center' },
-  column: { alignItems: 'center', justifyContent: 'center' },
-  gap5: { height: 5 },
-});

package/src/modules/introduction/presentation/pages/introduction_page.tsx

@@ -47,18 +47,30 @@ export function IntroductionPageItem({
     }
   }, [active, videoPlayer]);
 
+  // Appui long : la vidéo se met en pause, et reprend au relâchement
+  const [enPause, setEnPause] = useState(false);
+  const pause = () => {
+    setEnPause(true);
+    videoPlayer.pause();
+  };
+  const reprendre = () => {
+    if (!enPause) return;
+    setEnPause(false);
+    if (active) videoPlayer.play();
+  };
+
   return (
     <View style={{ width }}>
       {/* Zones cliquables invisibles sur les côtés, sous le contenu : les
           touches qui ne tombent pas sur le contenu (ex. bouton Continuer)
           les atteignent, et le glissement horizontal reste possible. */}
       <View style={[StyleSheet.absoluteFill, styles.row]}>
-        {/* Zone gauche (25%) */}
-        <Pressable style={styles.side} onPress={onPrevious} />
-        {/* Zone centrale (50% - non cliquable) */}
-        <View style={styles.middle} />
+        {/* Zone gauche (25%) ; appui long n'importe où : pause de la vidéo */}
+        <Pressable style={styles.side} onPress={onPrevious} onLongPress={pause} onPressOut={reprendre} />
+        {/* Zone centrale (50%) : seulement la pause à l'appui long */}
+        <Pressable style={styles.middle} onLongPress={pause} onPressOut={reprendre} />
         {/* Zone droite (25%) */}
-        <Pressable style={styles.side} onPress={onNext} />
+        <Pressable style={styles.side} onPress={onNext} onLongPress={pause} onPressOut={reprendre} />
       </View>
       <View style={styles.page} pointerEvents="box-none">
         {/* barre de progression */}

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

@@ -82,7 +82,7 @@ export function ProfileParametrePageNotifications() {
             <ProfileMenuTile
               key="notifications"
               image={Images.iconsCloche}
-              titre={traductions.notificationPageTitle}
+              titre={traductions.appSettingPageMenuNotificationSonActiveTitle}
               onPress={basculerNotifications}
               trailing={<SwitchThemed value={enabled} onChange={basculerNotifications} />}
             />,
@@ -144,7 +144,7 @@ export function ProfileParametrePageNotifications() {
             <ProfileMenuTile
               key="son"
               image={Images.iconsCloche}
-              titre={traductions.notificationPageTitle}
+              titre={traductions.appSettingPageMenuNotificationSonActiveTitle}
               sousTitre={sonEnabled ? traductions.statutActive : traductions.statutDesactive}
               onPress={() => void AppRouter.push(router, AppRouter.profileParametreNotificationsSon)}
             />,

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

@@ -71,7 +71,7 @@ export function ProfileParametrePageNotificationsSon() {
             <ProfileMenuTile
               key="son"
               image={Images.iconsCloche}
-              titre={traductions.notificationPageTitle}
+              titre={traductions.appSettingPageMenuNotificationSonActiveTitle}
               onPress={basculer}
               trailing={<SwitchThemed value={enabled} onChange={basculer} />}
             />,

package/src/modules/profile/presentation/pages/profile_page_avatar.tsx

@@ -15,6 +15,7 @@ import { withAlpha } from '../../../../shared/utils/color';
 import { AvatarWidget } from '../../../../shared/widgets/avatar_widget';
 import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
 import { ImageSelectWidget } from '../../../../shared/widgets/image_select_widget';
+import { SelectionOption } from '../../../../shared/widgets/selection';
 import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
 import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
 import { ProfileAvatar } from '../../domain/profile_avatar';
@@ -45,21 +46,16 @@ export function ProfilePageAvatar() {
           otherActions={
             avatar != null
               ? [
-                  <Pressable
+                  <SelectionOption
                     key="delete"
-                    accessibilityRole="button"
-                    style={styles.deleteTile}
+                    icone="delete-forever"
+                    titre={traductions.btnTextDelete}
+                    couleur={Themer.systemErrorColor}
                     onPress={() => {
                       AppRouter.pop(router);
                       void ProfileAvatar.remove();
                     }}
-                  >
-                    <MaterialIcons name="delete-forever" size={24} color={Themer.systemErrorColor} />
-                    <Text style={[theme.textTheme.bodyLarge, styles.deleteText, { color: Themer.systemErrorColor }]}>
-                      {traductions.btnTextDelete}
-                    </Text>
-                    <MaterialIcons name="arrow-forward-ios" size={16} color={Themer.systemErrorColor} />
-                  </Pressable>,
+                  />,
                 ]
               : []
           }
@@ -147,6 +143,4 @@ const styles = StyleSheet.create({
     maxWidth: '100%',
   },
   aliasTexte: { flexShrink: 1, marginHorizontal: 6 },
-  deleteTile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56 },
-  deleteText: { flex: 1, marginHorizontal: 16 },
 });