@pi-spi/app 1.6.0 → 2.0.0

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

@@ -74,7 +74,7 @@ export function ProfilePageMenu({ items, titre }: { items: (ProfileItem | ReactE
       <Card style={styles.card}>
         {lignes.map((ligne, i) => (
           <Fragment key={i}>
-            {i > 0 && <View style={styles.separateur} />}
+            {i > 0 && <View style={[styles.separateur, { backgroundColor: withAlpha(Themer.neural03Color, 0.25) }]} />}
             {ligne}
           </Fragment>
         ))}
@@ -160,5 +160,5 @@ const styles = StyleSheet.create({
   sousTitre: { marginTop: 2 },
   section: { fontSize: 12, letterSpacing: 0.8, fontWeight: '600', marginLeft: 4, marginBottom: 8 },
   // Trait aligné sur le texte (après la pastille)
-  separateur: { height: StyleSheet.hairlineWidth, marginLeft: 68, backgroundColor: withAlpha(Themer.neural03Color, 0.25) },
+  separateur: { height: StyleSheet.hairlineWidth, marginLeft: 68 },
 });

package/src/modules/transactions/presentation/pages/transaction_details/transaction_details_page_recu.tsx

@@ -191,7 +191,9 @@ async function buildPdfHtml(
         `<tr><td class="label">${escapeHtml(item.label)}</td><td class="value">${escapeHtml(item.value)}</td></tr>`,
     )
     .join('');
-  const generated = `Généré le ${new DateFormat("d MMMM yyyy 'à' HH:mm", locale).format(new Date())} © ${escapeHtml(AppEnv.appName)}`;
+  const maintenant = new Date();
+  const editeLe = `${new DateFormat('dd/MM/yyyy', locale).format(maintenant)} ${new DateFormat('HH.mm', locale).format(maintenant)}`;
+  const generated = escapeHtml(`${traductions.transactionDetailsRecuPdfEditeLe}   ${editeLe} © ${AppEnv.appName}`);
   return `<!DOCTYPE html><html><head><meta charset="utf-8" />
 <style>
   @page { size: A4; margin: 40px 48px; }

package/src/modules/transactions/presentation/pages/transaction_search/transaction_search_page_filters.tsx

@@ -120,7 +120,7 @@ export function TransactionSearchPageFilters() {
 /** Titre d'une section de filtres */
 function SectionTitle({ label }: { label: string }) {
   const theme = useTheme();
-  return <Text style={[theme.textTheme.displayMedium, styles.sectionTitle]}>{label.toUpperCase()}</Text>;
+  return <Text style={[theme.textTheme.displayMedium, styles.sectionTitle, { color: Themer.neural03Color }]}>{label.toUpperCase()}</Text>;
 }
 
 /** Icône dans un carré arrondi */
@@ -162,8 +162,8 @@ function FiltersDates({
         {/* Teinté quand le filtre est actif */}
         <IconBox
           name="calendar-month"
-          color={estDefinie ? Themer.primaryDark : Themer.neural04Color}
-          backgroundColor={estDefinie ? 'rgba(242,169,0,0.15)' : theme.colorScheme.surface}
+          color={estDefinie ? theme.primaryColorDark : Themer.neural04Color}
+          backgroundColor={estDefinie ? theme.colorScheme.secondary : theme.colorScheme.surface}
         />
         {/* La plage choisie, sinon l'invitation à la choisir */}
         <Text style={[theme.textTheme.headlineSmall, styles.label15, styles.texts]}>
@@ -254,7 +254,7 @@ const styles = StyleSheet.create({
   separateur: { height: StyleSheet.hairlineWidth },
   separateurIndent: { marginLeft: 76, marginRight: 16 },
   content: { paddingHorizontal: 16, paddingTop: 24, paddingBottom: 16 },
-  sectionTitle: { color: Themer.neural03Color, letterSpacing: 0.6, marginLeft: 4, marginBottom: 10 },
+  sectionTitle: { letterSpacing: 0.6, marginLeft: 4, marginBottom: 10 },
   tile: { flexDirection: 'row', alignItems: 'center', paddingLeft: 16, paddingRight: 8, paddingVertical: 10 },
   icon: { width: 44, height: 44, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
   texts: { flex: 1, marginHorizontal: 16 },

package/src/modules/transactions/presentation/pages/transaction_split/transaction_split_page_repartition.tsx

@@ -61,8 +61,8 @@ export function TransactionSplitPageRepartition({ transaction, contacts }: { tra
             {/* Par montant */}
             <TextButton onPress={() => undefined}>
               <View style={styles.row}>
-                <Text style={[theme.textTheme.bodySmall, { color: Themer.primaryDark }]}>{traductions.transactionSplitRepartitionParMontant}</Text>
-                <MaterialIcons name="keyboard-arrow-down" size={24} color={Themer.primaryDark} />
+                <Text style={[theme.textTheme.bodySmall, { color: theme.primaryColorDark }]}>{traductions.transactionSplitRepartitionParMontant}</Text>
+                <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.primaryColorDark} />
               </View>
             </TextButton>
           </View>

package/src/pi_spi_sdk_entry.tsx

@@ -179,9 +179,16 @@ function SdkShell({ config, booted }: { config: PiSpiSdkConfig; booted: Booted }
   // comme le `buildWhen` du BlocBuilder<ConfigBloc> de Flutter.
   const configState = useBlocBuilder(
     configBloc,
-    (_previous, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.preferedTheme,
+    (_previous, current) =>
+      current instanceof ConfigLoadedState &&
+      (current.updatedKey === ConfigKey.preferedTheme || current.updatedKey === ConfigKey.preferedAccent),
   );
-  const theme = Themer.get(configState.configParams.params[ConfigKey.preferedTheme], systemScheme);
+  const params = configState.configParams.params;
+  // Thème (système, clair ou sombre) teinté par la couleur d'accentuation ;
+  // « Système » suit le téléphone en direct (useColorScheme)
+  const theme = Themer.get(params[ConfigKey.preferedTheme], params[ConfigKey.preferedAccent], systemScheme);
+  // Couleurs neutres (Themer.neural0x) adaptées au thème affiché
+  Themer.suivreLuminosite(theme.brightness);
   const navigationTheme = useMemo(() => toNavigationTheme(theme), [theme]);
 
   return (

package/src/shared/widgets/custom_progressbar.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 
-import { Themer } from '../../core/theme';
+import { useTheme } from '../../core/theme';
 
 /**
  * Anneau de progression (≈ `CustomCircularProgressBar`) : cercle de fond
@@ -25,6 +25,7 @@ export function CustomCircularProgressBar({
   strokeWidth?: number;
   children?: ReactNode;
 }) {
+  const theme = useTheme();
   const radius = size / 2;
   const box = size + strokeWidth;
   const center = box / 2;
@@ -38,7 +39,7 @@ export function CustomCircularProgressBar({
             cx={center}
             cy={center}
             r={radius}
-            stroke={progressColor ?? Themer.primary}
+            stroke={progressColor ?? theme.colorScheme.primary}
             strokeWidth={strokeWidth}
             fill="none"
             strokeLinecap="round"

package/src/shared/widgets/selection.tsx

@@ -11,7 +11,7 @@ import { withAlpha } from '../utils/color';
  * [contenu] (qui défile s'il est trop long : utiliser un ScrollView).
  * À ouvrir avec showModalBottomSheet.
  */
-export function SbSelectionSheet({
+export function SelectionSheet({
   titre,
   titreSize,
   entete,