@pi-spi/app 2.1.0 → 2.2.0

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

@@ -1,12 +1,15 @@
-import { useRef, useState, type ReactNode } from 'react';
-import { Keyboard, StyleSheet, Text, TextInput, useWindowDimensions, View, type TextInputInstance } from 'react-native';
+import type { ComponentProps, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { MaterialIcons } from '@expo/vector-icons';
 
-import { useTheme } from '../../../../core/theme';
+import { AuthCodeField } from '../../../../shared/widgets/auth_code_field';
+import { PinEntete, PinMessage } from '../../../../shared/widgets/pin_entete';
 
 /**
- * Saisie d'un code OTP en [pinLength] cases d'un chiffre : passage
- * automatique à la case suivante, retour à la précédente sur effacement,
- * collage du code entier dans la première case.
+ * Saisie d'un code reçu par SMS ou e-mail (alias par numéro de téléphone,
+ * refus d'une revendication, code PIN oublié) : en-tête centré, une case
+ * par chiffre avec la suggestion du code par le clavier, bandeau d'erreur
+ * et renvoi du code.
  */
 export function AliasPageOtp({
   pinLength,
@@ -17,6 +20,7 @@ export function AliasPageOtp({
   onOtpComplete,
   autoFocus = true,
   useInBottomSheet = false,
+  icone = 'sms',
 }: {
   pinLength: number;
   title: string;
@@ -26,95 +30,27 @@ export function AliasPageOtp({
   onOtpComplete: (otpCode: number[]) => void;
   autoFocus?: boolean;
   useInBottomSheet?: boolean;
+  /** Icône de la pastille de l'en-tête */
+  icone?: ComponentProps<typeof MaterialIcons>['name'];
 }) {
-  const theme = useTheme();
-  const { width: largeur } = useWindowDimensions();
-  const [values, setValues] = useState<string[]>(() => Array(pinLength).fill(''));
-  const inputs = useRef<(TextInputInstance | null)[]>([]);
-
-  const isTablet = largeur >= 600;
-  const paddingX = 20;
-  const formWidth = largeur - (useInBottomSheet && isTablet ? 40 : 0) - paddingX * 2;
-  const fieldWidth = formWidth / pinLength - 8;
-
-  const verifyOtpCompletion = (next: string[]) => {
-    const pin = next.filter((v) => /^\d$/.test(v)).map(Number);
-    if (pin.length === pinLength) onOtpComplete(pin);
-  };
-
-  const handleOtpInputChange = (raw: string, index: number) => {
-    const text = raw.replace(/\D/g, '');
-    // Cas où l'utilisateur colle tout le code OTP dans le premier champ
-    if (index === 0 && text.length === pinLength) {
-      const next = text.split('');
-      setValues(next);
-      Keyboard.dismiss();
-      verifyOtpCompletion(next);
-      return;
-    }
-    const next = [...values];
-    next[index] = text.slice(-1);
-    setValues(next);
-    if (next[index].length === 1 && index < pinLength - 1) {
-      inputs.current[index + 1]?.focus();
-    } else if (next[index].length === 0 && index > 0) {
-      inputs.current[index - 1]?.focus();
-    }
-    verifyOtpCompletion(next);
-  };
-
-  const onKeyPress = (key: string, index: number) => {
-    // Effacement sur une case déjà vide : retour à la case précédente
-    if (key === 'Backspace' && values[index].length === 0 && index > 0) {
-      const next = [...values];
-      next[index - 1] = '';
-      setValues(next);
-      inputs.current[index - 1]?.focus();
-    }
-  };
-
-  const input = theme.inputDecorationTheme;
   return (
     <View>
-      <Text style={theme.textTheme.titleSmall}>{title}</Text>
-      <View style={styles.gap5} />
-      <Text style={theme.textTheme.displaySmall}>{subtitle}</Text>
-      <View style={styles.gap32} />
-      <View style={styles.row}>
-        {values.map((value, index) => (
-          <TextInput
-            key={index}
-            ref={(ref) => {
-              inputs.current[index] = ref;
-            }}
-            value={value}
-            keyboardType="number-pad"
-            autoFocus={autoFocus && index === 0}
-            maxLength={index === 0 ? pinLength : 1}
-            onChangeText={(text) => handleOtpInputChange(text, index)}
-            onKeyPress={({ nativeEvent }) => onKeyPress(nativeEvent.key, index)}
-            textAlign="center"
-            style={[
-              theme.textTheme.headlineMedium,
-              styles.field,
-              { width: fieldWidth, backgroundColor: input.fillColor, borderRadius: input.borderRadius },
-            ]}
-          />
-        ))}
-      </View>
-      <View style={styles.gap24} />
-      {errorMessage != null && <Text style={[input.errorStyle, styles.error]}>{`⚠ ${errorMessage}`}</Text>}
+      {/* Dans une feuille : pastille plus petite */}
+      <PinEntete icone={icone} titre={title} sousTitre={subtitle} compact={useInBottomSheet} />
+      <View style={{ height: useInBottomSheet ? 20 : 28 }} />
+      <AuthCodeField
+        longueur={pinLength}
+        autoFocus={autoFocus}
+        erreur={errorMessage != null}
+        onChanged={() => undefined}
+        onComplete={(code) => onOtpComplete(code.split('').map(Number))}
+      />
+      <PinMessage message={errorMessage} />
       {countdownTimer != null && <View style={styles.timer}>{countdownTimer}</View>}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  gap5: { height: 5 },
-  gap24: { height: 24 },
-  gap32: { height: 32 },
-  row: { flexDirection: 'row', justifyContent: 'space-between' },
-  field: { height: 56, padding: 0 },
-  error: { marginLeft: 8, marginTop: 2, marginBottom: 5 },
-  timer: { flexDirection: 'row', justifyContent: 'flex-start' },
+  timer: { marginTop: 12, alignItems: 'center' },
 });

package/src/modules/categorie/domain/services/categorie_service.ts

@@ -27,7 +27,8 @@ export class CategorieService implements CategorieInputPort {
   }
 
   async list(): Promise<Categorie[]> {
-    return (await this.categorieOutputPort.list()).sort(byLabelDesc);
+    // Tri sur une copie : la liste reçue peut être non modifiable
+    return [...(await this.categorieOutputPort.list())].sort(byLabelDesc);
   }
 
   async update(categorie: Categorie): Promise<Categorie> {

package/src/modules/categorie/presentation/pages/categorie_edit_icon_btn.tsx

@@ -1,22 +1,26 @@
 import { Image } from 'expo-image';
 import { useRef } from 'react';
-import { Pressable, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useBloc } from '../../../../core/bloc_react';
-import { AppRouter, useAppRouter } from '../../../../core/router';
+import { AppRouter, useAppRouter, type SdkRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../shared/material/buttons';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { EmojiSelectWidget } from '../../../../shared/widgets/emoji_select_widget';
-import { SbSelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
+import { SelectionOption, SelectionBoutons, SelectionSheet } from '../../../../shared/widgets/selection';
 import { CategorieIconType } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
 import { CategorieAddValidationEvent, CategorieEditValidationEvent } from '../bloc/categorie_event';
 import { CategorieCreationState, CategorieEditState } from '../bloc/categorie_state';
 
+/** Ouvre la feuille de choix de l'icône d'une catégorie (emoji ou galerie). */
+export function ouvrirIconeCategorie(router: SdkRouter) {
+  void showModalBottomSheet(router, { builder: () => <CategorieEditIconOptions /> });
+}
+
 /** Bouton d'édition de l'icône d'une catégorie (création ou modification). */
 export function CategorieEditIconBtn() {
   const theme = useTheme();
@@ -24,7 +28,7 @@ export function CategorieEditIconBtn() {
   return (
     <Pressable
       accessibilityRole="button"
-      onPress={() => void showModalBottomSheet(router, { builder: () => <CategorieEditIconOptions /> })}
+      onPress={() => ouvrirIconeCategorie(router)}
       style={[styles.fab, { backgroundColor: theme.colorScheme.surface }]}
     >
       <Image source={Images.categorieImageSelect} style={styles.fabIcon} />
@@ -44,9 +48,9 @@ function CategorieEditIconOptions() {
     const edit = state instanceof CategorieEditState ? state : null;
     const command = creation?.command ?? edit?.command;
     if (!command) return;
+    // Nouvelle catégorie : pas encore d'icône ni de couleur
     const value = await showModalBottomSheet<{ emoji: string; color: number }>(router, {
-      themed: true,
-      builder: () => <CategorieEditIconEmoji icon={command.icon!} color={command.color!} />,
+      builder: () => <CategorieEditIconEmoji icon={command.icon ?? '🤩'} color={command.color ?? 0xfff9ebc2} />,
     });
     if (value == null) return;
     command.iconType = CategorieIconType.emoji;
@@ -64,14 +68,14 @@ function CategorieEditIconOptions() {
       contenu={
         <ScrollView bounces={false} contentContainerStyle={styles.optionsContent}>
           {/* Emoji */}
-          <SbSelectionOption
+          <SelectionOption
             image={Images.categorieIconEmoji}
             titre={traductions.categorieFormIconSheetEmojiTitle}
             onPress={() => void selectEmoji()}
           />
           <View style={styles.gap10} />
           {/* Choisir dans la galerie (sans action, comme dans le SDK Flutter) */}
-          <SbSelectionOption
+          <SelectionOption
             image={Images.categorieImageSelect}
             titre={traductions.categorieFormIconSheetGalleryTitle}
             onPress={() => undefined}
@@ -82,37 +86,43 @@ function CategorieEditIconOptions() {
   );
 }
 
-/** Feuille de choix de l'emoji et de la couleur ; retourne `{ emoji, color }`. */
+/** Feuille de choix de l'emoji et de la couleur ; retourne `{ emoji, color }` à l'enregistrement. */
 function CategorieEditIconEmoji({ icon, color }: { icon: string; color: number }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const selection = useRef<{ icon: string; color: number }>({ icon, color });
 
   return (
-    <View style={[styles.sheet, { height: height * 0.8, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom }]}>
-      <ScrollView contentContainerStyle={styles.sheetContent}>
-        <EmojiSelectWidget icon={icon} color={color} onChanged={(value) => (selection.current = value)} />
-        <View style={styles.saveBtn}>
-          <ElevatedButton
-            onPress={() => AppRouter.pop(router, { value: { emoji: selection.current.icon, color: selection.current.color } })}
-          >
-            {traductions.categorieFormSaveBtn}
-          </ElevatedButton>
-        </View>
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={traductions.categorieFormIconSheetEmojiTitle}
+      hauteurMax={0.9}
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.flexShrink} contentContainerStyle={styles.sheetContent}>
+            {/* Emoji et couleur */}
+            <EmojiSelectWidget icon={icon} color={color} onChanged={(value) => (selection.current = value)} />
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton
+                key="enregistrer"
+                onPress={() => AppRouter.pop(router, { value: { emoji: selection.current.icon, color: selection.current.color } })}
+              >
+                {traductions.categorieFormSaveBtn}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
   fab: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
   fabIcon: { width: 24, height: 24 },
-  sheet: { borderRadius: 20, overflow: 'hidden' },
-  sheetContent: { padding: 20 },
+  flexShrink: { flexShrink: 1 },
+  sheetContent: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 12 },
   optionsContent: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
   gap10: { height: 10 },
-  saveBtn: { paddingVertical: 20, paddingHorizontal: 4 },
 });

package/src/modules/categorie/presentation/pages/categorie_form_pages.tsx

@@ -1,16 +1,15 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import type { ReactNode } from 'react';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { Images } from '../../../../core/assets';
 import { useBloc, useBlocBuilder, useBlocListener } from '../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../shared/material/buttons';
 import { CustomTextInput } from '../../../../shared/widgets/input_text';
+import { SelectionBoutons } from '../../../../shared/widgets/selection';
 import { Categorie } from '../../domain/models/categorie';
 import { CategorieCreateCommandError, CategorieUpdateCommandError } from '../../domain/models/categorie_commands';
 import { argbToCss } from '../../domain/models/categorie_icons';
@@ -23,26 +22,38 @@ import {
   CategorieUpdateEvent,
 } from '../bloc/categorie_event';
 import { CategorieCreationState, CategorieEditState, CategorieInitialState } from '../bloc/categorie_state';
-import { CategorieEditIconBtn } from './categorie_edit_icon_btn';
-import { CategorieIcon } from './categorie_icon';
+import { ouvrirIconeCategorie } from './categorie_edit_icon_btn';
+import { CategoriePastille } from './categorie_icon';
 
-/** Squelette commun : en-tête coloré (icône + titre + bouton icône), formulaire, bouton. */
+/** Couleur ARGB d'une catégorie avec l'opacité [alpha] (0 à 1), en CSS. */
+function argbAvecAlpha(argb: number | null | undefined, alpha: number): string | undefined {
+  const rgb = (argb ?? 0xfff9ebc2) & 0xffffff;
+  return argbToCss(((Math.round(alpha * 255) << 24) | rgb) >>> 0);
+}
+
+/**
+ * Squelette commun : aperçu de l'icône (toucher pour la changer), titre,
+ * formulaire, puis bouton fixé en bas.
+ */
 function CategorieFormLayout({
-  header,
+  icon,
+  couleur,
   title,
   form,
   button,
 }: {
-  header: ReactNode;
+  icon?: string | null;
+  couleur?: number | null;
   title: string;
   form: ReactNode;
   button: ReactNode;
 }) {
   const theme = useTheme();
+  const router = useAppRouter();
   const insets = useSafeAreaInsets();
   const categorieBloc = useBloc(CategorieBloc);
   return (
-    <View style={[styles.flex, { backgroundColor: theme.secondaryHeaderColor }]}>
+    <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
       <View style={styles.backRow}>
         <Pressable
           accessibilityRole="button"
@@ -53,23 +64,22 @@ function CategorieFormLayout({
           <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>
       </View>
-      {/* Icône et titre */}
-      <View style={styles.header}>
-        <View style={styles.center}>{header}</View>
-        <View style={styles.titleRow}>
-          <Text numberOfLines={1} style={[theme.textTheme.titleSmall, styles.flex]}>
-            {title}
-          </Text>
-          <CategorieEditIconBtn />
-        </View>
-      </View>
-      {/* Formulaire */}
-      <ScrollView style={[styles.flex, { backgroundColor: theme.scaffoldBackgroundColor }]} contentContainerStyle={styles.form}>
+      <ScrollView style={styles.flex} contentContainerStyle={styles.form}>
+        {/* Aperçu de l'icône, toucher pour la changer */}
+        <Pressable accessibilityRole="button" onPress={() => ouvrirIconeCategorie(router)} style={styles.apercu}>
+          <CategoriePastille icon={icon} bgColor={couleur} taille={112} />
+          {/* Badge modifier */}
+          <View style={[styles.badge, { backgroundColor: theme.colorScheme.primary, borderColor: theme.scaffoldBackgroundColor }]}>
+            <MaterialIcons name="edit" size={16} color={theme.colorScheme.onPrimary} />
+          </View>
+        </Pressable>
+        {/* Titre */}
+        <Text numberOfLines={1} style={[theme.textTheme.titleSmall, styles.titre]}>
+          {title}
+        </Text>
         {form}
       </ScrollView>
-      <View style={[styles.button, { backgroundColor: theme.scaffoldBackgroundColor, paddingBottom: 20 + insets.bottom }]}>
-        {button}
-      </View>
+      <SelectionBoutons boutons={[button]} />
     </View>
   );
 }
@@ -89,7 +99,8 @@ export function CategorieAddPage() {
 
   return (
     <CategorieFormLayout
-      header={<Image source={Images.categorie} style={styles.addIllustration} contentFit="contain" />}
+      icon={command.icon}
+      couleur={command.color}
       title={traductions.categorieCustomAdd}
       form={
         <>
@@ -122,9 +133,16 @@ export function CategorieAddPage() {
                   command.color = c.bgColor;
                   categorieBloc.add(new CategorieAddValidationEvent(command));
                 }}
-                style={[styles.chip, { backgroundColor: theme.secondaryHeaderColor, borderRadius: theme.chipTheme.borderRadius }]}
+                style={[
+                  styles.chip,
+                  {
+                    backgroundColor: argbAvecAlpha(c.bgColor, 0.18),
+                    borderColor: argbAvecAlpha(c.bgColor, 0.6),
+                  },
+                ]}
               >
-                <Text style={theme.chipTheme.labelStyle}>{c.label}</Text>
+                <CategoriePastille icon={c.icon} bgColor={c.bgColor} taille={26} />
+                <Text style={[theme.textTheme.displayMedium, styles.chipTexte]}>{c.label}</Text>
               </Pressable>
             ))}
           </View>
@@ -132,6 +150,7 @@ export function CategorieAddPage() {
       }
       button={
         <ElevatedButton
+          key="creer"
           onPress={() => {
             if (command.isValid()) categorieBloc.add(new CategorieCreateEvent(command));
           }}
@@ -156,13 +175,7 @@ export function CategorieEditPage() {
   const { categorie, command } = state;
 
   return (
-    <CategorieFormLayout
-      header={
-        <View style={[styles.editIcon, { backgroundColor: argbToCss(command.color) }]}>
-          <CategorieIcon icon={command.icon!} size={96} emojiSize={64} />
-        </View>
-      }
-      title={categorie.label}
+    <CategorieFormLayout icon={command.icon} couleur={command.color} title={categorie.label}
       form={
         <View style={styles.input}>
           <CustomTextInput
@@ -178,6 +191,7 @@ export function CategorieEditPage() {
       }
       button={
         <ElevatedButton
+          key="enregistrer"
           onPress={() => {
             if (command.isValid()) categorieBloc.add(new CategorieUpdateEvent(command, categorie));
           }}
@@ -193,14 +207,30 @@ const styles = StyleSheet.create({
   flex: { flex: 1 },
   backRow: { flexDirection: 'row' },
   back: { padding: 12 },
-  header: { height: 200, paddingHorizontal: 20, paddingBottom: 20, justifyContent: 'space-between' },
-  center: { alignItems: 'center' },
-  titleRow: { flexDirection: 'row', alignItems: 'center' },
-  addIllustration: { width: 128, height: 110 },
-  editIcon: { borderRadius: 999, paddingVertical: 10, paddingHorizontal: 15, alignItems: 'center', justifyContent: 'center' },
   form: { paddingHorizontal: 20, paddingBottom: 20 },
-  input: { paddingVertical: 20 },
+  apercu: { alignSelf: 'center' },
+  badge: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    borderWidth: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titre: { textAlign: 'center', marginTop: 14 },
+  input: { paddingTop: 24, paddingBottom: 16 },
   chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
-  chip: { paddingHorizontal: 12, paddingVertical: 8 },
-  button: { padding: 20 },
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 4,
+    paddingRight: 12,
+    paddingVertical: 4,
+    borderRadius: 999,
+    borderWidth: 1,
+  },
+  chipTexte: { marginLeft: 8, fontWeight: '600' },
 });

package/src/modules/categorie/presentation/pages/categorie_icon.tsx

@@ -1,6 +1,8 @@
 import { Image } from 'expo-image';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { Images } from '../../../../core/assets';
+import { useTheme } from '../../../../core/theme';
 import { argbToCss, categorieIconSource, isAssetIcon } from '../../domain/models/categorie_icons';
 
 /** Icône d'une catégorie (image ou emoji), éventuellement dans un cercle coloré. */
@@ -33,6 +35,30 @@ export function CategorieIconCircle({ icon, bgColor }: { icon: string; bgColor?:
   );
 }
 
+/**
+ * Pastille ronde d'une catégorie : [icon] (image ou emoji) sur sa
+ * [bgColor]. Sans [icon], l'illustration par défaut des catégories.
+ */
+export function CategoriePastille({ icon, bgColor, taille = 44 }: { icon?: string | null; bgColor?: number | null; taille?: number }) {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.pastille,
+        { width: taille, height: taille, borderRadius: taille / 2 },
+        { backgroundColor: bgColor != null ? argbToCss(bgColor) : theme.colorScheme.surface },
+      ]}
+    >
+      {icon == null ? (
+        <Image source={Images.categorie} style={{ width: taille * 0.7, height: taille * 0.7 }} contentFit="contain" />
+      ) : (
+        <CategorieIcon icon={icon} size={taille * 0.5} emojiSize={taille * 0.48} />
+      )}
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
+  pastille: { alignItems: 'center', justifyContent: 'center' },
   circle: { width: 45, height: 45, borderRadius: 22.5, alignItems: 'center', justifyContent: 'center' },
 });

package/src/modules/categorie/presentation/pages/categorie_liste_widget.tsx

@@ -5,27 +5,34 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useBloc } from '../../../../core/bloc_react';
 import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { TextButton } from '../../../../shared/material/buttons';
 import { Card } from '../../../../shared/material/card';
+import { withAlpha } from '../../../../shared/utils/color';
 import type { Categorie } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
 import { CategorieEditEvent } from '../bloc/categorie_event';
-import { CategorieIconCircle } from './categorie_icon';
+import { CategoriePastille } from './categorie_icon';
 
-/** Liste de catégories à cocher (avec bouton « Modifier » si [editable]). */
+/**
+ * Liste de catégories dans une carte : pastille, nom, bouton de
+ * modification si [editable] et, en sélection multiple, rond coché. En
+ * [selectionUnique], toucher une ligne la choisit (sans rond).
+ */
 export function CategorieListeWidget({
   liste,
   defaultSelectedCategories,
   onSelectionChanged,
   editable,
+  selectionUnique = false,
 }: {
   liste: readonly Categorie[];
   defaultSelectedCategories: string[];
   onSelectionChanged: (categorie: Categorie, checked: boolean) => void;
   editable?: boolean;
+  selectionUnique?: boolean;
 }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
   const categorieBloc = useBloc(CategorieBloc);
   // Catégories sélectionnées
   const [selected, setSelected] = useState<string[]>(() =>
@@ -33,39 +40,51 @@ export function CategorieListeWidget({
   );
 
   return (
-    <Card>
+    <Card style={styles.carte}>
       <View style={styles.list}>
         {liste.map((categorie) => {
           const checked = selected.includes(categorie.id);
+          const marquee = checked && !selectionUnique;
           return (
             <Pressable
               key={categorie.id}
-              accessibilityRole="checkbox"
+              accessibilityRole={selectionUnique ? 'button' : 'checkbox'}
               accessibilityState={{ checked }}
               onPress={() => {
-                const value = !checked;
+                const value = selectionUnique ? true : !checked;
                 setSelected((s) => (value ? [...s, categorie.id] : s.filter((id) => id !== categorie.id)));
                 onSelectionChanged(categorie, value);
               }}
-              style={styles.row}
+              style={({ pressed }) => [
+                styles.row,
+                { backgroundColor: marquee ? withAlpha(primaire, 0.08) : pressed ? theme.colorScheme.secondary : 'transparent' },
+              ]}
             >
-              <MaterialIcons
-                name={checked ? 'check-box' : 'check-box-outline-blank'}
-                size={24}
-                color={checked ? theme.colorScheme.primary : Themer.neural02Color}
-              />
-              <View style={styles.gap12} />
-              <CategorieIconCircle icon={categorie.icon} bgColor={categorie.bgColor} />
-              <View style={styles.gap12} />
+              <CategoriePastille icon={categorie.icon} bgColor={categorie.bgColor} />
               {/* Libellé */}
-              <Text numberOfLines={1} style={[theme.textTheme.headlineSmall, styles.flex]}>
-                {` ${categorie.label}`}
+              <Text numberOfLines={1} style={[theme.textTheme.displayLarge, styles.label, { fontWeight: marquee ? '700' : '500' }]}>
+                {categorie.label}
               </Text>
               {/* Bouton modifier */}
               {editable === true && (
-                <TextButton onPress={() => categorieBloc.add(new CategorieEditEvent(categorie))}>
-                  {traductions.categorieEditBtn}
-                </TextButton>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel={traductions.categorieEditBtn}
+                  hitSlop={8}
+                  style={styles.modifier}
+                  onPress={() => categorieBloc.add(new CategorieEditEvent(categorie))}
+                >
+                  <MaterialIcons name="edit" size={20} color={Themer.neural03Color} />
+                </Pressable>
+              )}
+              {/* Sélection multiple : rond coché */}
+              {!selectionUnique && (
+                <MaterialIcons
+                  name={checked ? 'check-circle' : 'radio-button-unchecked'}
+                  size={22}
+                  color={checked ? primaire : Themer.neural03Color}
+                  style={styles.coche}
+                />
               )}
             </Pressable>
           );
@@ -76,8 +95,10 @@ export function CategorieListeWidget({
 }
 
 const styles = StyleSheet.create({
-  list: { paddingVertical: 8 },
-  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8 },
-  gap12: { width: 12 },
-  flex: { flex: 1 },
+  carte: { margin: 0 },
+  list: { padding: 6 },
+  row: { flexDirection: 'row', alignItems: 'center', marginVertical: 1, paddingHorizontal: 8, paddingVertical: 8, borderRadius: 14 },
+  label: { flex: 1, marginLeft: 14 },
+  modifier: { padding: 8 },
+  coche: { marginHorizontal: 4 },
 });