@pi-spi/app 1.5.1 → 2.0.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

@@ -915,6 +915,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 */
@@ -1215,6 +1217,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 */
@@ -1389,6 +1417,28 @@ export interface AppLocalizations {
   readonly searchVoicePrompt: string;
   /** Voice search is not available. Check microphone access in settings. */
   readonly searchVoiceUnavailable: string;
+  /** Profile */
+  readonly profilePageTitle: string;
+  /** My account */
+  readonly profilePageSectionCompte: string;
+  /** Support */
+  readonly profilePageSectionAssistance: string;
+  /** Preferences */
+  readonly appSettingPageSectionPreferences: string;
+  /** Danger zone */
+  readonly comptePageSectionZoneSensible: string;
+  /** Notifications */
+  readonly searchNotificationsTitle: string;
+  /** App theme */
+  readonly searchThemeTitle: string;
+  /** Notification settings */
+  readonly searchNotificationsParametreTitle: string;
+  /** View the notifications received */
+  readonly searchNotificationsSubTitle: string;
+  /** Light, dark or system, and colour */
+  readonly searchThemeSubTitle: string;
+  /** Notification style, sound and vibration */
+  readonly searchNotificationsParametreSubTitle: string;
 }
 
 export const supportedLocales = ['fr', 'en', 'pt'] as const;

package/src/l10n/app_localizations_en.ts

@@ -464,6 +464,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`,
@@ -619,6 +620,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`,
@@ -706,4 +720,15 @@ Scanning will be automatic`,
   searchVoiceListening: `Listening…`,
   searchVoicePrompt: `Tell me what you would like to do`,
   searchVoiceUnavailable: `Voice search is not available. Check microphone access in settings.`,
+  profilePageTitle: `Profile`,
+  profilePageSectionCompte: `My account`,
+  profilePageSectionAssistance: `Support`,
+  appSettingPageSectionPreferences: `Preferences`,
+  comptePageSectionZoneSensible: `Danger zone`,
+  searchNotificationsTitle: `Notifications`,
+  searchThemeTitle: `App theme`,
+  searchNotificationsParametreTitle: `Notification settings`,
+  searchNotificationsSubTitle: `View the notifications received`,
+  searchThemeSubTitle: `Light, dark or system, and colour`,
+  searchNotificationsParametreSubTitle: `Notification style, sound and vibration`,
 };

package/src/l10n/app_localizations_fr.ts

@@ -464,6 +464,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`,
@@ -618,6 +619,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`,
@@ -705,4 +719,15 @@ Le scan se fait automatiquement`,
   searchVoiceListening: `Je vous écoute…`,
   searchVoicePrompt: `Dites-moi ce que vous souhaitez faire`,
   searchVoiceUnavailable: `La recherche vocale n’est pas disponible. Vérifiez l’accès au micro dans les réglages.`,
+  profilePageTitle: `Profil`,
+  profilePageSectionCompte: `Mon compte`,
+  profilePageSectionAssistance: `Assistance`,
+  appSettingPageSectionPreferences: `Préférences`,
+  comptePageSectionZoneSensible: `Zone sensible`,
+  searchNotificationsTitle: `Notifications`,
+  searchThemeTitle: `Thème de l'application`,
+  searchNotificationsParametreTitle: `Réglages des notifications`,
+  searchNotificationsSubTitle: `Consulter les notifications reçues`,
+  searchThemeSubTitle: `Clair, sombre ou celui du système, et couleur`,
+  searchNotificationsParametreSubTitle: `Style, son et vibration des notifications`,
 };

package/src/l10n/app_localizations_pt.ts

@@ -464,6 +464,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`,
@@ -619,6 +620,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`,
@@ -706,4 +720,15 @@ O scan é feito automaticamente`,
   searchVoiceListening: `Estou a ouvir…`,
   searchVoicePrompt: `Diga-me o que deseja fazer`,
   searchVoiceUnavailable: `A pesquisa por voz não está disponível. Verifique o acesso ao microfone nas definições.`,
+  profilePageTitle: `Perfil`,
+  profilePageSectionCompte: `A minha conta`,
+  profilePageSectionAssistance: `Assistência`,
+  appSettingPageSectionPreferences: `Preferências`,
+  comptePageSectionZoneSensible: `Zona sensível`,
+  searchNotificationsTitle: `Notificações`,
+  searchThemeTitle: `Tema da aplicação`,
+  searchNotificationsParametreTitle: `Definições das notificações`,
+  searchNotificationsSubTitle: `Consultar as notificações recebidas`,
+  searchThemeSubTitle: `Claro, escuro ou o do sistema, e cor`,
+  searchNotificationsParametreSubTitle: `Estilo, som e vibração das notificações`,
 };

package/src/modules/alias/presentation/pages/alias_delete_btn_widget.tsx

@@ -1,17 +1,17 @@
 import { useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { useBloc, useBlocListener } from '../../../../core/bloc_react';
 import { Di } from '../../../../core/di';
 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 { showDialog, showModalBottomSheet } from '../../../../shared/material/overlays';
 import { CustomAlertDialog } from '../../../../shared/widgets/custom_alert_dialog';
 import { CustomLoadingDialog } from '../../../../shared/widgets/loading_page';
-import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
 import { NotificationDialog, NotificationType } from '../../../../shared/widgets/notification_dialog';
+import { ProfileMenuTile } from '../../../profile/presentation/pages/profile_menu';
 import { AliasType } from '../../domain/models/alias_type';
 import { AliasBloc } from '../bloc/alias_bloc';
 import { AliasDeleteEvent } from '../bloc/alias_event';
@@ -79,18 +79,19 @@ export function AliasDeleteBtnWidget() {
     });
   };
 
+  // Ligne de menu du profil, en rouge
   return (
-    <View style={styles.bottom}>
-      <MyPageContainer style={styles.noFlex}>
-        <ElevatedButton onPress={onPress} style={{ backgroundColor: theme.secondaryHeaderColor }}>
-          {traductions.compteDetailsPageBtnSupprimer}
-        </ElevatedButton>
-      </MyPageContainer>
-    </View>
+    <Card style={styles.card}>
+      <ProfileMenuTile
+        icone="delete-outline"
+        titre={traductions.compteDetailsPageBtnSupprimer}
+        couleur={theme.colorScheme.error}
+        onPress={onPress}
+      />
+    </Card>
   );
 }
 
 const styles = StyleSheet.create({
-  bottom: { paddingBottom: 20 },
-  noFlex: { flex: 0 },
+  card: { margin: 0, overflow: 'hidden' },
 });

package/src/modules/alias/presentation/pages/alias_page_claim.tsx

@@ -14,6 +14,7 @@ import { Card } from '../../../../shared/material/card';
 import { showDialog, showModalBottomSheet } from '../../../../shared/material/overlays';
 import { DateFormat } from '../../../../shared/utils/date_format';
 import { CustomAlertDialog } from '../../../../shared/widgets/custom_alert_dialog';
+import { ErrorCardWidget } from '../../../../shared/widgets/error_card_widget';
 import { CustomLoadingDialog, LoadingPage } from '../../../../shared/widgets/loading_page';
 import type { Alias } from '../../domain/models/alias';
 import { AliasError } from '../../domain/models/alias_error';
@@ -238,12 +239,13 @@ function ClaimDetails({
 
         {/* Avertissement délai de traitement */}
         {initiee && (
-          <Text style={[theme.textTheme.bodyLarge, styles.warning, { color: Themer.systemErrorColor }]}>
-            {traductions.aliasClaimDetailsAlert(
+          <ErrorCardWidget
+            icon="schedule"
+            message={traductions.aliasClaimDetailsAlert(
               new DateFormat('dd MMMM yyyy', locale).format(claim.dateVerrouillage),
               new DateFormat('dd MMMM yyyy', locale).format(claim.dateCloture),
             )}
-          </Text>
+          />
         )}
       </ScrollView>
 
@@ -292,6 +294,5 @@ const styles = StyleSheet.create({
   card: { paddingVertical: 10, paddingHorizontal: 15 },
   detail: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
   detailValue: { flex: 1, textAlign: 'right' },
-  warning: { marginLeft: 8, marginRight: 20, marginTop: 2, marginBottom: 5 },
   actions: { flexDirection: 'row', paddingVertical: 10, paddingHorizontal: 10 },
 });

package/src/modules/compte/presentation/pages/compte_details_widget.tsx

@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native';
 
 import { useBlocBuilder, useCreateBloc } from '../../../../core/bloc_react';
 import { Di } from '../../../../core/di';
@@ -46,7 +46,6 @@ function CopyButton({ value }: { value: string }) {
 /** Informations du compte actif : type, numéro et alias. */
 export function CompteDetailsWidget() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const { width } = useWindowDimensions();
   const bloc = useCreateBloc(() => {
     const created = new CompteDetailsBloc(Di.getCompteInputPort());
@@ -57,8 +56,7 @@ export function CompteDetailsWidget() {
 
   return (
     <View>
-      <Text style={theme.textTheme.titleSmall}>{traductions.compteDetailsPageTitle}</Text>
-      <View style={styles.gap24} />
+      <View style={styles.gap8} />
       {state instanceof GetCompteDetailsSuccessState && (
         <View>
           {/* Type de compte */}
@@ -113,6 +111,7 @@ export function CompteDetailsWidget() {
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   copy: { padding: 8, marginRight: -8 },
   skeleton: { paddingVertical: 8 },
   gap16: { height: 16 },

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/compte/profile_compte_page.tsx

@@ -1,27 +1,35 @@
-import { ScrollView, StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
-import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { AliasDeleteBtnWidget } from '../../../../alias/presentation/pages/alias_delete_btn_widget';
 import { CompteDetailsWidget } from '../../../../compte/presentation/pages/compte_details_widget';
+import { ProfileAppBar } from '../profile_app_bar';
+import { ProfileSectionTitre } from '../profile_menu';
 
 /** Compte du client et suppression de l'alias (route `profileCompte`). */
 export function ProfileComptePage() {
-  const router = useAppRouter();
+  const traductions = useAppLocalizations();
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.compteDetailsPageTitle} />}>
       <MyPageContainer>
         <ScrollView style={styles.flex}>
           <CompteDetailsWidget />
         </ScrollView>
+        <View style={styles.gap24} />
+
+        {/* Suppression de l'alias */}
+        <ProfileSectionTitre titre={traductions.comptePageSectionZoneSensible} />
+        <AliasDeleteBtnWidget />
+        <View style={styles.gap16} />
       </MyPageContainer>
-      {/* Bouton supprimer l'alias */}
-      <AliasDeleteBtnWidget />
     </Scaffold>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
+  gap16: { height: 16 },
+  gap24: { height: 24 },
 });

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

@@ -1,20 +1,21 @@
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
-import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { AppRouter } from '../../../../../core/router';
 import { SoundManager } from '../../../../../core/sounds';
-import { Themer, Themes, useTheme } from '../../../../../core/theme';
+import { Themer, Themes } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
 import type { ConfigParams } from '../../../../config/domain/models/config_params';
+import { ProfileAppBar } from '../profile_app_bar';
 import { ProfilePageMenu, ProfileItem } from '../profile_menu';
 import { ProfileParametrePageQRcode } from './profile_parametre_page_qrcode';
 
@@ -45,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])}`,
       }),
     );
   }
@@ -69,29 +67,27 @@ function menuItems(traductions: AppLocalizations, configParams: ConfigParams): P
 /** Paramètres de l'application (route `profileParametre`). */
 export function ProfileParametrePage() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
-  const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
     (_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,
       ),
   );
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.appSettingPageTitle} />}>
       {!(state instanceof ConfigLoadedState) ? (
         <LoadingPage />
       ) : (
         <MyPageContainer>
           <ScrollView>
-            <Text style={[theme.textTheme.titleSmall, styles.title]}>{traductions.appSettingPageTitle}</Text>
-            <View style={styles.gap24} />
-            <ProfilePageMenu items={menuItems(traductions, state.configParams)} />
+            <View style={styles.gap8} />
+            {/* Préférences */}
+            <ProfilePageMenu titre={traductions.appSettingPageSectionPreferences} items={menuItems(traductions, state.configParams)} />
           </ScrollView>
         </MyPageContainer>
       )}
@@ -100,6 +96,5 @@ export function ProfileParametrePage() {
 }
 
 const styles = StyleSheet.create({
-  title: { fontSize: 26 },
-  gap24: { height: 24 },
+  gap8: { height: 8 },
 });