@pi-spi/app 1.3.1 → 1.4.0

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

@@ -0,0 +1,217 @@
+/** Lettres accentuées et ligatures ramenées à leur forme simple. */
+const ACCENTS: Record<string, string> = {
+  à: 'a',
+  â: 'a',
+  ä: 'a',
+  á: 'a',
+  ã: 'a',
+  å: 'a',
+  ç: 'c',
+  é: 'e',
+  è: 'e',
+  ê: 'e',
+  ë: 'e',
+  î: 'i',
+  ï: 'i',
+  í: 'i',
+  ì: 'i',
+  ô: 'o',
+  ö: 'o',
+  ó: 'o',
+  ò: 'o',
+  õ: 'o',
+  ù: 'u',
+  û: 'u',
+  ü: 'u',
+  ú: 'u',
+  ÿ: 'y',
+  ñ: 'n',
+  œ: 'oe',
+  æ: 'ae',
+};
+
+/**
+ * Une fonctionnalité de l'application que l'utilisateur peut retrouver
+ * depuis la recherche.
+ *
+ * La recherche ignore les majuscules, les accents et la ponctuation :
+ * « Sécurité », « securite » et « SECURITÉ » donnent le même résultat.
+ */
+export class Fonctionnalite {
+  /** Icône (module Metro, voir `Images`). */
+  readonly icon: number;
+
+  /** Libellé affiché, déjà traduit. C'est le champ le plus pertinent. */
+  readonly titre: string;
+
+  /** Courte description affichée sous le titre, déjà traduite. */
+  readonly sousTitre?: string;
+
+  /**
+   * Synonymes non affichés, dans toutes les langues de l'application.
+   * Ils doivent être écrits sans accents (voir {@link Fonctionnalite.normaliser}).
+   */
+  readonly motsCles: readonly string[];
+
+  /**
+   * Ouvre la fonctionnalité. Appelé par la page appelante une fois la
+   * recherche fermée, jamais par la page de recherche elle-même.
+   */
+  readonly ouvrir: () => void;
+
+  constructor(options: {
+    icon: number;
+    titre: string;
+    sousTitre?: string;
+    motsCles?: readonly string[];
+    ouvrir: () => void;
+  }) {
+    this.icon = options.icon;
+    this.titre = options.titre;
+    this.sousTitre = options.sousTitre;
+    this.motsCles = options.motsCles ?? [];
+    this.ouvrir = options.ouvrir;
+  }
+
+  /**
+   * Met [texte] en minuscules sans accents, et remplace tout ce qui
+   * n'est ni lettre ni chiffre par un seul espace.
+   * Exemple : « Code QR — Scanner ! » devient « code qr scanner ».
+   */
+  static normaliser(texte: string): string {
+    let resultat = '';
+    for (const lettre of texte.toLowerCase()) {
+      resultat += ACCENTS[lettre] ?? lettre;
+    }
+    return resultat.replace(/[^a-z0-9]+/g, ' ').trim();
+  }
+
+  /** Mots normalisés de [texte], sans les vides. */
+  private static mots(texte: string): string[] {
+    return Fonctionnalite.normaliser(texte)
+      .split(' ')
+      .filter((mot) => mot.length > 0);
+  }
+
+  /**
+   * Mots utiles de la saisie. Si elle ne contient que des mots courants
+   * (« de » en cours de frappe de « demander »), ils sont tous gardés.
+   */
+  private static motsUtiles(recherche: string): string[] {
+    const mots = Fonctionnalite.mots(recherche);
+    const utiles = mots.filter((mot) => !MOTS_VIDES.has(mot));
+    return utiles.length === 0 ? mots : utiles;
+  }
+
+  /**
+   * Qualité de la correspondance entre un mot [saisi] et un [mot] de la
+   * fonctionnalité, 0 s'ils ne correspondent pas :
+   * - 3 : mots identiques ;
+   * - 2 : [mot] commence par [saisi] (frappe en cours : « envo » trouve
+   *   « envoi »), ou l'inverse pour un [mot] d'au moins 4 lettres
+   *   (pluriel : « abonnements » trouve « abonnement ») ;
+   * - 1 : une seule faute de frappe, sur des mots d'au moins 5 lettres
+   *   (« securiter », « abonement »).
+   */
+  private static qualite(saisi: string, mot: string): number {
+    if (saisi === mot) return 3;
+    if (mot.startsWith(saisi)) return 2;
+    if (mot.length >= 4 && saisi.startsWith(mot)) return 2;
+    if (saisi.length >= 5 && mot.length >= 5 && uneFaute(saisi, mot)) return 1;
+    return 0;
+  }
+
+  /**
+   * Nombre de mots de la saisie trouvés dans la fonctionnalité, et points
+   * cumulés (qualité de la correspondance × poids du champ, la meilleure
+   * pour chaque mot saisi).
+   */
+  private score(saisis: readonly string[]): { trouves: number; points: number } {
+    const champs: [string[], number][] = [
+      [Fonctionnalite.mots(this.titre), POIDS_TITRE],
+      [this.motsCles.flatMap((motCle) => Fonctionnalite.mots(motCle)), POIDS_MOTS_CLES],
+      [Fonctionnalite.mots(this.sousTitre ?? ''), POIDS_SOUS_TITRE],
+    ];
+    let trouves = 0;
+    let points = 0;
+    for (const saisi of saisis) {
+      let meilleur = 0;
+      for (const [mots, poids] of champs) {
+        for (const mot of mots) {
+          meilleur = Math.max(meilleur, Fonctionnalite.qualite(saisi, mot) * poids);
+        }
+      }
+      if (meilleur > 0) {
+        trouves++;
+        points += meilleur;
+      }
+    }
+    return { trouves, points };
+  }
+
+  /**
+   * Fonctionnalités de [catalogue] dont au moins un mot utile de
+   * [recherche] est trouvé, triées par nombre de mots trouvés puis par
+   * points. À égalité, l'ordre du catalogue est conservé.
+   * Une saisie vide renvoie tout le catalogue.
+   */
+  static rechercher(catalogue: readonly Fonctionnalite[], recherche: string): Fonctionnalite[] {
+    const saisis = Fonctionnalite.motsUtiles(recherche);
+    if (saisis.length === 0) return [...catalogue];
+    return catalogue
+      .map((item, ordre) => ({ item, ordre, ...item.score(saisis) }))
+      .filter(({ trouves }) => trouves > 0)
+      .sort((a, b) => b.trouves - a.trouves || b.points - a.points || a.ordre - b.ordre)
+      .map(({ item }) => item);
+  }
+}
+
+/**
+ * Mots trop courants pour désigner une fonctionnalité, en français,
+ * anglais et portugais, sans accents. Ils sont ignorés dans la saisie,
+ * pour qu'une phrase dictée (« je veux envoyer de l'argent ») ne
+ * retienne que les mots utiles.
+ */
+const MOTS_VIDES: ReadonlySet<string> = new Set([
+  // Français
+  'je', 'j', 'tu', 'il', 'elle', 'on', 'nous', 'vous', 'me', 'm', 'te',
+  't', 'se', 's', 'le', 'la', 'les', 'l', 'un', 'une', 'des', 'du', 'de',
+  'd', 'au', 'aux', 'a', 'et', 'ou', 'en', 'y', 'pour', 'par', 'sur',
+  'avec', 'dans', 'mon', 'ma', 'mes', 'ton', 'ta', 'tes', 'son', 'sa',
+  'ses', 'notre', 'nos', 'votre', 'vos', 'ce', 'cet', 'cette', 'ces', 'c',
+  'qu', 'que', 'qui', 'quoi', 'comment', 'est', 'veux', 'voudrais',
+  'souhaite', 'aimerais', 'faire', 'peux', 'puis', 'voir', 'ne', 'n',
+  'pas', 'svp', 'stp',
+  // Anglais
+  'i', 'my', 'the', 'an', 'to', 'of', 'for', 'in', 'at', 'and', 'or',
+  'is', 'want', 'would', 'like', 'how', 'can', 'do', 'please', 'make',
+  // Portugais
+  'eu', 'o', 'os', 'as', 'um', 'uma', 'da', 'dos', 'das', 'no',
+  'na', 'em', 'para', 'por', 'com', 'meu', 'minha', 'meus', 'minhas',
+  'quero', 'queria', 'gostaria', 'como', 'fazer', 'ver', 'e',
+]);
+
+/** Poids d'un mot trouvé selon le champ où il l'est. */
+const POIDS_TITRE = 3;
+const POIDS_MOTS_CLES = 2;
+const POIDS_SOUS_TITRE = 1;
+
+/** [a] et [b] ne diffèrent que d'une lettre remplacée, ajoutée ou retirée. */
+function uneFaute(a: string, b: string): boolean {
+  if (Math.abs(a.length - b.length) > 1) return false;
+  const [court, long] = a.length <= b.length ? [a, b] : [b, a];
+  let i = 0;
+  let j = 0;
+  let fautes = 0;
+  while (i < court.length && j < long.length) {
+    if (court[i] === long[j]) {
+      i++;
+      j++;
+      continue;
+    }
+    if (++fautes > 1) return false;
+    if (court.length === long.length) i++;
+    j++;
+  }
+  return fautes + (long.length - j) <= 1;
+}

package/src/modules/search/presentation/pages/search_fonctionnalites.ts

@@ -0,0 +1,135 @@
+import { Platform } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { AppRouter, type SdkRouter } from '../../../../core/router';
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { Fonctionnalite } from '../../domain/models/fonctionnalite';
+
+/**
+ * Catalogue des fonctionnalités accessibles depuis la recherche.
+ *
+ * [router] est celui de la page qui ouvre la recherche : la navigation
+ * part de là une fois la recherche fermée.
+ * [ouvrirOnglet] change d'onglet sur l'accueil (0 : compte, 1 : abonnements).
+ * Seules les pages présentes dans le SDK sont proposées (pas de
+ * sécurité ni d'à-propos : c'est l'app hôte qui les gère).
+ *
+ * L'ordre de la liste sert d'ordre d'affichage à pertinence égale :
+ * les fonctionnalités les plus utilisées sont en tête.
+ * Pour en ajouter une : titre et sous-titre traduits, mots-clés sans
+ * accents en français, anglais et portugais.
+ */
+export function fonctionnalitesRecherchables(
+  router: SdkRouter,
+  traductions: AppLocalizations,
+  { ouvrirOnglet }: { ouvrirOnglet: (onglet: number) => void },
+): Fonctionnalite[] {
+  const aller = (route: string, params?: unknown) => void AppRouter.push(router, route, { params });
+  const web = Platform.OS === 'web';
+
+  return [
+    // Paiements
+    new Fonctionnalite({
+      icon: Images.arrowUp,
+      titre: traductions.homeActionSend,
+      sousTitre: traductions.searchSendSubTitle,
+      motsCles: ['envoi', 'transfert', 'payer', 'virement', 'send', 'pay', 'transfer', 'enviar', 'pagar'],
+      ouvrir: () => aller(AppRouter.transactionSend),
+    }),
+    new Fonctionnalite({
+      icon: Images.arrowDown,
+      titre: traductions.homeActionRequest,
+      sousTitre: traductions.searchReceiveSubTitle,
+      motsCles: ['demander', 'demande', 'rtp', 'request', 'receive', 'pedir', 'receber'],
+      ouvrir: () => aller(AppRouter.transactionReceive),
+    }),
+    new Fonctionnalite({
+      icon: Images.homeFooterQrcode,
+      titre: traductions.searchQrScanTitle,
+      sousTitre: traductions.searchQrScanSubTitle,
+      motsCles: ['qr', 'qrcode', 'scanner', 'scan', 'camera'],
+      // Le QR scanné ouvre directement l'envoi, comme depuis l'accueil.
+      ouvrir: () => aller(AppRouter.qrcodeScan, 'send_now'),
+    }),
+    new Fonctionnalite({
+      icon: Images.homeFooterQr,
+      titre: traductions.qrcodePagePartageQrCodeTitle,
+      sousTitre: traductions.searchQrShowSubTitle,
+      motsCles: ['qr', 'qrcode', 'partager', 'share', 'partilhar'],
+      ouvrir: () => aller(AppRouter.qrcodeShow),
+    }),
+    new Fonctionnalite({
+      icon: Images.iconSend,
+      titre: traductions.transactionSearchTitle,
+      sousTitre: traductions.searchTransactionsSubTitle,
+      motsCles: ['historique', 'paiement', 'operation', 'releve', 'history', 'payment', 'historico', 'pagamento'],
+      ouvrir: () => aller(AppRouter.transactionSearch),
+    }),
+
+    // Abonnements
+    new Fonctionnalite({
+      icon: Images.transactionPlanifier,
+      titre: traductions.homeActionMoreSheetProgrammerTitle,
+      sousTitre: traductions.homeActionMoreSheetProgrammerSubTitle,
+      motsCles: ['programmer', 'planifier', 'recurrent', 'schedule', 'agendar'],
+      ouvrir: () => aller(AppRouter.subscriptionSchedule),
+    }),
+    new Fonctionnalite({
+      icon: Images.homeMoreFindSubscription,
+      titre: traductions.homePageToolbarTabbarAbonnement,
+      sousTitre: traductions.searchAbonnementsSubTitle,
+      motsCles: ['abonnement', 'echeance', 'programme', 'subscription', 'assinatura'],
+      ouvrir: () => ouvrirOnglet(1),
+    }),
+    new Fonctionnalite({
+      icon: Images.homeMoreFindSubscription,
+      titre: traductions.homeActionMoreSheetAbonnementTitle,
+      sousTitre: traductions.homeActionMoreSheetAbonnementSubTitle,
+      motsCles: ['abonnement', 'subscription', 'assinatura'],
+      ouvrir: () => aller(AppRouter.subscriptionSubscribe),
+    }),
+    new Fonctionnalite({
+      icon: Images.homeMoreSplitPayments,
+      titre: traductions.homeActionMoreSheetPartagerTitle,
+      sousTitre: traductions.homeActionMoreSheetPartagerSubTitle,
+      motsCles: ['partager', 'repartir', 'diviser', 'amis', 'split', 'share', 'dividir'],
+      ouvrir: () => aller(AppRouter.transactionSplitPaymentTx),
+    }),
+
+    // Profil
+    new Fonctionnalite({
+      icon: Images.iconsCircleUser,
+      titre: traductions.profilePageMenuCompteTitle,
+      sousTitre: traductions.searchCompteSubTitle,
+      motsCles: ['profil', 'compte', 'iban', 'rib', 'profile', 'account', 'perfil', 'conta'],
+      ouvrir: () => aller(AppRouter.profileCompte),
+    }),
+    new Fonctionnalite({
+      icon: Images.iconsSetting,
+      titre: traductions.profilePageMenuParametreTitle,
+      sousTitre: traductions.searchParametreSubTitle,
+      motsCles: ['parametre', 'reglage', 'theme', 'langue', 'notification', 'sombre', 'settings', 'language', 'dark', 'definicoes', 'idioma'],
+      ouvrir: () => aller(AppRouter.profileParametre),
+    }),
+    // Sur le web, le profil n'a pas ces pages : pas de contacts,
+    // et l'aide est un lien externe.
+    ...(web
+      ? []
+      : [
+          new Fonctionnalite({
+            icon: Images.iconTransactionSendByAlias,
+            titre: traductions.profilePageMenuAliasContactTitle,
+            sousTitre: traductions.searchContactsSubTitle,
+            motsCles: ['contact', 'alias', 'repertoire', 'contacts', 'contactos'],
+            ouvrir: () => aller(AppRouter.profileContacts),
+          }),
+          new Fonctionnalite({
+            icon: Images.iconsHelp,
+            titre: traductions.profilePageMenuHelpTitle,
+            sousTitre: traductions.searchAideSubTitle,
+            motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
+            ouvrir: () => aller(AppRouter.profileHelpCenter),
+          }),
+        ]),
+  ];
+}

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

@@ -0,0 +1,314 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import { MaterialIcons } from '@expo/vector-icons';
+import { createAudioPlayer, type AudioPlayer } from 'expo-audio';
+import { ExpoSpeechRecognitionModule, useSpeechRecognitionEvent } from 'expo-speech-recognition';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { ValueNotifier } from '../../../../core/value_notifier';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { Card } from '../../../../shared/material/card';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { CustomSnackBar } from '../../../../shared/widgets/custom_snack_bar';
+import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { Fonctionnalite } from '../../domain/models/fonctionnalite';
+import { SearchPageVoiceButton } from './search_page_voice_button';
+
+/**
+ * Enregistrements de la phrase d'invitation, par langue.
+ * La première sert si celle de l'app n'en a pas.
+ */
+const VOIX_OFF: Readonly<Record<string, number>> = {
+  fr: require('../../../../../assets/sounds/voice/search_prompt_fr.mp3'),
+  en: require('../../../../../assets/sounds/voice/search_prompt_en.mp3'),
+  pt: require('../../../../../assets/sounds/voice/search_prompt_pt.mp3'),
+};
+
+/**
+ * Recherche dans les fonctionnalités de l'application.
+ *
+ * La recherche se fait au clavier ou à la voix (bouton micro du champ).
+ * La page ne navigue pas elle-même : elle se ferme en renvoyant la
+ * [Fonctionnalite] choisie à la page appelante, qui l'ouvre. Ainsi le
+ * retour depuis la fonctionnalité ramène à l'accueil, pas à la recherche.
+ *
+ * Recherche vocale, dans l'ordre :
+ * 1. premier appui : demande de la permission micro ;
+ * 2. voix off « Dites-moi ce que vous souhaitez faire » dans la langue
+ *    de l'app ; un nouvel appui la coupe et passe directement à l'écoute ;
+ * 3. écoute : le texte reconnu remplit le champ au fil de la parole ;
+ *    un appui l'arrête, sinon elle s'arrête seule après un silence.
+ */
+export function SearchPage({
+  fonctionnalites,
+}: {
+  /** Catalogue dans lequel chercher, construit par la page appelante (voir `fonctionnalitesRecherchables`). */
+  fonctionnalites: Fonctionnalite[];
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+
+  /** Texte du champ, qu'il soit tapé ou dicté. */
+  const [recherche, setRecherche] = useState('');
+  /** La voix off est en train d'être jouée. */
+  const [annonce, setAnnonce] = useState(false);
+  /** Le micro est ouvert et la reconnaissance vocale écoute. */
+  const [ecoute, setEcoute] = useState(false);
+
+  /**
+   * Volume de la voix entre 0 et 1, lu par le bouton micro pour ses ondes.
+   * Un [ValueNotifier] évite de re-rendre toute la page à chaque mesure.
+   */
+  const niveau = useMemo(() => new ValueNotifier(0), []);
+  /** Plus bas et plus haut volumes mesurés pendant l'écoute en cours. */
+  const decibels = useRef<{ min?: number; max?: number }>({});
+  /** Lecteur de la phrase d'invitation jouée avant l'écoute. */
+  const voixOff = useRef<AudioPlayer | null>(null);
+  /** Termine l'attente de la voix off (fin de lecture ou coupure). */
+  const finAnnonce = useRef<(() => void) | null>(null);
+  const monte = useRef(true);
+
+  useEffect(
+    () => () => {
+      monte.current = false;
+      finAnnonce.current?.();
+      voixOff.current?.remove();
+      ExpoSpeechRecognitionModule.abort();
+    },
+    [],
+  );
+
+  /** Remet le bouton micro au repos. Appelé aussi quand la reconnaissance s'arrête seule (silence, erreur, durée maximale). */
+  const arreterEcoute = () => {
+    niveau.value = 0;
+    if (monte.current) setEcoute(false);
+  };
+
+  useSpeechRecognitionEvent('result', (event) => {
+    if (monte.current) setRecherche(event.results[0]?.transcript ?? '');
+  });
+  useSpeechRecognitionEvent('end', arreterEcoute);
+  useSpeechRecognitionEvent('error', arreterEcoute);
+  // Le volume varie selon le téléphone : il est ramené entre 0 et 1
+  // par rapport au plus bas et au plus haut de l'écoute.
+  useSpeechRecognitionEvent('volumechange', ({ value }) => {
+    const bas = Math.min(decibels.current.min ?? value, value);
+    const haut = Math.max(decibels.current.max ?? value, value);
+    decibels.current = { min: bas, max: haut };
+    const ecart = haut - bas;
+    niveau.value = ecart < 1 ? 0 : Math.min(Math.max((value - bas) / ecart, 0), 1);
+  });
+
+  /**
+   * La permission micro est demandée au premier appui, pas à l'ouverture.
+   * Renvoie `false` si elle est refusée ou si le téléphone n'a pas de
+   * reconnaissance vocale.
+   */
+  const preparerVoix = async (): Promise<boolean> => {
+    try {
+      if (!ExpoSpeechRecognitionModule.isRecognitionAvailable()) return false;
+      const permission = await ExpoSpeechRecognitionModule.requestPermissionsAsync();
+      return permission.granted;
+    } catch {
+      return false;
+    }
+  };
+
+  /** Langue de l'application si le téléphone la reconnaît, sinon celle du système. */
+  const langueEcoute = async (langue: string): Promise<string | undefined> => {
+    const systeme = Intl.DateTimeFormat().resolvedOptions().locale;
+    if (systeme?.startsWith(langue)) return systeme;
+    try {
+      const { locales } = await ExpoSpeechRecognitionModule.getSupportedLocales({});
+      const trouvee = locales.find((item) => item.startsWith(langue));
+      if (trouvee) return trouvee;
+    } catch {
+      // Liste indisponible (Android 12 et moins) : langue du système.
+    }
+    return systeme;
+  };
+
+  /**
+   * Joue la phrase d'invitation et rend la main quand elle est finie
+   * ou coupée. Le micro ne s'ouvre qu'après, sinon il l'entendrait
+   * et l'écrirait dans le champ.
+   */
+  const annoncer = async (langue: string): Promise<void> => {
+    const source = VOIX_OFF[langue] ?? VOIX_OFF.fr;
+    try {
+      const lecteur = voixOff.current ?? createAudioPlayer(source);
+      if (voixOff.current) lecteur.replace(source);
+      voixOff.current = lecteur;
+      await lecteur.seekTo(0);
+      setAnnonce(true);
+      await new Promise<void>((resolve) => {
+        // Abonnement avant `play` pour ne pas manquer la fin d'un son court.
+        const abonnement = lecteur.addListener('playbackStatusUpdate', (statut) => {
+          if (statut.didJustFinish) finAnnonce.current?.();
+        });
+        finAnnonce.current = () => {
+          finAnnonce.current = null;
+          abonnement.remove();
+          lecteur.pause();
+          resolve();
+        };
+        lecteur.play();
+      });
+    } catch {
+      // La voix off est un plus : sans elle, l'écoute démarre quand même.
+    } finally {
+      if (monte.current) setAnnonce(false);
+    }
+  };
+
+  /**
+   * Appui sur le micro, selon l'état en cours :
+   * - voix off en cours : la coupe, l'écoute démarre aussitôt ;
+   * - écoute en cours : l'arrête ;
+   * - au repos : lance la voix off puis l'écoute.
+   */
+  const basculerEcoute = async () => {
+    if (annonce) {
+      // Termine `annoncer` : l'appel en attente plus bas poursuit vers l'écoute.
+      finAnnonce.current?.();
+      return;
+    }
+    if (ecoute) {
+      ExpoSpeechRecognitionModule.stop();
+      arreterEcoute();
+      return;
+    }
+    const langue = traductions.localeName;
+    Keyboard.dismiss();
+
+    if (!(await preparerVoix())) {
+      CustomSnackBar.show(traductions.searchVoiceUnavailable);
+      return;
+    }
+    const lang = await langueEcoute(langue);
+    if (!monte.current) return;
+    await annoncer(langue);
+    if (!monte.current) return;
+
+    decibels.current = {};
+    setEcoute(true);
+    ExpoSpeechRecognitionModule.start({
+      lang,
+      // Le champ se remplit pendant que l'utilisateur parle.
+      interimResults: true,
+      continuous: false,
+      // Optimisé pour des requêtes courtes plutôt qu'une dictée.
+      iosTaskHint: 'search',
+      androidIntentOptions: {
+        EXTRA_SPEECH_INPUT_COMPLETE_SILENCE_LENGTH_MILLIS: 3000,
+        EXTRA_SPEECH_INPUT_POSSIBLY_COMPLETE_SILENCE_LENGTH_MILLIS: 3000,
+      },
+      volumeChangeEventOptions: { enabled: true, intervalMillis: 100 },
+    });
+  };
+
+  const resultats = Fonctionnalite.rechercher(fonctionnalites, recherche);
+  const voixActive = ecoute || annonce;
+
+  /** Ligne de résultat : ferme la recherche en renvoyant [item]. */
+  const ligne = (item: Fonctionnalite) =>
+    new MenuActionItem(item.icon, item.titre, item.sousTitre, () => AppRouter.pop(router, { value: item }), {
+      iconSize: 20,
+      trailing: (
+        <MaterialIcons
+          name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'}
+          size={16}
+          color={Themer.neural03Color}
+        />
+      ),
+    });
+
+  return (
+    <Scaffold
+      appBar={
+        <AppBar
+          title={<Text style={theme.textTheme.headlineMedium}>{traductions.searchTitle}</Text>}
+          onBack={() => AppRouter.pop(router)}
+        />
+      }
+    >
+      <MyPageContainer>
+        <Pressable accessible={false} style={styles.flex} onPress={Keyboard.dismiss}>
+          <View style={styles.gap10} />
+          {/* Champ de recherche : loupe à gauche ; à droite, la croix pour effacer (hors voix) et le bouton micro */}
+          <Card>
+            <View style={[styles.champ, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
+              <MaterialIcons name="search" size={18} color={Themer.neural03Color} />
+              <TextInput
+                value={recherche}
+                onChangeText={setRecherche}
+                autoFocus
+                style={[theme.textTheme.displayLarge, styles.input]}
+                // Le texte d'aide suit l'état de la voix.
+                placeholder={
+                  annonce
+                    ? traductions.searchVoicePrompt
+                    : ecoute
+                      ? traductions.searchVoiceListening
+                      : traductions.searchHint
+                }
+                placeholderTextColor={Themer.neural03Color}
+                returnKeyType="search"
+                // « Entrée » ouvre le résultat le plus pertinent.
+                onSubmitEditing={() => {
+                  if (recherche.trim().length > 0 && resultats.length > 0) {
+                    AppRouter.pop(router, { value: resultats[0] });
+                  }
+                }}
+              />
+              {recherche.length > 0 && !voixActive && (
+                <Pressable accessibilityRole="button" hitSlop={8} style={styles.effacer} onPress={() => setRecherche('')}>
+                  <MaterialIcons name="close" size={18} color={Themer.neural03Color} />
+                </Pressable>
+              )}
+              <SearchPageVoiceButton
+                ecoute={voixActive}
+                niveau={niveau}
+                tooltip={voixActive ? traductions.searchVoiceStop : traductions.searchVoiceStart}
+                onPress={() => void basculerEcoute()}
+              />
+            </View>
+          </Card>
+          <View style={styles.gap16} />
+          <View style={styles.flex}>
+            {resultats.length === 0 ? (
+              <View style={styles.vide}>
+                <MaterialIcons name="search-off" size={40} color={Themer.neural03Color} />
+                <View style={styles.gap12} />
+                <Text style={[theme.textTheme.displayMedium, styles.centre, { color: Themer.neural04Color }]}>
+                  {traductions.searchEmpty(recherche.trim())}
+                </Text>
+              </View>
+            ) : (
+              <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
+                <MenuActionsWidget items={resultats.map(ligne)} />
+              </ScrollView>
+            )}
+          </View>
+        </Pressable>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  gap10: { height: 10 },
+  gap12: { height: 12 },
+  gap16: { height: 16 },
+  champ: { height: 40, flexDirection: 'row', alignItems: 'center', paddingLeft: 12, paddingRight: 4 },
+  input: { flex: 1, marginLeft: 8, paddingVertical: 0 },
+  effacer: { paddingHorizontal: 6 },
+  vide: { paddingTop: 32, alignItems: 'center' },
+  centre: { textAlign: 'center' },
+  liste: { paddingBottom: 20 },
+});