@pi-spi/app 2.0.0 → 2.2.0

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

@@ -1,37 +1,74 @@
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { useBloc, useBlocBuilder } from '../../../../core/bloc_react';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { SelectionOption } from '../../../../shared/widgets/selection';
 import { Categorie } from '../../domain/models/categorie';
 import { CategorieBloc } from '../bloc/categorie_bloc';
+import { CategorieAddEvent } from '../bloc/categorie_event';
 import { CategorieListeWidget } from './categorie_liste_widget';
 
-/** Sélection de catégories (personnalisées puis prédéfinies), utilisée par les filtres. */
+/**
+ * Catégories personnalisées (avec ajout et modification si demandé) puis
+ * catégories par défaut ; utilisée par la page de choix et les filtres.
+ */
 export function CategorieSelectWidget({
   onSelectionChanged,
   selectedCategories,
+  editable = false,
+  canAdd = false,
+  showTitles = false,
+  selectionUnique = false,
 }: {
   onSelectionChanged: (categorie: Categorie, checked: boolean) => void;
   selectedCategories: string[];
+  editable?: boolean;
+  canAdd?: boolean;
+  showTitles?: boolean;
+  /** Toucher une catégorie la choisit, sans rond coché */
+  selectionUnique?: boolean;
 }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
   const categorieBloc = useBloc(CategorieBloc);
   const state = useBlocBuilder(categorieBloc);
+  const personnalisees = canAdd || state.categories.length > 0;
+
+  const titre = (texte: string) => (
+    <Text style={[theme.textTheme.displayMedium, styles.titre, { color: Themer.neural03Color }]}>{texte}</Text>
+  );
+
   return (
     <View>
-      {/* Catégories personnalisées (pas de carte vide s'il n'y en a pas) */}
-      {state.categories.length > 0 && (
-        <>
-          <CategorieListeWidget
-            liste={state.categories}
-            editable={false}
-            defaultSelectedCategories={selectedCategories}
-            onSelectionChanged={onSelectionChanged}
+      {/* Catégories personnalisées */}
+      {showTitles && personnalisees && titre(traductions.categorieCustomTitle)}
+      {canAdd && (
+        <View style={styles.ajout}>
+          <SelectionOption
+            icone="add"
+            titre={traductions.categorieCustomAdd}
+            onPress={() => categorieBloc.add(new CategorieAddEvent())}
           />
-          <View style={styles.gap16} />
-        </>
+        </View>
+      )}
+      {state.categories.length > 0 && (
+        <CategorieListeWidget
+          // Nouvelle liste quand une catégorie est ajoutée ou renommée
+          key={state.categories.map((c) => c.id + c.label).join()}
+          liste={state.categories}
+          editable={editable}
+          selectionUnique={selectionUnique}
+          defaultSelectedCategories={selectedCategories}
+          onSelectionChanged={onSelectionChanged}
+        />
       )}
+      {personnalisees && <View style={styles.gap24} />}
       {/* Catégories par défaut */}
+      {showTitles && titre(traductions.categorieDefaultTitle)}
       <CategorieListeWidget
         liste={Categorie.defaultListe}
+        selectionUnique={selectionUnique}
         defaultSelectedCategories={selectedCategories}
         onSelectionChanged={onSelectionChanged}
       />
@@ -39,4 +76,8 @@ export function CategorieSelectWidget({
   );
 }
 
-const styles = StyleSheet.create({ gap16: { height: 16 } });
+const styles = StyleSheet.create({
+  titre: { fontWeight: '700', paddingHorizontal: 4, paddingBottom: 10 },
+  ajout: { marginBottom: 10 },
+  gap24: { height: 24 },
+});

package/src/modules/config/domain/models/config_keys.ts

@@ -38,6 +38,9 @@ export enum ConfigKey {
 
   /** L'utilisateur a passé l'introduction du module économie */
   economieIntroductionPassed = 'ECONOMIE_INTRODUCTION_PASSED',
+
+  /** Nombre d'affichages de l'accueil où la recherche a pulsé (3 : terminé) */
+  searchHintCount = 'SEARCH_HINT_COUNT',
 }
 
 /** Toutes les clés, dans l'ordre de déclaration (≈ `ConfigKey.values`). */

package/src/modules/contacts/domain/contact_pi.ts

@@ -1,9 +1,6 @@
-import { Logger } from '../../../core/logger';
 import { getAliasValue, type PhoneContact } from './phone_contact';
 
 export class ContactPI {
-  static readonly logger = new Logger();
-
   name: string;
   phoneNumber: string;
   alias?: string | null;
@@ -25,8 +22,8 @@ export class ContactPI {
 
   /** Récupère la valeur de l'alias */
   static getAlias(contact: PhoneContact): string | null {
-    const alias = getAliasValue(contact);
-    if (alias == null) ContactPI.logger.i(`No alias found for contact ${contact.displayName}`);
-    return alias;
+    // Pas de log : la plupart des contacts n'ont pas d'alias, et cette
+    // fonction est appelée pour chaque contact affiché
+    return getAliasValue(contact);
   }
 }

package/src/modules/contacts/presentation/bloc/contact_bloc.ts

@@ -105,16 +105,19 @@ export class ContactBloc extends Bloc<ContactEvent, ContactState> {
   /** Contacts dont le nom, l'alias ou un numéro contient [keyword] */
   private filter(contacts: PhoneContact[], keyword: string): PhoneContact[] {
     const lower = keyword.toLowerCase();
-    return contacts.filter((contact) => {
-      const alias = getAliasValue(contact);
-      return (
-        contact.displayName.toLowerCase().includes(lower) ||
-        (alias != null && alias.toLowerCase().includes(lower)) ||
-        contact.phones.some(
-          (phone) => phone.number.trim().replace(/ /g, '').includes(lower) || normalizedNumber(phone).includes(lower),
-        )
-      );
-    });
+    return contacts.filter((contact) => this.correspond(contact, lower));
+  }
+
+  /** [contact] correspond-il à [keyword] (en minuscules) : nom, alias ou numéro ? */
+  correspond(contact: PhoneContact, keyword: string): boolean {
+    const alias = getAliasValue(contact);
+    return (
+      contact.displayName.toLowerCase().includes(keyword) ||
+      (alias != null && alias.toLowerCase().includes(keyword)) ||
+      contact.phones.some(
+        (phone) => phone.number.trim().replace(/ /g, '').includes(keyword) || normalizedNumber(phone).includes(keyword),
+      )
+    );
   }
 
   /** Vérifier si un alias existe dans la liste des contacts */
@@ -133,19 +136,33 @@ export class ContactBloc extends Bloc<ContactEvent, ContactState> {
   // (AliasWidget, liste des transactions...).
   private contactsByAliasSource: PhoneContact[] | null = null;
   private contactsByAliasCache = new Map<string, PhoneContact>();
+  private contactsPiCache: PhoneContact[] = [];
 
   private get contactsByAlias(): Map<string, PhoneContact> {
+    this.indexer();
+    return this.contactsByAliasCache;
+  }
+
+  /** Contacts qui ont un alias PI-SPI, dans l'ordre de la liste ; calculé avec l'index, une fois par liste */
+  get contactsPi(): PhoneContact[] {
+    this.indexer();
+    return this.contactsPiCache;
+  }
+
+  private indexer(): void {
     const contacts = this.state.contactsAll;
-    if (contacts !== this.contactsByAliasSource) {
-      this.contactsByAliasSource = contacts;
-      const index = new Map<string, PhoneContact>();
-      for (const contact of contacts ?? []) {
-        const alias = getAliasValue(contact);
-        // Premier contact trouvé pour un alias
-        if (alias != null && !index.has(alias)) index.set(alias, contact);
-      }
-      this.contactsByAliasCache = index;
+    if (contacts === this.contactsByAliasSource) return;
+    this.contactsByAliasSource = contacts;
+    const index = new Map<string, PhoneContact>();
+    const pis: PhoneContact[] = [];
+    for (const contact of contacts ?? []) {
+      const alias = getAliasValue(contact);
+      if (alias == null) continue;
+      pis.push(contact);
+      // Premier contact trouvé pour un alias
+      if (!index.has(alias)) index.set(alias, contact);
     }
-    return this.contactsByAliasCache;
+    this.contactsByAliasCache = index;
+    this.contactsPiCache = pis;
   }
 }

package/src/modules/contacts/presentation/pages/contact_actions_sheet.tsx

@@ -0,0 +1,69 @@
+import { Platform, ScrollView, Share, StyleSheet, Text, View } from 'react-native';
+
+import { AppRouter, useAppRouter, type SdkRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { CircleAvatarWidget } from '../../../../shared/widgets/circle_avatar_widget';
+import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
+import { SelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
+
+/** Ouvre la feuille d'actions d'un contact PI : copier ou partager son alias. */
+export function ouvrirActionsContact(router: SdkRouter, props: { nom: string; alias: string; photo?: string | null }) {
+  void showModalBottomSheet(router, { builder: () => <ContactActionsSheet {...props} /> });
+}
+
+/** Feuille d'actions sur un contact PI : avatar, nom et alias, puis copier ou partager l'alias. */
+export function ContactActionsSheet({ nom, alias, photo }: { nom: string; alias: string; photo?: string | null }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  return (
+    <SelectionSheet
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {/* Contact : avatar, nom et alias */}
+          <View style={styles.entete}>
+            <CircleAvatarWidget nom={nom} photo={photo} rounded radius={52} />
+            <View style={styles.textes}>
+              <Text numberOfLines={2} style={theme.textTheme.headlineSmall}>
+                {nom}
+              </Text>
+              <View style={styles.gap2} />
+              <Text style={[theme.textTheme.displayMedium, { color: Themer.neural03Color }]}>{alias}</Text>
+            </View>
+          </View>
+          <View style={styles.gap20} />
+          {/* Copier l'alias */}
+          <SelectionOption
+            icone="content-copy"
+            titre={traductions.contactActionsCopy}
+            onPress={() => {
+              void ClipboardWidget.setData(alias);
+              AppRouter.pop(router);
+            }}
+          />
+          <View style={styles.gap10} />
+          {/* Partager l'alias */}
+          <SelectionOption
+            icone={Platform.OS === 'ios' ? 'ios-share' : 'share'}
+            titre={traductions.contactActionsShare}
+            onPress={() => {
+              AppRouter.pop(router);
+              void Share.share({ title: traductions.qrcodePagePartageAliasMessage(nom), message: alias });
+            }}
+          />
+        </ScrollView>
+      }
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 16 },
+  entete: { flexDirection: 'row', alignItems: 'center' },
+  textes: { flex: 1, marginLeft: 14 },
+  gap2: { height: 2 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});

package/src/modules/contacts/presentation/pages/contact_list_alias_widget.tsx

@@ -7,7 +7,8 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { NotificationDialog, NotificationType } from '../../../../shared/widgets/notification_dialog';
-import type { ContactPI } from '../../domain/contact_pi';
+import { ContactList } from '../../domain/contact_list';
+import { ContactPI } from '../../domain/contact_pi';
 import { ContactBloc } from '../bloc/contact_bloc';
 import { ContactListEvent, ContactMoreEvent } from '../bloc/contact_event';
 import { ContactListState } from '../bloc/contact_state';
@@ -15,6 +16,7 @@ import { groupContacts } from './contact_groups';
 import type { ContactSelectHandler } from './contact_list_widget_item';
 import { ContactSection } from './contact_section';
 import { PaginatedScrollView } from '../../../../shared/widgets/paginated_scroll_view';
+import { PaginationLoaderWidget } from '../../../../shared/widgets/pagination_loader_widget';
 
 /**
  * Liste des contacts du téléphone, regroupés par lettre (un contact par
@@ -30,6 +32,7 @@ export function ContactAliasListWidget({
   expanded = false,
   smallItem = false,
   searchKeyword,
+  showActions = true,
 }: {
   onSelect?: ContactSelectHandler;
   selectedContacts?: ContactPI[] | null;
@@ -38,6 +41,8 @@ export function ContactAliasListWidget({
   expanded?: boolean;
   smallItem?: boolean;
   searchKeyword?: string | null;
+  /** Bouton « ⋯ » vers les actions sur l'alias de chaque contact */
+  showActions?: boolean;
 }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
@@ -76,7 +81,15 @@ export function ContactAliasListWidget({
 
   const contacts = state.contacts.data;
   const next = state.contacts.meta.next as number | undefined;
-  if (contacts.length === 0) return null;
+  // Contacts PI-SPI en tête (tous, filtrés par la recherche), puis les
+  // autres contacts chargés, par lettre
+  const motCle = (searchKeyword ?? '').trim().toLowerCase();
+  const pis = motCle.length === 0 ? contactBloc.contactsPi : contactBloc.contactsPi.filter((c) => contactBloc.correspond(c, motCle));
+  if (contacts.length === 0 && pis.length === 0) return null;
+  const groupes = [
+    ...(pis.length > 0 ? [new ContactList(traductions.contactSectionPi, pis)] : []),
+    ...groupContacts(contacts.filter((contact) => ContactPI.getAlias(contact) == null)),
+  ];
 
   const onEndReached = () => {
     if (next != null) contactBloc.add(new ContactMoreEvent(contacts, next, searchKeyword));
@@ -87,9 +100,18 @@ export function ContactAliasListWidget({
       onEndReached={onEndReached}
       style={expanded ? styles.flex : { minHeight: 100, maxHeight: maxHeight ?? window.height * 0.65, flexGrow: 0 }}
     >
-      {groupContacts(contacts).map((group) => (
-        <ContactSection key={group.header} group={group} onSelect={onSelect} selectedContacts={selectedContacts} smallItem={smallItem} />
+      {groupes.map((group) => (
+        <ContactSection
+          key={group.header}
+          group={group}
+          onSelect={onSelect}
+          selectedContacts={selectedContacts}
+          smallItem={smallItem}
+          showActions={showActions}
+        />
       ))}
+      {/* Loader tant qu'il reste des contacts à charger */}
+      {next != null && <PaginationLoaderWidget />}
     </PaginatedScrollView>
   );
 

package/src/modules/contacts/presentation/pages/contact_list_phone_widget.tsx

@@ -8,6 +8,7 @@ import { groupContactPhones, groupContacts } from './contact_groups';
 import type { ContactSelectHandler } from './contact_list_widget_item';
 import { ContactSection } from './contact_section';
 import { PaginatedScrollView } from '../../../../shared/widgets/paginated_scroll_view';
+import { PaginationLoaderWidget } from '../../../../shared/widgets/pagination_loader_widget';
 
 /**
  * Liste des numéros de téléphone des contacts, regroupés par lettre : un
@@ -45,6 +46,8 @@ export function ContactPhoneListWidget({
       {(enableAlias ? groupContacts(contacts) : groupContactPhones(contacts)).map((group) => (
         <ContactSection key={group.header} group={group} onSelect={onSelect} selectedContacts={selectedContacts} smallItem={smallItem} />
       ))}
+      {/* Loader tant qu'il reste des contacts à charger */}
+      {next != null && <PaginationLoaderWidget />}
     </PaginatedScrollView>
   );
 }

package/src/modules/contacts/presentation/pages/contact_list_widget_item.tsx

@@ -1,24 +1,25 @@
 import { MaterialIcons } from '@expo/vector-icons';
 import { Image } from 'expo-image';
-import { Platform, Pressable, Share, StyleSheet, Text, View, type GestureResponderEvent } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useAppRouter } from '../../../../core/router';
 import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { showPopupMenu } from '../../../../shared/material/popup_menu';
+import { withAlpha } from '../../../../shared/utils/color';
 import { CircleAvatarWidget } from '../../../../shared/widgets/circle_avatar_widget';
-import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
 import { ContactPI } from '../../domain/contact_pi';
 import type { PhoneContact } from '../../domain/phone_contact';
+import { ouvrirActionsContact } from './contact_actions_sheet';
 
 export type ContactSelectHandler = (contact: PhoneContact, alias: string | null, isSelected: boolean | null) => void;
 
 /**
  * Un contact du téléphone : avatar (avec le badge π s'il a un alias
- * PI-SPI), nom, et alias ou à défaut premier numéro. Avec [showCheckbox],
- * une case à cocher précède la ligne ; sinon, un appui long sur un contact
- * ayant un alias ouvre un menu pour copier ou partager cet alias.
+ * PI-SPI), nom, et alias ou à défaut premier numéro. Avec [showCheckbox]
+ * (sélection multiple), la ligne choisie est surlignée avec un rond coché à
+ * droite ; sinon, un bouton « ⋯ » (et l'appui long) ouvre les actions sur
+ * l'alias (copier, partager) si [showActions].
  */
 export function ContactListWidgetItem({
   contact,
@@ -26,44 +27,43 @@ export function ContactListWidgetItem({
   showCheckbox = false,
   isSelected = false,
   smallItem = false,
+  showActions = true,
 }: {
   contact: PhoneContact;
   onSelect?: ContactSelectHandler;
   showCheckbox?: boolean;
   isSelected?: boolean;
   smallItem?: boolean;
+  showActions?: boolean;
 }) {
   const theme = useTheme();
   const router = useAppRouter();
   const traductions = useAppLocalizations();
+  const primaire = theme.colorScheme.primary;
   const alias = ContactPI.getAlias(contact);
-  const avatarSize = smallItem ? 35 : 45;
+  const choisi = showCheckbox && isSelected;
+  const actions = !showCheckbox && showActions && alias != null;
+  const avatarSize = smallItem ? 36 : 44;
   const badgeSize = smallItem ? 14 : 18;
+  const ouvrirActions = () =>
+    ouvrirActionsContact(router, { nom: contact.displayName, alias: alias!, photo: contact.photo });
 
-  const showLightMenu = (event: GestureResponderEvent) => {
-    void showPopupMenu(router, {
-      x: event.nativeEvent.pageX,
-      y: event.nativeEvent.pageY,
-      items: [
-        {
-          icon: 'content-copy',
-          label: traductions.profileContactPageaActionCopy,
-          onTap: () => void ClipboardWidget.setData(alias!),
-        },
-        {
-          icon: Platform.OS === 'ios' ? 'ios-share' : 'share',
-          label: traductions.profileContactPageaActionShare,
-          onTap: () =>
-            void Share.share({ title: traductions.qrcodePagePartageAliasMessage(contact.displayName), message: alias! }),
-        },
-      ],
-    });
-  };
-
-  const tile = (
-    <View style={[styles.tile, { minHeight: smallItem ? 48 : 64 }]}>
+  return (
+    <Pressable
+      accessibilityRole={showCheckbox ? 'checkbox' : 'button'}
+      accessibilityState={showCheckbox ? { checked: isSelected } : undefined}
+      // Sélection multiple : bascule ; sinon : choix direct
+      onPress={() => onSelect?.(contact, alias, showCheckbox ? !isSelected : null)}
+      // Copier ou partager l'alias d'un contact PI
+      onLongPress={actions ? ouvrirActions : undefined}
+      style={({ pressed }) => [
+        styles.row,
+        { paddingVertical: smallItem ? 6 : 8 },
+        { backgroundColor: choisi ? withAlpha(primaire, 0.08) : pressed ? theme.colorScheme.secondary : 'transparent' },
+      ]}
+    >
       {/* Avatar */}
-      <View>
+      <View style={{ width: avatarSize, height: avatarSize }}>
         <CircleAvatarWidget nom={contact.displayName} photo={contact.photo} rounded radius={avatarSize} />
         {alias != null && (
           <View
@@ -84,53 +84,42 @@ export function ContactListWidgetItem({
       </View>
       <View style={styles.texts}>
         {/* Contact name */}
-        <Text numberOfLines={1} style={smallItem ? theme.textTheme.displayMedium : theme.textTheme.headlineSmall}>
+        <Text
+          numberOfLines={1}
+          style={[smallItem ? theme.textTheme.displayMedium : theme.textTheme.displayLarge, { fontWeight: choisi ? '700' : '500' }]}
+        >
           {contact.displayName}
         </Text>
         {/* Phone number or alias */}
-        <Text
-          style={smallItem ? theme.textTheme.displaySmall : [theme.textTheme.displaySmall, { color: Themer.neural04Color }]}
-        >
+        <Text numberOfLines={1} style={[theme.textTheme.displaySmall, styles.detail, { color: Themer.neural03Color }]}>
           {alias ?? contact.phones[0]?.number ?? ''}
         </Text>
       </View>
-    </View>
-  );
-
-  if (showCheckbox) {
-    return (
-      <Pressable
-        accessibilityRole="checkbox"
-        accessibilityState={{ checked: isSelected }}
-        onPress={() => onSelect?.(contact, alias, !isSelected)}
-        style={styles.row}
-      >
+      {/* Actions sur l'alias : copier, partager */}
+      {actions && (
+        <Pressable accessibilityRole="button" accessibilityLabel={traductions.contactActionsTooltip} hitSlop={8} onPress={ouvrirActions} style={styles.plus}>
+          <MaterialIcons name="more-horiz" size={22} color={Themer.neural03Color} />
+        </Pressable>
+      )}
+      {/* Sélection multiple : rond coché */}
+      {showCheckbox && (
         <MaterialIcons
-          name={isSelected ? 'check-box' : 'check-box-outline-blank'}
-          size={24}
-          color={isSelected ? theme.colorScheme.primary : Themer.neural02Color}
+          name={choisi ? 'check-circle' : 'radio-button-unchecked'}
+          size={22}
+          color={choisi ? primaire : Themer.neural03Color}
+          style={styles.coche}
         />
-        <View style={styles.gap16} />
-        <View style={styles.flex}>{tile}</View>
-      </Pressable>
-    );
-  }
-
-  return (
-    <Pressable
-      onPress={() => onSelect?.(contact, alias, null)}
-      onLongPress={alias != null ? showLightMenu : undefined}
-    >
-      {tile}
+      )}
     </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  row: { flexDirection: 'row', alignItems: 'center' },
-  tile: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8 },
-  texts: { flex: 1, marginLeft: 16 },
-  badge: { position: 'absolute', right: 0, bottom: 0, borderWidth: 2, overflow: 'hidden' },
-  gap16: { width: 16 },
+  row: { flexDirection: 'row', alignItems: 'center', marginVertical: 1, paddingHorizontal: 8, borderRadius: 14 },
+  texts: { flex: 1, marginLeft: 14 },
+  detail: { marginTop: 2 },
+  badge: { position: 'absolute', right: -2, bottom: -2, borderWidth: 2, overflow: 'hidden' },
+  plus: { padding: 6 },
+  coche: { marginLeft: 8, marginRight: 4 },
 });

package/src/modules/contacts/presentation/pages/contact_section.tsx

@@ -12,24 +12,31 @@ export function ContactSection({
   onSelect,
   selectedContacts,
   smallItem = false,
+  showActions = true,
 }: {
   group: ContactList;
   onSelect?: ContactSelectHandler;
   selectedContacts?: ContactPI[] | null;
   smallItem?: boolean;
+  /** Bouton « ⋯ » vers les actions sur l'alias de chaque contact */
+  showActions?: boolean;
 }) {
   const theme = useTheme();
   return (
     <View>
       {/* Section header */}
       <Text
-        style={[smallItem ? theme.textTheme.displaySmall : theme.textTheme.displayLarge, { color: Themer.neural03Color }]}
+        style={[
+          smallItem ? theme.textTheme.displaySmall : theme.textTheme.displayMedium,
+          styles.header,
+          { color: Themer.neural03Color },
+        ]}
       >
         {group.header}
       </Text>
       <View style={styles.gap8} />
       {/* Contacts in the section */}
-      <Card>
+      <Card style={styles.carte}>
         <View style={styles.padding}>
           {group.contacts.map((contact) => {
             const alias = ContactPI.getAlias(contact);
@@ -42,6 +49,7 @@ export function ContactSection({
                 showCheckbox={selectedContacts != null}
                 isSelected={isSelected}
                 smallItem={smallItem}
+                showActions={showActions}
               />
             );
           })}
@@ -53,7 +61,9 @@ export function ContactSection({
 }
 
 const styles = StyleSheet.create({
-  padding: { paddingHorizontal: 16 },
+  padding: { padding: 6 },
+  carte: { margin: 0 },
+  header: { fontWeight: '700', paddingHorizontal: 4 },
   gap8: { height: 8 },
   gap16: { height: 16 },
 });