@pi-spi/app 0.0.0-stage → 1.2.1

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

@@ -0,0 +1,101 @@
+import { Image } from 'expo-image';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../../core/assets';
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { Themes, useTheme } from '../../../../../core/theme';
+import type { AppLocalizations } from '../../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Card } from '../../../../../shared/material/card';
+import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
+import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
+import { ConfigKey } from '../../../../config/domain/models/config_keys';
+import { CheckedDot } from './settings_widgets';
+
+function themeIcon(theme: Themes): number {
+  switch (theme) {
+    case Themes.light:
+      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;
+  }
+}
+
+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`). */
+export function ProfileParametrePageTheme() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const configBloc = useBloc(ConfigBloc);
+  const state = useBlocBuilder(
+    configBloc,
+    (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+  );
+  const currentTheme = state.configParams.params[ConfigKey.preferedTheme];
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <ScrollView>
+          <Text style={theme.textTheme.titleSmall}>{traductions.appSettingPageMenuThemePageTitle}</Text>
+          <View style={styles.gap20} />
+          <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuThemeTitle}</Text>
+          <View style={styles.gap10} />
+          <Card>
+            <View style={styles.wrap}>
+              {Themes.list().map((item) => (
+                <Pressable
+                  key={item}
+                  accessibilityRole="button"
+                  disabled={currentTheme === item}
+                  onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
+                  style={styles.item}
+                >
+                  <Image source={themeIcon(item)} style={[styles.preview, { backgroundColor: theme.colorScheme.surface }]} contentFit="cover" />
+                  <View style={styles.gap5} />
+                  <Text style={theme.textTheme.displayMedium}>{themeTitle(traductions, item)}</Text>
+                  <View style={styles.gap5} />
+                  <CheckedDot value={currentTheme === item} />
+                  <View style={styles.gap20} />
+                </Pressable>
+              ))}
+            </View>
+          </Card>
+        </ScrollView>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', columnGap: 10, rowGap: 10 },
+  item: { alignItems: 'center' },
+  preview: { width: 120, height: 200, borderRadius: 8 },
+  gap5: { height: 5 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});

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

@@ -0,0 +1,81 @@
+import { Image } from 'expo-image';
+import type { ReactNode } from 'react';
+import { StyleSheet, Switch, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../../core/theme';
+import { Card } from '../../../../../shared/material/card';
+
+/** Icône dans une pastille arrondie (45 x 45), en tête des lignes de réglages. */
+export function SettingIcon({ icon }: { icon: number }) {
+  const theme = useTheme();
+  return (
+    <View style={[styles.leading, { backgroundColor: theme.colorScheme.surface }]}>
+      <Image source={icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
+    </View>
+  );
+}
+
+/** Carte d'un réglage activable : icône, titre, sous-titre et interrupteur. */
+export function SettingToggle({
+  icon,
+  title,
+  subtitle,
+  value,
+  onChange,
+}: {
+  icon: number;
+  title: string;
+  subtitle?: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  const theme = useTheme();
+  return (
+    <Card>
+      <View style={styles.toggle}>
+        <SettingIcon icon={icon} />
+        <View style={styles.texts}>
+          <Text style={theme.textTheme.headlineSmall}>{title}</Text>
+          {subtitle != null && <Text style={theme.textTheme.displaySmall}>{subtitle}</Text>}
+        </View>
+        <SwitchThemed value={value} onChange={onChange} />
+      </View>
+    </Card>
+  );
+}
+
+export function SwitchThemed({ value, onChange }: { value: boolean; onChange: (value: boolean) => void }) {
+  const theme = useTheme();
+  return (
+    <Switch
+      value={value}
+      onValueChange={onChange}
+      trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
+      thumbColor={theme.switchTheme.thumbColor}
+    />
+  );
+}
+
+/** Point de sélection (rond plein avec un point blanc au centre si sélectionné). */
+export function CheckedDot({ value }: { value: boolean }): ReactNode {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.dot,
+        { backgroundColor: value ? theme.primaryColor : 'transparent', borderColor: value ? theme.primaryColor : '#8B887E' },
+      ]}
+    >
+      <View style={[styles.innerDot, { backgroundColor: value ? 'white' : 'transparent' }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  leading: { width: 45, height: 45, borderRadius: 14, padding: 10, alignItems: 'center', justifyContent: 'center' },
+  icon: { width: 25, height: 25 },
+  toggle: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, paddingHorizontal: 10 },
+  texts: { flex: 1, marginHorizontal: 16 },
+  dot: { width: 15, height: 15, borderRadius: 10, borderWidth: 1, alignItems: 'center', justifyContent: 'center' },
+  innerDot: { width: 5, height: 5, borderRadius: 4 },
+});

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

@@ -0,0 +1,71 @@
+import { Image } from 'expo-image';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { Card } from '../../../../shared/material/card';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+
+/** Une entrée du menu du profil : une route, une action, ou une feuille à ouvrir. */
+export class ProfileItem {
+  readonly subtitle?: string;
+  readonly value?: boolean;
+  readonly action?: (value: boolean) => void;
+  readonly sheet?: () => ReactNode;
+
+  constructor(
+    readonly icon: number,
+    readonly title: string,
+    readonly page: string | (() => void) | null,
+    options: { subtitle?: string; value?: boolean; action?: (value: boolean) => void; sheet?: () => ReactNode } = {},
+  ) {
+    this.subtitle = options.subtitle;
+    this.value = options.value;
+    this.action = options.action;
+    this.sheet = options.sheet;
+  }
+}
+
+/** Menu du profil : une carte avec une ligne (icône, titre, sous-titre) par entrée. */
+export function ProfilePageMenu({ items }: { items: ProfileItem[] }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    <Card>
+      {items.map((item, i) => (
+        <Pressable
+          key={i}
+          accessibilityRole="button"
+          onPress={() => {
+            if (typeof item.page === 'string') void AppRouter.push(router, item.page);
+            else if (typeof item.page === 'function') item.page();
+            // Ouvrir une feuille
+            else if (item.sheet != null) void showModalBottomSheet(router, { themed: true, builder: item.sheet });
+          }}
+          style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
+        >
+          <Image source={item.icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
+          <View style={styles.texts}>
+            <Text style={theme.textTheme.bodyLarge}>{item.title}</Text>
+            {item.subtitle != null && <Text style={theme.textTheme.displaySmall}>{item.subtitle}</Text>}
+          </View>
+          {item.action != null && item.value != null && (
+            <Switch
+              value={item.value}
+              onValueChange={item.action}
+              trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
+              thumbColor={theme.switchTheme.thumbColor}
+            />
+          )}
+        </Pressable>
+      ))}
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56, paddingVertical: 8 },
+  icon: { width: 24, height: 24 },
+  texts: { flex: 1, marginLeft: 16 },
+});

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

@@ -0,0 +1,117 @@
+import { Linking, Platform, StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { AppEnv } from '../../../../core/env';
+import { Logger } from '../../../../core/logger';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { TextButton } from '../../../../shared/material/buttons';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { ProfilePageMenu, ProfileItem } from './profile_menu';
+import { ProfilePageAvatar } from './profile_page_avatar';
+
+const logger = new Logger();
+
+async function launchUrl(url: string): Promise<void> {
+  try {
+    await Linking.openURL(url);
+  } catch {
+    logger.d(`Impossible de lancer ${url}`);
+  }
+}
+
+function menuItems(traductions: AppLocalizations): ProfileItem[] {
+  const items = [
+    // Compte
+    new ProfileItem(Images.iconsCircleUser, traductions.profilePageMenuCompteTitle, AppRouter.profileCompte),
+    // Paramètres de l'application
+    new ProfileItem(Images.iconsSetting, traductions.profilePageMenuParametreTitle, AppRouter.profileParametre),
+  ];
+  // Alias et contacts
+  if (Platform.OS !== 'web') {
+    items.push(new ProfileItem(Images.iconTransactionSendByAlias, traductions.profilePageMenuAliasContactTitle, AppRouter.profileContacts));
+  }
+  // Centre d'aide
+  if (AppEnv.aideLink != null && AppEnv.aideLink.length > 0) {
+    const aideLink = AppEnv.aideLink;
+    items.push(
+      new ProfileItem(
+        Images.iconsHelp,
+        traductions.profilePageMenuHelpTitle,
+        Platform.OS !== 'web' ? AppRouter.profileHelpCenter : () => void launchUrl(aideLink),
+      ),
+    );
+  }
+  return items;
+}
+
+/** Profil du client (route `profile`). */
+export function ProfilePage() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const hasCgu = AppEnv.cguLink != null && AppEnv.cguLink.length > 0;
+  const hasPoc = AppEnv.pocLink != null && AppEnv.pocLink.length > 0;
+  const linkStyle = { fontSize: 12, fontWeight: '400' as const };
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        {/* Client connecté */}
+        <ProfilePageAvatar />
+        <View style={styles.gap20} />
+        {/* Menu */}
+        <ProfilePageMenu items={menuItems(traductions)} />
+        <View style={styles.flex} />
+        {/* CGU et politique de confidentialité (optionnels) */}
+        {(hasCgu || hasPoc) && (
+          <View style={styles.links}>
+            {hasCgu && (
+              <View style={styles.flex}>
+                <TextButton
+                  textStyle={linkStyle}
+                  onPress={() => (Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginCgu) : void launchUrl(AppEnv.cguLink!))}
+                >
+                  {traductions.profilePageCGU}
+                </TextButton>
+              </View>
+            )}
+            {hasCgu && hasPoc && (
+              <Text style={[theme.textTheme.displayLarge, styles.et, { color: Themer.neural03Color }]}>{traductions.coordinationEt}</Text>
+            )}
+            {hasPoc && (
+              <View style={styles.flex}>
+                <TextButton
+                  textStyle={linkStyle}
+                  onPress={() => (Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginPoc) : void launchUrl(AppEnv.pocLink!))}
+                >
+                  {traductions.profilePagePC}
+                </TextButton>
+              </View>
+            )}
+          </View>
+        )}
+        {/* Version (lien vers le store) */}
+        <TextButton
+          textStyle={[theme.textTheme.displaySmall, styles.version]}
+          onPress={() => void launchUrl(Platform.OS === 'ios' ? AppEnv.appstoreLink : AppEnv.playstoreLink)}
+        >
+          {`${traductions.profilePageAppVersion} ${AppEnv.version}`}
+        </TextButton>
+        <View style={styles.gap10} />
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  links: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 10 },
+  et: { paddingHorizontal: 5 },
+  version: { color: '#2196F3', textDecorationLine: 'underline' },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});

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

@@ -0,0 +1,111 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { Di } from '../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useValueListenable } from '../../../../core/value_notifier';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { AliasWidget } from '../../../../shared/widgets/alias_widget';
+import { AvatarWidget } from '../../../../shared/widgets/avatar_widget';
+import { ImageSelectWidget } from '../../../../shared/widgets/image_select_widget';
+import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
+import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
+import { ProfileAvatar } from '../../domain/profile_avatar';
+
+const AVATAR_SIZE = 64;
+
+/** En-tête du profil : nom, alias, et photo (modifiable). */
+export function ProfilePageAvatar() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const aliasBloc = useBloc(AliasBloc);
+  const [aliasCle] = useState(() => (aliasBloc.state instanceof AliasExistState ? aliasBloc.state.alias.getCle() : ''));
+  const user = Di.config.user;
+  const avatar = useValueListenable(ProfileAvatar.value);
+
+  const showImagePicker = () =>
+    void showModalBottomSheet(router, {
+      builder: () => (
+        <ImageSelectWidget
+          onSelect={(uri) => {
+            if (uri != null) {
+              AppRouter.pop(router);
+              void ProfileAvatar.set(uri);
+            }
+          }}
+          otherActions={
+            avatar != null
+              ? [
+                  <Pressable
+                    key="delete"
+                    accessibilityRole="button"
+                    style={styles.deleteTile}
+                    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>,
+                ]
+              : []
+          }
+        />
+      ),
+    });
+
+  return (
+    <View style={styles.row}>
+      {/* Nom et alias */}
+      <View style={styles.flex}>
+        <Text numberOfLines={1} style={theme.textTheme.titleSmall}>
+          {user.nomComplet()}
+        </Text>
+        <View style={styles.gap8} />
+        <AliasWidget alias={aliasCle} name={user.nomComplet()} canCopy textAlign="left" />
+      </View>
+      <View style={styles.gap8w} />
+      {/* Avatar */}
+      <Pressable accessibilityRole="imagebutton" onPress={showImagePicker}>
+        <View style={styles.shadow}>
+          <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={AVATAR_SIZE} rounded />
+        </View>
+        {/* Badge caméra */}
+        <View style={[styles.camera, { backgroundColor: theme.colorScheme.primary, borderColor: theme.scaffoldBackgroundColor }]}>
+          <MaterialIcons name="photo-camera" size={14} color="white" />
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  flex: { flex: 1 },
+  gap8: { height: 8 },
+  gap8w: { width: 8 },
+  shadow: { borderRadius: AVATAR_SIZE / 2, boxShadow: '0 3px 8px rgba(0,0,0,0.15)' },
+  camera: {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+  },
+  deleteTile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56 },
+  deleteText: { flex: 1, marginHorizontal: 16 },
+});

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

@@ -0,0 +1,111 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { useState } from 'react';
+import { Keyboard, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { useBloc } from '../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { Card } from '../../../../shared/material/card';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import type { ContactPI } from '../../../contacts/domain/contact_pi';
+import type { PhoneContact } from '../../../contacts/domain/phone_contact';
+import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
+import { ContactSearchEvent } from '../../../contacts/presentation/bloc/contact_event';
+import { ContactAliasListWidget } from '../../../contacts/presentation/pages/contact_list_alias_widget';
+import { ProfilePageContactsActions } from './profile_page_contacts_actions';
+
+/**
+ * Alias et contacts (route `profileContacts`) : contacts du téléphone avec
+ * leur alias PI-SPI ; un contact ouvre ses actions, « Nouveau contact » le
+ * formulaire. Avec [contactPI] (« Enregistrer dans les contacts » depuis un
+ * autre écran), la page se ferme après l'enregistrement.
+ */
+export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | null }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const contactListBloc = useBloc(ContactBloc);
+  const [hasInputSearchFocused, setHasInputSearchFocused] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState<string | null>(null);
+
+  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);
+  };
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <Pressable style={styles.flex} onPress={Keyboard.dismiss} accessible={false}>
+          <Text style={theme.textTheme.titleSmall}>{traductions.profileContactPageTitle}</Text>
+          <View style={styles.gap10} />
+          {/* Recherche d'un contact */}
+          <Card>
+            <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
+              <MaterialIcons name="search" size={24} color={Themer.neural03Color} />
+              <TextInput
+                style={[theme.textTheme.displayLarge, styles.input]}
+                placeholder={traductions.transactionsSendInputHint}
+                placeholderTextColor={Themer.neural03Color}
+                onFocus={() => setHasInputSearchFocused(true)}
+                onBlur={() => setHasInputSearchFocused(false)}
+                onChangeText={(value) => {
+                  contactListBloc.add(new ContactSearchEvent(value));
+                  setSearchKeyword(value.length > 0 ? value : null);
+                }}
+              />
+            </View>
+          </Card>
+          <View style={styles.gap20} />
+          {/* Nouveau contact */}
+          {!hasInputSearchFocused && searchKeyword == null && (
+            <>
+              <Card>
+                <Pressable accessibilityRole="button" onPress={() => void onSelect(null, null)} style={styles.action}>
+                  <View style={[styles.actionIcon, { backgroundColor: theme.colorScheme.surface }]}>
+                    <Image source={Images.iconTransactionSendByNewContact} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
+                  </View>
+                  <View style={styles.texts}>
+                    <Text style={theme.textTheme.headlineSmall}>{traductions.profileContactPageaActionAdd}</Text>
+                    <Text style={theme.textTheme.displaySmall}>{traductions.profileContactPageaActionAddSubtitle}</Text>
+                  </View>
+                </Pressable>
+              </Card>
+              <View style={styles.gap10} />
+            </>
+          )}
+          {/* Contacts (la recherche est transmise à la pagination : le SDK
+              Flutter chargeait sinon des contacts non filtrés au défilement) */}
+          <View style={styles.flex}>
+            <ContactAliasListWidget
+              hideTitle
+              expanded
+              searchKeyword={searchKeyword}
+              onSelect={(contact, alias) => void onSelect(contact, alias)}
+            />
+          </View>
+        </Pressable>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
+  input: { flex: 1, marginLeft: 8, paddingVertical: 0 },
+  action: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 10 },
+  actionIcon: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
+  icon: { width: 20, height: 20 },
+  texts: { flex: 1, marginLeft: 16 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});