@pi-spi/app 1.5.1 → 2.0.0

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

@@ -1,21 +1,22 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { Themer, Themes, useTheme, type ThemeData } from '../../../../../core/theme';
+import { Accents, Themer, Themes, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { Card } from '../../../../../shared/material/card';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 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 { CheckedDot } from './settings_widgets';
+import { ProfileAppBar } from '../profile_app_bar';
+import { ProfileSectionTitre } from '../profile_menu';
 
 function themeIcon(theme: Themes): number {
   switch (theme) {
@@ -23,20 +24,6 @@ function themeIcon(theme: Themes): number {
       return Images.imageThemeLight;
     case Themes.dark:
       return Images.imageThemeDark;
-    case Themes.yellow:
-      return Images.imageThemeLightYellow;
-    case Themes.green:
-      return Images.imageThemeLightGreen;
-    case Themes.blue:
-      return Images.imageThemeLightBlue;
-    case Themes.red:
-      return Images.imageThemeLightRed;
-    case Themes.orange:
-      return Images.imageThemeLightOrange;
-    case Themes.purple:
-      return Images.imageThemeLightPurple;
-    case Themes.pink:
-      return Images.imageThemeLightPink;
     default:
       return Images.imageThemeSystem;
   }
@@ -46,46 +33,119 @@ function themeTitle(traductions: AppLocalizations, theme: Themes): string {
   return theme === Themes.system ? traductions.appSettingPageMenuThemeDefault : Themes.label(theme, traductions);
 }
 
-/** Choix du thème de l'application (route `profileParametreTheme`). */
+/** Choix du thème (système, clair, sombre) et de la couleur d'accentuation (route `profileParametreTheme`). */
 export function ProfileParametrePageTheme() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
-  const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
-    (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+    (_p, current) =>
+      current instanceof ConfigLoadedState &&
+      (current.updatedKey === ConfigKey.preferedTheme || current.updatedKey === ConfigKey.preferedAccent),
   );
-  const currentTheme = state.configParams.params[ConfigKey.preferedTheme];
+  const currentTheme = Themes.fromCode(state.configParams.params[ConfigKey.preferedTheme]);
+  const currentAccent = state.configParams.params[ConfigKey.preferedAccent] ?? Accents.parDefaut;
+  const sombre = theme.brightness === 'dark';
+  const [largeurGrille, setLargeurGrille] = useState(0);
+
+  // Trois aperçus par ligne
+  const espace = 12;
+  // Arrondi vers le bas : sinon la troisième colonne peut passer à la ligne
+  const largeur = Math.floor((largeurGrille - 2 * espace) / 3);
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.appSettingPageMenuThemePageTitle} />}>
       <MyPageContainer>
-        <ScrollView>
-          <Text style={theme.textTheme.titleSmall}>{traductions.appSettingPageMenuThemePageTitle}</Text>
-          <View style={styles.gap20} />
-          <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuThemeTitle}</Text>
-          <View style={styles.gap10} />
-          <Card>
-            <View style={styles.wrap}>
-              {/* Thème personnalisé de l'hôte, en tête */}
-              {Themer.customTheme != null && (
-                <ThemeOption
-                  title={traductions.appSettingPageMenuThemeCustom}
-                  selected={currentTheme === Themer.customThemeCode}
-                  onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, Themer.customThemeCode))}
-                  preview={<CustomThemePreview theme={Themer.customTheme} />}
-                />
-              )}
-              {Themes.list().map((item) => (
-                <ThemeOption
-                  key={item}
-                  title={themeTitle(traductions, item)}
-                  selected={currentTheme === item}
-                  onSelect={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
-                  preview={<Image source={themeIcon(item)} style={styles.flex} contentFit="cover" />}
-                />
-              ))}
+        <ScrollView contentContainerStyle={styles.contenu}>
+          {/* Thème : système, clair ou sombre */}
+          <ProfileSectionTitre titre={traductions.appSettingPageThemeSection} />
+          <Card style={styles.card}>
+            <View style={styles.grille} onLayout={(e) => setLargeurGrille(e.nativeEvent.layout.width - 2 * 14)}>
+              {largeurGrille > 0 &&
+                Themes.list().map((item) => {
+                  const choisi = currentTheme === item;
+                  return (
+                    <Pressable
+                      key={item}
+                      accessibilityRole="button"
+                      accessibilityState={{ selected: choisi }}
+                      disabled={choisi}
+                      onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedTheme, item))}
+                      style={[styles.item, { width: largeur }]}
+                    >
+                      {/* Aperçu, entouré quand il est choisi */}
+                      <View style={[styles.cadre, { borderColor: choisi ? theme.colorScheme.primary : 'transparent' }]}>
+                        <Image
+                          source={themeIcon(item)}
+                          style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}
+                          contentFit="cover"
+                        />
+                      </View>
+                      {choisi && (
+                        <View style={[styles.coche, { backgroundColor: theme.colorScheme.primary, borderColor: theme.colorScheme.surface }]}>
+                          <MaterialIcons name="check" size={14} color={theme.colorScheme.onPrimary} />
+                        </View>
+                      )}
+                      <Text
+                        style={[
+                          theme.textTheme.displayMedium,
+                          styles.libelle,
+                          { fontWeight: choisi ? '700' : '500' },
+                          choisi ? null : { color: Themer.neural03Color },
+                        ]}
+                      >
+                        {themeTitle(traductions, item)}
+                      </Text>
+                    </Pressable>
+                  );
+                })}
+            </View>
+          </Card>
+
+          {/* Couleur d'accentuation */}
+          <View style={styles.espace} />
+          <ProfileSectionTitre titre={traductions.appSettingPageAccentSection} />
+          <Card style={styles.card}>
+            <View style={styles.pastilles}>
+              {[
+                // Couleur du thème personnalisé de l'hôte, en tête
+                ...(Themer.hasCustomTheme ? [Themer.customAccentCode] : []),
+                ...Accents.list(),
+              ].map((accent) => {
+                const apercu = Themer.get(sombre ? Themes.dark : Themes.light, accent).colorScheme;
+                const teintes = { accent: apercu.primary, surAccent: apercu.onPrimary };
+                const choisi = currentAccent === accent;
+                return (
+                  <Pressable
+                    key={accent}
+                    accessibilityRole="button"
+                    accessibilityLabel={Themer.accentLabel(traductions, accent)}
+                    accessibilityState={{ selected: choisi }}
+                    disabled={choisi}
+                    onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.preferedAccent, accent))}
+                    style={styles.accent}
+                  >
+                    {/* Pastille, cochée quand elle est choisie */}
+                    <View style={[styles.anneau, { borderColor: choisi ? theme.colorScheme.onSurface : 'transparent' }]}>
+                      <View style={[styles.pastille, { backgroundColor: teintes.accent }]}>
+                        {choisi && <MaterialIcons name="check" size={22} color={teintes.surAccent} />}
+                      </View>
+                    </View>
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        theme.textTheme.displaySmall,
+                        styles.libelle,
+                        { fontWeight: choisi ? '700' : '400' },
+                        { color: choisi ? theme.colorScheme.onSurface : Themer.neural03Color },
+                      ]}
+                    >
+                      {Themer.accentLabel(traductions, accent)}
+                    </Text>
+                  </Pressable>
+                );
+              })}
             </View>
           </Card>
         </ScrollView>
@@ -94,88 +154,18 @@ export function ProfileParametrePageTheme() {
   );
 }
 
-/** Une option de thème : aperçu, nom et pastille de sélection */
-function ThemeOption({
-  title,
-  selected,
-  onSelect,
-  preview,
-}: {
-  title: string;
-  selected: boolean;
-  onSelect: () => void;
-  preview: ReactNode;
-}) {
-  const theme = useTheme();
-  return (
-    <Pressable accessibilityRole="button" disabled={selected} onPress={onSelect} style={styles.item}>
-      <View style={[styles.preview, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
-      <View style={styles.gap5} />
-      <Text style={theme.textTheme.displayMedium}>{title}</Text>
-      <View style={styles.gap5} />
-      <CheckedDot value={selected} />
-      <View style={styles.gap20} />
-    </Pressable>
-  );
-}
-
-/**
- * Aperçu du thème personnalisé de l'hôte (pas d'image comme pour les
- * thèmes du SDK) : une miniature d'accueil dessinée avec ses couleurs.
- */
-function CustomThemePreview({ theme }: { theme: ThemeData }) {
-  const primary = theme.colorScheme.primary;
-  const secondary = theme.colorScheme.secondary;
-  const bar = (width: number, color: string) => <View style={[styles.bar, { width, backgroundColor: color }]} />;
-  return (
-    <View style={[styles.flex, styles.mock, { backgroundColor: theme.scaffoldBackgroundColor }]}>
-      {/* Avatar et titre */}
-      <View style={styles.mockRow}>
-        <View style={[styles.dot16, { backgroundColor: secondary }]} />
-        {bar(40, Themer.neural02Color)}
-      </View>
-      <View style={styles.gap12} />
-      {/* Carte du compte */}
-      <View style={[styles.mockCard, { backgroundColor: theme.cardColor }]}>
-        {bar(50, Themer.neural02Color)}
-        {bar(30, primary)}
-      </View>
-      <View style={styles.gap12} />
-      {/* Boutons d'action */}
-      <View style={styles.mockActions}>
-        {[0, 1, 2].map((i) => (
-          <View key={i} style={[styles.mockButton, { backgroundColor: primary }]} />
-        ))}
-      </View>
-      <View style={styles.gap14} />
-      {/* Liste */}
-      {[0, 1, 2].map((i) => (
-        <View key={i} style={[styles.mockRow, styles.mockListRow]}>
-          <View style={[styles.dot14, { backgroundColor: secondary }]} />
-          {bar(46, Themer.neural02Color)}
-        </View>
-      ))}
-    </View>
-  );
-}
-
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  mock: { padding: 10 },
-  mockRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
-  mockListRow: { marginBottom: 8 },
-  mockCard: { height: 54, padding: 8, borderRadius: 8, justifyContent: 'space-between' },
-  mockActions: { flexDirection: 'row', justifyContent: 'space-between' },
-  mockButton: { width: 26, height: 26, borderRadius: 8 },
-  bar: { height: 6, borderRadius: 3 },
-  dot16: { width: 16, height: 16, borderRadius: 8 },
-  dot14: { width: 14, height: 14, borderRadius: 7 },
-  gap12: { height: 12 },
-  gap14: { height: 14 },
-  wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', columnGap: 10, rowGap: 10 },
+  contenu: { paddingTop: 8, paddingBottom: 16 },
+  card: { margin: 0 },
+  grille: { padding: 14, flexDirection: 'row', flexWrap: 'wrap', columnGap: 12, rowGap: 16 },
   item: { alignItems: 'center' },
-  preview: { width: 120, height: 200, borderRadius: 8, overflow: 'hidden' },
-  gap5: { height: 5 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  cadre: { alignSelf: 'stretch', padding: 3, borderWidth: 2, borderRadius: 14 },
+  apercu: { width: '100%', aspectRatio: 0.6, borderRadius: 10 },
+  coche: { position: 'absolute', top: 8, right: 8, borderRadius: 12, borderWidth: 2, padding: 1 },
+  libelle: { marginTop: 8, textAlign: 'center' },
+  espace: { height: 24 },
+  pastilles: { paddingHorizontal: 10, paddingVertical: 16, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-evenly', rowGap: 16 },
+  accent: { width: 64, alignItems: 'center' },
+  anneau: { padding: 3, borderWidth: 2, borderRadius: 26 },
+  pastille: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
 });

package/src/modules/profile/presentation/pages/profile_app_bar.tsx

@@ -0,0 +1,21 @@
+import { Text } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { AppBar } from '../../../../shared/material/scaffold';
+
+/** Barre des écrans du profil : bouton retour et [titre] de la page. */
+export function ProfileAppBar({ titre }: { titre: string }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    <AppBar
+      onBack={() => AppRouter.pop(router)}
+      title={
+        <Text numberOfLines={1} style={[theme.textTheme.headlineMedium, { color: theme.appBarTheme.foregroundColor }]}>
+          {titre}
+        </Text>
+      }
+    />
+  );
+}

package/src/modules/profile/presentation/pages/profile_menu.tsx

@@ -1,11 +1,13 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import type { ReactNode } from 'react';
-import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+import { Fragment, isValidElement, type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Platform, Pressable, StyleSheet, Switch, Text, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { useTheme } from '../../../../core/theme';
+import { Themer, useTheme } from '../../../../core/theme';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { withAlpha } from '../../../../shared/utils/color';
 
 /** Une entrée du menu du profil : une route, une action, ou une feuille à ouvrir. */
 export class ProfileItem {
@@ -27,45 +29,136 @@ export class ProfileItem {
   }
 }
 
-/** Menu du profil : une carte avec une ligne (icône, titre, sous-titre) par entrée. */
-export function ProfilePageMenu({ items }: { items: ProfileItem[] }) {
+/**
+ * Groupe d'entrées du profil dans une carte : [titre] de section facultatif
+ * au-dessus, puis une ligne par élément, séparées par un trait. Les [items]
+ * sont des `ProfileItem` ou des composants déjà construits (ex. bouton de
+ * modification du code PIN, qui utilise `ProfileMenuTile`).
+ */
+export function ProfilePageMenu({ items, titre }: { items: (ProfileItem | ReactElement)[]; titre?: string }) {
   const theme = useTheme();
   const router = useAppRouter();
-  return (
-    <Card>
-      {items.map((item, i) => (
-        <Pressable
-          key={i}
-          accessibilityRole="button"
+  const lignes = items
+    .map((item) => {
+      if (!(item instanceof ProfileItem)) return isValidElement(item) ? item : null;
+      const aSwitch = item.action != null && item.value != null;
+      return (
+        <ProfileMenuTile
+          image={item.icon}
+          titre={item.title}
+          sousTitre={item.subtitle}
           onPress={() => {
             if (typeof item.page === 'string') void AppRouter.push(router, item.page);
             else if (typeof item.page === 'function') item.page();
             // Ouvrir une feuille
-            else if (item.sheet != null) void showModalBottomSheet(router, { themed: true, builder: item.sheet });
+            else if (item.sheet != null) void showModalBottomSheet(router, { builder: item.sheet });
           }}
-          style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
-        >
-          <Image source={item.icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
-          <View style={styles.texts}>
-            <Text style={theme.textTheme.bodyLarge}>{item.title}</Text>
-            {item.subtitle != null && <Text style={theme.textTheme.displaySmall}>{item.subtitle}</Text>}
-          </View>
-          {item.action != null && item.value != null && (
-            <Switch
-              value={item.value}
-              onValueChange={item.action}
-              trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
-              thumbColor={theme.switchTheme.thumbColor}
-            />
-          )}
-        </Pressable>
-      ))}
-    </Card>
+          trailing={
+            aSwitch ? (
+              <Switch
+                value={item.value}
+                onValueChange={item.action}
+                trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
+                thumbColor={theme.switchTheme.thumbColor}
+              />
+            ) : undefined
+          }
+        />
+      );
+    })
+    .filter((ligne): ligne is ReactElement => ligne != null);
+
+  return (
+    <View>
+      {titre != null && <ProfileSectionTitre titre={titre} />}
+      <Card style={styles.card}>
+        {lignes.map((ligne, i) => (
+          <Fragment key={i}>
+            {i > 0 && <View style={[styles.separateur, { backgroundColor: withAlpha(Themer.neural03Color, 0.25) }]} />}
+            {ligne}
+          </Fragment>
+        ))}
+      </Card>
+    </View>
+  );
+}
+
+/**
+ * Ligne d'un menu du profil : pastille avec l'icône, [titre], [sousTitre]
+ * facultatif et, à droite, [trailing] (ex. Switch) ou une flèche.
+ * [couleur] remplace la couleur principale (ex. rouge pour une action
+ * destructive).
+ */
+export function ProfileMenuTile({
+  image,
+  icone,
+  titre,
+  sousTitre,
+  onPress,
+  trailing,
+  couleur,
+  disabled,
+}: {
+  image?: number;
+  icone?: ComponentProps<typeof MaterialIcons>['name'];
+  titre: string;
+  sousTitre?: string;
+  onPress?: () => void;
+  trailing?: ReactNode;
+  couleur?: string;
+  disabled?: boolean;
+}) {
+  const theme = useTheme();
+  const principale = couleur ?? theme.colorScheme.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [styles.tile, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
+    >
+      {/* Pastille */}
+      <View style={[styles.pastille, { backgroundColor: withAlpha(principale, 0.14) }]}>
+        {image != null ? (
+          <Image source={image} style={styles.icon} tintColor={couleur ?? theme.colorScheme.onSurface} />
+        ) : (
+          <MaterialIcons name={icone ?? 'circle'} size={20} color={principale} />
+        )}
+      </View>
+      <View style={styles.texts}>
+        <Text style={[theme.textTheme.displayLarge, styles.titre, couleur != null ? { color: couleur } : null]}>{titre}</Text>
+        {sousTitre != null && sousTitre.length > 0 && (
+          <Text style={[theme.textTheme.displaySmall, styles.sousTitre, { color: Themer.neural03Color }]}>{sousTitre}</Text>
+        )}
+      </View>
+      {trailing ?? (
+        <MaterialIcons
+          name={Platform.OS === 'ios' ? 'arrow-forward-ios' : 'arrow-forward'}
+          size={18}
+          color={couleur ?? Themer.neural03Color}
+        />
+      )}
+    </Pressable>
+  );
+}
+
+/** Titre d'une section du profil, en petites capitales. */
+export function ProfileSectionTitre({ titre }: { titre: string }) {
+  const theme = useTheme();
+  return (
+    <Text style={[theme.textTheme.displaySmall, styles.section, { color: Themer.neural03Color }]}>{titre.toUpperCase()}</Text>
   );
 }
 
 const styles = StyleSheet.create({
-  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56, paddingVertical: 8 },
-  icon: { width: 24, height: 24 },
-  texts: { flex: 1, marginLeft: 16 },
+  card: { margin: 0 },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, paddingVertical: 12 },
+  pastille: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+  icon: { width: 20, height: 20 },
+  texts: { flex: 1, marginLeft: 14, marginRight: 8 },
+  titre: { fontWeight: '500' },
+  sousTitre: { marginTop: 2 },
+  section: { fontSize: 12, letterSpacing: 0.8, fontWeight: '600', marginLeft: 4, marginBottom: 8 },
+  // Trait aligné sur le texte (après la pastille)
+  separateur: { height: StyleSheet.hairlineWidth, marginLeft: 68 },
 });