@pi-spi/app 1.5.1 → 1.6.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, type ReactNode } 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 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) {
@@ -49,8 +50,6 @@ function themeTitle(traductions: AppLocalizations, theme: Themes): string {
 /** Choix du thème de l'application (route `profileParametreTheme`). */
 export function ProfileParametrePageTheme() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
-  const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
   const state = useBlocBuilder(
     configBloc,
@@ -58,34 +57,43 @@ export function ProfileParametrePageTheme() {
   );
   const currentTheme = state.configParams.params[ConfigKey.preferedTheme];
 
+  const [largeurGrille, setLargeurGrille] = useState(0);
+  // Trois aperçus par ligne
+  // 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} />}
-                />
+        <ScrollView contentContainerStyle={styles.contenu}>
+          {/* Thème */}
+          <ProfileSectionTitre titre={traductions.appSettingPageMenuThemeTitle} />
+          <Card style={styles.card}>
+            <View style={styles.grille} onLayout={(e) => setLargeurGrille(e.nativeEvent.layout.width - 2 * 14)}>
+              {largeurGrille > 0 && (
+                <>
+                  {/* Thème personnalisé de l'hôte, en tête */}
+                  {Themer.customTheme != null && (
+                    <ThemeOption
+                      largeur={largeur}
+                      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}
+                      largeur={largeur}
+                      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" />}
+                    />
+                  ))}
+                </>
               )}
-              {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" />}
-                />
-              ))}
             </View>
           </Card>
         </ScrollView>
@@ -94,13 +102,15 @@ export function ProfileParametrePageTheme() {
   );
 }
 
-/** Une option de thème : aperçu, nom et pastille de sélection */
+/** Une option de thème : aperçu, entouré et coché quand il est choisi, puis son nom */
 function ThemeOption({
+  largeur,
   title,
   selected,
   onSelect,
   preview,
 }: {
+  largeur: number;
   title: string;
   selected: boolean;
   onSelect: () => void;
@@ -108,13 +118,32 @@ function ThemeOption({
 }) {
   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
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      disabled={selected}
+      onPress={onSelect}
+      style={[styles.item, { width: largeur }]}
+    >
+      {/* Aperçu, entouré quand il est choisi */}
+      <View style={[styles.cadre, { borderColor: selected ? theme.colorScheme.primary : 'transparent' }]}>
+        <View style={[styles.apercu, { backgroundColor: theme.colorScheme.surface }]}>{preview}</View>
+      </View>
+      {selected && (
+        <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: selected ? '700' : '500' },
+          selected ? null : { color: Themer.neural03Color },
+        ]}
+      >
+        {title}
+      </Text>
     </Pressable>
   );
 }
@@ -159,6 +188,8 @@ function CustomThemePreview({ theme }: { theme: ThemeData }) {
   );
 }
 
+const ESPACE = 12;
+
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   mock: { padding: 10 },
@@ -172,10 +203,12 @@ const styles = StyleSheet.create({
   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: ESPACE, 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, overflow: 'hidden' },
+  coche: { position: 'absolute', top: 8, right: 8, borderRadius: 12, borderWidth: 2, padding: 1 },
+  libelle: { marginTop: 8, textAlign: '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} />}
+            {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, backgroundColor: withAlpha(Themer.neural03Color, 0.25) },
 });

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

@@ -1,4 +1,4 @@
-import { Linking, Platform, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { AppEnv } from '../../../../core/env';
@@ -7,9 +7,10 @@ import { AppRouter, useAppRouter } from '../../../../core/router';
 import { Themer, useTheme } from '../../../../core/theme';
 import type { AppLocalizations } from '../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { TextButton } from '../../../../shared/material/buttons';
-import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../shared/material/scaffold';
+import { withAlpha } from '../../../../shared/utils/color';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { ProfileAppBar } from './profile_app_bar';
 import { ProfilePageMenu, ProfileItem } from './profile_menu';
 import { ProfilePageAvatar } from './profile_page_avatar';
 
@@ -23,7 +24,7 @@ async function launchUrl(url: string): Promise<void> {
   }
 }
 
-function menuItems(traductions: AppLocalizations): ProfileItem[] {
+function menuCompteItems(traductions: AppLocalizations): ProfileItem[] {
   const items = [
     // Compte
     new ProfileItem(Images.iconsCircleUser, traductions.profilePageMenuCompteTitle, AppRouter.profileCompte),
@@ -34,84 +35,107 @@ function menuItems(traductions: AppLocalizations): ProfileItem[] {
   if (Platform.OS !== 'web') {
     items.push(new ProfileItem(Images.iconTransactionSendByAlias, traductions.profilePageMenuAliasContactTitle, AppRouter.profileContacts));
   }
-  // Centre d'aide
-  if (AppEnv.aideLink != null && AppEnv.aideLink.length > 0) {
-    const aideLink = AppEnv.aideLink;
-    items.push(
-      new ProfileItem(
-        Images.iconsHelp,
-        traductions.profilePageMenuHelpTitle,
-        Platform.OS !== 'web' ? AppRouter.profileHelpCenter : () => void launchUrl(aideLink),
-      ),
-    );
-  }
   return items;
 }
 
-/** Profil du client (route `profile`). */
+function menuAssistanceItems(traductions: AppLocalizations): ProfileItem[] {
+  // Centre d'aide (seulement si l'hôte fournit un lien)
+  const aideLink = AppEnv.aideLink;
+  if (aideLink == null || aideLink.length === 0) return [];
+  return [
+    new ProfileItem(
+      Images.iconsHelp,
+      traductions.profilePageMenuHelpTitle,
+      Platform.OS !== 'web' ? AppRouter.profileHelpCenter : () => void launchUrl(aideLink),
+    ),
+  ];
+}
+
+/**
+ * Profil du client (route `profile`) : en-tête de l'utilisateur, menus
+ * « Mon compte » et « Assistance », puis liens légaux et version de l'app.
+ */
 export function ProfilePage() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const hasCgu = AppEnv.cguLink != null && AppEnv.cguLink.length > 0;
-  const hasPoc = AppEnv.pocLink != null && AppEnv.pocLink.length > 0;
-  const linkStyle = { fontSize: 12, fontWeight: '400' as const };
+  const assistance = menuAssistanceItems(traductions);
+  // CGU et politique de confidentialité optionnelles : l'hôte peut ne pas en fournir
+  const cguLink = AppEnv.cguLink;
+  const pocLink = AppEnv.pocLink;
+  const hasCgu = cguLink != null && cguLink.length > 0;
+  const hasPoc = pocLink != null && pocLink.length > 0;
+  const lienStyle = [
+    theme.textTheme.displaySmall,
+    { color: Themer.neural03Color, textDecorationLine: 'underline' as const, textAlign: 'center' as const },
+  ];
+
+  const lien = (texte: string, onPress: () => void) => (
+    <Pressable accessibilityRole="link" onPress={onPress} style={styles.lien}>
+      <Text style={lienStyle}>{texte}</Text>
+    </Pressable>
+  );
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.profilePageTitle} />}>
       <MyPageContainer>
-        {/* Client connecté */}
-        <ProfilePageAvatar />
-        <View style={styles.gap20} />
-        {/* Menu */}
-        <ProfilePageMenu items={menuItems(traductions)} />
-        <View style={styles.flex} />
-        {/* CGU et politique de confidentialité (optionnels) */}
-        {(hasCgu || hasPoc) && (
-          <View style={styles.links}>
-            {hasCgu && (
-              <View style={styles.flex}>
-                <TextButton
-                  textStyle={linkStyle}
-                  onPress={() => (Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginCgu) : void launchUrl(AppEnv.cguLink!))}
-                >
-                  {traductions.profilePageCGU}
-                </TextButton>
-              </View>
-            )}
-            {hasCgu && hasPoc && (
-              <Text style={[theme.textTheme.displayLarge, styles.et, { color: Themer.neural03Color }]}>{traductions.coordinationEt}</Text>
-            )}
-            {hasPoc && (
-              <View style={styles.flex}>
-                <TextButton
-                  textStyle={linkStyle}
-                  onPress={() => (Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginPoc) : void launchUrl(AppEnv.pocLink!))}
-                >
-                  {traductions.profilePagePC}
-                </TextButton>
+        <ScrollView contentContainerStyle={styles.contenu} showsVerticalScrollIndicator={false}>
+          {/* Utilisateur connecté */}
+          <ProfilePageAvatar />
+          <View style={styles.gap28} />
+
+          {/* Compte, paramètres, contacts */}
+          <ProfilePageMenu titre={traductions.profilePageSectionCompte} items={menuCompteItems(traductions)} />
+          <View style={styles.gap24} />
+
+          {/* Aide (seulement si l'hôte fournit un lien) */}
+          {assistance.length > 0 && (
+            <>
+              <ProfilePageMenu titre={traductions.profilePageSectionAssistance} items={assistance} />
+              <View style={styles.gap24} />
+            </>
+          )}
+
+          {/* CGU et politique de confidentialité, côte à côte ou l'un sous l'autre */}
+          {(hasCgu || hasPoc) && (
+            <>
+              <View style={styles.liens}>
+                {hasCgu &&
+                  lien(traductions.profilePageCGU, () =>
+                    Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginCgu) : void launchUrl(cguLink),
+                  )}
+                {hasPoc &&
+                  lien(traductions.profilePagePC, () =>
+                    Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginPoc) : void launchUrl(pocLink),
+                  )}
               </View>
-            )}
-          </View>
-        )}
-        {/* Version (lien vers le store) */}
-        <TextButton
-          textStyle={[theme.textTheme.displaySmall, styles.version]}
-          onPress={() => void launchUrl(Platform.OS === 'ios' ? AppEnv.appstoreLink : AppEnv.playstoreLink)}
-        >
-          {`${traductions.profilePageAppVersion} ${AppEnv.version}`}
-        </TextButton>
-        <View style={styles.gap10} />
+              <View style={styles.gap10} />
+            </>
+          )}
+
+          {/* Version : ouvre la fiche de l'app sur le store */}
+          <Pressable
+            accessibilityRole="link"
+            disabled={Platform.OS === 'web'}
+            onPress={() => void launchUrl(Platform.OS === 'ios' ? AppEnv.appstoreLink : AppEnv.playstoreLink)}
+            style={[styles.version, { backgroundColor: withAlpha(Themer.neural03Color, 0.12) }]}
+          >
+            <Text style={[theme.textTheme.labelLarge, { color: Themer.neural03Color }]}>
+              {`${traductions.profilePageAppVersion} ${AppEnv.version}`}
+            </Text>
+          </Pressable>
+        </ScrollView>
       </MyPageContainer>
     </Scaffold>
   );
 }
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  links: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 10 },
-  et: { paddingHorizontal: 5 },
-  version: { color: '#2196F3', textDecorationLine: 'underline' },
+  contenu: { paddingTop: 4, paddingBottom: 16 },
+  liens: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', columnGap: 12 },
+  lien: { paddingHorizontal: 4, paddingVertical: 6, borderRadius: 6 },
+  version: { alignSelf: 'center', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 },
   gap10: { height: 10 },
-  gap20: { height: 20 },
+  gap24: { height: 24 },
+  gap28: { height: 28 },
 });