@pi-spi/app 1.3.1 → 1.5.0

package/src/modules/transactions/presentation/pages/transaction_search/transaction_search_page_filters.tsx

@@ -1,80 +1,154 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useReducer } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { useBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { TextButton } from '../../../../../shared/material/buttons';
+import { ElevatedButton, TextButton } from '../../../../../shared/material/buttons';
 import { Card } from '../../../../../shared/material/card';
 import { DateFormat } from '../../../../../shared/utils/date_format';
 import { showSelectDateRange } from '../../../../../shared/widgets/select_date_widget';
 import { CategorieSelectWidget } from '../../../../categorie/presentation/pages/categorie_select_widget';
 import { TransactionSens } from '../../../domain/models/transaction';
-import type { TransactionSearchCommand } from '../../../domain/models/transaction_search/transaction_search_command';
 import { TransactionSearchBloc } from '../../bloc/transaction_search/transaction_search_bloc';
 
-/** Filtres de la recherche : plage de dates, sens (reçus / payés) et catégories. */
+/** Sens par défaut : reçus et envoyés */
+const SENS_PAR_DEFAUT: readonly TransactionSens[] = [TransactionSens.credit, TransactionSens.debit];
+
+/**
+ * Filtres de la recherche : plage de dates, sens (reçus / envoyés) et
+ * catégories. Les choix sont faits sur un brouillon : ils ne sont reportés
+ * sur la commande qu'avec « Appliquer ». Fermer la page les abandonne.
+ */
 export function TransactionSearchPageFilters() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
   const insets = useSafeAreaInsets();
-  const bloc = useBloc(TransactionSearchBloc);
-  const state = useBlocBuilder(bloc);
-  const command = state.command;
-  const [, rebuild] = useReducer((x: number) => x + 1, 0);
+  const command = useBloc(TransactionSearchBloc).state.command;
+
+  // Brouillon des filtres
+  const [dateDebut, setDateDebut] = useState(command.filters.dateDebut);
+  const [dateFin, setDateFin] = useState(command.filters.dateFin);
+  const [sens, setSens] = useState<TransactionSens[]>(() => [...command.filters.sens]);
+  const [categories, setCategories] = useState<string[]>(() => [...command.filters.categories]);
+  // Change à chaque réinitialisation : les listes de catégories gardent leur
+  // sélection en interne, il faut les recréer pour la vider.
+  const [versionCategories, setVersionCategories] = useState(0);
+
+  const estModifie =
+    dateDebut != null ||
+    dateFin != null ||
+    categories.length > 0 ||
+    sens.length !== SENS_PAR_DEFAUT.length ||
+    !SENS_PAR_DEFAUT.every((s) => sens.includes(s));
+
+  const reinitialiser = () => {
+    setDateDebut(undefined);
+    setDateFin(undefined);
+    setSens([...SENS_PAR_DEFAUT]);
+    setCategories([]);
+    setVersionCategories((v) => v + 1);
+  };
+
+  const appliquer = () => {
+    command.filters.dateDebut = dateDebut;
+    command.filters.dateFin = dateFin;
+    command.filters.sens = [...sens];
+    command.filters.categories = [...categories];
+    AppRouter.pop(router, { value: command });
+  };
+
+  const separateurColor = theme.brightness === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
 
   return (
     <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
-      {/* Barre : retour et « Appliquer » */}
+      {/* Barre : fermer, titre, réinitialiser */}
       <View style={styles.bar}>
-        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
-          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+        <Pressable accessibilityRole="button" hitSlop={12} style={styles.close} onPress={() => AppRouter.pop(router)}>
+          <MaterialIcons name="close" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>
-        <View style={styles.apply}>
-          <TextButton onPress={() => AppRouter.pop(router, { value: command })}>{traductions.transactionSearchInputFilterBtnAppliquer}</TextButton>
-        </View>
+        <Text style={[theme.textTheme.headlineMedium, styles.title]}>{traductions.transactionSearchInputFilterTitle}</Text>
+        <TextButton onPress={estModifie ? reinitialiser : undefined}>
+          {traductions.transactionSearchInputFilterBtnReinitialiser}
+        </TextButton>
       </View>
-      <View style={styles.content}>
-        <View style={styles.gap10} />
-        <Text style={theme.textTheme.titleSmall}>{traductions.transactionSearchInputFilterTitle}</Text>
-        <View style={styles.gap20} />
-        <ScrollView style={styles.flex}>
-          {/* Plage de dates */}
-          <Text style={theme.textTheme.headlineSmall}>{traductions.transactionSearchInputFilterDateTitle}</Text>
-          <View style={styles.gap14} />
-          <FiltersDates command={command} traductions={traductions} onChange={rebuild} />
-          <View style={styles.gap20} />
-          {/* Catégories */}
-          <Text style={theme.textTheme.headlineSmall}>{traductions.transactionSearchInputFilterCategoriesTitle}</Text>
-          <View style={styles.gap14} />
-          {/* Selon le sens de l'opération */}
-          <FiltersSens command={command} traductions={traductions} onChange={rebuild} />
-          <View style={styles.gap20} />
-          {/* Selon les catégories de transactions */}
-          <CategorieSelectWidget
-            selectedCategories={command.filters.categories}
-            onSelectionChanged={(categorie, checked) => {
-              if (checked) command.filters.categories.push(categorie.id);
-              else command.filters.categories = command.filters.categories.filter((c) => c !== categorie.id);
-            }}
-          />
-          <View style={styles.gap20} />
-        </ScrollView>
+      {/* Séparateur discret */}
+      <View style={[styles.separateur, { backgroundColor: separateurColor }]} />
+
+      {/* Filtres */}
+      <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
+        <SectionTitle label={traductions.transactionSearchInputFilterDateTitle} />
+        <FiltersDates
+          dateDebut={dateDebut}
+          dateFin={dateFin}
+          traductions={traductions}
+          onChange={(debut, fin) => {
+            setDateDebut(debut);
+            setDateFin(fin);
+          }}
+        />
+        <View style={styles.gap28} />
+        {/* Sens de l'opération, puis catégories */}
+        <SectionTitle label={traductions.transactionSearchInputFilterCategoriesTitle} />
+        <FiltersSens selection={sens} traductions={traductions} separateurColor={separateurColor} onChange={setSens} />
+        <View style={styles.gap16} />
+        <CategorieSelectWidget
+          key={versionCategories}
+          selectedCategories={categories}
+          onSelectionChanged={(categorie, checked) => {
+            setCategories((c) => {
+              const autres = c.filter((id) => id !== categorie.id);
+              return checked ? [...autres, categorie.id] : autres;
+            });
+          }}
+        />
+      </ScrollView>
+
+      {/* Appliquer */}
+      <View style={styles.footer}>
+        <ElevatedButton onPress={appliquer}>{traductions.transactionSearchInputFilterBtnAppliquer}</ElevatedButton>
       </View>
     </View>
   );
 }
 
-function FiltersDates({ command, traductions, onChange }: { command: TransactionSearchCommand; traductions: AppLocalizations; onChange: () => void }) {
+/** Titre d'une section de filtres */
+function SectionTitle({ label }: { label: string }) {
+  const theme = useTheme();
+  return <Text style={[theme.textTheme.displayMedium, styles.sectionTitle]}>{label.toUpperCase()}</Text>;
+}
+
+/** Icône dans un carré arrondi */
+function IconBox({ name, color, backgroundColor }: { name: keyof typeof MaterialIcons.glyphMap; color: string; backgroundColor: string }) {
+  return (
+    <View style={[styles.icon, { backgroundColor }]}>
+      <MaterialIcons name={name} size={22} color={color} />
+    </View>
+  );
+}
+
+function FiltersDates({
+  dateDebut,
+  dateFin,
+  traductions,
+  onChange,
+}: {
+  dateDebut?: Date;
+  dateFin?: Date;
+  traductions: AppLocalizations;
+  onChange: (debut?: Date, fin?: Date) => void;
+}) {
   const theme = useTheme();
   const router = useAppRouter();
-  const format = new DateFormat('d MMM', traductions.localeName);
-  const { dateDebut, dateFin } = command.filters;
+  const format = new DateFormat('d MMM y', traductions.localeName);
+  const estDefinie = dateDebut != null;
+  const plage = estDefinie ? (dateFin != null ? `${format.format(dateDebut)} – ${format.format(dateFin)}` : format.format(dateDebut)) : null;
+
   return (
     <Card>
       <Pressable
@@ -82,64 +156,90 @@ function FiltersDates({ command, traductions, onChange }: { command: Transaction
         style={styles.tile}
         onPress={async () => {
           const dates = await showSelectDateRange(router, { title: traductions.transactionSearchInputFilterDateSelectTitle });
-          command.filters.dateDebut = dates[0];
-          command.filters.dateFin = dates.length === 2 ? dates[1] : undefined;
-          onChange();
+          onChange(dates[0], dates.length === 2 ? dates[1] : undefined);
         }}
       >
-        <View style={[styles.icon, { backgroundColor: theme.colorScheme.surface }]}>
-          <MaterialIcons name="calendar-month" size={24} color={theme.colorScheme.onSurface} />
-        </View>
-        <View style={styles.texts}>
-          {/* Indication : sélectionner la plage */}
-          <Text style={theme.textTheme.headlineSmall}>{traductions.transactionSearchInputFilterDateSubTitle}</Text>
-          {/* Plage choisie */}
-          <Text style={theme.textTheme.displaySmall}>
-            {traductions.transactionSearchInputFilterDateRange(
-              dateDebut != null ? format.format(dateDebut) : '',
-              dateFin != null ? format.format(dateFin) : '',
-            )}
-          </Text>
-        </View>
-        <MaterialIcons name="arrow-forward-ios" size={18} color={theme.colorScheme.onSurface} />
+        {/* Teinté quand le filtre est actif */}
+        <IconBox
+          name="calendar-month"
+          color={estDefinie ? Themer.primaryDark : Themer.neural04Color}
+          backgroundColor={estDefinie ? 'rgba(242,169,0,0.15)' : theme.colorScheme.surface}
+        />
+        {/* La plage choisie, sinon l'invitation à la choisir */}
+        <Text style={[theme.textTheme.headlineSmall, styles.label15, styles.texts]}>
+          {plage ?? traductions.transactionSearchInputFilterDateSubTitle}
+        </Text>
+        {/* Effacer la plage, ou ouvrir le sélecteur */}
+        {estDefinie ? (
+          <Pressable accessibilityRole="button" hitSlop={8} style={styles.trailing} onPress={() => onChange(undefined, undefined)}>
+            <MaterialIcons name="close" size={20} color={Themer.neural03Color} />
+          </Pressable>
+        ) : (
+          <MaterialIcons
+            style={styles.trailing}
+            name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'}
+            size={Platform.OS === 'ios' ? 18 : 22}
+            color={Themer.neural03Color}
+          />
+        )}
       </Pressable>
     </Card>
   );
 }
 
-function FiltersSens({ command, traductions, onChange }: { command: TransactionSearchCommand; traductions: AppLocalizations; onChange: () => void }) {
+/** Mêmes icônes et couleurs que dans la liste des transactions. */
+function FiltersSens({
+  selection,
+  traductions,
+  separateurColor,
+  onChange,
+}: {
+  selection: TransactionSens[];
+  traductions: AppLocalizations;
+  separateurColor: string;
+  onChange: (sens: TransactionSens[]) => void;
+}) {
   const theme = useTheme();
   const items = [
-    { sens: TransactionSens.credit, icon: 'arrow-forward' as const, label: traductions.transactionSearchInputFilterCategoriesSensRecus },
-    { sens: TransactionSens.debit, icon: 'arrow-back' as const, label: traductions.transactionSearchInputFilterCategoriesSensPayes },
+    {
+      sens: TransactionSens.credit,
+      icon: 'arrow-forward' as const,
+      color: Themer.successColor,
+      fond: 'rgba(70,169,61,0.12)',
+      label: traductions.transactionSearchInputFilterCategoriesSensRecus,
+    },
+    {
+      sens: TransactionSens.debit,
+      icon: 'arrow-back' as const,
+      color: theme.colorScheme.error,
+      fond: 'rgba(250,90,37,0.12)',
+      label: traductions.transactionSearchInputFilterCategoriesSensPayes,
+    },
   ];
   return (
     <Card>
-      {items.map((item) => {
-        const checked = command.filters.sens.includes(item.sens);
+      {items.map((item, index) => {
+        const checked = selection.includes(item.sens);
         return (
-          <Pressable
-            key={item.sens}
-            accessibilityRole="checkbox"
-            accessibilityState={{ checked }}
-            style={styles.tile}
-            onPress={() => {
-              if (checked) command.filters.sens = command.filters.sens.filter((s) => s !== item.sens);
-              else command.filters.sens.push(item.sens);
-              onChange();
-            }}
-          >
-            <MaterialIcons
-              name={checked ? 'check-box' : 'check-box-outline-blank'}
-              size={24}
-              color={checked ? theme.colorScheme.primary : Themer.neural02Color}
-            />
-            <View style={styles.gap16} />
-            <View style={[styles.icon, { backgroundColor: theme.colorScheme.surface }]}>
-              <MaterialIcons name={item.icon} size={24} color={theme.colorScheme.onSurface} />
-            </View>
-            <Text style={[theme.textTheme.headlineSmall, styles.label]}>{item.label}</Text>
-          </Pressable>
+          <View key={item.sens}>
+            {/* Séparateur discret */}
+            {index > 0 && <View style={[styles.separateur, styles.separateurIndent, { backgroundColor: separateurColor }]} />}
+            <Pressable
+              accessibilityRole="checkbox"
+              accessibilityState={{ checked }}
+              style={styles.tile}
+              onPress={() => onChange(checked ? selection.filter((s) => s !== item.sens) : [...selection, item.sens])}
+            >
+              <IconBox name={item.icon} color={item.color} backgroundColor={item.fond} />
+              <Text style={[theme.textTheme.headlineSmall, styles.label15, styles.texts]}>{item.label}</Text>
+              <MaterialIcons
+                style={styles.trailing}
+                name={checked ? 'check-box' : 'check-box-outline-blank'}
+                size={24}
+                color={checked ? theme.colorScheme.primary : Themer.neural02Color}
+              />
+            </Pressable>
+          </View>
         );
       })}
     </Card>
@@ -148,16 +248,19 @@ function FiltersSens({ command, traductions, onChange }: { command: TransactionS
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  bar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-  back: { padding: 12 },
-  apply: { paddingRight: 12 },
-  content: { flex: 1, paddingTop: 12, paddingHorizontal: 12 },
-  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8 },
-  icon: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
+  bar: { flexDirection: 'row', alignItems: 'center', paddingTop: 8, paddingLeft: 4, paddingRight: 8 },
+  close: { padding: 12 },
+  title: { flex: 1, textAlign: 'center' },
+  separateur: { height: StyleSheet.hairlineWidth },
+  separateurIndent: { marginLeft: 76, marginRight: 16 },
+  content: { paddingHorizontal: 16, paddingTop: 24, paddingBottom: 16 },
+  sectionTitle: { color: Themer.neural03Color, letterSpacing: 0.6, marginLeft: 4, marginBottom: 10 },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingLeft: 16, paddingRight: 8, paddingVertical: 10 },
+  icon: { width: 44, height: 44, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
   texts: { flex: 1, marginHorizontal: 16 },
-  label: { marginLeft: 12 },
-  gap10: { height: 10 },
-  gap14: { height: 14 },
-  gap16: { width: 16 },
-  gap20: { height: 20 },
+  label15: { fontSize: 15 },
+  trailing: { marginRight: 8 },
+  footer: { paddingHorizontal: 16, paddingTop: 8, paddingBottom: 16 },
+  gap16: { height: 16 },
+  gap28: { height: 28 },
 });

package/src/modules/transactions/presentation/pages/transaction_search/transaction_search_page_liste.tsx

@@ -5,12 +5,13 @@ import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 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 { AmountWidget } from '../../../../../shared/widgets/amount_widget';
+import { PaginationLoaderWidget } from '../../../../../shared/widgets/pagination_loader_widget';
 import { TransactionSens, type Transaction } from '../../../domain/models/transaction';
 import { TransactionSearchBloc } from '../../bloc/transaction_search/transaction_search_bloc';
 import { TransactionSearchListEvent, TransactionSearchPaginateEvent } from '../../bloc/transaction_search/transaction_search_event';
 import { TransactionSearchListState } from '../../bloc/transaction_search/transaction_search_state';
+import { transactionJourLibelle } from '../transaction_jour_libelle';
 import { TransactionListItemWidget } from '../transaction_list_item_widget';
 import { TransactionListLoadingWidget } from '../transaction_list_loading_widget';
 
@@ -89,11 +90,13 @@ export function TransactionSearchPageListe({
         if (command.canLoadMore()) bloc.add(new TransactionSearchPaginateEvent(command.index, command));
       }}
       onEndReachedThreshold={0.2}
+      // Chargement de la page suivante
+      ListFooterComponent={state.isPaginating ? <PaginationLoaderWidget /> : undefined}
       renderItem={({ item }) => (
         <View>
           {/* Jour et bilan */}
           <View style={styles.header}>
-            <Text style={headerStyle}>{new DateFormat('d MMMM', traductions.localeName).format(new Date(`${item.jour}T00:00:00`))}</Text>
+            <Text style={headerStyle}>{transactionJourLibelle(traductions, item.jour)}</Text>
             <AmountWidget montant={item.bilanOperation} style={headerStyle} />
           </View>
           <View style={styles.gap8} />
@@ -104,6 +107,7 @@ export function TransactionSearchPageListe({
                 <TransactionListItemWidget
                   key={transaction.endToEndId}
                   transaction={transaction}
+                  datePartern="HH:mm"
                   onSelect={select != null ? (value: boolean) => select(transaction, value) : undefined}
                   isSelected={selectedItems?.some((t) => t.endToEndId === transaction.endToEndId) ?? false}
                 />

package/src/modules/transactions/presentation/pages/transaction_send/transaction_send_page_options.tsx

@@ -4,7 +4,7 @@ import { Images } from '../../../../../core/assets';
 import { useBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { MenuActionItem, MenuActionsWiget } from '../../../../../shared/widgets/menu_actions_widget';
+import { MenuActionItem, MenuActionsWidget } from '../../../../../shared/widgets/menu_actions_widget';
 import { AliasBloc } from '../../../../alias/presentation/bloc/alias_bloc';
 import { ContactPI } from '../../../../contacts/domain/contact_pi';
 import { TransactionCanal } from '../../../domain/models/transaction_canal';
@@ -66,12 +66,12 @@ export function TransactionSendPageOptions({ action }: { action: string }) {
 
   return (
     <View>
-      <MenuActionsWiget items={items} />
+      <MenuActionsWidget items={items} />
       {Platform.OS !== 'web' && (
         <>
           <View style={{ height: 5 }} />
           {/* Nouveau contact */}
-          <MenuActionsWiget
+          <MenuActionsWidget
             items={[
               new MenuActionItem(
                 Images.iconTransactionSendByNewContact,

package/src/shared/widgets/amount_widget.tsx

@@ -22,6 +22,7 @@ export function AmountWidget({
   surfixText,
   style,
   numberOfLines,
+  adjustsFontSizeToFit,
 }: {
   montant: number | null | undefined;
   sign?: string;
@@ -29,6 +30,8 @@ export function AmountWidget({
   surfixText?: string;
   style?: TextStyle;
   numberOfLines?: number;
+  /** Réduit la police pour que le texte tienne dans la largeur disponible (avec [numberOfLines]). */
+  adjustsFontSizeToFit?: boolean;
 }) {
   const locale = useAppLocalizations().localeName;
   const configBloc = useBloc(ConfigBloc);
@@ -45,7 +48,7 @@ export function AmountWidget({
   const text = `${prefix}${value}${suffix}`;
   if (displayAmount) {
     return (
-      <Text numberOfLines={numberOfLines} style={style}>
+      <Text numberOfLines={numberOfLines} adjustsFontSizeToFit={adjustsFontSizeToFit} style={style}>
         {text}
       </Text>
     );
@@ -56,7 +59,7 @@ export function AmountWidget({
   // transparent, d'où le flou porté par la vue.
   return (
     <View style={styles.hidden}>
-      <Text numberOfLines={numberOfLines} style={[style, styles.transparent]}>
+      <Text numberOfLines={numberOfLines} adjustsFontSizeToFit={adjustsFontSizeToFit} style={[style, styles.transparent]}>
         {text}
       </Text>
     </View>

package/src/shared/widgets/input_amount.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState, type ReactNode } from 'react';
-import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Text, TextInput, View, type TextInputInstance } from 'react-native';
 
 import { Themer, useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
@@ -60,7 +60,7 @@ export function InputAmount({
   const traductions = useAppLocalizations();
   const locale = traductions.localeName;
   const input = theme.inputDecorationTheme;
-  const ref = useRef<TextInput>(null);
+  const ref = useRef<TextInputInstance>(null);
   const [focused, setFocused] = useState(false);
   const [text, setText] = useState(() => formatSaisie(value ?? '', locale));
   const hasError = messageError != null && messageError.length > 0;

package/src/shared/widgets/input_text.tsx

@@ -1,5 +1,5 @@
-import { forwardRef, useRef, useState, type ReactNode } from 'react';
-import { StyleSheet, Text, TextInput, View, type KeyboardTypeOptions, type ReturnKeyTypeOptions } from 'react-native';
+import { forwardRef, useRef, useState, type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from 'react';
+import { StyleSheet, Text, TextInput, View, type KeyboardTypeOptions, type ReturnKeyTypeOptions, type TextInputInstance } from 'react-native';
 
 import { useTheme } from '../../core/theme';
 import { FloatingLabel } from './floating_label';
@@ -37,7 +37,12 @@ const HEIGHT = 56;
  * comme un `TextField` Material (le texte d'aide n'apparaît qu'au focus
  * quand il y a un label), et message d'erreur sous le champ.
  */
-export const CustomTextInput = forwardRef<TextInput, CustomTextInputProps>(function CustomTextInput(props, ref) {
+// Type annoté : celui inféré depuis React Native 0.88 n'est pas exportable
+// dans les déclarations du package.
+export const CustomTextInput: ForwardRefExoticComponent<CustomTextInputProps & RefAttributes<TextInputInstance>> = forwardRef<
+  TextInputInstance,
+  CustomTextInputProps
+>(function CustomTextInput(props, ref) {
   const theme = useTheme();
   const input = theme.inputDecorationTheme;
   const [focused, setFocused] = useState(false);

package/src/shared/widgets/menu_actions_widget.tsx

@@ -1,4 +1,5 @@
 import { Image } from 'expo-image';
+import type { ReactNode } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../core/theme';
@@ -7,21 +8,24 @@ import { Card } from '../material/card';
 export class MenuActionItem {
   readonly iconSize?: number;
   readonly color?: string;
+  /** Élément affiché à droite de la ligne (ex. une flèche). */
+  readonly trailing?: ReactNode;
 
   constructor(
     readonly icon: number,
     readonly title: string,
     readonly subtitle: string | null | undefined,
     readonly action: () => void,
-    options: { iconSize?: number; color?: string } = {},
+    options: { iconSize?: number; color?: string; trailing?: ReactNode } = {},
   ) {
     this.iconSize = options.iconSize;
     this.color = options.color;
+    this.trailing = options.trailing;
   }
 }
 
 /** Liste d'actions (icône, titre, sous-titre) dans une carte, comme des `ListTile` Material. */
-export function MenuActionsWiget({ items }: { items: MenuActionItem[] }) {
+export function MenuActionsWidget({ items }: { items: MenuActionItem[] }) {
   const theme = useTheme();
   return (
     <Card>
@@ -45,6 +49,7 @@ export function MenuActionsWiget({ items }: { items: MenuActionItem[] }) {
             <Text style={[theme.textTheme.headlineSmall, item.color ? { color: item.color } : null]}>{item.title}</Text>
             {item.subtitle != null && <Text style={theme.textTheme.displaySmall}>{item.subtitle}</Text>}
           </View>
+          {item.trailing != null && <View style={styles.trailing}>{item.trailing}</View>}
         </Pressable>
       ))}
     </Card>
@@ -55,4 +60,5 @@ const styles = StyleSheet.create({
   tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, minHeight: 72 },
   leading: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center', marginRight: 16 },
   texts: { flex: 1 },
+  trailing: { marginLeft: 16 },
 });

package/src/shared/widgets/pagination_loader_widget.tsx

@@ -0,0 +1,24 @@
+import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/**
+ * Petit loader affiché en bas d'une liste pendant le chargement de la page
+ * suivante (pagination). Sur iOS, le loader natif garde sa couleur
+ * système ; sur le web et Android, il prend la couleur primaire.
+ */
+export function PaginationLoaderWidget() {
+  const theme = useTheme();
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator
+        size="small"
+        color={Platform.OS === 'ios' ? undefined : theme.colorScheme.primary}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { paddingVertical: 16, alignItems: 'center', justifyContent: 'center' },
+});