@pi-spi/app 2.0.0 → 2.2.0

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

@@ -1,7 +1,6 @@
 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 { Keyboard, Pressable, StyleSheet, TextInput, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useBloc } from '../../../../core/bloc_react';
@@ -11,6 +10,7 @@ import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { Scaffold } from '../../../../shared/material/scaffold';
+import { SelectionOption } from '../../../../shared/widgets/selection';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
 import type { ContactPI } from '../../../contacts/domain/contact_pi';
 import type { PhoneContact } from '../../../contacts/domain/phone_contact';
@@ -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);
@@ -68,18 +67,13 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
           {/* 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} />
+              <SelectionOption
+                image={Images.iconTransactionSendByNewContact}
+                titre={traductions.profileContactPageaActionAdd}
+                sousTitre={traductions.profileContactPageaActionAddSubtitle}
+                onPress={() => void onSelect(null, null)}
+              />
+              <View style={styles.gap16} />
             </>
           )}
           {/* Contacts (la recherche est transmise à la pagination : le SDK
@@ -89,6 +83,8 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
               hideTitle
               expanded
               searchKeyword={searchKeyword}
+              // Le toucher ouvre déjà la feuille du contact
+              showActions={false}
               onSelect={(contact, alias) => void onSelect(contact, alias)}
             />
           </View>
@@ -103,10 +99,6 @@ 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 },
+  gap16: { height: 16 },
   gap20: { height: 20 },
 });

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, Platform, Pressable, ScrollView, Share, 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,133 @@ 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);
+                    }}
+                  />,
+                  // Partager
+                  <ProfileMenuTile
+                    key="partager"
+                    icone={Platform.OS === 'ios' ? 'ios-share' : 'share'}
+                    titre={traductions.profileContactPageaActionShare}
+                    onPress={() =>
+                      void Share.share({ title: traductions.qrcodePagePartageAliasMessage(name ?? ''), message: alias })
+                    }
+                  />,
+                  // 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()} />,
                 })
               }

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

@@ -1,11 +1,9 @@
-import { ScrollView, Share, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, Share, StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 
 /** Feuille « Partager » : le QR code (image) ou l'alias (texte). */
 export function QrcodeAliasPageShare({
@@ -18,47 +16,41 @@ export function QrcodeAliasPageShare({
   shareQrcode: () => void;
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
 
   return (
-    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.6 }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
-        <Text style={theme.textTheme.headlineMedium}>{traductions.qrcodePagePartageTitle}</Text>
-        <View style={styles.gap20} />
-        <MenuActionsWidget
-          items={[
-            new MenuActionItem(
-              Images.homeFooterQrcode,
-              traductions.qrcodePagePartageQrCodeTitle,
-              traductions.qrcodePagePartageQrCodeSubTitle,
-              () => {
-                AppRouter.pop(router);
-                shareQrcode();
-              },
-              { iconSize: 20 },
-            ),
-            new MenuActionItem(
-              Images.iconsCircleUser,
-              traductions.qrcodePagePartageAliasTitle,
-              traductions.qrcodePagePartageAliasSubTitle,
-              () => {
-                AppRouter.pop(router);
-                void Share.share({ title: traductions.qrcodePagePartageAliasMessage(username), message: alias });
-              },
-              { iconSize: 20 },
-            ),
-          ]}
-        />
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={traductions.qrcodePagePartageTitle}
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {/* Partager le QR code */}
+          <SelectionOption
+            image={Images.homeFooterQrcode}
+            titre={traductions.qrcodePagePartageQrCodeTitle}
+            sousTitre={traductions.qrcodePagePartageQrCodeSubTitle}
+            onPress={() => {
+              AppRouter.pop(router);
+              shareQrcode();
+            }}
+          />
+          <View style={styles.gap10} />
+          {/* Partager l'alias */}
+          <SelectionOption
+            image={Images.iconsCircleUser}
+            titre={traductions.qrcodePagePartageAliasTitle}
+            sousTitre={traductions.qrcodePagePartageAliasSubTitle}
+            onPress={() => {
+              AppRouter.pop(router);
+              void Share.share({ title: traductions.qrcodePagePartageAliasMessage(username), message: alias });
+            }}
+          />
+        </ScrollView>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  gap20: { height: 20 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  gap10: { height: 10 },
 });

package/src/modules/search/domain/models/fonctionnalite.ts

@@ -30,6 +30,14 @@ const ACCENTS: Record<string, string> = {
   æ: 'ae',
 };
 
+/** Rubrique d'une fonctionnalité, pour grouper la liste quand rien n'est encore saisi. */
+export enum FonctionnaliteRubrique {
+  paiements = 'paiements',
+  abonnements = 'abonnements',
+  servicesBancaires = 'servicesBancaires',
+  profil = 'profil',
+}
+
 /**
  * Une fonctionnalité de l'application que l'utilisateur peut retrouver
  * depuis la recherche.
@@ -59,18 +67,66 @@ export class Fonctionnalite {
    */
   readonly ouvrir: () => void;
 
+  /** Rubrique sous laquelle elle est listée avant toute saisie. */
+  readonly rubrique: FonctionnaliteRubrique;
+
+  /** Proposée en raccourci en haut de la recherche, avant toute saisie. */
+  readonly raccourci: boolean;
+
   constructor(options: {
     icon: number;
     titre: string;
     sousTitre?: string;
     motsCles?: readonly string[];
     ouvrir: () => void;
+    rubrique?: FonctionnaliteRubrique;
+    raccourci?: boolean;
   }) {
     this.icon = options.icon;
     this.titre = options.titre;
     this.sousTitre = options.sousTitre;
     this.motsCles = options.motsCles ?? [];
     this.ouvrir = options.ouvrir;
+    this.rubrique = options.rubrique ?? FonctionnaliteRubrique.paiements;
+    this.raccourci = options.raccourci ?? false;
+  }
+
+  /**
+   * Parties de [texte] à mettre en évidence pour [recherche] : débuts de
+   * mots qui commencent par un mot saisi, sans tenir compte des accents ni
+   * des majuscules. Renvoie des intervalles [début, fin[ dans [texte],
+   * triés et sans chevauchement.
+   */
+  static correspondances(texte: string, recherche: string): [number, number][] {
+    const saisis = Fonctionnalite.normaliser(recherche)
+      .split(/[^a-z0-9]+/)
+      .filter((mot) => mot.length >= 2);
+    if (saisis.length === 0) return [];
+    // Texte normalisé caractère par caractère, avec la position d'origine
+    let t = '';
+    const origine: number[] = [];
+    for (let i = 0; i < texte.length; i++) {
+      // Espace et ponctuation deviennent un séparateur
+      const lettre = Fonctionnalite.normaliser(texte[i]);
+      const n = lettre.length === 0 ? ' ' : lettre;
+      for (const c of n) {
+        t += c;
+        origine.push(i);
+      }
+    }
+    const intervalles: [number, number][] = [];
+    for (const mot of t.matchAll(/[a-z0-9]+/g)) {
+      const debut = mot.index ?? 0;
+      const fin = debut + mot[0].length;
+      for (const saisi of saisis) {
+        if (t.startsWith(saisi, debut) || saisi.startsWith(mot[0])) {
+          const longueur = Math.min(saisi.length, fin - debut);
+          intervalles.push([origine[debut], origine[debut + longueur - 1] + 1]);
+          break;
+        }
+      }
+    }
+    return intervalles;
   }
 
   /**

package/src/modules/search/presentation/pages/search_btn_widget.tsx

@@ -0,0 +1,91 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { withAlpha } from '../../../../shared/utils/color';
+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';
+
+/** Nombre de premiers affichages de l'accueil où la pastille pulse. */
+const AFFICHAGES_AVEC_PULSATION = 3;
+
+/**
+ * Bouton de recherche des fonctionnalités de la barre de l'accueil : loupe
+ * dans une pastille teintée, libellé d'accessibilité (et infobulle au
+ * toucher long sur le web). Aux trois premiers affichages de l'accueil, la
+ * pastille pulse deux fois pour attirer l'œil ; plus du tout une fois la
+ * recherche utilisée. [onPress] absent : bouton grisé.
+ */
+export function SearchBtnWidget({ onPress }: { onPress?: () => void }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  const configBloc = useBloc(ConfigBloc);
+  const pulsation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!(configBloc.state instanceof ConfigLoadedState)) return;
+    const vus = Number.parseInt(configBloc.getParamValue(ConfigKey.searchHintCount) ?? '', 10) || 0;
+    if (vus >= AFFICHAGES_AVEC_PULSATION) return;
+    configBloc.add(new ConfigChangeEvent(ConfigKey.searchHintCount, String(vus + 1)));
+    // Deux pulsations, une fois l'accueil affiché
+    const une = () =>
+      Animated.sequence([
+      Animated.timing(pulsation, { toValue: 1, duration: 900, easing: Easing.out(Easing.ease), useNativeDriver: true }),
+      Animated.timing(pulsation, { toValue: 0, duration: 0, useNativeDriver: true }),
+      ]);
+    const animation = Animated.sequence([Animated.delay(800), une(), une()]);
+    animation.start();
+    return () => animation.stop();
+  }, [configBloc, pulsation]);
+
+  // Léger grossissement au milieu de la pulsation ; onde qui s'élargit et s'efface
+  const scale = pulsation.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 1.12, 1] });
+  const ondeScale = pulsation.interpolate({ inputRange: [0, 1], outputRange: [1, 1.4] });
+  const ondeOpacite = pulsation.interpolate({ inputRange: [0, 0.01, 1], outputRange: [0, 0.25, 0] });
+
+  return (
+    <View style={styles.zone}>
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.onde, { backgroundColor: primaire, opacity: ondeOpacite, transform: [{ scale: ondeScale }] }]}
+      />
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={traductions.homePageSearchTooltip}
+          accessibilityState={{ disabled: onPress == null }}
+          disabled={onPress == null}
+          hitSlop={6}
+          onPress={() => {
+            // Recherche utilisée : plus de pulsation
+            if (
+              configBloc.state instanceof ConfigLoadedState &&
+              configBloc.getParamValue(ConfigKey.searchHintCount) !== String(AFFICHAGES_AVEC_PULSATION)
+            ) {
+              configBloc.add(new ConfigChangeEvent(ConfigKey.searchHintCount, String(AFFICHAGES_AVEC_PULSATION)));
+            }
+            onPress?.();
+          }}
+          style={({ pressed }) => [
+            styles.pastille,
+            { backgroundColor: withAlpha(primaire, pressed ? 0.22 : 0.12), opacity: onPress == null ? 0.4 : 1 },
+          ]}
+        >
+          <MaterialIcons name="search" size={22} color={primaire} />
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  zone: { width: 48, height: 48, alignItems: 'center', justifyContent: 'center' },
+  onde: { position: 'absolute', width: 40, height: 40, borderRadius: 20 },
+  pastille: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+});