@pi-spi/app 1.5.1 → 2.0.0

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 },
 });

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

@@ -1,6 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useState, type ComponentProps } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Images } from '../../../../../core/assets';
@@ -10,11 +10,12 @@ import { SoundManager } from '../../../../../core/sounds';
 import { useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { TextButton } from '../../../../../shared/material/buttons';
-import { Card } from '../../../../../shared/material/card';
+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 { ConfigKey } from '../../../../config/domain/models/config_keys';
-import { SettingToggle } from './settings_widgets';
+import { ProfileMenuTile, ProfilePageMenu } from '../profile_menu';
+import { SwitchThemed } from './settings_widgets';
 
 const NONE = 'NONE';
 
@@ -44,77 +45,106 @@ export function ProfileParametrePageNotificationsSon() {
     }
   };
 
+  const basculer = () => setSelectedSound(enabled ? NONE : (SoundManager.liste[0]?.path ?? null));
+
   return (
     <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
-      <View style={styles.bar}>
-        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
-          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
-        </Pressable>
-        <View style={styles.save}>
-          <TextButton onPress={save}>{traductions.btnTextSave}</TextButton>
-        </View>
-      </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.appSettingPageMenuNotificationSonPageTitle}
+          </Text>
+        }
+        actions={
+          <View style={styles.save}>
+            <TextButton onPress={save}>{traductions.btnTextSave}</TextButton>
+          </View>
+        }
+      />
       <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonPageTitle}</Text>
-        <View style={styles.gap20} />
         {/* Son activé ou non */}
-        <SettingToggle
-          icon={Images.iconsCloche}
-          title={traductions.notificationPageTitle}
-          value={enabled}
-          onChange={(value) => setSelectedSound(value ? (SoundManager.liste[0]?.path ?? null) : NONE)}
+        <ProfilePageMenu
+          items={[
+            <ProfileMenuTile
+              key="son"
+              image={Images.iconsCloche}
+              titre={traductions.notificationPageTitle}
+              onPress={basculer}
+              trailing={<SwitchThemed value={enabled} onChange={basculer} />}
+            />,
+          ]}
         />
+
         {/* Sons disponibles */}
-        <View style={styles.gap20} />
-        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
-        <View style={styles.gap10} />
-        <Card>
-          {/* Aucun */}
-          <SoundRow
-            label={traductions.appSettingPageMenuNotificationStyleNone}
-            checked={selectedSound === NONE}
-            onPress={() => setSelectedSound(NONE)}
-          />
-          {SoundManager.liste.map((sound) => (
+        <View style={styles.gap24} />
+        <ProfilePageMenu
+          titre={traductions.appSettingPageMenuNotificationSonTitle}
+          items={[
+            // Aucun
             <SoundRow
-              key={sound.path}
-              label={sound.name}
-              checked={selectedSound === sound.path}
-              onPress={() => {
-                void SoundManager.playSound(sound.path);
-                setSelectedSound(sound.path);
-              }}
-            />
-          ))}
-        </Card>
+              key={NONE}
+              icone="music-off"
+              label={traductions.appSettingPageMenuNotificationStyleNone}
+              checked={selectedSound === NONE}
+              onPress={() => setSelectedSound(NONE)}
+            />,
+            ...SoundManager.liste.map((sound) => (
+              <SoundRow
+                key={sound.path}
+                icone="music-note"
+                label={sound.name}
+                checked={selectedSound === sound.path}
+                onPress={() => {
+                  void SoundManager.playSound(sound.path);
+                  setSelectedSound(sound.path);
+                }}
+              />
+            )),
+          ]}
+        />
         <View style={styles.gap20} />
       </ScrollView>
     </View>
   );
 }
 
-function SoundRow({ label, checked, onPress }: { label: string; checked: boolean; onPress: () => void }) {
+/** Son de la liste, coché quand il est choisi */
+function SoundRow({
+  icone,
+  label,
+  checked,
+  onPress,
+}: {
+  icone: ComponentProps<typeof MaterialIcons>['name'];
+  label: string;
+  checked: boolean;
+  onPress: () => void;
+}) {
   const theme = useTheme();
   return (
-    <Pressable
-      accessibilityRole="radio"
-      accessibilityState={{ checked }}
+    <ProfileMenuTile
+      icone={icone}
+      titre={label}
       onPress={onPress}
-      style={({ pressed }) => [styles.row, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
-    >
-      <Text style={[theme.textTheme.bodyLarge, styles.flex]}>{label}</Text>
-      {checked && <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} />}
-    </Pressable>
+      trailing={
+        checked ? (
+          <MaterialIcons name="check-circle" size={22} color={theme.colorScheme.primary} />
+        ) : (
+          <View style={styles.vide} />
+        )
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  bar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-  back: { padding: 12 },
   save: { paddingRight: 12 },
-  content: { paddingTop: 12, paddingHorizontal: 12 },
-  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 52 },
-  gap10: { height: 10 },
+  content: { paddingTop: 8, paddingHorizontal: 20 },
+  vide: { width: 22 },
   gap20: { height: 20 },
+  gap24: { height: 24 },
 });

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

@@ -1,52 +1,56 @@
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
+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';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
-import { SettingToggle } from './settings_widgets';
+import { ProfileMenuTile, ProfilePageMenu } from '../profile_menu';
+import { SwitchThemed } from './settings_widgets';
 
 /** Feuille « Mon QR code » : afficher ou non le QR code de l'alias sur l'accueil. */
 export function ProfileParametrePageQRcode() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
     (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.showQRcode,
   );
   const showQRcode = state.configParams.params[ConfigKey.showQRcode] !== '0';
+  const basculer = () => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'));
 
   return (
-    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.5 }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
-        <Text style={theme.textTheme.headlineLarge}>{traductions.appSettingPageMenuQrCodeTitle}</Text>
-        <View style={styles.gap8} />
-        <Text style={theme.textTheme.displaySmall}>
+    <SelectionSheet
+      titre={traductions.appSettingPageMenuQrCodeTitle}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
           {showQRcode ? traductions.appSettingPageMenuQrCodeDeselectTitle : traductions.appSettingPageMenuQrCodeSelectTitle}
         </Text>
-        <View style={styles.gap15} />
-        <SettingToggle
-          icon={Images.homeFooterQrcode}
-          title={traductions.appSettingPageMenuQrCodeTitle}
-          value={showQRcode}
-          onChange={() => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'))}
-        />
-      </ScrollView>
-    </View>
+      }
+      contenu={
+        <View style={styles.contenu}>
+          <ProfilePageMenu
+            items={[
+              <ProfileMenuTile
+                key="qrcode"
+                image={Images.homeFooterQrcode}
+                titre={traductions.appSettingPageMenuQrCodeTitle}
+                onPress={basculer}
+                trailing={<SwitchThemed value={showQRcode} onChange={basculer} />}
+              />,
+            ]}
+          />
+        </View>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  gap8: { height: 8 },
-  gap15: { height: 15 },
+  contenu: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 20 },
 });