@pi-spi/app 1.5.0 → 1.6.0

package/lib/typescript/src/shared/utils/color.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Équivalent de `Color.withValues(alpha:)` : la couleur [color] avec
+ * l'opacité [alpha] (0 à 1). Accepte `#RGB`, `#RRGGBB` et `#RRGGBBAA` ;
+ * toute autre forme est rendue telle quelle.
+ */
+export declare function withAlpha(color: string, alpha: number): string;
+//# sourceMappingURL=color.d.ts.map

package/lib/typescript/src/shared/utils/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/shared/utils/color.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAQ9D"}

package/lib/typescript/src/shared/widgets/error_card_widget.d.ts

@@ -0,0 +1,11 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps } from 'react';
+/**
+ * Carte d'avertissement : fond teinté, bordure et icône dans la couleur
+ * d'erreur du thème, suivies du `message`.
+ */
+export declare function ErrorCardWidget({ message, icon, }: {
+    message: string;
+    icon?: ComponentProps<typeof MaterialIcons>['name'];
+}): import("react").JSX.Element;
+//# sourceMappingURL=error_card_widget.d.ts.map

package/lib/typescript/src/shared/widgets/error_card_widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error_card_widget.d.ts","sourceRoot":"","sources":["../../../../../src/shared/widgets/error_card_widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAY5C;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,IAAsB,GACvB,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;CACrD,+BAqBA"}

package/lib/typescript/src/shared/widgets/selection.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+/**
+ * Feuille de sélection : poignée, [titre], [entete] facultatif, puis le
+ * [contenu] (qui défile s'il est trop long : utiliser un ScrollView).
+ * À ouvrir avec showModalBottomSheet.
+ */
+export declare function SbSelectionSheet({ titre, titreSize, entete, contenu, }: {
+    titre?: string;
+    titreSize?: number;
+    entete?: ReactNode;
+    contenu: ReactNode;
+}): import("react").JSX.Element;
+/** Ligne d'une feuille de sélection : [pastille], [texte], [detail] facultatif et coche si elle est [choisie]. */
+export declare function SbSelectionLigne({ pastille, texte, detail, choisie, onPress, }: {
+    pastille: ReactNode;
+    texte: string;
+    detail?: string;
+    choisie: boolean;
+    onPress: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=selection.d.ts.map

package/lib/typescript/src/shared/widgets/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../../../src/shared/widgets/selection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,SAAS,EACT,MAAM,EACN,OAAO,GACR,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;CACpB,+BAqBA;AAED,kHAAkH;AAClH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,+BA2BA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pi-spi/app",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "SDK React Native permettant d'intégrer PI-SPI (transactions, demande d'annulation, retour de fond, demande de paiement, QR Code, gestion des alias, gestion des abonnements, notifications, profil, compte) dans une application mobile existante.",
   "homepage": "https://github.com/pisfn-sandbox/mobile-app-react-native-sdk.git",
   "repository": {

package/src/core/api.ts

@@ -86,8 +86,12 @@ export class Api {
 
   /** Options communes à toutes les instances axios du SDK. */
   static baseOptions(): AxiosRequestConfig {
+    const { apiKey, apiKeyHeader } = Api.config.api;
     return {
       baseURL: Api.url,
+      // Clé d'API éventuelle : dans les options de base pour être aussi
+      // envoyée par les requêtes rejouées après un refresh du token.
+      headers: apiKey != null ? { [apiKeyHeader]: apiKey } : undefined,
       timeout: 60_000, // 60 seconds
       // Les listes sont envoyées comme `sens=debit&sens=credit` (comme Dio).
       paramsSerializer: { indexes: null },

package/src/core/pi_spi_sdk_config.ts

@@ -156,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';
   }
 }
 

package/src/l10n/app_localizations.ts

@@ -1389,6 +1389,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

@@ -706,4 +706,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

@@ -705,4 +705,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

@@ -706,4 +706,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/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';
 
@@ -69,8 +70,6 @@ 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,
@@ -83,15 +82,15 @@ export function ProfileParametrePage() {
   );
 
   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 +99,5 @@ export function ProfileParametrePage() {
 }
 
 const styles = StyleSheet.create({
-  title: { fontSize: 26 },
-  gap24: { height: 24 },
+  gap8: { height: 8 },
 });

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

@@ -1,4 +1,3 @@
-import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -10,12 +9,13 @@ import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, 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 { AppBar } from '../../../../../shared/material/scaffold';
 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';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
-import { SettingToggle } from './settings_widgets';
+import { ProfileMenuTile, ProfilePageMenu, ProfileSectionTitre } from '../profile_menu';
+import { SwitchThemed } from './settings_widgets';
 
 const NOTIFICATION_KEYS = [
   ConfigKey.notificationStatus,
@@ -58,88 +58,107 @@ export function ProfileParametrePageNotifications() {
     },
   ];
 
+  const basculerNotifications = () =>
+    configBloc.add(new ConfigChangeEvent(ConfigKey.notificationStatus, enabled ? 'disabled' : 'enabled'));
+  const basculerVibration = () =>
+    configBloc.add(new ConfigChangeEvent(ConfigKey.notificationAlertVibration, vibrationEnabled ? 'disabled' : 'enabled'));
+
   return (
     <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
-      <View style={styles.backRow}>
-        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
-          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
-        </Pressable>
-      </View>
+      {/* Titre dans la barre, comme les autres pages (dans la feuille : fond de la feuille) */}
+      <AppBar
+        backgroundColor="transparent"
+        onBack={() => AppRouter.pop(router)}
+        title={
+          <Text numberOfLines={1} style={theme.textTheme.headlineMedium}>
+            {traductions.appSettingPageMenuNotificationTitle}
+          </Text>
+        }
+      />
       <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationTitle}</Text>
-        <View style={styles.gap20} />
         {/* Activer les notifications */}
-        <SettingToggle
-          icon={Images.iconsCloche}
-          title={traductions.notificationPageTitle}
-          value={enabled}
-          onChange={() => configBloc.add(new ConfigChangeEvent(ConfigKey.notificationStatus, enabled ? 'disabled' : 'enabled'))}
+        <ProfilePageMenu
+          items={[
+            <ProfileMenuTile
+              key="notifications"
+              image={Images.iconsCloche}
+              titre={traductions.notificationPageTitle}
+              onPress={basculerNotifications}
+              trailing={<SwitchThemed value={enabled} onChange={basculerNotifications} />}
+            />,
+          ]}
         />
+
         {/* Style de notification */}
-        <View style={styles.gap10} />
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationStyleTitle}</Text>
-        <View style={styles.gap10} />
-        <Card>
-          <View style={styles.wrap}>
-            {styles_.map((item) => {
-              const active = (!enabled && item.style == null) || currentStyle === item.style;
+        <View style={styles.gap24} />
+        <ProfileSectionTitre titre={traductions.appSettingPageMenuNotificationStyleTitle} />
+        <Card style={styles.card}>
+          <View style={styles.row}>
+            {styles_.map((item, i) => {
+              // « Aucun » quand les notifications sont désactivées
+              const choisi = enabled ? currentStyle === item.style : item.style == null;
               return (
                 <Pressable
                   key={item.title}
                   accessibilityRole="button"
+                  accessibilityState={{ selected: choisi }}
                   disabled={!(enabled && item.style != null && currentStyle !== item.style)}
                   onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.notificationStyle, item.style!))}
-                  style={styles.styleItem}
+                  style={[styles.style, i > 0 ? styles.styleGap : null]}
                 >
-                  <Image
-                    source={item.icon}
-                    style={[styles.stylePreview, { backgroundColor: theme.colorScheme.surface }]}
-                    contentFit="cover"
-                    tintColor={active ? 'black' : undefined}
-                  />
-                  <View style={styles.gap10} />
-                  <View style={[styles.badge, { backgroundColor: active ? theme.colorScheme.onSurface : theme.colorScheme.secondary }]}>
-                    <Text style={[theme.textTheme.displayMedium, { color: active ? theme.colorScheme.surface : theme.colorScheme.onSecondary }]}>
-                      {item.title}
-                    </Text>
+                  {/* Aperçu, entouré quand il est choisi */}
+                  <View style={[styles.cadre, { borderColor: choisi ? theme.colorScheme.primary : 'transparent' }]}>
+                    <Image
+                      source={item.icon}
+                      style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}
+                      contentFit="cover"
+                    />
                   </View>
+                  <Text
+                    style={[
+                      theme.textTheme.displayMedium,
+                      styles.libelle,
+                      { fontWeight: choisi ? '700' : '500' },
+                      choisi ? null : { color: Themer.neural03Color },
+                    ]}
+                  >
+                    {item.title}
+                  </Text>
                 </Pressable>
               );
             })}
           </View>
         </Card>
+        {/* Description des styles de notification */}
         <View style={styles.gap10} />
-        <Text style={[theme.textTheme.displayLarge, { color: Themer.neural04Color }]}>
+        <Text style={[theme.textTheme.displaySmall, styles.description, { color: Themer.neural03Color }]}>
           {traductions.appSettingPageMenuNotificationStyleDialogDesc}
         </Text>
-        {/* Son */}
-        <View style={styles.gap20} />
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
-        <View style={styles.gap10} />
-        <MenuActionsWidget
+
+        {/* Son et vibration */}
+        <View style={styles.gap24} />
+        <ProfilePageMenu
+          titre={traductions.appSettingPageMenuNotificationSonTitle}
           items={[
-            new MenuActionItem(
-              Images.iconsCloche,
-              traductions.notificationPageTitle,
-              sonEnabled ? traductions.statutActive : traductions.statutDesactive,
-              () => void AppRouter.push(router, AppRouter.profileParametreNotificationsSon),
-              { iconSize: 20 },
-            ),
+            // Son des notifications
+            <ProfileMenuTile
+              key="son"
+              image={Images.iconsCloche}
+              titre={traductions.notificationPageTitle}
+              sousTitre={sonEnabled ? traductions.statutActive : traductions.statutDesactive}
+              onPress={() => void AppRouter.push(router, AppRouter.profileParametreNotificationsSon)}
+            />,
+            // Vibration des notifications
+            <ProfileMenuTile
+              key="vibration"
+              icone="vibration"
+              titre={traductions.appSettingPageMenuNotificationVibrTitle}
+              sousTitre={traductions.appSettingPageMenuNotificationVibrSubtitle}
+              onPress={basculerVibration}
+              trailing={<SwitchThemed value={vibrationEnabled} onChange={basculerVibration} />}
+            />,
           ]}
         />
-        {/* Vibration */}
-        <View style={styles.gap20} />
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationVibrTitle}</Text>
-        <View style={styles.gap10} />
-        <SettingToggle
-          icon={Images.iconsCloche}
-          title={traductions.appSettingPageMenuNotificationVibrTitle}
-          subtitle={traductions.appSettingPageMenuNotificationVibrSubtitle}
-          value={vibrationEnabled}
-          onChange={() =>
-            configBloc.add(new ConfigChangeEvent(ConfigKey.notificationAlertVibration, vibrationEnabled ? 'disabled' : 'enabled'))
-          }
-        />
       </ScrollView>
     </View>
   );
@@ -147,13 +166,15 @@ export function ProfileParametrePageNotifications() {
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  backRow: { flexDirection: 'row' },
-  back: { padding: 12 },
-  content: { paddingTop: 12, paddingHorizontal: 12, paddingBottom: 20 },
-  wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', rowGap: 10, columnGap: 10 },
-  styleItem: { alignItems: 'center' },
-  stylePreview: { width: 60, height: 120, borderRadius: 8 },
-  badge: { borderRadius: 10, paddingHorizontal: 10, paddingVertical: 5 },
+  content: { paddingTop: 8, paddingHorizontal: 20, paddingBottom: 24 },
+  card: { margin: 0 },
+  row: { flexDirection: 'row', alignItems: 'flex-start', padding: 14 },
+  style: { flex: 1, alignItems: 'center', borderRadius: 14 },
+  styleGap: { marginLeft: 12 },
+  cadre: { alignSelf: 'stretch', padding: 3, borderWidth: 2, borderRadius: 14 },
+  apercu: { width: '100%', aspectRatio: 0.55, borderRadius: 10 },
+  libelle: { marginTop: 8, textAlign: 'center' },
+  description: { paddingHorizontal: 4 },
   gap10: { height: 10 },
-  gap20: { height: 20 },
+  gap24: { height: 24 },
 });