@pi-spi/app 1.6.0 → 2.1.0

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

@@ -1,11 +1,11 @@
 import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import { useState, type ReactNode } from 'react';
+import { useState } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { Themer, Themes, useTheme, type ThemeData } from '../../../../../core/theme';
+import { Accents, Themer, Themes, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
@@ -24,20 +24,6 @@ function themeIcon(theme: Themes): number {
       return Images.imageThemeLight;
     case Themes.dark:
       return Images.imageThemeDark;
-    case Themes.yellow:
-      return Images.imageThemeLightYellow;
-    case Themes.green:
-      return Images.imageThemeLightGreen;
-    case Themes.blue:
-      return Images.imageThemeLightBlue;
-    case Themes.red:
-      return Images.imageThemeLightRed;
-    case Themes.orange:
-      return Images.imageThemeLightOrange;
-    case Themes.purple:
-      return Images.imageThemeLightPurple;
-    case Themes.pink:
-      return Images.imageThemeLightPink;
     default:
       return Images.imageThemeSystem;
   }
@@ -47,53 +33,119 @@ function themeTitle(traductions: AppLocalizations, theme: Themes): string {
   return theme === Themes.system ? traductions.appSettingPageMenuThemeDefault : Themes.label(theme, traductions);
 }
 
-/** Choix du thème de l'application (route `profileParametreTheme`). */
+/** Choix du thème (système, clair, sombre) et de la couleur d'accentuation (route `profileParametreTheme`). */
 export function ProfileParametrePageTheme() {
   const traductions = useAppLocalizations();
+  const theme = useTheme();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
-    (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+    (_p, current) =>
+      current instanceof ConfigLoadedState &&
+      (current.updatedKey === ConfigKey.preferedTheme || current.updatedKey === ConfigKey.preferedAccent),
   );
-  const currentTheme = state.configParams.params[ConfigKey.preferedTheme];
-
+  const currentTheme = Themes.fromCode(state.configParams.params[ConfigKey.preferedTheme]);
+  const currentAccent = state.configParams.params[ConfigKey.preferedAccent] ?? Accents.parDefaut;
+  const sombre = theme.brightness === 'dark';
   const [largeurGrille, setLargeurGrille] = useState(0);
+
   // Trois aperçus par ligne
+  const espace = 12;
   // Arrondi vers le bas : sinon la troisième colonne peut passer à la ligne
-  const largeur = Math.floor((largeurGrille - 2 * ESPACE) / 3);
+  const largeur = Math.floor((largeurGrille - 2 * espace) / 3);
 
   return (
     <Scaffold appBar={<ProfileAppBar titre={traductions.appSettingPageMenuThemePageTitle} />}>
       <MyPageContainer>
         <ScrollView contentContainerStyle={styles.contenu}>
-          {/* Thème */}
-          <ProfileSectionTitre titre={traductions.appSettingPageMenuThemeTitle} />
+          {/* Thème : système, clair ou sombre */}
+          <ProfileSectionTitre titre={traductions.appSettingPageThemeSection} />
           <Card style={styles.card}>
             <View style={styles.grille} onLayout={(e) => setLargeurGrille(e.nativeEvent.layout.width - 2 * 14)}>
-              {largeurGrille > 0 && (
-                <>
-                  {/* Thème personnalisé de l'hôte, en tête */}
-                  {Themer.customTheme != null && (
-                    <ThemeOption
-                      largeur={largeur}
-                      title={traductions.appSettingPageMenuThemeCustom}
-                      selected={currentTheme === Themer.customThemeCode}
-                      onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, Themer.customThemeCode))}
-                      preview={<CustomThemePreview theme={Themer.customTheme} />}
-                    />
-                  )}
-                  {Themes.list().map((item) => (
-                    <ThemeOption
+              {largeurGrille > 0 &&
+                Themes.list().map((item) => {
+                  const choisi = currentTheme === item;
+                  return (
+                    <Pressable
                       key={item}
-                      largeur={largeur}
-                      title={themeTitle(traductions, item)}
-                      selected={currentTheme === item}
-                      onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
-                      preview={<Image source={themeIcon(item)} style={styles.flex} contentFit="cover" />}
-                    />
-                  ))}
-                </>
-              )}
+                      accessibilityRole="button"
+                      accessibilityState={{ selected: choisi }}
+                      disabled={choisi}
+                      onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
+                      style={[styles.item, { width: largeur }]}
+                    >
+                      {/* Aperçu, entouré quand il est choisi */}
+                      <View style={[styles.cadre, { borderColor: choisi ? theme.colorScheme.primary : 'transparent' }]}>
+                        <Image
+                          source={themeIcon(item)}
+                          style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}
+                          contentFit="cover"
+                        />
+                      </View>
+                      {choisi && (
+                        <View style={[styles.coche, { backgroundColor: theme.colorScheme.primary, borderColor: theme.colorScheme.surface }]}>
+                          <MaterialIcons name="check" size={14} color={theme.colorScheme.onPrimary} />
+                        </View>
+                      )}
+                      <Text
+                        style={[
+                          theme.textTheme.displayMedium,
+                          styles.libelle,
+                          { fontWeight: choisi ? '700' : '500' },
+                          choisi ? null : { color: Themer.neural03Color },
+                        ]}
+                      >
+                        {themeTitle(traductions, item)}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+            </View>
+          </Card>
+
+          {/* Couleur d'accentuation */}
+          <View style={styles.espace} />
+          <ProfileSectionTitre titre={traductions.appSettingPageAccentSection} />
+          <Card style={styles.card}>
+            <View style={styles.pastilles}>
+              {[
+                // Couleur du thème personnalisé de l'hôte, en tête
+                ...(Themer.hasCustomTheme ? [Themer.customAccentCode] : []),
+                ...Accents.list(),
+              ].map((accent) => {
+                const apercu = Themer.get(sombre ? Themes.dark : Themes.light, accent).colorScheme;
+                const teintes = { accent: apercu.primary, surAccent: apercu.onPrimary };
+                const choisi = currentAccent === accent;
+                return (
+                  <Pressable
+                    key={accent}
+                    accessibilityRole="button"
+                    accessibilityLabel={Themer.accentLabel(traductions, accent)}
+                    accessibilityState={{ selected: choisi }}
+                    disabled={choisi}
+                    onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedAccent, accent))}
+                    style={styles.accent}
+                  >
+                    {/* Pastille, cochée quand elle est choisie */}
+                    <View style={[styles.anneau, { borderColor: choisi ? theme.colorScheme.onSurface : 'transparent' }]}>
+                      <View style={[styles.pastille, { backgroundColor: teintes.accent }]}>
+                        {choisi && <MaterialIcons name="check" size={22} color={teintes.surAccent} />}
+                      </View>
+                    </View>
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        theme.textTheme.displaySmall,
+                        styles.libelle,
+                        { fontWeight: choisi ? '700' : '400' },
+                        { color: choisi ? theme.colorScheme.onSurface : Themer.neural03Color },
+                      ]}
+                    >
+                      {Themer.accentLabel(traductions, accent)}
+                    </Text>
+                  </Pressable>
+                );
+              })}
             </View>
           </Card>
         </ScrollView>
@@ -102,113 +154,18 @@ export function ProfileParametrePageTheme() {
   );
 }
 
-/** Une option de thème : aperçu, entouré et coché quand il est choisi, puis son nom */
-function ThemeOption({
-  largeur,
-  title,
-  selected,
-  onSelect,
-  preview,
-}: {
-  largeur: number;
-  title: string;
-  selected: boolean;
-  onSelect: () => void;
-  preview: ReactNode;
-}) {
-  const theme = useTheme();
-  return (
-    <Pressable
-      accessibilityRole="button"
-      accessibilityState={{ selected }}
-      disabled={selected}
-      onPress={onSelect}
-      style={[styles.item, { width: largeur }]}
-    >
-      {/* Aperçu, entouré quand il est choisi */}
-      <View style={[styles.cadre, { borderColor: selected ? theme.colorScheme.primary : 'transparent' }]}>
-        <View style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
-      </View>
-      {selected && (
-        <View style={[styles.coche, { backgroundColor: theme.colorScheme.primary, borderColor: theme.colorScheme.surface }]}>
-          <MaterialIcons name="check" size={14} color={theme.colorScheme.onPrimary} />
-        </View>
-      )}
-      <Text
-        style={[
-          theme.textTheme.displayMedium,
-          styles.libelle,
-          { fontWeight: selected ? '700' : '500' },
-          selected ? null : { color: Themer.neural03Color },
-        ]}
-      >
-        {title}
-      </Text>
-    </Pressable>
-  );
-}
-
-/**
- * Aperçu du thème personnalisé de l'hôte (pas d'image comme pour les
- * thèmes du SDK) : une miniature d'accueil dessinée avec ses couleurs.
- */
-function CustomThemePreview({ theme }: { theme: ThemeData }) {
-  const primary = theme.colorScheme.primary;
-  const secondary = theme.colorScheme.secondary;
-  const bar = (width: number, color: string) => <View style={[styles.bar, { width, backgroundColor: color }]} />;
-  return (
-    <View style={[styles.flex, styles.mock, { backgroundColor: theme.scaffoldBackgroundColor }]}>
-      {/* Avatar et titre */}
-      <View style={styles.mockRow}>
-        <View style={[styles.dot16, { backgroundColor: secondary }]} />
-        {bar(40, Themer.neural02Color)}
-      </View>
-      <View style={styles.gap12} />
-      {/* Carte du compte */}
-      <View style={[styles.mockCard, { backgroundColor: theme.cardColor }]}>
-        {bar(50, Themer.neural02Color)}
-        {bar(30, primary)}
-      </View>
-      <View style={styles.gap12} />
-      {/* Boutons d'action */}
-      <View style={styles.mockActions}>
-        {[0, 1, 2].map((i) => (
-          <View key={i} style={[styles.mockButton, { backgroundColor: primary }]} />
-        ))}
-      </View>
-      <View style={styles.gap14} />
-      {/* Liste */}
-      {[0, 1, 2].map((i) => (
-        <View key={i} style={[styles.mockRow, styles.mockListRow]}>
-          <View style={[styles.dot14, { backgroundColor: secondary }]} />
-          {bar(46, Themer.neural02Color)}
-        </View>
-      ))}
-    </View>
-  );
-}
-
-const ESPACE = 12;
-
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  mock: { padding: 10 },
-  mockRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-  mockListRow: { marginBottom: 8 },
-  mockCard: { height: 54, padding: 8, borderRadius: 8, justifyContent: 'space-between' },
-  mockActions: { flexDirection: 'row', justifyContent: 'space-between' },
-  mockButton: { width: 26, height: 26, borderRadius: 8 },
-  bar: { height: 6, borderRadius: 3 },
-  dot16: { width: 16, height: 16, borderRadius: 8 },
-  dot14: { width: 14, height: 14, borderRadius: 7 },
-  gap12: { height: 12 },
-  gap14: { height: 14 },
   contenu: { paddingTop: 8, paddingBottom: 16 },
   card: { margin: 0 },
-  grille: { padding: 14, flexDirection: 'row', flexWrap: 'wrap', columnGap: ESPACE, rowGap: 16 },
+  grille: { padding: 14, flexDirection: 'row', flexWrap: 'wrap', columnGap: 12, rowGap: 16 },
   item: { alignItems: 'center' },
   cadre: { alignSelf: 'stretch', padding: 3, borderWidth: 2, borderRadius: 14 },
-  apercu: { width: '100%', aspectRatio: 0.6, borderRadius: 10, overflow: 'hidden' },
+  apercu: { width: '100%', aspectRatio: 0.6, borderRadius: 10 },
   coche: { position: 'absolute', top: 8, right: 8, borderRadius: 12, borderWidth: 2, padding: 1 },
   libelle: { marginTop: 8, textAlign: 'center' },
+  espace: { height: 24 },
+  pastilles: { paddingHorizontal: 10, paddingVertical: 16, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly', rowGap: 16 },
+  accent: { width: 64, alignItems: 'center' },
+  anneau: { padding: 3, borderWidth: 2, borderRadius: 26 },
+  pastille: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
 });

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

@@ -74,7 +74,7 @@ export function ProfilePageMenu({ items, titre }: { items: (ProfileItem | ReactE
       <Card style={styles.card}>
         {lignes.map((ligne, i) => (
           <Fragment key={i}>
-            {i > 0 && <View style={styles.separateur} />}
+            {i > 0 && <View style={[styles.separateur, { backgroundColor: withAlpha(Themer.neural03Color, 0.25) }]} />}
             {ligne}
           </Fragment>
         ))}
@@ -160,5 +160,5 @@ const styles = StyleSheet.create({
   sousTitre: { marginTop: 2 },
   section: { fontSize: 12, letterSpacing: 0.8, fontWeight: '600', marginLeft: 4, marginBottom: 8 },
   // Trait aligné sur le texte (après la pastille)
-  separateur: { height: StyleSheet.hairlineWidth, marginLeft: 68, backgroundColor: withAlpha(Themer.neural03Color, 0.25) },
+  separateur: { height: StyleSheet.hairlineWidth, marginLeft: 68 },
 });

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()} />,
                 })
               }