@pi-spi/app 1.3.0 → 1.4.0

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

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

@@ -0,0 +1,283 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Platform, Pressable, StyleSheet, Vibration } from 'react-native';
+
+import { useTheme } from '../../../../core/theme';
+import type { ValueNotifier } from '../../../../core/value_notifier';
+
+/** Zone tactile, plus grande que le disque pour laisser place aux ondes. */
+const TAILLE = 40;
+
+/** Diamètre du disque une fois actif. */
+const DISQUE = 30;
+
+/** Taille du disque au repos, par rapport à sa taille active. */
+const ECHELLE_REPOS = 0.85;
+
+/** Durée d'un cycle d'onde pendant l'écoute. */
+const CYCLE_ONDES = 1600;
+
+/** Nombre d'ondes, décalées d'un tiers de cycle. */
+const NOMBRE_ONDES = 3;
+
+/**
+ * Bouton micro de la recherche.
+ *
+ * Trois états visuels :
+ * - repos : micro coloré sur un disque teinté, pour se distinguer des
+ *   autres icônes du champ. À l'ouverture, deux pulsations douces
+ *   signalent qu'il est utilisable ;
+ * - actif ([ecoute]) : disque plein qui grossit avec un léger rebond,
+ *   et trois ondes qui en partent en continu ;
+ * - appui : le bouton s'enfonce légèrement, avec une vibration (Android).
+ *
+ * Les ondes et l'invitation sont coupées si le téléphone demande de
+ * réduire les animations (accessibilité) ; seul le changement d'état
+ * du disque reste visible.
+ */
+export function SearchPageVoiceButton({
+  ecoute,
+  niveau,
+  onPress,
+  tooltip,
+}: {
+  /** La voix est active (voix off ou écoute) : le bouton est « allumé ». */
+  ecoute: boolean;
+  /**
+   * Volume de la voix de 0 (silence) à 1 (voix forte) : plus il est
+   * haut, plus le disque grossit et plus les ondes s'éloignent.
+   */
+  niveau: ValueNotifier<number>;
+  onPress: () => void;
+  /** Libellé du lecteur d'écran. */
+  tooltip?: string;
+}) {
+  const theme = useTheme();
+  const couleur = theme.colorScheme.primary;
+  const surCouleur = theme.colorScheme.onPrimary;
+  const animationsReduites = useAnimationsReduites();
+
+  /** Passage repos → actif (0 → 1). */
+  const entree = useRef(new Animated.Value(ecoute ? 1 : 0)).current;
+  /** Enfoncement au toucher. */
+  const appui = useRef(new Animated.Value(0)).current;
+  /** Une pulsation d'invitation au repos, de 0 à 1. */
+  const invitation = useRef(new Animated.Value(0)).current;
+  /** [niveau] adouci, pour que le disque ne tremble pas à chaque mesure du micro. */
+  const niveauLisse = useRef(new Animated.Value(0)).current;
+  /** Avancement de chaque onde d'écoute, de 0 à 1. */
+  const ondes = useRef(Array.from({ length: NOMBRE_ONDES }, () => new Animated.Value(0))).current;
+
+  // Allume ou éteint le bouton : rebond à l'arrivée, retour plus rapide.
+  useEffect(() => {
+    if (ecoute) invitation.setValue(0);
+    const animation = ecoute
+      ? Animated.spring(entree, { toValue: 1, friction: 5, tension: 120, useNativeDriver: true })
+      : Animated.timing(entree, { toValue: 0, duration: 240, easing: Easing.in(Easing.cubic), useNativeDriver: true });
+    animation.start();
+    return () => animation.stop();
+  }, [ecoute, entree, invitation]);
+
+  // Ondes en boucle pendant l'écoute, décalées d'un tiers de cycle.
+  useEffect(() => {
+    if (!ecoute || animationsReduites) return;
+    const boucles = ondes.map((onde, i) => {
+      onde.setValue(0);
+      return Animated.sequence([
+        Animated.delay((CYCLE_ONDES / NOMBRE_ONDES) * i),
+        Animated.loop(
+          Animated.timing(onde, { toValue: 1, duration: CYCLE_ONDES, easing: Easing.linear, useNativeDriver: true }),
+        ),
+      ]);
+    });
+    boucles.forEach((boucle) => boucle.start());
+    return () => boucles.forEach((boucle) => boucle.stop());
+  }, [ecoute, animationsReduites, ondes]);
+
+  // Le volume suit la voix en douceur, et retombe à 0 hors écoute.
+  useEffect(() => {
+    const suivre = () =>
+      Animated.timing(niveauLisse, {
+        toValue: ecoute ? Math.min(Math.max(niveau.value, 0), 1) : 0,
+        duration: 120,
+        useNativeDriver: true,
+      }).start();
+    suivre();
+    return niveau.addListener(suivre);
+  }, [ecoute, niveau, niveauLisse]);
+
+  // Invitation : deux pulsations, une seule fois par ouverture de la page,
+  // après l'entrée de la page pour que l'œil la voie.
+  const invitationLancee = useRef(false);
+  useEffect(() => {
+    if (invitationLancee.current || animationsReduites !== false) return;
+    invitationLancee.current = true;
+    if (ecoute) return;
+    const pulsation = () => Animated.timing(invitation, { toValue: 1, duration: 1100, useNativeDriver: true });
+    invitation.setValue(0);
+    const animation = Animated.sequence([
+      Animated.delay(500),
+      pulsation(),
+      Animated.timing(invitation, { toValue: 0, duration: 0, useNativeDriver: true }),
+      pulsation(),
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [animationsReduites, ecoute, invitation]);
+
+  const toucher = () => {
+    // Sur iOS, `Vibration` ne sait faire qu'une longue vibration : pas de retour haptique.
+    if (Platform.OS === 'android') Vibration.vibrate(10);
+    onPress();
+  };
+
+  const presence = entree.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' });
+  // 0 → 1 → 0 sur une pulsation d'invitation.
+  const souffle = invitation.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] });
+  const echelle = Animated.multiply(
+    Animated.multiply(
+      entree.interpolate({ inputRange: [0, 1, 1.2], outputRange: [ECHELLE_REPOS, 1, 1.03], extrapolate: 'clamp' }),
+      niveauLisse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.16] }),
+    ),
+    souffle.interpolate({ inputRange: [0, 1], outputRange: [1, 1.1] }),
+  );
+  const enfoncement = appui.interpolate({ inputRange: [0, 1], outputRange: [1, 0.86] });
+  const rayonBase = DISQUE / 2;
+  const rayonRepos = (DISQUE / 2) * ECHELLE_REPOS;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={tooltip}
+      accessibilityState={{ selected: ecoute }}
+      onPressIn={() => Animated.timing(appui, { toValue: 1, duration: 90, useNativeDriver: true }).start()}
+      onPressOut={() => Animated.timing(appui, { toValue: 0, duration: 160, useNativeDriver: true }).start()}
+      onPress={toucher}
+      style={styles.zone}
+    >
+      {!animationsReduites && (
+        <>
+          {/* Onde d'invitation, au repos */}
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.onde,
+              {
+                width: rayonRepos * 2,
+                height: rayonRepos * 2,
+                borderRadius: rayonRepos,
+                backgroundColor: couleur,
+                opacity: Animated.multiply(
+                  invitation.interpolate({ inputRange: [0, 0.01, 0.5, 1], outputRange: [0, 0.4, 0.1, 0] }),
+                  presence.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+                ),
+                transform: [
+                  {
+                    scale: easeOutQuad(invitation).interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [1, (rayonRepos + 10) / rayonRepos],
+                    }),
+                  },
+                ],
+              },
+            ]}
+          />
+          {/* Ondes d'écoute : plus amples et plus visibles quand la voix est forte */}
+          {ondes.map((onde, i) => (
+            <Animated.View
+              key={i}
+              pointerEvents="none"
+              style={[
+                styles.onde,
+                {
+                  width: DISQUE,
+                  height: DISQUE,
+                  borderRadius: rayonBase,
+                  backgroundColor: couleur,
+                  opacity: Animated.multiply(
+                    Animated.multiply(
+                      onde.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0.5, 0.125, 0] }),
+                      presence,
+                    ),
+                    niveauLisse.interpolate({ inputRange: [0, 1], outputRange: [0.45, 1] }),
+                  ),
+                  transform: [
+                    {
+                      scale: Animated.add(
+                        1,
+                        Animated.multiply(
+                          easeOutQuad(onde),
+                          niveauLisse.interpolate({ inputRange: [0, 1], outputRange: [6 / rayonBase, 16 / rayonBase] }),
+                        ),
+                      ),
+                    },
+                  ],
+                },
+              ]}
+            />
+          ))}
+        </>
+      )}
+      <Animated.View style={[styles.centre, { transform: [{ scale: enfoncement }] }]}>
+        {/* Disque : teinté au repos, plein une fois actif */}
+        <Animated.View style={[styles.disque, { transform: [{ scale: echelle }] }]}>
+          <Animated.View
+            style={[
+              StyleSheet.absoluteFill,
+              styles.rond,
+              { backgroundColor: couleur, opacity: souffle.interpolate({ inputRange: [0, 1], outputRange: [0.12, 0.2] }) },
+            ]}
+          />
+          <Animated.View style={[StyleSheet.absoluteFill, styles.rond, { backgroundColor: couleur, opacity: presence }]} />
+        </Animated.View>
+        {/* Micro : contour au repos, plein pendant l'écoute */}
+        <Animated.View style={[styles.icone, { opacity: presence.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) }]}>
+          <MaterialIcons name="mic-none" size={20} color={couleur} />
+        </Animated.View>
+        <Animated.View style={[styles.icone, { opacity: presence, transform: [{ scale: presence }] }]}>
+          <MaterialIcons name="mic" size={20} color={surCouleur} />
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+/**
+ * Courbe `Easing.out(Easing.quad)` (1 - (1 - t)²) appliquée à une valeur
+ * de 0 à 1, décrite point par point : `interpolate` n'accepte pas d'option
+ * `easing`, et le pilote natif rejette l'animation (erreur « Interpolation
+ * property 'easing' is not supported by native animated module » à chaque
+ * image).
+ */
+function easeOutQuad(valeur: Animated.Value): Animated.AnimatedInterpolation<number> {
+  return valeur.interpolate({
+    inputRange: [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1],
+    outputRange: [0, 0.234375, 0.4375, 0.609375, 0.75, 0.859375, 0.9375, 0.984375, 1],
+  });
+}
+
+/** Réglage « réduire les animations » du téléphone ; `undefined` tant qu'il n'est pas lu. */
+function useAnimationsReduites(): boolean | undefined {
+  const [reduites, setReduites] = useState<boolean | undefined>(undefined);
+  useEffect(() => {
+    let actif = true;
+    void AccessibilityInfo.isReduceMotionEnabled().then((valeur) => {
+      if (actif) setReduites(valeur);
+    });
+    const abonnement = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduites);
+    return () => {
+      actif = false;
+      abonnement.remove();
+    };
+  }, []);
+  return reduites;
+}
+
+const styles = StyleSheet.create({
+  zone: { width: TAILLE, height: TAILLE, alignItems: 'center', justifyContent: 'center' },
+  onde: { position: 'absolute' },
+  centre: { width: DISQUE, height: DISQUE, alignItems: 'center', justifyContent: 'center' },
+  disque: { position: 'absolute', width: DISQUE, height: DISQUE },
+  rond: { borderRadius: DISQUE / 2 },
+  icone: { position: 'absolute' },
+});

package/src/modules/subscription/presentation/pages/subscription_menu_widget.tsx

@@ -6,7 +6,7 @@ import { AppRouter, useAppRouter } from '../../../../core/router';
 import { 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';
 
 /** Menu de création : programmer un paiement ou souscrire à un abonnement (feuille du bas) */
 export function SubscriptionMenuWidget() {
@@ -15,6 +15,11 @@ export function SubscriptionMenuWidget() {
   const router = useAppRouter();
   const { height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
+  // Fermer le menu avant d'ouvrir la page : sinon il reste affiché par-dessus
+  const open = (location: string) => {
+    AppRouter.pop(router);
+    void AppRouter.push(router, location);
+  };
   return (
     <View style={[styles.box, { maxHeight: height * 0.4, backgroundColor: theme.colorScheme.surface }]}>
       <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
@@ -22,14 +27,14 @@ export function SubscriptionMenuWidget() {
         <Text style={theme.textTheme.headlineMedium}>{traductions.subscriptionEmptyBtnCreate}</Text>
         <View style={styles.gap20} />
         <Card>
-          <MenuActionsWiget
+          <MenuActionsWidget
             items={[
               // Programmer
               new MenuActionItem(
                 Images.homeFooterTransfer,
                 traductions.subscriptionMenuScheduleTitle,
                 traductions.subscriptionMenuScheduleSubtitle,
-                () => void AppRouter.push(router, AppRouter.subscriptionSchedule),
+                () => open(AppRouter.subscriptionSchedule),
                 { iconSize: 20 },
               ),
               // Souscrire à un abonnement
@@ -37,7 +42,7 @@ export function SubscriptionMenuWidget() {
                 Images.iconRepeat,
                 traductions.subscriptionMenuSubscribeTitle,
                 traductions.subscriptionMenuSubscribeSubtitle,
-                () => void AppRouter.push(router, AppRouter.subscriptionSubscribe),
+                () => open(AppRouter.subscriptionSubscribe),
                 { iconSize: 20 },
               ),
             ]}

package/src/modules/transactions/presentation/bloc/transaction_search/transaction_search_bloc.ts

@@ -52,8 +52,13 @@ export class TransactionSearchBloc extends Bloc<TransactionSearchEvent, Transact
   /** Quand on demande la liste des transactions */
   private async onList(event: TransactionSearchListEvent, emit: Emitter<TransactionSearchState>): Promise<void> {
     emit(new TransactionSearchLoadingState(this.state.transactions, 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.transactionsInputPort.list(this.params(command));
       if (command.filters.categories.length > 0) {
@@ -76,16 +81,25 @@ export class TransactionSearchBloc extends Bloc<TransactionSearchEvent, Transact
 
   /** Pagination */
   private async onPaginate(event: TransactionSearchPaginateEvent, emit: Emitter<TransactionSearchState>): Promise<void> {
+    // Une page est déjà en cours de chargement
+    const current = this.state;
+    if (!(current instanceof TransactionSearchListState) || current.isPaginating) return;
+
     const command = event.command;
+    // Affiche le loader en bas de la liste
+    emit(new TransactionSearchListState(current.transactions, command, true));
     try {
       const liste = await this.transactionsInputPort.search(this.params(command, command.index));
       command.total = liste.meta.total;
       command.index = liste.meta.next as number | string | null | undefined;
       if (liste.isNotEmpty) {
         emit(new TransactionSearchListState(new TransactionListe([...this.state.transactions.data, ...liste.data], liste.meta), command));
+        return;
       }
     } catch (e) {
       this.logger.e('Recuperer liste transaction pagination error =>', { error: e });
     }
+    // Page vide ou erreur : on retire le loader
+    emit(new TransactionSearchListState(this.state.transactions, command));
   }
 }