@pi-spi/app 2.1.0 → 2.2.0

package/src/shared/widgets/calendar_date_picker.tsx

@@ -64,7 +64,8 @@ export function CalendarDatePicker({
     onValueChanged([start, day]);
   };
 
-  const dayStyle = { ...theme.textTheme.titleSmall, fontSize: 17 };
+  const primaire = theme.colorScheme.primary;
+  const dayStyle = { ...theme.textTheme.titleSmall, fontSize: 16 };
 
   return (
     <View style={styles.container}>
@@ -72,17 +73,17 @@ export function CalendarDatePicker({
       <View style={styles.header}>
         <Text style={[theme.textTheme.bodyMedium, styles.month]}>{new DateFormat('MMMM yyyy', locale).format(month)}</Text>
         <Pressable hitSlop={10} onPress={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}>
-          <MaterialIcons name="arrow-back-ios" size={20} color={theme.primaryColor} />
+          <MaterialIcons name="chevron-left" size={26} color={primaire} />
         </Pressable>
         <View style={styles.gap24} />
         <Pressable hitSlop={10} onPress={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}>
-          <MaterialIcons name="arrow-forward-ios" size={20} color={theme.primaryColor} />
+          <MaterialIcons name="chevron-right" size={26} color={primaire} />
         </Pressable>
       </View>
       {/* Jours de la semaine */}
       <View style={styles.row}>
         {weekdays.map((d, i) => (
-          <Text key={i} style={[theme.textTheme.bodyMedium, styles.weekday]}>
+          <Text key={i} style={[theme.textTheme.displaySmall, styles.weekday, { color: Themer.neural03Color }]}>
             {d}
           </Text>
         ))}
@@ -97,14 +98,14 @@ export function CalendarDatePicker({
             const inRange = start != null && end != null && day > startOfDay(start) && day < startOfDay(end);
             return (
               <Pressable key={i} disabled={disabled} onPress={() => onDayPress(day)} style={styles.cell}>
-                {inRange && <View style={[styles.range, { backgroundColor: theme.primaryColor, opacity: 0.2 }]} />}
-                <View style={[styles.day, selected ? { backgroundColor: theme.primaryColor } : null]}>
+                {inRange && <View style={[styles.range, { backgroundColor: primaire, opacity: 0.12 }]} />}
+                <View style={[styles.day, selected ? { backgroundColor: primaire } : null]}>
                   <Text
                     style={[
                       dayStyle,
-                      disabled ? { ...theme.textTheme.bodyLarge, fontSize: 17, color: Themer.gray } : null,
-                      !selected && !disabled && sameDay(day, today) ? { color: theme.primaryColor } : null,
-                      selected ? { color: Themer.whiteColor } : null,
+                      disabled ? { ...theme.textTheme.bodyLarge, fontSize: 16, color: Themer.gray } : null,
+                      !selected && !disabled && sameDay(day, today) ? { color: primaire, fontWeight: '700' } : null,
+                      selected ? { color: theme.colorScheme.onPrimary, fontWeight: '700' } : null,
                     ]}
                   >
                     {day.getDate()}
@@ -122,11 +123,11 @@ export function CalendarDatePicker({
 const styles = StyleSheet.create({
   container: { paddingHorizontal: 16 },
   header: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 4 },
-  month: { flex: 1, fontWeight: '600', textTransform: 'capitalize' },
+  month: { flex: 1, fontWeight: '700', textTransform: 'capitalize' },
   gap24: { width: 24 },
   row: { flexDirection: 'row' },
   weekday: { flex: 1, textAlign: 'center', fontWeight: '600', paddingVertical: 8 },
   cell: { flex: 1, height: 44, alignItems: 'center', justifyContent: 'center' },
   range: { ...StyleSheet.absoluteFill, marginVertical: 4 },
-  day: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+  day: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
 });

package/src/shared/widgets/confirm_action_sheet_widget.tsx

@@ -1,9 +1,10 @@
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
-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, FilledTonalButton } from '../material/buttons';
+import { showModalBottomSheet } from '../material/overlays';
 import { SelectionBoutons, SelectionSheet } from './selection';
 
 /**
@@ -17,8 +18,11 @@ export function ConfirmActionSheetWidget({
   confirmAction,
   cancelTitle,
   cancelAction,
+  emoji,
 }: {
   title: string;
+  /** Emoji affiché en grand sous le titre (ex. 😢 pour la déconnexion) */
+  emoji?: string;
   subtitle: string;
   confirmTitle?: string;
   confirmAction?: () => void;
@@ -36,6 +40,8 @@ export function ConfirmActionSheetWidget({
           <ScrollView bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
             {/* Titre */}
             <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
+            {/* Emoji */}
+            {emoji != null && <Text style={[styles.center, styles.emoji]}>{emoji}</Text>}
             <View style={styles.gap12} />
             {/* Sous-titre */}
             <Text style={[theme.textTheme.displayMedium, styles.center]}>{subtitle}</Text>
@@ -61,4 +67,16 @@ const styles = StyleSheet.create({
   content: { paddingHorizontal: 24, paddingTop: 4, paddingBottom: 20 },
   center: { textAlign: 'center' },
   gap12: { height: 12 },
+  emoji: { fontSize: 48, marginTop: 12 },
 });
+
+/** Ouvre la feuille de confirmation ; `true` si l'utilisateur confirme. */
+export async function showConfirmActionSheet(
+  router: SdkRouter,
+  props: { title: string; subtitle: string; confirmTitle?: string; cancelTitle?: string; emoji?: string },
+): Promise<boolean> {
+  const confirme = await showModalBottomSheet<boolean>(router, {
+    builder: () => <ConfirmActionSheetWidget {...props} />,
+  });
+  return confirme === true;
+}

package/src/shared/widgets/emoji_select_widget.tsx

@@ -1,10 +1,12 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useEffect, useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import { EmojiKeyboard, en, fr, pt } from 'rn-emoji-keyboard';
 
 import { Themer, useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { argbToCss } from '../../modules/categorie/domain/models/categorie_icons';
+import { withAlpha } from '../utils/color';
 
 const colors = [0xffedb37e, 0xffc08507, 0xff007aff, 0xfff9ebc2, 0xff8b887e, 0xffffd573, 0xfffa5a25, 0xff46a93d, 0xffa1a5ac, 0xff43474e];
 const imageRegex = /\.(jpeg|jpg|png|gif)$/i;
@@ -26,8 +28,8 @@ export function EmojiSelectWidget({
   const locale = useAppLocalizations().localeName;
   const { height } = useWindowDimensions();
   const [selectedColor, setSelectedColor] = useState(color ?? 0xfff9ebc2);
-  // Comme en Dart : l'emoji par défaut remplace aussi une icône non-image
-  const [selectedEmoji, setSelectedEmoji] = useState(icon == null || !imageRegex.test(icon) ? '🤩' : icon);
+  // Pas d'icône, ou une image (pas un emoji) : emoji par défaut
+  const [selectedEmoji, setSelectedEmoji] = useState(icon == null || imageRegex.test(icon) ? '🤩' : icon);
 
   useEffect(() => {
     onChanged({ icon: selectedEmoji, color: selectedColor });
@@ -40,18 +42,30 @@ export function EmojiSelectWidget({
       <View style={[styles.preview, { backgroundColor: argbToCss(selectedColor) }]}>
         <Text style={styles.previewText}>{selectedEmoji}</Text>
       </View>
-      {/* Couleur de fond */}
-      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.colors}>
-        {colors.map((c) =>
-          c === selectedColor ? (
-            <View key={c} style={[styles.selectedColor, { borderColor: theme.colorScheme.primary }]}>
-              <View style={[styles.dot, { backgroundColor: argbToCss(c) }]} />
-            </View>
-          ) : (
-            <Pressable key={c} onPress={() => setSelectedColor(c)} style={[styles.dot, styles.dotSpacing, { backgroundColor: argbToCss(c) }]} />
-          ),
-        )}
-      </ScrollView>
+      {/* Couleur de fond : pastilles, la choisie cochée */}
+      <View style={styles.colors}>
+        {colors.map((c) => {
+          const choisie = c === selectedColor;
+          return (
+            <Pressable
+              key={c}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: choisie }}
+              onPress={() => setSelectedColor(c)}
+              style={[
+                styles.dot,
+                {
+                  backgroundColor: argbToCss(c),
+                  borderColor: choisie ? theme.colorScheme.primary : withAlpha(Themer.neural03Color, 0.2),
+                  borderWidth: choisie ? 3 : 1,
+                },
+              ]}
+            >
+              {choisie && <MaterialIcons name="check" size={18} color={Themer.whiteColor} />}
+            </Pressable>
+          );
+        })}
+      </View>
       {/* Clavier d'emoji */}
       <View style={{ height: height * 0.4, alignSelf: 'stretch' }}>
         <EmojiKeyboard
@@ -85,18 +99,6 @@ const styles = StyleSheet.create({
     marginVertical: 8,
   },
   previewText: { fontSize: 48 },
-  colors: { alignItems: 'center', height: 72, paddingHorizontal: 4 },
-  dot: { width: 24, height: 24, borderRadius: 12 },
-  dotSpacing: { marginRight: 12 },
-  selectedColor: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    borderWidth: 3,
-    padding: 1,
-    marginRight: 12,
-    backgroundColor: Themer.whiteColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+  colors: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 10, paddingVertical: 12 },
+  dot: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
 });

package/src/shared/widgets/frequence_input_widget.tsx

@@ -1,41 +1,39 @@
-import { MaterialIcons } from '@expo/vector-icons';
 import { useEffect } from 'react';
-import { Pressable, View } from 'react-native';
 
 import { useAppRouter } from '../../core/router';
-import { useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { showModalBottomSheet } from '../material/overlays';
 import { Frequence, type FrequenceCommand } from '../models/frequence_command';
-import { FrequenceSelectWidget, frequenceText, periodiciteText } from './frequence_select_widget';
-import { CustomTextInput } from './input_text';
+import { FrequenceSelectWidget, frequenceIcone, frequenceResume, frequenceText } from './frequence_select_widget';
+import { SelectionPastille, SelectionChamp } from './selection';
 
 const FREQUENCES = [Frequence.quotidienne, Frequence.hebdomadaire, Frequence.mensuelle, Frequence.annuelle];
 
-/** Champ fréquence d'une programmation ; ouvre le choix de la fréquence. */
+/** Champ fréquence d'une programmation : carte qui ouvre le choix de la fréquence. */
 export function FrequenceInputWidget({
   command,
   onChange,
   readOnly = false,
   hideOnce = false,
   hideCustom = false,
+  enableCustom = true,
+  frequences = FREQUENCES,
 }: {
   command: FrequenceCommand;
   onChange: (value: FrequenceCommand) => void;
   readOnly?: boolean;
   hideOnce?: boolean;
   hideCustom?: boolean;
+  /** Si on autorise la fréquence sur mesure */
+  enableCustom?: boolean;
+  frequences?: Frequence[];
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
 
   let text: string;
   if (command.value != null && command.periodicite != null) {
-    text = traductions.transactionFormScheduleFrequenceSelected(
-      String(command.periodicite),
-      periodiciteText(traductions, command.value),
-    );
+    text = frequenceResume(traductions, command.value, command.periodicite, enableCustom);
   } else if (command.value != null) {
     text = frequenceText(command.value, traductions);
   } else {
@@ -45,36 +43,32 @@ export function FrequenceInputWidget({
 
   const select = () =>
     void showModalBottomSheet(router, {
-      themed: true,
       builder: () => (
         <FrequenceSelectWidget
           title={traductions.transactionFormScheduleFrequenceLabel}
           command={command}
-          frequences={FREQUENCES}
+          frequences={frequences}
           onChange={onChange}
           hideOnce={hideOnce}
           hideCustom={hideCustom}
+          enableCustom={enableCustom}
         />
       ),
     });
 
   // Sur-mesure choisi mais pas encore validé : rouvrir le choix de la périodicité
-  const pendingCustom = command.periodicite != null && !command.done;
+  const pendingCustom = enableCustom && command.periodicite != null && !command.done;
   useEffect(() => {
     if (pendingCustom) select();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pendingCustom, command.periodicite]);
 
   return (
-    <Pressable disabled={readOnly} onPress={select}>
-      <View pointerEvents="none">
-        <CustomTextInput
-          labelText={traductions.transactionFormScheduleFrequenceLabel}
-          value={text}
-          readOnly
-          suffixIcon={!readOnly ? <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.onSurface} /> : null}
-        />
-      </View>
-    </Pressable>
+    <SelectionChamp
+      libelle={traductions.transactionFormScheduleFrequenceLabel}
+      valeur={text}
+      pastille={<SelectionPastille icone={frequenceIcone(command.value)} />}
+      onPress={!readOnly ? select : undefined}
+    />
   );
 }