@pi-spi/app 1.6.0 → 2.1.0

package/src/index.ts

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

package/src/l10n/app_localizations.ts

@@ -39,6 +39,10 @@ export interface AppLocalizations {
   readonly errorDialogOk: string;
   /** Unavailable */
   readonly indisponible: string;
+  /** Take a photo */
+  readonly imageSelectCamera: string;
+  /** Choose from gallery */
+  readonly imageSelectGalerie: string;
   /** It seems that you haven’t granted PI-SPI permission to access your location! */
   readonly locationErrorMessage: string;
   /** It seems that you haven't granted PI-SPI permission to send you notifications! */
@@ -603,6 +607,14 @@ export interface AppLocalizations {
   readonly transactionFormOthrPaysLabel: string;
   /** Financial institution */
   readonly transactionFormOthrNomLabel: string;
+  /** Search for a country */
+  readonly transactionFormOthrPaysRecherche: string;
+  /** No country found */
+  readonly transactionFormOthrPaysAucun: string;
+  /** Search for an institution */
+  readonly transactionFormOthrPspRecherche: string;
+  /** No institution found */
+  readonly transactionFormOthrPspAucune: string;
   /** Continue */
   readonly transactionFormContinueBtn: string;
   /** Save and make transfer */
@@ -871,6 +883,8 @@ export interface AppLocalizations {
   readonly transactionDetailsTicketCaisse: string;
   /** You can share the receipt */
   readonly transactionDetailsTicketCaisseSubtitle: string;
+  /** Share */
+  readonly transactionDetailsTicketPartager: string;
   /** Account */
   readonly transactionDetailsCompte: string;
   /** Institution */
@@ -915,6 +929,8 @@ export interface AppLocalizations {
   readonly transactionDetailsCancelRejectMessage: string;
   /** Send receipt */
   readonly transactionDetailsRecuTitle: string;
+  /** Issued on: */
+  readonly transactionDetailsRecuPdfEditeLe: string;
   /** You can download or share the PDF file */
   readonly transactionDetailsRecuSubTitle: string;
   /** Identifier */
@@ -1049,6 +1065,8 @@ export interface AppLocalizations {
   readonly qrcodePagePartageAliasTitle: string;
   /** Alias sharing */
   readonly qrcodePagePartageAliasSubTitle: string;
+  /** Add my number */
+  readonly qrcodePagePartageContactAjouterHint: string;
   /** Your contact */
   readonly qrcodePagePartageContactTitle: string;
   /** Share your alias contact */
@@ -1215,6 +1233,32 @@ export interface AppLocalizations {
   readonly appSettingPageMenuThemeDefault: string;
   /** Apparence */
   readonly appSettingPageMenuThemePageTitle: string;
+  /** Theme */
+  readonly appSettingPageThemeSection: string;
+  /** Accent colour */
+  readonly appSettingPageAccentSection: string;
+  /** Default */
+  readonly appSettingPageAccentDefaut: string;
+  /** Green */
+  readonly appSettingPageAccentVert: string;
+  /** Blue */
+  readonly appSettingPageAccentBleu: string;
+  /** Red */
+  readonly appSettingPageAccentRouge: string;
+  /** Orange */
+  readonly appSettingPageAccentOrange: string;
+  /** Purple */
+  readonly appSettingPageAccentViolet: string;
+  /** Pink */
+  readonly appSettingPageAccentRose: string;
+  /** Turquoise */
+  readonly appSettingPageAccentTurquoise: string;
+  /** Terracotta */
+  readonly appSettingPageAccentTerracotta: string;
+  /** Burgundy */
+  readonly appSettingPageAccentBordeaux: string;
+  /** Slate */
+  readonly appSettingPageAccentArdoise: string;
   /** My QR code by default */
   readonly appSettingPageMenuQrCodeTitle: string;
   /** Enable to display your QR Code by default */

package/src/l10n/app_localizations_en.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsEn: AppLocalizations = {
   reessayer: `Retry`,
   errorDialogOk: `Ok`,
   indisponible: `Unavailable`,
+  imageSelectCamera: `Take a photo`,
+  imageSelectGalerie: `Choose from gallery`,
   locationErrorMessage: `It seems that you haven’t granted PI-SPI permission to access your location!`,
   notificationErrorMessage: `It seems that you haven't granted PI-SPI permission to send you notifications!`,
   contactErrorMessage: `It looks like you haven't granted PI-SPI permission to access your contacts!`,
@@ -302,6 +304,10 @@ Check your Wi-Fi or mobile data, then tap Retry.`,
   transactionFormOthrMax: `The account number must not exceed 34 characters`,
   transactionFormOthrPaysLabel: `Country`,
   transactionFormOthrNomLabel: `Financial institution`,
+  transactionFormOthrPaysRecherche: `Search for a country`,
+  transactionFormOthrPaysAucun: `No country found`,
+  transactionFormOthrPspRecherche: `Search for an institution`,
+  transactionFormOthrPspAucune: `No institution found`,
   transactionFormContinueBtn: `Continue`,
   transactionFormSaveContactBtn: `Save and make transfer`,
   transactionFormVerificationTitle: `Confirmation`,
@@ -441,6 +447,7 @@ If this request comes from someone you trust, simply add their alias to your con
   transactionDetailsRecuPaiementPDFSousTitre: `You can download or share the PDF file`,
   transactionDetailsTicketCaisse: `Transaction Statement`,
   transactionDetailsTicketCaisseSubtitle: `You can share the receipt`,
+  transactionDetailsTicketPartager: `Share`,
   transactionDetailsCompte: `Account`,
   transactionDetailsInstitution: `Institution`,
   transactionDetailsRejet: `Reason for rejection`,
@@ -464,6 +471,7 @@ If this request comes from someone you trust, simply add their alias to your con
   transactionDetailsCancelReasonLabel: `Reason`,
   transactionDetailsCancelRejectMessage: `The cancellation request has been successfully rejected`,
   transactionDetailsRecuTitle: `Send receipt`,
+  transactionDetailsRecuPdfEditeLe: `Issued on:`,
   transactionDetailsRecuSubTitle: `You can download or share the PDF file`,
   transactionDetailsRecuInfoIdentifiant: `Identifier`,
   transactionDetailsRecuInfoReference: `Reference`,
@@ -535,6 +543,7 @@ Please try again later.`,
   qrcodePagePartageQrCodeSubTitle: `Share as picture`,
   qrcodePagePartageAliasTitle: `Share the alias`,
   qrcodePagePartageAliasSubTitle: `Alias sharing`,
+  qrcodePagePartageContactAjouterHint: `Add my number`,
   qrcodePagePartageContactTitle: `Your contact`,
   qrcodePagePartageContactSubTitle: `Share your alias contact`,
   qrcodePagePartageAliasMessage: (name: string) => `PI Alias of ${name}`,
@@ -619,6 +628,19 @@ Scanning will be automatic`,
   appSettingPageMenuThemeCustom: `App theme`,
   appSettingPageMenuThemeDefault: `System`,
   appSettingPageMenuThemePageTitle: `Apparence`,
+  appSettingPageThemeSection: `Theme`,
+  appSettingPageAccentSection: `Accent colour`,
+  appSettingPageAccentDefaut: `Default`,
+  appSettingPageAccentVert: `Green`,
+  appSettingPageAccentBleu: `Blue`,
+  appSettingPageAccentRouge: `Red`,
+  appSettingPageAccentOrange: `Orange`,
+  appSettingPageAccentViolet: `Purple`,
+  appSettingPageAccentRose: `Pink`,
+  appSettingPageAccentTurquoise: `Turquoise`,
+  appSettingPageAccentTerracotta: `Terracotta`,
+  appSettingPageAccentBordeaux: `Burgundy`,
+  appSettingPageAccentArdoise: `Slate`,
   appSettingPageMenuQrCodeTitle: `My QR code by default`,
   appSettingPageMenuQrCodeSelectTitle: `Enable to display your QR Code by default`,
   appSettingPageMenuQrCodeDeselectTitle: `Disable to display the camera by default`,

package/src/l10n/app_localizations_fr.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsFr: AppLocalizations = {
   reessayer: `Réessayez`,
   errorDialogOk: `Compris`,
   indisponible: `Indisponible`,
+  imageSelectCamera: `Prendre une photo`,
+  imageSelectGalerie: `Choisir dans la galerie`,
   locationErrorMessage: `Il semble que vous n’ayez pas accordé à PI-SPI l’autorisation d’accéder à votre localisation!`,
   notificationErrorMessage: `Il semble que vous n’ayez pas accordé à PI-SPI l’autorisation de vous envoyer des notifications!`,
   contactErrorMessage: `Il semble que vous n’ayez pas accordé à PI-SPI l’autorisation d’accéder à vos contacts!`,
@@ -302,6 +304,10 @@ Vérifiez votre Wi-Fi ou vos données mobiles puis appuyez sur Réessayer.`,
   transactionFormOthrMax: `Le numéro de compte ne doit pas excéder 34 caractères`,
   transactionFormOthrPaysLabel: `Pays`,
   transactionFormOthrNomLabel: `Institution financière`,
+  transactionFormOthrPaysRecherche: `Rechercher un pays`,
+  transactionFormOthrPaysAucun: `Aucun pays trouvé`,
+  transactionFormOthrPspRecherche: `Rechercher une institution`,
+  transactionFormOthrPspAucune: `Aucune institution trouvée`,
   transactionFormContinueBtn: `Continuer`,
   transactionFormSaveContactBtn: `Enregistrer et faire un transfert`,
   transactionFormVerificationTitle: `Confirmation`,
@@ -441,6 +447,7 @@ Si cette demande provient d'une personne de confiance, il vous suffit d'ajouter
   transactionDetailsRecuPaiementPDFSousTitre: `Vous pouvez partager ou télécharger le PDF`,
   transactionDetailsTicketCaisse: `Reçu réglé`,
   transactionDetailsTicketCaisseSubtitle: `Vous pouvez partager le ticket de caisse`,
+  transactionDetailsTicketPartager: `Partager`,
   transactionDetailsCompte: `Compte`,
   transactionDetailsInstitution: `Institution`,
   transactionDetailsRejet: `Raison du rejet`,
@@ -464,6 +471,7 @@ Si cette demande provient d'une personne de confiance, il vous suffit d'ajouter
   transactionDetailsCancelReasonLabel: `Raison`,
   transactionDetailsCancelRejectMessage: `La demande d’annulation est rejetée avec succès`,
   transactionDetailsRecuTitle: `Reçu de l'envoi`,
+  transactionDetailsRecuPdfEditeLe: `Edité le :`,
   transactionDetailsRecuSubTitle: `Vous pouvez partager ou télécharger le PDF`,
   transactionDetailsRecuInfoIdentifiant: `Identifiant`,
   transactionDetailsRecuInfoReference: `Référence`,
@@ -534,6 +542,7 @@ Merci de votre compréhension.`,
   qrcodePagePartageQrCodeSubTitle: `Partage de l’image`,
   qrcodePagePartageAliasTitle: `Votre alias`,
   qrcodePagePartageAliasSubTitle: `Partage de l’alias`,
+  qrcodePagePartageContactAjouterHint: `Ajouter mon numéro`,
   qrcodePagePartageContactTitle: `Votre contact`,
   qrcodePagePartageContactSubTitle: `Partager le contact de votre alias`,
   qrcodePagePartageAliasMessage: (name: string) => `Alias PI de ${name}`,
@@ -618,6 +627,19 @@ Le scan se fait automatiquement`,
   appSettingPageMenuThemeCustom: `Thème de l'application`,
   appSettingPageMenuThemeDefault: `Système`,
   appSettingPageMenuThemePageTitle: `Apparence`,
+  appSettingPageThemeSection: `Thème`,
+  appSettingPageAccentSection: `Couleur d'accentuation`,
+  appSettingPageAccentDefaut: `Défaut`,
+  appSettingPageAccentVert: `Vert`,
+  appSettingPageAccentBleu: `Bleu`,
+  appSettingPageAccentRouge: `Rouge`,
+  appSettingPageAccentOrange: `Orange`,
+  appSettingPageAccentViolet: `Violet`,
+  appSettingPageAccentRose: `Rose`,
+  appSettingPageAccentTurquoise: `Turquoise`,
+  appSettingPageAccentTerracotta: `Terracotta`,
+  appSettingPageAccentBordeaux: `Bordeaux`,
+  appSettingPageAccentArdoise: `Ardoise`,
   appSettingPageMenuQrCodeTitle: `Mon QR code par défaut`,
   appSettingPageMenuQrCodeSelectTitle: `Activer pour afficher votre QR Code par défaut`,
   appSettingPageMenuQrCodeDeselectTitle: `Désactiver pour afficher la caméra par défaut`,

package/src/l10n/app_localizations_pt.ts

@@ -19,6 +19,8 @@ export const AppLocalizationsPt: AppLocalizations = {
   reessayer: `Tente novamente`,
   errorDialogOk: `Entendi`,
   indisponible: `Indisponível`,
+  imageSelectCamera: `Tirar uma foto`,
+  imageSelectGalerie: `Escolher da galeria`,
   locationErrorMessage: `Parece que você não concedeu permissão para que o PI-SPI acesse a sua localização!`,
   notificationErrorMessage: `Parece que você não concedeu permissão ao PI-SPI para lhe enviar notificações!`,
   contactErrorMessage: `Parece que você não concedeu ao PI-SPI permissão para aceder aos seus contatos!`,
@@ -302,6 +304,10 @@ Verifique o Wi-Fi ou os dados móveis e toque em Tentar novamente.`,
   transactionFormOthrMax: `O número de conta não deve exceder 34 caracteres`,
   transactionFormOthrPaysLabel: `País`,
   transactionFormOthrNomLabel: `Instituição financeira`,
+  transactionFormOthrPaysRecherche: `Pesquisar um país`,
+  transactionFormOthrPaysAucun: `Nenhum país encontrado`,
+  transactionFormOthrPspRecherche: `Pesquisar uma instituição`,
+  transactionFormOthrPspAucune: `Nenhuma instituição encontrada`,
   transactionFormContinueBtn: `Continuar`,
   transactionFormSaveContactBtn: `Salvar e fazer um transferência`,
   transactionFormVerificationTitle: `Confirmação`,
@@ -441,6 +447,7 @@ Se este pedido for de uma pessoa de confiança, basta adicionar o alias aos seus
   transactionDetailsRecuPaiementPDFSousTitre: `Você pode compartilhar ou baixar o PDF`,
   transactionDetailsTicketCaisse: `Recebido pago`,
   transactionDetailsTicketCaisseSubtitle: `Você pode compartilhar o recibo`,
+  transactionDetailsTicketPartager: `Partilhar`,
   transactionDetailsCompte: `Conta`,
   transactionDetailsInstitution: `Instituição`,
   transactionDetailsRejet: `Motivo da rejeição`,
@@ -464,6 +471,7 @@ Se este pedido for de uma pessoa de confiança, basta adicionar o alias aos seus
   transactionDetailsCancelReasonLabel: `Razão`,
   transactionDetailsCancelRejectMessage: `A demanda de cancelamento foi rejeitada com sucesso`,
   transactionDetailsRecuTitle: `Recebido de envio`,
+  transactionDetailsRecuPdfEditeLe: `Emitido em:`,
   transactionDetailsRecuSubTitle: `Você pode compartilhar ou baixar o PDF`,
   transactionDetailsRecuInfoIdentifiant: `Identificador`,
   transactionDetailsRecuInfoReference: `Referência`,
@@ -535,6 +543,7 @@ Por favor, tente novamente mais tarde`,
   qrcodePagePartageQrCodeSubTitle: `Compartilhar a imagem`,
   qrcodePagePartageAliasTitle: `Seu alias`,
   qrcodePagePartageAliasSubTitle: `Compartilhamento de alias`,
+  qrcodePagePartageContactAjouterHint: `Adicionar o meu número`,
   qrcodePagePartageContactTitle: `Seu contato`,
   qrcodePagePartageContactSubTitle: `Compartilhar o contato do seu alias`,
   qrcodePagePartageAliasMessage: (name: string) => `Alias PI de ${name}`,
@@ -619,6 +628,19 @@ O scan é feito automaticamente`,
   appSettingPageMenuThemeCustom: `Tema da aplicação`,
   appSettingPageMenuThemeDefault: `Sistema`,
   appSettingPageMenuThemePageTitle: `Aparência`,
+  appSettingPageThemeSection: `Tema`,
+  appSettingPageAccentSection: `Cor de destaque`,
+  appSettingPageAccentDefaut: `Padrão`,
+  appSettingPageAccentVert: `Verde`,
+  appSettingPageAccentBleu: `Azul`,
+  appSettingPageAccentRouge: `Vermelho`,
+  appSettingPageAccentOrange: `Laranja`,
+  appSettingPageAccentViolet: `Roxo`,
+  appSettingPageAccentRose: `Rosa`,
+  appSettingPageAccentTurquoise: `Turquesa`,
+  appSettingPageAccentTerracotta: `Terracota`,
+  appSettingPageAccentBordeaux: `Bordô`,
+  appSettingPageAccentArdoise: `Ardósia`,
   appSettingPageMenuQrCodeTitle: `Meu QR Code por defeito`,
   appSettingPageMenuQrCodeSelectTitle: `Ativar para exibir o meu QR Code por defeito`,
   appSettingPageMenuQrCodeDeselectTitle: `Desativar para exibir a câmera por defeito`,

package/src/modules/categorie/presentation/pages/categorie_edit_icon_btn.tsx

@@ -1,6 +1,6 @@
 import { Image } from 'expo-image';
 import { useRef } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Images } from '../../../../core/assets';
@@ -9,10 +9,9 @@ import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../shared/material/buttons';
-import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { EmojiSelectWidget } from '../../../../shared/widgets/emoji_select_widget';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SbSelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 import { CategorieIconType } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
 import { CategorieAddValidationEvent, CategorieEditValidationEvent } from '../bloc/categorie_event';
@@ -25,7 +24,7 @@ export function CategorieEditIconBtn() {
   return (
     <Pressable
       accessibilityRole="button"
-      onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <CategorieEditIconOptions /> })}
+      onPress={() => void showModalBottomSheet(router, { builder: () => <CategorieEditIconOptions /> })}
       style={[styles.fab, { backgroundColor: theme.colorScheme.surface }]}
     >
       <Image source={Images.categorieImageSelect} style={styles.fabIcon} />
@@ -33,13 +32,10 @@ export function CategorieEditIconBtn() {
   );
 }
 
-/** Feuille des options d'icône : emoji (ou galerie, non disponible, comme en Flutter) */
+/** Feuille des options d'icône : emoji (ou galerie, non disponible, comme en Flutter). */
 function CategorieEditIconOptions() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const categorieBloc = useBloc(CategorieBloc);
 
   const selectEmoji = async () => {
@@ -63,25 +59,26 @@ function CategorieEditIconOptions() {
   };
 
   return (
-    <View style={[styles.sheet, { maxHeight: height * 0.5, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom }]}>
-      <ScrollView contentContainerStyle={styles.sheetContent}>
-        <Text style={[theme.textTheme.headlineMedium, styles.title]}>{traductions.categorieFormIconSheetTitle}</Text>
-        <Card>
-          <MenuActionsWidget
-            items={[
-              // Emoji
-              new MenuActionItem(Images.categorieIconEmoji, traductions.categorieFormIconSheetEmojiTitle, null, () => void selectEmoji(), {
-                iconSize: 20,
-              }),
-              // Choisir dans la galerie (sans action, comme dans le SDK Flutter)
-              new MenuActionItem(Images.categorieImageSelect, traductions.categorieFormIconSheetGalleryTitle, null, () => undefined, {
-                iconSize: 20,
-              }),
-            ]}
+    <SelectionSheet
+      titre={traductions.categorieFormIconSheetTitle}
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.optionsContent}>
+          {/* Emoji */}
+          <SbSelectionOption
+            image={Images.categorieIconEmoji}
+            titre={traductions.categorieFormIconSheetEmojiTitle}
+            onPress={() => void selectEmoji()}
           />
-        </Card>
-      </ScrollView>
-    </View>
+          <View style={styles.gap10} />
+          {/* Choisir dans la galerie (sans action, comme dans le SDK Flutter) */}
+          <SbSelectionOption
+            image={Images.categorieImageSelect}
+            titre={traductions.categorieFormIconSheetGalleryTitle}
+            onPress={() => undefined}
+          />
+        </ScrollView>
+      }
+    />
   );
 }
 
@@ -115,6 +112,7 @@ const styles = StyleSheet.create({
   fabIcon: { width: 24, height: 24 },
   sheet: { borderRadius: 20, overflow: 'hidden' },
   sheetContent: { padding: 20 },
-  title: { marginBottom: 20 },
+  optionsContent: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  gap10: { height: 10 },
   saveBtn: { paddingVertical: 20, paddingHorizontal: 4 },
 });

package/src/modules/config/domain/models/config_keys.ts

@@ -6,8 +6,10 @@ export enum ConfigKey {
   /** l'utilisateur a passé l'introduction */
   introductionPassed = 'INTRODUCTION_PASSED',
 
-  /** theme de l'utilisateur */
+  /** theme de l'utilisateur : système, clair ou sombre */
   preferedTheme = 'PREFERED_THEME',
+  /** Couleur d'accentuation (PI-SPI par défaut) */
+  preferedAccent = 'PREFERED_ACCENT',
 
   /** Permission notification */
   permissionNotification = 'PERMISSION_NOTIFICATION',

package/src/modules/config/domain/services/config_service.ts

@@ -1,6 +1,6 @@
 import type { ConfigInputPort } from '../../ports/input/config_input_port';
 import type { ConfigOutputPort } from '../../ports/output/config_output_port';
-import { configKeyValues } from '../models/config_keys';
+import { ConfigKey, configKeyValues } from '../models/config_keys';
 import type { ConfigParams } from '../models/config_params';
 
 /** Service contenant la logique de gestion des configurations */
@@ -11,9 +11,38 @@ export class ConfigService implements ConfigInputPort {
    */
   constructor(readonly configOutputPort: ConfigOutputPort) {}
 
+  /**
+   * Anciens thèmes de couleur, remplacés par le thème clair et une couleur
+   * d'accentuation (le jaune, trop proche de l'ambre, devient PI-SPI)
+   */
+  static readonly anciensThemes: Readonly<Record<string, string>> = {
+    yellowTheme: 'pispi',
+    greenTheme: 'vert',
+    blueTheme: 'bleu',
+    redTheme: 'rouge',
+    orangeTheme: 'orange',
+    purpleTheme: 'violet',
+    pinkTheme: 'rose',
+    // Thème personnalisé de l'hôte : sa couleur devient l'accent
+    customTheme: 'application',
+  };
+
   recuperer(): ConfigParams {
     // Récuperer toute la config et Appeler le systeme de stockage
-    return this.configOutputPort.recuperer([...configKeyValues]);
+    const config = this.configOutputPort.recuperer([...configKeyValues]);
+    this.migrerTheme(config);
+    return config;
+  }
+
+  /** Convertit une seule fois un ancien thème de couleur en thème clair et couleur d'accentuation, et l'enregistre */
+  private migrerTheme(config: ConfigParams): void {
+    const ancien = config.params[ConfigKey.preferedTheme];
+    const accent = ancien != null ? ConfigService.anciensThemes[ancien] : undefined;
+    if (accent == null) return;
+    config.params[ConfigKey.preferedTheme] = 'lightTheme';
+    config.params[ConfigKey.preferedAccent] = accent;
+    void this.configOutputPort.modifier(ConfigKey.preferedTheme, 'lightTheme');
+    void this.configOutputPort.modifier(ConfigKey.preferedAccent, accent);
   }
 
   async modifier(key: string, value: string): Promise<void> {

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

@@ -75,7 +75,7 @@ export function HomeTabCompte() {
             <CtaWidget
               icon={(color) => <MaterialIcons name="more-horiz" size={30} color={color} />}
               label={traductions.homeActionMore}
-              action={hasAlias ? () => void showModalBottomSheet(router, { themed: true, builder: () => <HomeTabCompteMoreMenu /> }) : null}
+              action={hasAlias ? () => void showModalBottomSheet(router, { builder: () => <HomeTabCompteMoreMenu /> }) : null}
             />
           </View>
           <View style={styles.gap14} />

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

@@ -1,71 +1,63 @@
-import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { Card } from '../../../../shared/material/card';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SelectionSheet } from '../../../../shared/widgets/selection';
+import { ProfileMenuTile, ProfilePageMenu } from '../../../profile/presentation/pages/profile_menu';
 
 /**
  * Menu « Plus » de l'accueil. Le participant peut personnaliser ce menu
  * pour y ajouter des fonctionnalités propres à son système.
+ * Même feuille que celles du profil : à ouvrir avec showModalBottomSheet
+ * sans `themed`, la feuille dessine elle-même son fond.
  */
 export function HomeTabCompteMoreMenu() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   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.7, backgroundColor: theme.colorScheme.surface, paddingBottom: 20 + insets.bottom },
-      ]}
-    >
-      <Card>
-        <ScrollView>
-          <MenuActionsWidget
+    <SelectionSheet
+      contenu={
+        <View style={styles.contenu}>
+          <ProfilePageMenu
             items={[
               // Programmer un paiement
-              new MenuActionItem(
-                Images.homeFooterTransfer,
-                traductions.homeActionMoreSheetProgrammerTitle,
-                traductions.homeActionMoreSheetProgrammerSubTitle,
-                () => open(AppRouter.subscriptionSchedule),
-                { iconSize: 20 },
-              ),
+              <ProfileMenuTile
+                key="programmer"
+                image={Images.homeFooterTransfer}
+                titre={traductions.homeActionMoreSheetProgrammerTitle}
+                sousTitre={traductions.homeActionMoreSheetProgrammerSubTitle}
+                onPress={() => open(AppRouter.subscriptionSchedule)}
+              />,
               // Trouver un abonnement
-              new MenuActionItem(
-                Images.homeMoreFindSubscription,
-                traductions.homeActionMoreSheetAbonnementTitle,
-                traductions.homeActionMoreSheetAbonnementSubTitle,
-                () => open(AppRouter.subscriptionSubscribe),
-                { iconSize: 20 },
-              ),
+              <ProfileMenuTile
+                key="abonnement"
+                image={Images.homeMoreFindSubscription}
+                titre={traductions.homeActionMoreSheetAbonnementTitle}
+                sousTitre={traductions.homeActionMoreSheetAbonnementSubTitle}
+                onPress={() => open(AppRouter.subscriptionSubscribe)}
+              />,
               // Partager dépenses
-              new MenuActionItem(
-                Images.homeMoreSplitPayments,
-                traductions.homeActionMoreSheetPartagerTitle,
-                traductions.homeActionMoreSheetPartagerSubTitle,
-                () => open(AppRouter.transactionSplitPaymentTx),
-                { iconSize: 20 },
-              ),
+              <ProfileMenuTile
+                key="partager"
+                image={Images.homeMoreSplitPayments}
+                titre={traductions.homeActionMoreSheetPartagerTitle}
+                sousTitre={traductions.homeActionMoreSheetPartagerSubTitle}
+                onPress={() => open(AppRouter.transactionSplitPaymentTx)}
+              />,
             ]}
           />
-        </ScrollView>
-      </Card>
-    </View>
+        </View>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, paddingTop: 20, paddingHorizontal: 20 },
+  contenu: { paddingHorizontal: 16, paddingTop: 8, paddingBottom: 20 },
 });

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

@@ -46,10 +46,7 @@ function menuItems(traductions: AppLocalizations, configParams: ConfigParams): P
   if (Di.config.appConfig.canChangeTheme) {
     items.push(
       new ProfileItem(Images.iconsTheme, traductions.appSettingPageMenuThemeTitle, AppRouter.profileParametreTheme, {
-        subtitle:
-          params[ConfigKey.preferedTheme] === Themer.customThemeCode
-            ? traductions.appSettingPageMenuThemeCustom
-            : Themes.label(theme, traductions),
+        subtitle: `${Themes.label(theme, traductions)} · ${Themer.accentLabel(traductions, params[ConfigKey.preferedAccent])}`,
       }),
     );
   }
@@ -76,7 +73,7 @@ export function ProfileParametrePage() {
     (_p, current) =>
       current instanceof ConfigLoadedState &&
       current.updatedKey != null &&
-      [ConfigKey.showQRcode, ConfigKey.preferedTheme, ConfigKey.notificationStatus, ConfigKey.notificationAlertSound].includes(
+      [ConfigKey.showQRcode, ConfigKey.preferedTheme, ConfigKey.preferedAccent, ConfigKey.notificationStatus, ConfigKey.notificationAlertSound].includes(
         current.updatedKey,
       ),
   );

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

@@ -4,7 +4,7 @@ import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { SbSelectionSheet } from '../../../../../shared/widgets/selection';
+import { SelectionSheet } from '../../../../../shared/widgets/selection';
 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';
@@ -25,7 +25,7 @@ export function ProfileParametrePageQRcode() {
   const basculer = () => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'));
 
   return (
-    <SbSelectionSheet
+    <SelectionSheet
       titre={traductions.appSettingPageMenuQrCodeTitle}
       entete={
         <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>