@pi-spi/app 1.4.0 → 1.5.1

package/src/core/pi_spi_custom_theme.ts

@@ -0,0 +1,66 @@
+import { Themer, lerpColor, type ThemeData } from './theme';
+
+/**
+ * Thème personnalisé de l'application hôte, quand aucun des thèmes du SDK
+ * (`Themes`) ne convient. À passer dans `PiSpiAppConfig.customTheme`.
+ *
+ * Deux façons de le définir :
+ *
+ * - **Par ses couleurs** (cas courant) : le SDK construit un thème complet
+ *   sur le même modèle que ses thèmes clairs colorés (rouge, violet,
+ *   rose...). Seule `primary` est obligatoire ; les autres couleurs en sont
+ *   dérivées si elles ne sont pas fournies.
+ *
+ *   ```ts
+ *   new PiSpiCustomTheme({ primary: '#00695C', secondary: '#B2DFDB' })
+ *   ```
+ *
+ * - **Par un `ThemeData` complet** (avancé), avec
+ *   `PiSpiCustomTheme.themeData`. Partez de préférence du thème construit
+ *   par le SDK, pour conserver tous les réglages dont ses écrans ont
+ *   besoin (cartes, champs, boutons, textes) :
+ *
+ *   ```ts
+ *   const base = new PiSpiCustomTheme({ primary: '#00695C' }).build();
+ *   PiSpiCustomTheme.themeData({ ...base, cardColor: '#F1F8F7' })
+ *   ```
+ */
+export class PiSpiCustomTheme {
+  /** Couleur principale (`#RRGGBB`) : boutons, liens, icônes, champ actif. */
+  readonly primary?: string;
+  /** Couleur claire : avatars, puces de filtre, fonds secondaires. Par défaut, `primary` éclaircie à 75 %. */
+  readonly secondary?: string;
+  /** Couleur intermédiaire (tertiaire du schéma de couleurs). Par défaut, `primary` éclaircie à 40 %. */
+  readonly tertiary?: string;
+  /** Couleur d'un bouton appuyé. Par défaut, `primary` assombrie à 20 %. */
+  readonly pressed?: string;
+
+  private themeDataValue?: ThemeData;
+
+  /** Thème construit à partir de ses couleurs. */
+  constructor(params: { primary: string; secondary?: string; tertiary?: string; pressed?: string }) {
+    this.primary = params.primary;
+    this.secondary = params.secondary;
+    this.tertiary = params.tertiary;
+    this.pressed = params.pressed;
+  }
+
+  /** Thème fourni entièrement par l'hôte (usage avancé, voir la documentation de la classe). */
+  static themeData(theme: ThemeData): PiSpiCustomTheme {
+    const custom = new PiSpiCustomTheme({ primary: theme.primaryColor });
+    custom.themeDataValue = theme;
+    return custom;
+  }
+
+  /** Le `ThemeData` appliqué aux écrans du SDK. */
+  build(): ThemeData {
+    if (this.themeDataValue != null) return this.themeDataValue;
+    const main = this.primary!;
+    return Themer.colored(
+      main,
+      this.secondary ?? lerpColor(main, '#FFFFFF', 0.75),
+      this.tertiary ?? lerpColor(main, '#FFFFFF', 0.4),
+      this.pressed ?? lerpColor(main, '#000000', 0.2),
+    );
+  }
+}

package/src/core/pi_spi_sdk_config.ts

@@ -1,4 +1,5 @@
 import { supportedLocales, type SupportedLocaleCode } from '../l10n/app_localizations';
+import type { PiSpiCustomTheme } from './pi_spi_custom_theme';
 import { Themes } from './theme';
 
 /**
@@ -155,18 +156,32 @@ export class PiSpiApiConfig {
    */
   readonly demoMode: boolean;
 
+  /**
+   * Clé d'API optionnelle, envoyée dans l'en-tête {@link apiKeyHeader} de
+   * chaque requête (en plus du token d'accès), quand la passerelle du
+   * participant en exige une. `undefined` : aucun en-tête n'est ajouté.
+   */
+  readonly apiKey?: string;
+
+  /** Nom de l'en-tête HTTP qui porte {@link apiKey}. Par défaut `X-API-Key`. */
+  readonly apiKeyHeader: string;
+
   constructor(params: {
     apiBaseUrl: string;
     accessToken: string;
     onAccessTokenExpired: () => Promise<string | null>;
     onSessionExpired: () => Promise<void>;
     demoMode?: boolean;
+    apiKey?: string;
+    apiKeyHeader?: string;
   }) {
     this.apiBaseUrl = params.apiBaseUrl;
     this.accessToken = params.accessToken;
     this.onAccessTokenExpired = params.onAccessTokenExpired;
     this.onSessionExpired = params.onSessionExpired;
     this.demoMode = params.demoMode ?? false;
+    this.apiKey = params.apiKey;
+    this.apiKeyHeader = params.apiKeyHeader ?? 'X-API-Key';
   }
 }
 
@@ -214,6 +229,18 @@ export class PiSpiAppConfig {
    */
   readonly defaultTheme?: Themes;
 
+  /**
+   * Thème personnalisé de l'application hôte, quand aucun des thèmes du
+   * SDK (`Themes`) ne convient : défini par ses couleurs ou par un
+   * `ThemeData` complet (voir {@link PiSpiCustomTheme}). Optionnel : si
+   * fourni, il est appliqué et **persisté** à chaque ouverture du SDK, et
+   * il prime sur {@link defaultTheme}. L'entrée « Thème » des paramètres
+   * est alors masquée, sauf si {@link canChangeTheme} vaut `true` : le
+   * client peut alors choisir entre « Thème de l'application » (ce thème)
+   * et les thèmes du SDK.
+   */
+  readonly customTheme?: PiSpiCustomTheme;
+
   /**
    * Autorise le client à changer lui-même de thème depuis les écrans de
    * paramètres du SDK ; sinon (`false`), l'entrée « Thème » y est
@@ -221,8 +248,8 @@ export class PiSpiAppConfig {
    * la préférence déjà persistée, voir sa documentation) pour toute la
    * session — comme pour {@link defaultLocale}.
    *
-   * Non fourni, sa valeur par défaut dépend de {@link defaultTheme} :
-   * `false` si l'hôte a fourni un `defaultTheme` (il impose alors ce
+   * Non fourni, sa valeur par défaut dépend de {@link defaultTheme} et de
+   * {@link customTheme} : `false` si l'hôte a fourni l'un des deux (il impose alors ce
    * thème, cohérent avec le comportement de `defaultLocale`), `true` sinon
    * (l'hôte n'a exprimé aucun avis sur le thème, donc autant laisser le
    * client choisir). Passez explicitement `true`/`false` pour imposer un
@@ -241,6 +268,7 @@ export class PiSpiAppConfig {
     appstoreLink?: string;
     defaultLocale?: SupportedLocaleCode;
     defaultTheme?: Themes;
+    customTheme?: PiSpiCustomTheme;
     canChangeTheme?: boolean;
   }) {
     this.pspCodeMembre = params.pspCodeMembre;
@@ -253,7 +281,8 @@ export class PiSpiAppConfig {
     this.appstoreLink = params.appstoreLink ?? '';
     this.defaultLocale = params.defaultLocale ?? 'fr';
     this.defaultTheme = params.defaultTheme;
-    this.canChangeTheme = params.canChangeTheme ?? params.defaultTheme === undefined;
+    this.customTheme = params.customTheme;
+    this.canChangeTheme = params.canChangeTheme ?? (params.defaultTheme === undefined && params.customTheme === undefined);
 
     devAssert(
       (PiSpiAppConfig.supportedLocaleCodes as readonly string[]).includes(this.defaultLocale),

package/src/core/theme.ts

@@ -384,6 +384,29 @@ export class Themer {
     switchActiveTrack: Themer.primary,
   };
 
+  /** Code enregistré comme thème préféré quand l'hôte fournit un thème personnalisé (`PiSpiAppConfig.customTheme`). */
+  static readonly customThemeCode = 'customTheme';
+
+  /** Thème personnalisé de l'hôte, construit à l'ouverture du SDK (voir `Di.init`) ; `null` sans thème personnalisé. */
+  static customTheme: ThemeData | null = null;
+
+  /**
+   * Thème clair construit à partir de couleurs (thème personnalisé de
+   * l'hôte, voir `PiSpiCustomTheme`) : même modèle que les thèmes rouge,
+   * violet ou rose, avec le texte des boutons en blanc ou en noir selon la
+   * luminosité de [primary].
+   */
+  static colored(primary: string, secondary: string, tertiary: string, pressed: string): ThemeData {
+    const onPrimary = relativeLuminance(primary) > 0.5 ? Themer.blackColor : Themer.whiteColor;
+    return Themer.build(
+      Themer.coloredSpec(primary, secondary, tertiary, {
+        schemeOnPrimary: onPrimary,
+        buttonPressed: pressed,
+        buttonForeground: onPrimary,
+      }),
+    );
+  }
+
   /** Variante claire monochrome (même structure pour jaune, bleu, vert, rouge, orange, violet). */
   private static coloredSpec(
     main: string,
@@ -486,6 +509,8 @@ export class Themer {
    * ponctuellement via `Appearance`.
    */
   static get(code: string | null | undefined, systemScheme?: ColorSchemeName | null): ThemeData {
+    // Thème personnalisé de l'hôte
+    if (code === Themer.customThemeCode && Themer.customTheme != null) return Themer.customTheme;
     switch (code) {
       case Themes.light:
         return Themer.lightTheme;
@@ -523,3 +548,31 @@ export const ThemeContext = createContext<ThemeData>(Themer.lightTheme);
 export function useTheme(): ThemeData {
   return useContext(ThemeContext);
 }
+
+/** Composantes RGB (0-255) d'une couleur `#RRGGBB` */
+export function hexToRgb(hex: string): [number, number, number] {
+  const value = hex.replace('#', '');
+  const full = value.length === 3 ? value.split('').map((c) => c + c).join('') : value.substring(0, 6);
+  return [0, 2, 4].map((i) => parseInt(full.substring(i, i + 2), 16)) as [number, number, number];
+}
+
+/** Couleur `#RRGGBB` à partir de ses composantes RGB */
+export function rgbToHex([r, g, b]: [number, number, number]): string {
+  return `#${[r, g, b].map((c) => Math.round(Math.min(255, Math.max(0, c))).toString(16).padStart(2, '0')).join('').toUpperCase()}`;
+}
+
+/** Mélange [from] vers [to] à [t] (0 = from, 1 = to), comme `Color.lerp` en Flutter */
+export function lerpColor(from: string, to: string, t: number): string {
+  const a = hexToRgb(from);
+  const b = hexToRgb(to);
+  return rgbToHex([0, 1, 2].map((i) => a[i] + (b[i] - a[i]) * t) as [number, number, number]);
+}
+
+/** Luminance relative (0 à 1), comme `Color.computeLuminance` en Flutter */
+export function relativeLuminance(hex: string): number {
+  const [r, g, b] = hexToRgb(hex).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}

package/src/index.ts

@@ -21,7 +21,8 @@ export {
   PiSpiLogConfig,
   type PiSpiLogLevel,
 } from './core/pi_spi_sdk_config';
-export { Themes } from './core/theme';
+export { PiSpiCustomTheme } from './core/pi_spi_custom_theme';
+export { Themes, type ThemeData } from './core/theme';
 export {
   type AppLocalizations,
   type SupportedLocaleCode,

package/src/l10n/app_localizations.ts

@@ -487,6 +487,10 @@ export interface AppLocalizations {
   readonly homeActionMoreSheetAWidgetSubTitle: string;
   /** See All */
   readonly transactionsSeeAll: string;
+  /** Today */
+  readonly transactionsAujourdhui: string;
+  /** Yesterday */
+  readonly transactionsHier: string;
   /** Search for a contact */
   readonly transactionsSendInputHint: string;
   /** Use Alias */
@@ -1205,6 +1209,8 @@ export interface AppLocalizations {
   readonly appSettingPageMenuThemePurple: string;
   /** Pink */
   readonly appSettingPageMenuThemePink: string;
+  /** App theme */
+  readonly appSettingPageMenuThemeCustom: string;
   /** System */
   readonly appSettingPageMenuThemeDefault: string;
   /** Apparence */

package/src/l10n/app_localizations_en.ts

@@ -244,6 +244,8 @@ Check your Wi-Fi or mobile data, then tap Retry.`,
   homeActionMoreSheetWidgetTitle: `Add Widget`,
   homeActionMoreSheetAWidgetSubTitle: `Manage widgets for home`,
   transactionsSeeAll: `See All`,
+  transactionsAujourdhui: `Today`,
+  transactionsHier: `Yesterday`,
   transactionsSendInputHint: `Search for a contact`,
   transactionsSendOptionAliasTitle: `Use Alias`,
   transactionsSendOptionAliasBSubtitle: `Payment address or phone no.`,
@@ -614,6 +616,7 @@ Scanning will be automatic`,
   appSettingPageMenuThemeOrange: `Orange`,
   appSettingPageMenuThemePurple: `Purple`,
   appSettingPageMenuThemePink: `Pink`,
+  appSettingPageMenuThemeCustom: `App theme`,
   appSettingPageMenuThemeDefault: `System`,
   appSettingPageMenuThemePageTitle: `Apparence`,
   appSettingPageMenuQrCodeTitle: `My QR code by default`,

package/src/l10n/app_localizations_fr.ts

@@ -244,6 +244,8 @@ Vérifiez votre Wi-Fi ou vos données mobiles puis appuyez sur Réessayer.`,
   homeActionMoreSheetWidgetTitle: `Ajouter un widget`,
   homeActionMoreSheetAWidgetSubTitle: `Gérer les widgets de l’écran principal`,
   transactionsSeeAll: `Tout afficher`,
+  transactionsAujourdhui: `Aujourd’hui`,
+  transactionsHier: `Hier`,
   transactionsSendInputHint: `Rechercher un contact`,
   transactionsSendOptionAliasTitle: `Par alias`,
   transactionsSendOptionAliasBSubtitle: `Adresse de paiement ou n° de téléphone`,
@@ -613,6 +615,7 @@ Le scan se fait automatiquement`,
   appSettingPageMenuThemeOrange: `Orange`,
   appSettingPageMenuThemePurple: `Violet`,
   appSettingPageMenuThemePink: `Rose`,
+  appSettingPageMenuThemeCustom: `Thème de l'application`,
   appSettingPageMenuThemeDefault: `Système`,
   appSettingPageMenuThemePageTitle: `Apparence`,
   appSettingPageMenuQrCodeTitle: `Mon QR code par défaut`,

package/src/l10n/app_localizations_pt.ts

@@ -244,6 +244,8 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   homeActionMoreSheetWidgetTitle: `Adicionar um widget`,
   homeActionMoreSheetAWidgetSubTitle: `Gerenciar os widgets do ecrã principal`,
   transactionsSeeAll: `Todas as transações`,
+  transactionsAujourdhui: `Hoje`,
+  transactionsHier: `Ontem`,
   transactionsSendInputHint: `Pesquisar um contato`,
   transactionsSendOptionAliasTitle: `Por alias`,
   transactionsSendOptionAliasBSubtitle: `Endereço de pagamento ou n° de telefone`,
@@ -614,6 +616,7 @@ O scan é feito automaticamente`,
   appSettingPageMenuThemeOrange: `Laranja`,
   appSettingPageMenuThemePurple: `Roxo`,
   appSettingPageMenuThemePink: `Rosa`,
+  appSettingPageMenuThemeCustom: `Tema da aplicação`,
   appSettingPageMenuThemeDefault: `Sistema`,
   appSettingPageMenuThemePageTitle: `Aparência`,
   appSettingPageMenuQrCodeTitle: `Meu QR Code por defeito`,

package/src/modules/home/presentation/pages/home_tab_compte.tsx

@@ -90,7 +90,7 @@ export function HomeTabCompte() {
 
 const styles = StyleSheet.create({
   content: { paddingHorizontal: 16, paddingVertical: 12 },
-  actions: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16 },
+  actions: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
   gap10: { height: 10 },
   gap14: { height: 14 },
   gap16: { height: 16 },

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/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_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/transactions/domain/models/transaction_send/transaction_send_command.ts

@@ -4,7 +4,7 @@ import { TransactionActions } from './transaction_actions';
 import { TransactionSendCommandAlias } from './transaction_send_command_alias';
 import { TransactionSendCommandAmount } from './transaction_send_command_amount';
 import type { TransactionSendCommandContact } from './transaction_send_command_contact';
-import type { TransactionSendCommandMotif } from './transaction_send_command_motif';
+import { TransactionSendCommandMotif } from './transaction_send_command_motif';
 import { TransactionSendCommandOthr } from './transaction_send_command_othr';
 import type { TransactionSendCommandSchedule } from './transaction_send_command_schedule';
 import { TransactionSendMethod } from './transaction_send_method';
@@ -109,7 +109,7 @@ export class TransactionSendCommand {
       longitude: this.longitude ?? null,
     };
     if (this.txId != null) json.txId = this.txId;
-    if (this.motif != null) json.motif = this.motif.value ?? null;
+    if (this.motif?.value != null && this.motif.value.length > 0) json.motif = this.motif.value;
     if (this.schedule != null) {
       json.dateDebut = this.schedule.dateDebut;
       if (this.schedule.frequence != null) {
@@ -163,6 +163,10 @@ export class TransactionSendCommand {
       pspPays: transaction.clientPays,
       pspNom: transaction.clientPSPNom,
       amount: new TransactionSendCommandAmount({ action, value: transaction.montant }),
+      motif:
+        transaction.motif != null && !transaction.motif.startsWith('@')
+          ? new TransactionSendCommandMotif({ value: transaction.motif })
+          : undefined,
     });
   }
 }

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_input_motif.tsx

@@ -12,14 +12,17 @@ import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/tra
 export function TransactionFormInputMotif({
   command,
   transactionFormBloc,
+  readOnly = false,
 }: {
   command: TransactionSendCommand;
   transactionFormBloc: TransactionSendBloc;
+  readOnly?: boolean;
 }) {
   const traductions = useAppLocalizations();
   return (
     <CustomTextMultipleInput
       labelText={traductions.transactionFormMotifHint}
+      readOnly={readOnly}
       defaultValue={command.motif?.value}
       messageError={command.motif?.error === TransactionSendCommandMotifError.invalid ? traductions.transactionFormMotifInvalid : ''}
       onChange={(value) => {

package/src/modules/transactions/presentation/pages/transaction_jour_libelle.ts

@@ -0,0 +1,17 @@
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { DateFormat } from '../../../../shared/utils/date_format';
+
+/** « Aujourd'hui », « Hier » ou la date du jour [jour] (aaaa-mm-jj) */
+export function transactionJourLibelle(traductions: AppLocalizations, jour: string): string {
+  const date = new Date(`${jour}T00:00:00`);
+  const maintenant = new Date();
+  // En UTC : pas de journée de 23 h aux changements d'heure
+  const ecart = Math.round(
+    (Date.UTC(maintenant.getFullYear(), maintenant.getMonth(), maintenant.getDate()) -
+      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())) /
+      86400000,
+  );
+  if (ecart === 0) return traductions.transactionsAujourdhui;
+  if (ecart === 1) return traductions.transactionsHier;
+  return new DateFormat('d MMMM y', traductions.localeName).format(date);
+}

package/src/modules/transactions/presentation/pages/transaction_list_item_widget.tsx

@@ -16,12 +16,14 @@ import { TransactionSens, type Transaction } from '../../domain/models/transacti
  */
 export function TransactionListItemWidget({
   transaction,
+  datePartern = 'd MMM, HH:mm',
   detailsBackRoute,
   noLink,
   onSelect,
   isSelected,
 }: {
   transaction: Transaction;
+  datePartern?: string;
   detailsBackRoute?: string;
   noLink?: boolean;
   onSelect?: (value: boolean) => void;
@@ -65,7 +67,7 @@ export function TransactionListItemWidget({
         {/* Date d'irrévocabilité */}
         {transaction.dateOperation != null && (
           <Text style={[theme.textTheme.displaySmall, { color: Themer.neural04Color }]}>
-            {new DateFormat('d MMM, HH:mm', locale).format(transaction.dateOperation)}
+            {new DateFormat(datePartern, locale).format(transaction.dateOperation)}
           </Text>
         )}
       </View>