@pi-spi/app 2.0.0 → 2.1.0

package/src/l10n/app_localizations.ts

@@ -39,6 +39,10 @@ export interface AppLocalizations {
   readonly errorDialogOk: string;
   /** Unavailable */
   readonly indisponible: string;
+  /** Take a photo */
+  readonly imageSelectCamera: string;
+  /** Choose from gallery */
+  readonly imageSelectGalerie: string;
   /** It seems that you haven’t granted PI-SPI permission to access your location! */
   readonly locationErrorMessage: string;
   /** It seems that you haven't granted PI-SPI permission to send you notifications! */
@@ -603,6 +607,14 @@ export interface AppLocalizations {
   readonly transactionFormOthrPaysLabel: string;
   /** Financial institution */
   readonly transactionFormOthrNomLabel: string;
+  /** Search for a country */
+  readonly transactionFormOthrPaysRecherche: string;
+  /** No country found */
+  readonly transactionFormOthrPaysAucun: string;
+  /** Search for an institution */
+  readonly transactionFormOthrPspRecherche: string;
+  /** No institution found */
+  readonly transactionFormOthrPspAucune: string;
   /** Continue */
   readonly transactionFormContinueBtn: string;
   /** Save and make transfer */
@@ -871,6 +883,8 @@ export interface AppLocalizations {
   readonly transactionDetailsTicketCaisse: string;
   /** You can share the receipt */
   readonly transactionDetailsTicketCaisseSubtitle: string;
+  /** Share */
+  readonly transactionDetailsTicketPartager: string;
   /** Account */
   readonly transactionDetailsCompte: string;
   /** Institution */
@@ -1051,6 +1065,8 @@ export interface AppLocalizations {
   readonly qrcodePagePartageAliasTitle: string;
   /** Alias sharing */
   readonly qrcodePagePartageAliasSubTitle: string;
+  /** Add my number */
+  readonly qrcodePagePartageContactAjouterHint: string;
   /** Your contact */
   readonly qrcodePagePartageContactTitle: string;
   /** Share your alias contact */

package/src/l10n/app_localizations_en.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsEn: AppLocalizations = {
   reessayer: `Retry`,
   errorDialogOk: `Ok`,
   indisponible: `Unavailable`,
+  imageSelectCamera: `Take a photo`,
+  imageSelectGalerie: `Choose from gallery`,
   locationErrorMessage: `It seems that you haven’t granted PI-SPI permission to access your location!`,
   notificationErrorMessage: `It seems that you haven't granted PI-SPI permission to send you notifications!`,
   contactErrorMessage: `It looks like you haven't granted PI-SPI permission to access your contacts!`,
@@ -302,6 +304,10 @@ Check your Wi-Fi or mobile data, then tap Retry.`,
   transactionFormOthrMax: `The account number must not exceed 34 characters`,
   transactionFormOthrPaysLabel: `Country`,
   transactionFormOthrNomLabel: `Financial institution`,
+  transactionFormOthrPaysRecherche: `Search for a country`,
+  transactionFormOthrPaysAucun: `No country found`,
+  transactionFormOthrPspRecherche: `Search for an institution`,
+  transactionFormOthrPspAucune: `No institution found`,
   transactionFormContinueBtn: `Continue`,
   transactionFormSaveContactBtn: `Save and make transfer`,
   transactionFormVerificationTitle: `Confirmation`,
@@ -441,6 +447,7 @@ If this request comes from someone you trust, simply add their alias to your con
   transactionDetailsRecuPaiementPDFSousTitre: `You can download or share the PDF file`,
   transactionDetailsTicketCaisse: `Transaction Statement`,
   transactionDetailsTicketCaisseSubtitle: `You can share the receipt`,
+  transactionDetailsTicketPartager: `Share`,
   transactionDetailsCompte: `Account`,
   transactionDetailsInstitution: `Institution`,
   transactionDetailsRejet: `Reason for rejection`,
@@ -536,6 +543,7 @@ Please try again later.`,
   qrcodePagePartageQrCodeSubTitle: `Share as picture`,
   qrcodePagePartageAliasTitle: `Share the alias`,
   qrcodePagePartageAliasSubTitle: `Alias sharing`,
+  qrcodePagePartageContactAjouterHint: `Add my number`,
   qrcodePagePartageContactTitle: `Your contact`,
   qrcodePagePartageContactSubTitle: `Share your alias contact`,
   qrcodePagePartageAliasMessage: (name: string) => `PI Alias of ${name}`,

package/src/l10n/app_localizations_fr.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsFr: AppLocalizations = {
   reessayer: `Réessayez`,
   errorDialogOk: `Compris`,
   indisponible: `Indisponible`,
+  imageSelectCamera: `Prendre une photo`,
+  imageSelectGalerie: `Choisir dans la galerie`,
   locationErrorMessage: `Il semble que vous n’ayez pas accordé à PI-SPI l’autorisation d’accéder à votre localisation!`,
   notificationErrorMessage: `Il semble que vous n’ayez pas accordé à PI-SPI l’autorisation de vous envoyer des notifications!`,
   contactErrorMessage: `Il semble que vous n’ayez pas accordé à PI-SPI l’autorisation d’accéder à vos contacts!`,
@@ -302,6 +304,10 @@ Vérifiez votre Wi-Fi ou vos données mobiles puis appuyez sur Réessayer.`,
   transactionFormOthrMax: `Le numéro de compte ne doit pas excéder 34 caractères`,
   transactionFormOthrPaysLabel: `Pays`,
   transactionFormOthrNomLabel: `Institution financière`,
+  transactionFormOthrPaysRecherche: `Rechercher un pays`,
+  transactionFormOthrPaysAucun: `Aucun pays trouvé`,
+  transactionFormOthrPspRecherche: `Rechercher une institution`,
+  transactionFormOthrPspAucune: `Aucune institution trouvée`,
   transactionFormContinueBtn: `Continuer`,
   transactionFormSaveContactBtn: `Enregistrer et faire un transfert`,
   transactionFormVerificationTitle: `Confirmation`,
@@ -441,6 +447,7 @@ Si cette demande provient d'une personne de confiance, il vous suffit d'ajouter
   transactionDetailsRecuPaiementPDFSousTitre: `Vous pouvez partager ou télécharger le PDF`,
   transactionDetailsTicketCaisse: `Reçu réglé`,
   transactionDetailsTicketCaisseSubtitle: `Vous pouvez partager le ticket de caisse`,
+  transactionDetailsTicketPartager: `Partager`,
   transactionDetailsCompte: `Compte`,
   transactionDetailsInstitution: `Institution`,
   transactionDetailsRejet: `Raison du rejet`,
@@ -535,6 +542,7 @@ Merci de votre compréhension.`,
   qrcodePagePartageQrCodeSubTitle: `Partage de l’image`,
   qrcodePagePartageAliasTitle: `Votre alias`,
   qrcodePagePartageAliasSubTitle: `Partage de l’alias`,
+  qrcodePagePartageContactAjouterHint: `Ajouter mon numéro`,
   qrcodePagePartageContactTitle: `Votre contact`,
   qrcodePagePartageContactSubTitle: `Partager le contact de votre alias`,
   qrcodePagePartageAliasMessage: (name: string) => `Alias PI de ${name}`,

package/src/l10n/app_localizations_pt.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsPt: AppLocalizations = {
   reessayer: `Tente novamente`,
   errorDialogOk: `Entendi`,
   indisponible: `Indisponível`,
+  imageSelectCamera: `Tirar uma foto`,
+  imageSelectGalerie: `Escolher da galeria`,
   locationErrorMessage: `Parece que você não concedeu permissão para que o PI-SPI acesse a sua localização!`,
   notificationErrorMessage: `Parece que você não concedeu permissão ao PI-SPI para lhe enviar notificações!`,
   contactErrorMessage: `Parece que você não concedeu ao PI-SPI permissão para aceder aos seus contatos!`,
@@ -302,6 +304,10 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   transactionFormOthrMax: `O número de conta não deve exceder 34 caracteres`,
   transactionFormOthrPaysLabel: `País`,
   transactionFormOthrNomLabel: `Instituição financeira`,
+  transactionFormOthrPaysRecherche: `Pesquisar um país`,
+  transactionFormOthrPaysAucun: `Nenhum país encontrado`,
+  transactionFormOthrPspRecherche: `Pesquisar uma instituição`,
+  transactionFormOthrPspAucune: `Nenhuma instituição encontrada`,
   transactionFormContinueBtn: `Continuar`,
   transactionFormSaveContactBtn: `Salvar e fazer um transferência`,
   transactionFormVerificationTitle: `Confirmação`,
@@ -441,6 +447,7 @@ Se este pedido for de uma pessoa de confiança, basta adicionar o alias aos seus
   transactionDetailsRecuPaiementPDFSousTitre: `Você pode compartilhar ou baixar o PDF`,
   transactionDetailsTicketCaisse: `Recebido pago`,
   transactionDetailsTicketCaisseSubtitle: `Você pode compartilhar o recibo`,
+  transactionDetailsTicketPartager: `Partilhar`,
   transactionDetailsCompte: `Conta`,
   transactionDetailsInstitution: `Instituição`,
   transactionDetailsRejet: `Motivo da rejeição`,
@@ -536,6 +543,7 @@ Por favor, tente novamente mais tarde`,
   qrcodePagePartageQrCodeSubTitle: `Compartilhar a imagem`,
   qrcodePagePartageAliasTitle: `Seu alias`,
   qrcodePagePartageAliasSubTitle: `Compartilhamento de alias`,
+  qrcodePagePartageContactAjouterHint: `Adicionar o meu número`,
   qrcodePagePartageContactTitle: `Seu contato`,
   qrcodePagePartageContactSubTitle: `Compartilhar o contato do seu alias`,
   qrcodePagePartageAliasMessage: (name: string) => `Alias PI de ${name}`,

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

@@ -1,6 +1,6 @@
 import { Image } from 'expo-image';
 import { useRef } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Images } from '../../../../core/assets';
@@ -9,10 +9,9 @@ import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../shared/material/buttons';
-import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { EmojiSelectWidget } from '../../../../shared/widgets/emoji_select_widget';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SbSelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 import { CategorieIconType } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
 import { CategorieAddValidationEvent, CategorieEditValidationEvent } from '../bloc/categorie_event';
@@ -25,7 +24,7 @@ export function CategorieEditIconBtn() {
   return (
     <Pressable
       accessibilityRole="button"
-      onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <CategorieEditIconOptions /> })}
+      onPress={() => void showModalBottomSheet(router, { builder: () => <CategorieEditIconOptions /> })}
       style={[styles.fab, { backgroundColor: theme.colorScheme.surface }]}
     >
       <Image source={Images.categorieImageSelect} style={styles.fabIcon} />
@@ -33,13 +32,10 @@ export function CategorieEditIconBtn() {
   );
 }
 
-/** Feuille des options d'icône : emoji (ou galerie, non disponible, comme en Flutter) */
+/** Feuille des options d'icône : emoji (ou galerie, non disponible, comme en Flutter). */
 function CategorieEditIconOptions() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const categorieBloc = useBloc(CategorieBloc);
 
   const selectEmoji = async () => {
@@ -63,25 +59,26 @@ function CategorieEditIconOptions() {
   };
 
   return (
-    <View style={[styles.sheet, { maxHeight: height * 0.5, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom }]}>
-      <ScrollView contentContainerStyle={styles.sheetContent}>
-        <Text style={[theme.textTheme.headlineMedium, styles.title]}>{traductions.categorieFormIconSheetTitle}</Text>
-        <Card>
-          <MenuActionsWidget
-            items={[
-              // Emoji
-              new MenuActionItem(Images.categorieIconEmoji, traductions.categorieFormIconSheetEmojiTitle, null, () => void selectEmoji(), {
-                iconSize: 20,
-              }),
-              // Choisir dans la galerie (sans action, comme dans le SDK Flutter)
-              new MenuActionItem(Images.categorieImageSelect, traductions.categorieFormIconSheetGalleryTitle, null, () => undefined, {
-                iconSize: 20,
-              }),
-            ]}
+    <SelectionSheet
+      titre={traductions.categorieFormIconSheetTitle}
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.optionsContent}>
+          {/* Emoji */}
+          <SbSelectionOption
+            image={Images.categorieIconEmoji}
+            titre={traductions.categorieFormIconSheetEmojiTitle}
+            onPress={() => void selectEmoji()}
           />
-        </Card>
-      </ScrollView>
-    </View>
+          <View style={styles.gap10} />
+          {/* Choisir dans la galerie (sans action, comme dans le SDK Flutter) */}
+          <SbSelectionOption
+            image={Images.categorieImageSelect}
+            titre={traductions.categorieFormIconSheetGalleryTitle}
+            onPress={() => undefined}
+          />
+        </ScrollView>
+      }
+    />
   );
 }
 
@@ -115,6 +112,7 @@ const styles = StyleSheet.create({
   fabIcon: { width: 24, height: 24 },
   sheet: { borderRadius: 20, overflow: 'hidden' },
   sheetContent: { padding: 20 },
-  title: { marginBottom: 20 },
+  optionsContent: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  gap10: { height: 10 },
   saveBtn: { paddingVertical: 20, paddingHorizontal: 4 },
 });

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 { SbSelectionOption } 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
+                  <SbSelectionOption
                     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 },
 });

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

@@ -36,7 +36,6 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
 
   const onSelect = async (contact: PhoneContact | null, alias: string | null) => {
     const value = await showModalBottomSheet<boolean>(router, {
-      themed: true,
       builder: () => <ProfilePageContactsActions alias={alias} contact={contact} contactPI={contactPI} />,
     });
     if (value != null && contactPI != null) AppRouter.pop(router);

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

@@ -1,8 +1,6 @@
-import { Image } from 'expo-image';
 import { MaterialIcons } from '@expo/vector-icons';
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Keyboard, Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useState } from 'react';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useBloc, useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
@@ -11,11 +9,12 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../../../../shared/material/buttons';
 import { AliasPI } from '../../../../shared/models/alias_pi';
-import { useKeyboardVisible } from '../../../../shared/utils/use_keyboard_visible';
+import { withAlpha } from '../../../../shared/utils/color';
 import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
 import { InputAliasWidget } from '../../../../shared/widgets/input_alias_widget';
 import { CustomTextInput } from '../../../../shared/widgets/input_text';
 import { CustomLoadingDialog } from '../../../../shared/widgets/loading_page';
+import { SelectionBoutons, SelectionSheet } from '../../../../shared/widgets/selection';
 import { ContactPI } from '../../../contacts/domain/contact_pi';
 import { contactIdOf, type PhoneContact } from '../../../contacts/domain/phone_contact';
 import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
@@ -27,6 +26,7 @@ import {
   ContactCreateLoadingState,
   ContactCreateSuccessState,
 } from '../../../contacts/presentation/bloc/create/contact_create_state';
+import { ProfileMenuTile, ProfilePageMenu } from './profile_menu';
 
 function fullName(contact: PhoneContact): string {
   return `${contact.firstName} ${contact.lastName}`.trim();
@@ -50,9 +50,6 @@ export function ProfilePageContactsActions({
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
-  const isKeyboardVisible = useKeyboardVisible();
   const contactListBloc = useBloc(ContactBloc);
   const contactBloc = useCreateBloc(() => new ContactCreateBloc());
 
@@ -107,127 +104,124 @@ export function ProfilePageContactsActions({
   };
 
   const canSave = command.isValid() && command.value !== alias && name != null && name.length > 0;
-  // Comme en Flutter, la feuille a une hauteur fixe (35 % ou 50 % de l'écran)
-  // qui passe à 70 % ou 80 % quand le clavier est affiché, pour que le
-  // formulaire reste au-dessus du clavier. Sur iOS, la feuille est déjà
-  // remontée au-dessus du clavier par l'OverlayHost : elle garde sa hauteur.
-  const keyboardOpen = isKeyboardVisible && Platform.OS !== 'ios';
-  const ratio = !keyboardOpen ? (contact != null ? 0.35 : 0.5) : contact != null ? 0.7 : 0.8;
-  const sheetHeight = useRef(new Animated.Value(height * ratio)).current;
-  useEffect(() => {
-    Animated.timing(sheetHeight, {
-      toValue: height * ratio,
-      duration: 300,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: false,
-    }).start();
-  }, [height, ratio, sheetHeight]);
+  const primaire = theme.colorScheme.primary;
+  const initiale = contact != null && name != null && name.trim().length > 0 ? name.trim()[0].toUpperCase() : null;
 
+  // La feuille remonte d'elle-même au-dessus du clavier
   return (
-    <Animated.View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, height: sheetHeight, paddingBottom: insets.bottom }]}>
-      <View style={styles.content}>
-        <View style={styles.gap20} />
-        {/* Titre */}
-        <Text style={theme.textTheme.headlineMedium}>{name ?? traductions.contactCreateTitle}</Text>
-        {alias != null && alias.length > 0 ? (
-          <>
-            <View style={styles.gap10} />
+    <SelectionSheet
+      hauteurMax={0.9}
+      contenu={
+        <>
+          <ScrollView keyboardShouldPersistTaps="handled" bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {/* Pastille, nom du contact (ou « Ajouter un contact ») et alias à copier (ou sous-titre de la création) */}
             <View style={styles.row}>
-              <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.flex, { color: Themer.neural03Color }]}>
-                {AliasPI.formatPhoneNumber(alias)}
-              </Text>
-              <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(alias)}>
-                <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
-              </Pressable>
-            </View>
-          </>
-        ) : contact == null ? (
-          <>
-            <View style={styles.gap10} />
-            <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, { color: Themer.neural03Color }]}>
-              {traductions.contactCreateSubtitle}
-            </Text>
-          </>
-        ) : null}
-        <View style={styles.gap20} />
-
-        {canEdit ? (
-          <>
-            {/* Formulaire */}
-            <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
-              {contact == null && (
-                <>
-                  <CustomTextInput
-                    defaultValue={name ?? ''}
-                    labelText={traductions.contactCreateNameLabel}
-                    messageError={name == null || name.length === 0 ? traductions.contactCreateNameErrorEmpty : null}
-                    onChange={setName}
-                  />
-                  <View style={styles.gap10} />
-                </>
-              )}
-              <InputAliasWidget command={command} onChange={rebuild} />
-            </ScrollView>
-            <View style={styles.gap20} />
-            {/* Annuler / Enregistrer */}
-            <View style={styles.buttons}>
-              <View style={styles.flex}>
-                <FilledTonalButton onPress={cancel}>{traductions.btnTextCancel}</FilledTonalButton>
+              <View style={[styles.avatar, { backgroundColor: withAlpha(primaire, 0.12) }]}>
+                {initiale != null ? (
+                  <Text style={[theme.textTheme.headlineMedium, styles.initiale, { color: primaire }]}>{initiale}</Text>
+                ) : (
+                  <MaterialIcons name="person-add-alt-1" size={24} color={primaire} />
+                )}
               </View>
-              <View style={styles.gap16} />
-              <View style={styles.flex}>
-                <ElevatedButton onPress={canSave ? () => saveAlias(command.value!) : undefined}>{traductions.btnTextSave}</ElevatedButton>
+              <View style={styles.entete}>
+                <Text numberOfLines={1} style={theme.textTheme.headlineMedium}>
+                  {contact != null && name != null ? name : traductions.contactCreateTitle}
+                </Text>
+                <View style={styles.gap2} />
+                {alias != null && alias.length > 0 ? (
+                  <View style={styles.row}>
+                    <Text numberOfLines={1} style={[theme.textTheme.displayMedium, styles.flexShrink, { color: Themer.neural03Color }]}>
+                      {AliasPI.formatPhoneNumber(alias)}
+                    </Text>
+                    <Pressable
+                      accessibilityRole="button"
+                      hitSlop={8}
+                      style={styles.copier}
+                      onPress={() => void ClipboardWidget.setData(alias)}
+                    >
+                      <MaterialIcons name="content-copy" size={16} color={primaire} />
+                    </Pressable>
+                  </View>
+                ) : contact == null ? (
+                  <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.contactCreateSubtitle}</Text>
+                ) : null}
               </View>
             </View>
-          </>
-        ) : contact != null && alias != null ? (
-          <>
-            {/* Modifier */}
-            <Action
-              icon={Images.iconEdit}
-              title={traductions.profileContactPageaActionEdit}
-              onPress={() => {
-                command.value = alias;
-                setCanEdit(true);
-              }}
-            />
-            {/* Supprimer */}
-            <Action
-              icon={Images.iconDelete}
-              title={traductions.profileContactPageaActionDelete}
-              onPress={() => contactBloc.add(new ContactDeleteSubmitEvent(contactIdOf(contact), alias))}
-            />
-          </>
-        ) : null}
-      </View>
-    </Animated.View>
-  );
-}
+            <View style={styles.gap20} />
 
-function Action({ icon, title, onPress }: { icon: number; title: string; onPress: () => void }) {
-  const theme = useTheme();
-  return (
-    <Pressable accessibilityRole="button" onPress={onPress} style={styles.action}>
-      <View style={[styles.actionIcon, { backgroundColor: theme.colorScheme.surface }]}>
-        <Image source={icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
-      </View>
-      <Text style={[theme.textTheme.headlineSmall, styles.actionText]}>{title}</Text>
-    </Pressable>
+            {canEdit ? (
+              <>
+                {/* Champs nom et alias */}
+                {contact == null && (
+                  <>
+                    <CustomTextInput
+                      defaultValue={name ?? ''}
+                      labelText={traductions.contactCreateNameLabel}
+                      messageError={name == null || name.length === 0 ? traductions.contactCreateNameErrorEmpty : null}
+                      onChange={setName}
+                    />
+                    <View style={styles.gap12} />
+                  </>
+                )}
+                <InputAliasWidget command={command} onChange={rebuild} />
+              </>
+            ) : contact != null && alias != null ? (
+              // Actions sur l'alias du contact
+              <ProfilePageMenu
+                items={[
+                  // Modifier
+                  <ProfileMenuTile
+                    key="modifier"
+                    image={Images.iconEdit}
+                    titre={traductions.profileContactPageaActionEdit}
+                    onPress={() => {
+                      command.value = alias;
+                      setCanEdit(true);
+                    }}
+                  />,
+                  // Supprimer
+                  <ProfileMenuTile
+                    key="supprimer"
+                    image={Images.iconDelete}
+                    titre={traductions.profileContactPageaActionDelete}
+                    couleur={theme.colorScheme.error}
+                    trailing={<View />}
+                    onPress={() => contactBloc.add(new ContactDeleteSubmitEvent(contactIdOf(contact), alias))}
+                  />,
+                ]}
+              />
+            ) : null}
+          </ScrollView>
+
+          {/* Annuler / Enregistrer, fixés en bas */}
+          {canEdit && (
+            <SelectionBoutons
+              boutons={[
+                <FilledTonalButton key="annuler" onPress={cancel}>
+                  {traductions.btnTextCancel}
+                </FilledTonalButton>,
+                <ElevatedButton key="enregistrer" onPress={canSave ? () => saveAlias(command.value!) : undefined}>
+                  {traductions.btnTextSave}
+                </ElevatedButton>,
+              ]}
+            />
+          )}
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  sheet: { borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden' },
-  content: { paddingHorizontal: 20, flex: 1 },
-  flex: { flex: 1 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 20 },
   flexShrink: { flexShrink: 1 },
   row: { flexDirection: 'row', alignItems: 'center' },
-  buttons: { flexDirection: 'row', paddingVertical: 16 },
-  action: { flexDirection: 'row', alignItems: 'center', minHeight: 64 },
-  actionIcon: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
-  icon: { width: 20, height: 20 },
-  actionText: { marginLeft: 16 },
-  gap10: { height: 10 },
-  gap16: { width: 16 },
+  avatar: { width: 52, height: 52, borderRadius: 26, alignItems: 'center', justifyContent: 'center' },
+  initiale: { fontWeight: '700' },
+  entete: { flex: 1, marginLeft: 14 },
+  copier: { padding: 4, marginLeft: 6 },
+  gap2: { height: 2 },
+  gap12: { height: 12 },
   gap20: { height: 20 },
 });

package/src/modules/qrcode/presentation/pages/qrcode_alias_page.tsx

@@ -88,7 +88,6 @@ export function QrCodeAliasPage() {
               style={styles.icon}
               onPress={() =>
                 void showModalBottomSheet(router, {
-                  themed: true,
                   builder: () => <QrcodeAliasPageShare username={user.nomComplet()} alias={aliasCle} shareQrcode={() => void shareQRCode()} />,
                 })
               }