@pi-spi/app 1.3.1 → 1.5.0

package/src/modules/introduction/presentation/pages/introduction_bar.tsx

@@ -1,4 +1,5 @@
 import type { VideoPlayer } from 'expo-video';
+import { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import type { IntroductionItem } from './introduction_item';
@@ -15,6 +16,11 @@ export function IntroductionBar({
   pageSize: number;
   progressBarWidth: number;
 }) {
+  // Largeur des segments tirée de la place réellement disponible, pas de
+  // [progressBarWidth] (calculé sur tout l'écran) : sur un écran déplié
+  // (Galaxy Z Fold), les marges système la réduisent et la barre débordait
+  const [largeur, setLargeur] = useState<number | null>(null);
+  const itemWidth = largeur != null ? largeur / pageSize - 4 : progressBarWidth;
   const widgetPosition = item.position;
   const barList = [];
   for (let i = 0; i < pageSize; i++) {
@@ -23,13 +29,17 @@ export function IntroductionBar({
       <VideoProgressBar
         key={i}
         videoPlayer={i === widgetPosition ? videoPlayer : null}
-        progressBarItemWidth={progressBarWidth}
+        progressBarItemWidth={itemWidth}
         passed={i < widgetPosition}
         current={i === widgetPosition}
       />,
     );
   }
-  return <View style={styles.row}>{barList}</View>;
+  return (
+    <View style={styles.row} onLayout={(event) => setLargeur(event.nativeEvent.layout.width)}>
+      {barList}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

package/src/modules/introduction/presentation/pages/introduction_page.tsx

@@ -1,5 +1,5 @@
 import { useVideoPlayer } from 'expo-video';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
 import { useAppLocalizations } from '../../../../l10n/localizations';
@@ -28,6 +28,11 @@ export function IntroductionPageItem({
   onNext: () => void;
 }) {
   const traductions = useAppLocalizations();
+  // Vidéo et titres réduits si la hauteur manque (écran déplié, paysage),
+  // jamais agrandis : hauteur disponible / hauteur naturelle du bloc
+  const [hauteurZone, setHauteurZone] = useState(0);
+  const [hauteurContenu, setHauteurContenu] = useState(0);
+  const echelle = hauteurZone > 0 && hauteurContenu > hauteurZone ? hauteurZone / hauteurContenu : 1;
   const videoPlayer = useVideoPlayer(item.video, (player) => {
     player.loop = true;
     player.volume = 1.0;
@@ -59,7 +64,19 @@ export function IntroductionPageItem({
         {/* barre de progression */}
         <IntroductionBar videoPlayer={videoPlayer} item={item} pageSize={pageSize} progressBarWidth={progressBarWidth} />
         {/* Video et titres */}
-        <IntroductionVideo videoPlayer={videoPlayer} item={item} />
+        <View
+          style={styles.zoneVideo}
+          pointerEvents="box-none"
+          onLayout={(event) => setHauteurZone(event.nativeEvent.layout.height)}
+        >
+          <View
+            style={{ transform: [{ scale: echelle }] }}
+            pointerEvents="box-none"
+            onLayout={(event) => setHauteurContenu(event.nativeEvent.layout.height)}
+          >
+            <IntroductionVideo videoPlayer={videoPlayer} item={item} />
+          </View>
+        </View>
         {/* Pied de la page */}
         <IntroductionFooter item={item} pageSize={pageSize} traductions={traductions} />
       </View>
@@ -72,4 +89,5 @@ const styles = StyleSheet.create({
   side: { flex: 1 },
   middle: { flex: 2 },
   page: { flex: 1, paddingVertical: 12, paddingHorizontal: 20, alignItems: 'stretch', justifyContent: 'space-between' },
+  zoneVideo: { flexShrink: 1, marginVertical: 12, alignItems: 'center', justifyContent: 'center' },
 });

package/src/modules/notification/presentation/bloc/notification_bloc.ts

@@ -147,8 +147,13 @@ export class NotificationBloc extends Bloc<NotificationEvent, NotificationState>
   private async onList(event: NotificationListEvent, emit: Emitter<NotificationState>): Promise<void> {
     // En cours de rechargement
     emit(new NotificationLoadingState(emptyListe(), this.state.count, event.command));
+
+    // Repartir de la première page
+    const command = event.command;
+    command.index = null;
+    command.total = 0;
+
     try {
-      const command = event.command;
 
       // Rechercher d'abord en local et afficher
       const donneesLocales = await this.pNotificationInputPort.list(listParams(command));
@@ -186,7 +191,8 @@ export class NotificationBloc extends Bloc<NotificationEvent, NotificationState>
     if (this.paginating) return;
     this.paginating = true;
     const command = this.state.command;
-    const oldListe = this.state.notifications;
+    // Affiche le loader en bas de la liste
+    emit(new NotificationInitialState(this.state.notifications, this.state.count, command, true));
     try {
       // Récupérer les notifications depuis le serveur
       const liste = await this.pNotificationInputPort.search(listParams(command, event.index));
@@ -196,16 +202,19 @@ export class NotificationBloc extends Bloc<NotificationEvent, NotificationState>
       if (newNotifications.length > 0) {
         emit(
           new NotificationInitialState(
-            new NotificationListe([...oldListe.data, ...newNotifications], liste.meta),
+            new NotificationListe([...this.state.notifications.data, ...newNotifications], liste.meta),
             this.state.count,
             command,
           ),
         );
+        return;
       }
     } catch (e) {
       this.logger.e('Recuperer liste notification pagination error =>', { error: e });
     } finally {
       this.paginating = false;
     }
+    // Page vide ou erreur : on retire le loader
+    emit(new NotificationInitialState(this.state.notifications, this.state.count, command));
   }
 }

package/src/modules/notification/presentation/bloc/notification_state.ts

@@ -11,7 +11,17 @@ export abstract class NotificationState {
   ) {}
 }
 
-export class NotificationInitialState extends NotificationState {}
+export class NotificationInitialState extends NotificationState {
+  constructor(
+    notifications: NotificationListe,
+    count: number,
+    command: NotificationSearchCommand,
+    /** true pendant le chargement de la page suivante : un petit loader est affiché en bas de la liste. */
+    readonly isPaginating = false,
+  ) {
+    super(notifications, count, command);
+  }
+}
 
 export class NotificationLoadingState extends NotificationState {}
 

package/src/modules/notification/presentation/pages/notification_page_liste.tsx

@@ -6,9 +6,10 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { DateFormat } from '../../../../shared/utils/date_format';
+import { PaginationLoaderWidget } from '../../../../shared/widgets/pagination_loader_widget';
 import { NotificationBloc } from '../bloc/notification_bloc';
 import { NotificationListEvent, NotificationSearchPaginateEvent } from '../bloc/notification_event';
-import { NotificationLoadingState } from '../bloc/notification_state';
+import { NotificationInitialState, NotificationLoadingState } from '../bloc/notification_state';
 import { groupNotifications } from './notification_groups';
 import { NotificationPageListeEmpty } from './notification_page_liste_empty';
 import { NotificationPageListeItem } from './notification_page_liste_item';
@@ -54,6 +55,8 @@ export function NotificationPageListe() {
         if (command.canLoadMore()) bloc.add(new NotificationSearchPaginateEvent(command.index));
       }}
       onEndReachedThreshold={0.2}
+      // Chargement de la page suivante
+      ListFooterComponent={state instanceof NotificationInitialState && state.isPaginating ? <PaginationLoaderWidget /> : undefined}
       renderItem={({ item }) => (
         <View>
           {/* Jour */}

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

@@ -5,7 +5,7 @@ import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { SoundManager } from '../../../../../core/sounds';
-import { Themes, useTheme } from '../../../../../core/theme';
+import { Themer, Themes, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
@@ -45,7 +45,10 @@ function menuItems(traductions: AppLocalizations, configParams: ConfigParams): P
   if (Di.config.appConfig.canChangeTheme) {
     items.push(
       new ProfileItem(Images.iconsTheme, traductions.appSettingPageMenuThemeTitle, AppRouter.profileParametreTheme, {
-        subtitle: Themes.label(theme, traductions),
+        subtitle:
+          params[ConfigKey.preferedTheme] === Themer.customThemeCode
+            ? traductions.appSettingPageMenuThemeCustom
+            : Themes.label(theme, traductions),
       }),
     );
   }

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

@@ -10,7 +10,7 @@ import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
-import { MenuActionItem, MenuActionsWiget } from '../../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../../shared/widgets/menu_actions_widget';
 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';
@@ -116,7 +116,7 @@ export function ProfileParametrePageNotifications() {
         <View style={styles.gap20} />
         <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
         <View style={styles.gap10} />
-        <MenuActionsWiget
+        <MenuActionsWidget
           items={[
             new MenuActionItem(
               Images.iconsCloche,

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

@@ -1,10 +1,11 @@
 import { Image } from 'expo-image';
+import type { ReactNode } from 'react';
 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 { Themer, Themes, useTheme, type ThemeData } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
@@ -67,21 +68,23 @@ export function ProfileParametrePageTheme() {
           <View style={styles.gap10} />
           <Card>
             <View style={styles.wrap}>
+              {/* Thème personnalisé de l'hôte, en tête */}
+              {Themer.customTheme != null && (
+                <ThemeOption
+                  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) => (
-                <Pressable
+                <ThemeOption
                   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>
+                  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" />}
+                />
               ))}
             </View>
           </Card>
@@ -91,10 +94,87 @@ export function ProfileParametrePageTheme() {
   );
 }
 
+/** Une option de thème : aperçu, nom et pastille de sélection */
+function ThemeOption({
+  title,
+  selected,
+  onSelect,
+  preview,
+}: {
+  title: string;
+  selected: boolean;
+  onSelect: () => void;
+  preview: ReactNode;
+}) {
+  const theme = useTheme();
+  return (
+    <Pressable accessibilityRole="button" disabled={selected} onPress={onSelect} style={styles.item}>
+      <View style={[styles.preview, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
+      <View style={styles.gap5} />
+      <Text style={theme.textTheme.displayMedium}>{title}</Text>
+      <View style={styles.gap5} />
+      <CheckedDot value={selected} />
+      <View style={styles.gap20} />
+    </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 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 },
   wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', columnGap: 10, rowGap: 10 },
   item: { alignItems: 'center' },
-  preview: { width: 120, height: 200, borderRadius: 8 },
+  preview: { width: 120, height: 200, borderRadius: 8, overflow: 'hidden' },
   gap5: { height: 5 },
   gap10: { height: 10 },
   gap20: { height: 20 },

package/src/modules/profile/presentation/pages/web/profile_web_page.tsx

@@ -23,7 +23,7 @@ export function ProfileWebPage({ url }: { url: string }) {
   const theme = useTheme();
   const router = useAppRouter();
   const insets = useSafeAreaInsets();
-  const webview = useRef<WebView>(null);
+  const webview = useRef<WebView<object>>(null);
   const [loading, setLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
 
@@ -47,7 +47,8 @@ export function ProfileWebPage({ url }: { url: string }) {
           />
         ) : null}
         <View style={hasError ? styles.hidden : styles.flex}>
-          <WebView
+          {/* react-native-webview 14 : sans paramètre de type, ses props valent `never` */}
+          <WebView<object>
             ref={webview}
             source={{ uri: url }}
             style={styles.web}

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

@@ -2,7 +2,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { File, Paths } from 'expo-file-system';
 import * as Sharing from 'expo-sharing';
 import { useRef, useState } from 'react';
-import { ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet, useWindowDimensions, View, type ViewInstance } from 'react-native';
 import { captureRef } from 'react-native-view-shot';
 
 import { useBloc, useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
@@ -42,7 +42,7 @@ export function QrCodeAliasPage() {
   const aliasCle = alias?.getCle() ?? '';
   const [qrCode, setQrCode] = useState<string | null>(null);
   const [showQrcodeName, setShowQrcodeName] = useState(false);
-  const qrRef = useRef<View>(null);
+  const qrRef = useRef<ViewInstance>(null);
   const bloc = useCreateBloc(() => {
     const created = new QrcodeAliasBloc(Di.getQrcodeInputPort());
     if (alias != null) created.add(new QrcodeAliasEncodeEvent(alias));

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

@@ -5,7 +5,7 @@ import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { MenuActionItem, MenuActionsWiget } from '../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
 
 /** Feuille « Partager » : le QR code (image) ou l'alias (texte). */
 export function QrcodeAliasPageShare({
@@ -28,7 +28,7 @@ export function QrcodeAliasPageShare({
       <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
         <Text style={theme.textTheme.headlineMedium}>{traductions.qrcodePagePartageTitle}</Text>
         <View style={styles.gap20} />
-        <MenuActionsWiget
+        <MenuActionsWidget
           items={[
             new MenuActionItem(
               Images.homeFooterQrcode,

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;
+}