@pi-spi/app 2.0.0 → 2.2.0

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

@@ -1,23 +1,26 @@
 import { Image } from 'expo-image';
 import { useRef } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, 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 { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { EmojiSelectWidget } from '../../../../shared/widgets/emoji_select_widget';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+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();
@@ -25,7 +28,7 @@ export function CategorieEditIconBtn() {
   return (
     <Pressable
       accessibilityRole="button"
-      onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <CategorieEditIconOptions /> })}
+      onPress={() => ouvrirIconeCategorie(router)}
       style={[styles.fab, { backgroundColor: theme.colorScheme.surface }]}
     >
       <Image source={Images.categorieImageSelect} style={styles.fabIcon} />
@@ -33,13 +36,10 @@ export function CategorieEditIconBtn() {
   );
 }
 
-/** Feuille des options d'icône : emoji (ou galerie, non disponible, comme en Flutter) */
+/** Feuille des options d'icône : emoji (ou galerie, non disponible, comme en Flutter). */
 function CategorieEditIconOptions() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
   const categorieBloc = useBloc(CategorieBloc);
 
   const selectEmoji = async () => {
@@ -48,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;
@@ -63,58 +63,66 @@ function CategorieEditIconOptions() {
   };
 
   return (
-    <View style={[styles.sheet, { maxHeight: height * 0.5, backgroundColor: theme.colorScheme.surface, paddingBottom: insets.bottom }]}>
-      <ScrollView contentContainerStyle={styles.sheetContent}>
-        <Text style={[theme.textTheme.headlineMedium, styles.title]}>{traductions.categorieFormIconSheetTitle}</Text>
-        <Card>
-          <MenuActionsWidget
-            items={[
-              // Emoji
-              new MenuActionItem(Images.categorieIconEmoji, traductions.categorieFormIconSheetEmojiTitle, null, () => void selectEmoji(), {
-                iconSize: 20,
-              }),
-              // Choisir dans la galerie (sans action, comme dans le SDK Flutter)
-              new MenuActionItem(Images.categorieImageSelect, traductions.categorieFormIconSheetGalleryTitle, null, () => undefined, {
-                iconSize: 20,
-              }),
-            ]}
+    <SelectionSheet
+      titre={traductions.categorieFormIconSheetTitle}
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.optionsContent}>
+          {/* Emoji */}
+          <SelectionOption
+            image={Images.categorieIconEmoji}
+            titre={traductions.categorieFormIconSheetEmojiTitle}
+            onPress={() => void selectEmoji()}
           />
-        </Card>
-      </ScrollView>
-    </View>
+          <View style={styles.gap10} />
+          {/* Choisir dans la galerie (sans action, comme dans le SDK Flutter) */}
+          <SelectionOption
+            image={Images.categorieImageSelect}
+            titre={traductions.categorieFormIconSheetGalleryTitle}
+            onPress={() => undefined}
+          />
+        </ScrollView>
+      }
+    />
   );
 }
 
-/** 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 },
-  title: { marginBottom: 20 },
-  saveBtn: { paddingVertical: 20, paddingHorizontal: 4 },
+  flexShrink: { flexShrink: 1 },
+  sheetContent: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 12 },
+  optionsContent: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  gap10: { height: 10 },
 });

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

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

@@ -2,17 +2,15 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useBloc, useBlocBuilder, useBlocListener } from '../../../../core/bloc_react';
+import { useBloc, useBlocListener } from '../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { Themer, useTheme } from '../../../../core/theme';
+import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { Card } from '../../../../shared/material/card';
-import { Divider } from '../../../../shared/material/divider';
-import { Categorie } from '../../domain/models/categorie';
+import type { Categorie } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
-import { CategorieAddEvent, CategorieListEvent } from '../bloc/categorie_event';
+import { CategorieListEvent } from '../bloc/categorie_event';
 import { CategorieCreationState, CategorieEditState, CategorieInitialState } from '../bloc/categorie_state';
-import { CategorieListeWidget } from './categorie_liste_widget';
+import { CategorieSelectWidget } from './categorie_select_widget';
 
 /** Choix d'une catégorie : la catégorie choisie est retournée à l'écran appelant. */
 export function CategorieSelectPage() {
@@ -21,7 +19,6 @@ export function CategorieSelectPage() {
   const router = useAppRouter();
   const insets = useSafeAreaInsets();
   const categorieBloc = useBloc(CategorieBloc);
-  const state = useBlocBuilder(categorieBloc);
 
   useBlocListener(
     categorieBloc,
@@ -54,39 +51,10 @@ export function CategorieSelectPage() {
           <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>
       </View>
+      {/* Titre */}
+      <Text style={[theme.textTheme.headlineLarge, styles.titre]}>{traductions.categorieSelectionUniqueTitle}</Text>
       <ScrollView contentContainerStyle={styles.content}>
-        {/* Catégories personnalisées */}
-        <Text style={theme.textTheme.headlineSmall}>{traductions.categorieCustomTitle}</Text>
-        <View style={styles.gap14} />
-        <Card>
-          {/* Bouton ajouter */}
-          <Pressable accessibilityRole="button" onPress={() => categorieBloc.add(new CategorieAddEvent())} style={styles.addRow}>
-            <View style={[styles.addIcon, { backgroundColor: theme.colorScheme.surface }]}>
-              <MaterialIcons name="add" size={24} color={theme.colorScheme.onSurface} />
-            </View>
-            <Text style={theme.textTheme.headlineSmall}>{traductions.categorieCustomAdd}</Text>
-          </Pressable>
-          {/* Catégories personnalisées */}
-          {state.categories.length > 0 && (
-            <>
-              <View style={styles.divider}>
-                <Divider color={Themer.neural01Color} />
-              </View>
-              <CategorieListeWidget
-                key={state.categories.map((c) => c.id + c.label).join()}
-                liste={state.categories}
-                editable
-                defaultSelectedCategories={[]}
-                onSelectionChanged={onSelected}
-              />
-            </>
-          )}
-        </Card>
-        <View style={styles.gap32} />
-        {/* Catégories par défaut */}
-        <Text style={theme.textTheme.headlineSmall}>{traductions.categorieDefaultTitle}</Text>
-        <View style={styles.gap14} />
-        <CategorieListeWidget liste={Categorie.defaultListe} defaultSelectedCategories={[]} onSelectionChanged={onSelected} />
+        <CategorieSelectWidget canAdd editable showTitles selectionUnique selectedCategories={[]} onSelectionChanged={onSelected} />
       </ScrollView>
     </View>
   );
@@ -96,10 +64,6 @@ const styles = StyleSheet.create({
   flex: { flex: 1 },
   backRow: { flexDirection: 'row' },
   back: { padding: 12 },
-  content: { paddingHorizontal: 12, paddingTop: 12 },
-  addRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 16, gap: 16 },
-  addIcon: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
-  divider: { paddingHorizontal: 16 },
-  gap14: { height: 14 },
-  gap32: { height: 32 },
+  titre: { paddingHorizontal: 20, paddingBottom: 16 },
+  content: { paddingHorizontal: 16, paddingBottom: 20 },
 });