AzmogExe/cesizen-individuel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish(mobile): audit design DSFR multi-agents — tokens, a11y, états, finitions

Browse Source 
- tokens centralisés (Tint, IconSize, LineHeight, LetterSpacing), zéro hex en dur
- accessibilité (rôles, labels, live regions, afficher/masquer mot de passe)
- états vides/erreur complétés (ex. saisie introuvable), cibles tactiles >=44px
- suppression du composant mort RepubliqueHeader

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Azmog
2026-06-19 15:29:40 +02:00
parent 7fd27d8dc2
commit 91ceca2be5
29 changed files with 433 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/app/(tabs)/_layout.tsx
+6 -4
View File
@@ -1,6 +1,7 @@
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '@/lib/colors';
import { FontWeight, Spacing } from '@/lib/theme';
export default function TabLayout() {
return (
@@ -11,12 +12,13 @@ export default function TabLayout() {
tabBarStyle: {
backgroundColor: Colors.white,
borderTopColor: Colors.gray[200],
paddingBottom: 8,
paddingTop: 8,
height: 65,
paddingBottom: Spacing.sm,
paddingTop: Spacing.sm,
height: Spacing.xxxl + Spacing.xl + 1,
},
tabBarLabelStyle: { fontWeight: FontWeight.medium },
headerStyle: { backgroundColor: Colors.white },
headerTitleStyle: { fontWeight: '700', color: Colors.black },
headerTitleStyle: { fontWeight: FontWeight.bold, color: Colors.black },
}}
>
<Tabs.Screen
mobile/app/(tabs)/index.tsx
+18 -8
View File
@@ -8,6 +8,12 @@ import { Colors } from '@/lib/colors';
import { Spacing, Radius, FontSize, FontWeight, MIN_TOUCH } from '@/lib/theme';
import { AppBar, Card, Badge, SectionTitle, EmptyState, Loader } from '@/components/ui';
/** Tailles d'icônes et de pastilles (multiples de l'échelle 4px du DSFR). */
const ICON_LG = 28;
const ACTION_ICON = 56;
const EMOTION_ICON = 44;
const EMOJI_SIZE = 22;
export default function DashboardScreen() {
const router = useRouter();
const { user } = useAuthStore();
@@ -27,13 +33,13 @@ export default function DashboardScreen() {
<View style={styles.actionsRow}>
<Card onPress={() => router.push('/(tabs)/journal/new')} padding={Spacing.lg} style={styles.actionPrimary}>
<View style={[styles.actionIcon, styles.actionIconPrimary]}>
<Ionicons name="add-circle" size={28} color={Colors.white} />
<Ionicons name="add-circle" size={ICON_LG} color={Colors.white} />
</View>
<Text style={styles.actionTextPrimary}>Nouvelle saisie</Text>
</Card>
<Card onPress={() => router.push('/(tabs)/journal/reports')} padding={Spacing.lg} style={styles.actionCard}>
<View style={[styles.actionIcon, styles.actionIconSecondary]}>
<Ionicons name="bar-chart" size={28} color={Colors.primary} />
<Ionicons name="bar-chart" size={ICON_LG} color={Colors.primary} />
</View>
<Text style={styles.actionText}>Mes rapports</Text>
</Card>
@@ -73,7 +79,11 @@ export default function DashboardScreen() {
<View style={styles.sectionHeader}>
<SectionTitle>Dernières saisies</SectionTitle>
{recentSaisies.length > 0 && (
<Text style={styles.seeAll} onPress={() => router.push('/(tabs)/journal')}>
<Text
style={styles.seeAll}
onPress={() => router.push('/(tabs)/journal')}
accessibilityRole="link"
>
Tout voir
</Text>
)}
@@ -97,7 +107,7 @@ export default function DashboardScreen() {
padding={Spacing.md}
style={styles.saisieCard}
>
<View style={[styles.emotionIcon, { backgroundColor: `${saisie.emotion?.couleur}20` }]}>
<View style={[styles.emotionIcon, { backgroundColor: `${saisie.emotion?.couleur || Colors.primary}20` }]}>
<Text style={styles.emotionEmoji}>{saisie.emotion?.icone || '🔵'}</Text>
</View>
<View style={styles.saisieContent}>
@@ -132,9 +142,9 @@ const styles = StyleSheet.create({
backgroundColor: Colors.primary,
borderColor: Colors.primary,
},
actionIcon: { width: 56, height: 56, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
actionIcon: { width: ACTION_ICON, height: ACTION_ICON, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
actionIconPrimary: { backgroundColor: Colors.primaryDark },
actionIconSecondary: { backgroundColor: '#E3E3FD' },
actionIconSecondary: { backgroundColor: Colors.gray[100] },
actionText: { fontSize: FontSize.sm, fontWeight: FontWeight.semibold, color: Colors.black },
actionTextPrimary: { fontSize: FontSize.sm, fontWeight: FontWeight.bold, color: Colors.white },
block: { marginBottom: Spacing.xl },
@@ -153,8 +163,8 @@ const styles = StyleSheet.create({
paddingTop: Spacing.xs,
},
saisieCard: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md, marginBottom: Spacing.sm },
emotionIcon: { width: 44, height: 44, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
emotionEmoji: { fontSize: 22 },
emotionIcon: { width: EMOTION_ICON, height: EMOTION_ICON, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
emotionEmoji: { fontSize: EMOJI_SIZE },
saisieContent: { flex: 1, gap: Spacing.xs, alignItems: 'flex-start' },
saisieDate: { fontSize: FontSize.xs, color: Colors.gray[500] },
});
mobile/app/(tabs)/info/[slug].tsx
+10 -1
View File
@@ -31,7 +31,16 @@ export default function FeedDetailScreen() {
);
}
const texteNettoye = (feed.contenu ?? '').replace(/<[^>]*>/g, '');
const texteNettoye = (feed.contenu ?? '')
.replace(/<[^>]*>/g, '')
.replace(/&nbsp;/g, ' ')
.replace(/&amp;/g, '&')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&#39;|&apos;/g, "'")
.replace(/&quot;/g, '"')
.replace(/\n{3,}/g, '\n\n')
.trim();
return (
<View style={styles.fill}>
mobile/app/(tabs)/info/index.tsx
+10 -3
View File
@@ -3,7 +3,7 @@ import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useFeeds } from '@/hooks/useFeeds';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, Radius, Spacing, Tint } from '@/lib/theme';
import { AppBar, Card, EmptyState, Loader } from '@/components/ui';
import type { Feed } from '@/types';
@@ -12,7 +12,14 @@ export default function InfoListScreen() {
const router = useRouter();
const renderItem = ({ item }: { item: Feed }) => {
const extrait = (item.contenu ?? '').replace(/<[^>]*>/g, '').trim();
const extrait = (item.contenu ?? '')
.replace(/<[^>]*>/g, '')
.replace(/&nbsp;/g, ' ')
.replace(/&amp;/g, '&')
.replace(/&#39;|&apos;/g, "'")
.replace(/&quot;/g, '"')
.replace(/\s+/g, ' ')
.trim();
return (
<Card onPress={() => router.push(`/(tabs)/info/${item.slug}`)} style={styles.card}>
<View style={styles.cardRow}>
@@ -73,7 +80,7 @@ const styles = StyleSheet.create({
width: 48,
height: 48,
borderRadius: Radius.sm,
backgroundColor: '#E3E3FD',
backgroundColor: Tint.primary,
justifyContent: 'center',
alignItems: 'center',
},
mobile/app/(tabs)/journal/edit.tsx
+21 -4
View File
@@ -6,12 +6,15 @@ import EmotionPicker from '@/components/EmotionPicker';
import { IntensityPicker } from './new';
import { Colors } from '@/lib/colors';
import { Spacing, FontSize, FontWeight } from '@/lib/theme';
import { Button, TextField, Loader } from '@/components/ui';
import { Button, TextField, Loader, EmptyState } from '@/components/ui';
/** Hauteur de ligne du grand chiffre d'intensité. */
const INTENSITY_LINE_HEIGHT = 56;
export default function EditEntryScreen() {
const router = useRouter();
const { id } = useLocalSearchParams<{ id: string }>();
const { data: saisies } = useSaisies();
const { data: saisies, isLoading } = useSaisies();
const updateSaisie = useUpdateSaisie();
const saisie = saisies?.find((s) => s.id === Number(id));
@@ -46,10 +49,24 @@ export default function EditEntryScreen() {
}
};
if (!saisie) {
if (isLoading) {
return <Loader label="Chargement…" />;
}
if (!saisie) {
return (
<View style={styles.container}>
<EmptyState
icon="alert-circle-outline"
title="Saisie introuvable"
message="Cette saisie n'existe plus ou a été supprimée."
actionLabel="Retour"
onAction={() => router.back()}
/>
</View>
);
}
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
{/* Émotion */}
@@ -106,7 +123,7 @@ const styles = StyleSheet.create({
section: { marginBottom: Spacing.xl },
label: { fontSize: FontSize.body, fontWeight: FontWeight.bold, color: Colors.black, marginBottom: Spacing.md },
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: Spacing.lg },
intensityValue: { fontSize: FontSize.display, fontWeight: FontWeight.heavy, color: Colors.primary, lineHeight: 56 },
intensityValue: { fontSize: FontSize.display, fontWeight: FontWeight.heavy, color: Colors.primary, lineHeight: INTENSITY_LINE_HEIGHT },
intensityUnit: { fontSize: FontSize.xl, color: Colors.gray[400], marginLeft: Spacing.xs },
scaleLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: Spacing.md },
scaleLabel: { fontSize: FontSize.xs, color: Colors.gray[500] },
mobile/app/(tabs)/journal/index.tsx
+24 -12
View File
@@ -8,6 +8,16 @@ import { Spacing, Radius, FontSize, FontWeight, Shadow, MIN_TOUCH, HIT_SLOP } fr
import { AppBar, Card, Badge, EmptyState, Loader } from '@/components/ui';
import type { SaisieTracker } from '@/types';
/** Dimensions locales (multiples de l'échelle 4px du DSFR). */
const EMOTION_ICON = 48;
const EMOJI_SIZE = 24;
const ACTION_ICON_SIZE = 20;
const FAB_SIZE = 56;
const FAB_ICON = 30;
const BAR_HEIGHT = 6;
/** Marge basse de la liste : laisse passer le FAB sans qu'il chevauche le contenu. */
const LIST_BOTTOM_GAP = FAB_SIZE + Spacing.xl + Spacing.lg;
export default function JournalScreen() {
const router = useRouter();
const { data: saisies, isLoading, refetch } = useSaisies();
@@ -39,7 +49,7 @@ export default function JournalScreen() {
const renderItem = ({ item }: { item: SaisieTracker }) => (
<Card padding={Spacing.lg} style={styles.saisieCard}>
<View style={[styles.emotionIcon, { backgroundColor: `${item.emotion?.couleur}20` }]}>
<View style={[styles.emotionIcon, { backgroundColor: `${item.emotion?.couleur || Colors.primary}20` }]}>
<Text style={styles.emotionEmoji}>{item.emotion?.icone || '🔵'}</Text>
</View>
<View style={styles.saisieContent}>
@@ -79,7 +89,7 @@ export default function JournalScreen() {
accessibilityLabel="Modifier la saisie"
onPress={() => router.push({ pathname: '/(tabs)/journal/edit', params: { id: String(item.id) } })}
>
<Ionicons name="create-outline" size={20} color={Colors.primary} />
<Ionicons name="create-outline" size={ACTION_ICON_SIZE} color={Colors.primary} />
</TouchableOpacity>
<TouchableOpacity
style={styles.actionBtn}
@@ -87,7 +97,7 @@ export default function JournalScreen() {
accessibilityLabel="Supprimer la saisie"
onPress={() => handleDelete(item.id)}
>
<Ionicons name="trash-outline" size={20} color={Colors.error} />
<Ionicons name="trash-outline" size={ACTION_ICON_SIZE} color={Colors.error} />
</TouchableOpacity>
</View>
</Card>
@@ -120,10 +130,12 @@ export default function JournalScreen() {
)}
<TouchableOpacity
style={styles.fab}
accessibilityRole="button"
accessibilityLabel="Nouvelle saisie"
hitSlop={HIT_SLOP}
onPress={() => router.push('/(tabs)/journal/new')}
>
<Ionicons name="add" size={30} color={Colors.white} />
<Ionicons name="add" size={FAB_ICON} color={Colors.white} />
</TouchableOpacity>
</View>
);
@@ -131,15 +143,15 @@ export default function JournalScreen() {
const styles = StyleSheet.create({
screen: { flex: 1, backgroundColor: Colors.gray[50] },
listContent: { padding: Spacing.lg, paddingBottom: 96 },
listContent: { padding: Spacing.lg, paddingBottom: LIST_BOTTOM_GAP },
saisieCard: { flexDirection: 'row', alignItems: 'flex-start', gap: Spacing.md, marginBottom: Spacing.md },
emotionIcon: { width: 48, height: 48, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
emotionEmoji: { fontSize: 24 },
emotionIcon: { width: EMOTION_ICON, height: EMOTION_ICON, borderRadius: Radius.sm, justifyContent: 'center', alignItems: 'center' },
emotionEmoji: { fontSize: EMOJI_SIZE },
saisieContent: { flex: 1 },
saisieHeader: { flexDirection: 'row', alignItems: 'center', gap: Spacing.sm, marginBottom: Spacing.sm, flexWrap: 'wrap' },
intensityText: { fontSize: FontSize.xs, color: Colors.gray[500] },
intensityBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: Radius.sm, marginBottom: Spacing.sm },
intensityFill: { height: 6, borderRadius: Radius.sm },
intensityBar: { height: BAR_HEIGHT, backgroundColor: Colors.gray[200], borderRadius: Radius.sm, marginBottom: Spacing.sm },
intensityFill: { height: BAR_HEIGHT, borderRadius: Radius.sm },
note: { fontSize: FontSize.xs, color: Colors.gray[600], marginBottom: Spacing.xs, lineHeight: 19 },
date: { fontSize: FontSize.xs, color: Colors.gray[400], textTransform: 'capitalize' },
actions: { gap: Spacing.sm },
@@ -153,9 +165,9 @@ const styles = StyleSheet.create({
fab: {
position: 'absolute',
right: Spacing.lg,
bottom: Spacing.lg,
width: 56,
height: 56,
bottom: Spacing.xl,
width: FAB_SIZE,
height: FAB_SIZE,
borderRadius: Radius.sm,
backgroundColor: Colors.primary,
justifyContent: 'center',
mobile/app/(tabs)/journal/new.tsx
+22 -8
View File
@@ -8,6 +8,14 @@ import { Colors } from '@/lib/colors';
import { Spacing, Radius, FontSize, FontWeight } from '@/lib/theme';
import { Button, TextField } from '@/components/ui';
/** Dimensions locales (multiples de l'échelle 4px du DSFR). */
const STEP_CIRCLE = 36;
const STEP_LINE_WIDTH = 40;
const STEP_LINE_HEIGHT = 3;
const STEP_CHECK_ICON = 18;
const INTENSITY_LINE_HEIGHT = 60;
const DOT_SIZE = 44;
export default function NewEntryScreen() {
const router = useRouter();
const createSaisie = useCreateSaisie();
@@ -34,12 +42,16 @@ export default function NewEntryScreen() {
return (
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
{/* Stepper */}
<View style={styles.stepper}>
<View
style={styles.stepper}
accessibilityRole="progressbar"
accessibilityLabel={`Étape ${step} sur 3`}
>
{[1, 2, 3].map((s) => (
<View key={s} style={styles.stepRow}>
<View style={[styles.stepCircle, step >= s && styles.stepActive]}>
{step > s ? (
<Ionicons name="checkmark" size={18} color={Colors.white} />
<Ionicons name="checkmark" size={STEP_CHECK_ICON} color={Colors.white} />
) : (
<Text style={[styles.stepNumber, step >= s && styles.stepNumberActive]}>{s}</Text>
)}
@@ -123,6 +135,8 @@ export function IntensityPicker({ value, onChange }: { value: number; onChange:
key={v}
style={[pickerStyles.dot, active && pickerStyles.dotActive]}
onPress={() => onChange(v)}
accessibilityRole="button"
accessibilityState={{ selected: active }}
accessibilityLabel={`Intensité ${v}`}
>
<Text style={[pickerStyles.dotText, active && pickerStyles.dotTextActive]}>{v}</Text>
@@ -136,8 +150,8 @@ export function IntensityPicker({ value, onChange }: { value: number; onChange:
const pickerStyles = StyleSheet.create({
grid: { flexDirection: 'row', flexWrap: 'wrap', gap: Spacing.sm, justifyContent: 'center' },
dot: {
width: 44,
height: 44,
width: DOT_SIZE,
height: DOT_SIZE,
borderRadius: Radius.sm,
backgroundColor: Colors.gray[100],
borderWidth: 1,
@@ -156,8 +170,8 @@ const styles = StyleSheet.create({
stepper: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginBottom: Spacing.xxl },
stepRow: { flexDirection: 'row', alignItems: 'center' },
stepCircle: {
width: 36,
height: 36,
width: STEP_CIRCLE,
height: STEP_CIRCLE,
borderRadius: Radius.pill,
backgroundColor: Colors.gray[200],
justifyContent: 'center',
@@ -166,11 +180,11 @@ const styles = StyleSheet.create({
stepActive: { backgroundColor: Colors.primary },
stepNumber: { fontSize: FontSize.md, fontWeight: FontWeight.bold, color: Colors.gray[500] },
stepNumberActive: { color: Colors.white },
stepLine: { width: 40, height: 3, backgroundColor: Colors.gray[200], marginHorizontal: Spacing.xs },
stepLine: { width: STEP_LINE_WIDTH, height: STEP_LINE_HEIGHT, backgroundColor: Colors.gray[200], marginHorizontal: Spacing.xs },
stepLineActive: { backgroundColor: Colors.primary },
stepTitle: { fontSize: FontSize.xl, fontWeight: FontWeight.bold, color: Colors.black, marginBottom: Spacing.xl },
intensityContainer: { flexDirection: 'row', alignItems: 'baseline', justifyContent: 'center', marginBottom: Spacing.xl },
intensityValue: { fontSize: FontSize.display, fontWeight: FontWeight.heavy, color: Colors.primary, lineHeight: 60 },
intensityValue: { fontSize: FontSize.display, fontWeight: FontWeight.heavy, color: Colors.primary, lineHeight: INTENSITY_LINE_HEIGHT },
intensityLabel: { fontSize: FontSize.xxl, color: Colors.gray[400], marginLeft: Spacing.xs },
scaleLabels: { flexDirection: 'row', justifyContent: 'space-between', marginTop: Spacing.md, marginBottom: Spacing.xxl },
scaleLabel: { fontSize: FontSize.xs, color: Colors.gray[500] },
mobile/app/(tabs)/journal/reports.tsx
+13 -6
View File
@@ -3,10 +3,15 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-nati
import { Ionicons } from '@expo/vector-icons';
import { useRapport } from '@/hooks/useRapport';
import { Colors } from '@/lib/colors';
import { Spacing, Radius, FontSize, FontWeight } from '@/lib/theme';
import { Spacing, Radius, FontSize, FontWeight, MIN_TOUCH } from '@/lib/theme';
import { AppBar, Card, Badge, SectionTitle, EmptyState, Loader } from '@/components/ui';
import EmotionPieChart from '@/components/EmotionPieChart';
/** Dimensions locales (multiples de l'échelle 4px du DSFR). */
const STAT_ICON = 20;
const SEGMENT_MIN_HEIGHT = MIN_TOUCH;
const BAR_HEIGHT = 6;
type Period = 'week' | 'month' | 'quarter' | 'year';
const PERIODS: { value: Period; label: string }[] = [
@@ -33,6 +38,8 @@ export default function ReportsScreen() {
key={p.value}
style={[styles.segmentBtn, active && styles.segmentBtnActive]}
onPress={() => setPeriod(p.value)}
accessibilityRole="button"
accessibilityState={{ selected: active }}
accessibilityLabel={p.label}
>
<Text style={[styles.segmentText, active && styles.segmentTextActive]}>{p.label}</Text>
@@ -49,13 +56,13 @@ export default function ReportsScreen() {
<Card padding={Spacing.lg} style={styles.statsCard}>
<View style={styles.statsRow}>
<View style={styles.statCell}>
<Ionicons name="bar-chart" size={20} color={Colors.primary} />
<Ionicons name="bar-chart" size={STAT_ICON} color={Colors.primary} />
<Text style={styles.statValue}>{rapport.stats.total_saisies}</Text>
<Text style={styles.statLabel}>Saisies</Text>
</View>
<View style={styles.statDivider} />
<View style={styles.statCell}>
<Ionicons name="trending-up" size={20} color={Colors.primary} />
<Ionicons name="trending-up" size={STAT_ICON} color={Colors.primary} />
<Text style={styles.statValue}>{rapport.stats.intensite_moyenne?.toFixed(1) || '—'}</Text>
<Text style={styles.statLabel}>Intensité moy.</Text>
</View>
@@ -134,7 +141,7 @@ const styles = StyleSheet.create({
container: { flex: 1 },
content: { padding: Spacing.lg, paddingBottom: Spacing.xxxl },
segment: { flexDirection: 'row', backgroundColor: Colors.gray[100], borderRadius: Radius.sm, padding: Spacing.xs, marginBottom: Spacing.lg },
segmentBtn: { flex: 1, paddingVertical: Spacing.sm, alignItems: 'center', borderRadius: Radius.sm, minHeight: 40, justifyContent: 'center' },
segmentBtn: { flex: 1, paddingVertical: Spacing.sm, alignItems: 'center', borderRadius: Radius.sm, minHeight: SEGMENT_MIN_HEIGHT, justifyContent: 'center' },
segmentBtnActive: { backgroundColor: Colors.primary },
segmentText: { fontSize: FontSize.xs, fontWeight: FontWeight.semibold, color: Colors.gray[500] },
segmentTextActive: { color: Colors.white },
@@ -152,8 +159,8 @@ const styles = StyleSheet.create({
repItemBorder: { borderTopWidth: 1, borderTopColor: Colors.gray[200] },
repHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: Spacing.sm },
repPct: { fontSize: FontSize.sm, fontWeight: FontWeight.bold, color: Colors.black },
progressBar: { height: 6, backgroundColor: Colors.gray[200], borderRadius: Radius.sm, marginBottom: Spacing.xs },
progressFill: { height: 6, borderRadius: Radius.sm },
progressBar: { height: BAR_HEIGHT, backgroundColor: Colors.gray[200], borderRadius: Radius.sm, marginBottom: Spacing.xs },
progressFill: { height: BAR_HEIGHT, borderRadius: Radius.sm },
repFooter: { flexDirection: 'row', justifyContent: 'space-between' },
repDetail: { fontSize: FontSize.xs, color: Colors.gray[500] },
});
mobile/app/(tabs)/profile.tsx
+8 -3
View File
@@ -3,7 +3,7 @@ import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '@/lib/auth-store';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, MIN_TOUCH, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, HIT_SLOP, MIN_TOUCH, Radius, Spacing, Tint } from '@/lib/theme';
import { AppBar, Badge, Button, Card, SectionTitle } from '@/components/ui';
export default function ProfileScreen() {
@@ -101,7 +101,12 @@ function MenuItem({
last?: boolean;
}) {
return (
<TouchableOpacity style={[styles.menuItem, last && styles.menuItemLast]} accessibilityRole="button">
<TouchableOpacity
style={[styles.menuItem, last && styles.menuItemLast]}
accessibilityRole="button"
accessibilityLabel={label}
hitSlop={HIT_SLOP}
>
<Ionicons name={icon} size={20} color={Colors.gray[600]} />
<Text style={styles.menuLabel}>{label}</Text>
<Ionicons name="chevron-forward" size={18} color={Colors.gray[400]} />
@@ -133,7 +138,7 @@ const styles = StyleSheet.create({
width: 48,
height: 48,
borderRadius: Radius.sm,
backgroundColor: '#E3E3FD',
backgroundColor: Tint.primary,
justifyContent: 'center',
alignItems: 'center',
},
mobile/app/_layout.tsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { StatusBar } from 'expo-status-bar';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useAuthStore } from '@/lib/auth-store';
import { View, ActivityIndicator } from 'react-native';
import { Colors } from '@/lib/colors';
const queryClient = new QueryClient();
@@ -33,7 +34,7 @@ function AuthGuard({ children }: { children: React.ReactNode }) {
if (isLoading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
<ActivityIndicator size="large" color="#000091" />
<ActivityIndicator size="large" color={Colors.primary} />
</View>
);
}
mobile/app/admin/contenus.tsx
+5 -1
View File
@@ -19,6 +19,9 @@ import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, HIT_SLOP, Radius, Spacing } from '@/lib/theme';
import type { Feed } from '@/types';
/** Voile sombre derrière la modale (noir DSFR à 40 % d'opacité). */
const OVERLAY = 'rgba(22, 22, 22, 0.4)';
interface FormState {
id?: number;
titre: string;
@@ -160,6 +163,7 @@ export default function AdminContenusScreen() {
<Switch
value={form.est_publie}
onValueChange={(v) => setForm((f) => ({ ...f, est_publie: v }))}
accessibilityLabel="Publier le contenu"
trackColor={{ true: Colors.primary, false: Colors.gray[300] }}
thumbColor={Colors.white}
/>
@@ -186,7 +190,7 @@ const styles = StyleSheet.create({
badges: { flexDirection: 'row', gap: Spacing.sm, flexWrap: 'wrap' },
extrait: { fontSize: FontSize.sm, color: Colors.gray[500], lineHeight: 20 },
actions: { flexDirection: 'row', gap: Spacing.sm, marginTop: Spacing.xs },
modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(22,22,22,0.4)' },
modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: OVERLAY },
modalSheet: {
backgroundColor: Colors.white,
borderTopLeftRadius: Radius.md,
mobile/app/admin/emotions.tsx
+53 -15
View File
@@ -15,9 +15,20 @@ import { Ionicons } from '@expo/vector-icons';
import { Button, Card, EmptyState, Loader, SectionTitle, TextField } from '@/components/ui';
import { useAdminEmotions, useSaveEmotion, useDeleteEmotion } from '@/hooks/useAdmin';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, HIT_SLOP, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, HIT_SLOP, MIN_TOUCH, Radius, Spacing, Tint } from '@/lib/theme';
import type { Emotion } from '@/types';
/** Voile sombre derrière la modale (noir DSFR à 40 % d'opacité). */
const OVERLAY = 'rgba(22, 22, 22, 0.4)';
/** Format hexadécimal #RRGGBB attendu pour une couleur d'émotion. */
const HEX_RE = /^#([0-9A-Fa-f]{6})$/;
/** Diamètre de la pastille de couleur d'une émotion en liste. */
const PASTILLE = 36;
/** Côté de l'aperçu de couleur dans le formulaire (cible tactile). */
const APERCU = MIN_TOUCH;
/** Diamètre de la pastille de couleur d'une émotion parente (chip). */
const PARENT_DOT = 14;
interface FormState {
id?: number;
nom: string;
@@ -28,7 +39,7 @@ interface FormState {
est_actif: boolean;
}
const FORM_VIDE: FormState = { nom: '', couleur: '#000091', icone: '', niveau: 1, parent_id: null, est_actif: true };
const FORM_VIDE: FormState = { nom: '', couleur: Colors.primary, icone: '', niveau: 1, parent_id: null, est_actif: true };
function messageErreur(e: unknown, defaut: string): string {
const err = e as { response?: { data?: { message?: string } } };
@@ -83,7 +94,7 @@ export default function AdminEmotionsScreen() {
Alert.alert('Champs requis', 'Le nom est obligatoire.');
return;
}
if (!/^#([0-9A-Fa-f]{6})$/.test(form.couleur.trim())) {
if (!HEX_RE.test(form.couleur.trim())) {
Alert.alert('Couleur', 'Saisissez une couleur hexadécimale (ex. #000091).');
return;
}
@@ -127,7 +138,7 @@ export default function AdminEmotionsScreen() {
const renderEmotion = (e: Emotion, estEnfant: boolean) => (
<Card key={e.id} style={[styles.emotionCard, estEnfant && styles.emotionEnfant]}>
<View style={styles.emotionRow}>
<View style={[styles.pastille, { backgroundColor: e.couleur }]}>
<View style={[styles.pastille, { backgroundColor: e.couleur }]} accessibilityElementsHidden>
{e.icone ? <Text style={styles.pastilleIcone}>{e.icone}</Text> : null}
</View>
<View style={styles.emotionInfo}>
@@ -195,7 +206,12 @@ export default function AdminEmotionsScreen() {
required
/>
</View>
<View style={[styles.couleurApercu, { backgroundColor: /^#([0-9A-Fa-f]{6})$/.test(form.couleur) ? form.couleur : Colors.gray[200] }]} />
<View
style={[
styles.couleurApercu,
{ backgroundColor: HEX_RE.test(form.couleur) ? form.couleur : Colors.gray[200] },
]}
/>
</View>
<TextField
label="Icône (emoji, optionnel)"
@@ -206,8 +222,10 @@ export default function AdminEmotionsScreen() {
/>
<Text style={styles.fieldLabel}>Niveau</Text>
<View style={styles.segment}>
<View style={styles.segment} accessibilityRole="radiogroup">
<Pressable
accessibilityRole="radio"
accessibilityState={{ selected: form.niveau === 1 }}
style={[styles.segmentItem, form.niveau === 1 && styles.segmentItemActive]}
onPress={() => setForm((f) => ({ ...f, niveau: 1, parent_id: null }))}
>
@@ -216,6 +234,8 @@ export default function AdminEmotionsScreen() {
</Text>
</Pressable>
<Pressable
accessibilityRole="radio"
accessibilityState={{ selected: form.niveau === 2 }}
style={[styles.segmentItem, form.niveau === 2 && styles.segmentItemActive]}
onPress={() => setForm((f) => ({ ...f, niveau: 2 }))}
>
@@ -228,7 +248,7 @@ export default function AdminEmotionsScreen() {
{form.niveau === 2 ? (
<>
<Text style={styles.fieldLabel}>Émotion parente</Text>
<View style={styles.parentList}>
<View style={styles.parentList} accessibilityRole="radiogroup">
{parents.length === 0 ? (
<Text style={styles.switchHelper}>Aucune émotion de niveau 1 disponible.</Text>
) : (
@@ -237,6 +257,9 @@ export default function AdminEmotionsScreen() {
return (
<Pressable
key={p.id}
accessibilityRole="radio"
accessibilityState={{ selected: actif }}
accessibilityLabel={p.nom}
style={[styles.parentChip, actif && styles.parentChipActive]}
onPress={() => setForm((f) => ({ ...f, parent_id: p.id }))}
>
@@ -260,6 +283,7 @@ export default function AdminEmotionsScreen() {
<Switch
value={form.est_actif}
onValueChange={(v) => setForm((f) => ({ ...f, est_actif: v }))}
accessibilityLabel="Émotion active dans le tracker"
trackColor={{ true: Colors.primary, false: Colors.gray[300] }}
thumbColor={Colors.white}
/>
@@ -285,13 +309,21 @@ const styles = StyleSheet.create({
emotionCard: { padding: Spacing.md, gap: Spacing.sm },
emotionEnfant: { marginLeft: Spacing.xl, borderColor: Colors.gray[100] },
emotionRow: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
pastille: { width: 36, height: 36, borderRadius: Radius.pill, alignItems: 'center', justifyContent: 'center' },
pastilleIcone: { fontSize: 18 },
pastille: {
width: PASTILLE,
height: PASTILLE,
borderRadius: Radius.pill,
borderWidth: 1,
borderColor: Colors.gray[200],
alignItems: 'center',
justifyContent: 'center',
},
pastilleIcone: { fontSize: FontSize.lg },
emotionInfo: { flex: 1 },
emotionNom: { fontSize: FontSize.md, fontWeight: FontWeight.semibold, color: Colors.black },
emotionMeta: { fontSize: FontSize.xs, color: Colors.gray[500], marginTop: 2 },
actions: { flexDirection: 'row', gap: Spacing.sm },
modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(22,22,22,0.4)' },
modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: OVERLAY },
modalSheet: {
backgroundColor: Colors.white,
borderTopLeftRadius: Radius.md,
@@ -312,12 +344,12 @@ const styles = StyleSheet.create({
couleurRow: { flexDirection: 'row', alignItems: 'flex-start', gap: Spacing.md },
couleurField: { flex: 1 },
couleurApercu: {
width: 44,
height: 44,
width: APERCU,
height: APERCU,
borderRadius: Radius.sm,
borderWidth: 1,
borderColor: Colors.gray[200],
marginTop: 24,
marginTop: Spacing.xl,
},
segment: {
flexDirection: 'row',
@@ -344,8 +376,14 @@ const styles = StyleSheet.create({
backgroundColor: Colors.white,
minHeight: 44,
},
parentChipActive: { borderColor: Colors.primary, backgroundColor: '#E3E3FD' },
parentDot: { width: 14, height: 14, borderRadius: Radius.pill },
parentChipActive: { borderColor: Colors.primary, backgroundColor: Tint.primary },
parentDot: {
width: PARENT_DOT,
height: PARENT_DOT,
borderRadius: Radius.pill,
borderWidth: 1,
borderColor: Colors.gray[200],
},
parentChipText: { fontSize: FontSize.sm, color: Colors.gray[600] },
parentChipTextActive: { color: Colors.primary, fontWeight: FontWeight.semibold },
switchRow: {
mobile/app/admin/index.tsx
+10 -5
View File
@@ -4,7 +4,12 @@ import { Ionicons } from '@expo/vector-icons';
import { Card, SectionTitle } from '@/components/ui';
import { useAdminUtilisateurs, useAdminFeeds, useAdminEmotions } from '@/hooks/useAdmin';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, MIN_TOUCH, Radius, Spacing, Tint } from '@/lib/theme';
/** Diamètre du rond d'icône de section (cible tactile confortable). */
const ICON_CIRCLE = 48;
/** Largeur minimale de la pastille compteur (alignement des chiffres). */
const COUNT_MIN_WIDTH = MIN_TOUCH / 2;
interface HubItem {
href: '/admin/utilisateurs' | '/admin/contenus' | '/admin/emotions';
@@ -83,10 +88,10 @@ const styles = StyleSheet.create({
card: { padding: Spacing.lg },
row: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
iconCircle: {
width: 48,
height: 48,
width: ICON_CIRCLE,
height: ICON_CIRCLE,
borderRadius: Radius.md,
backgroundColor: '#E3E3FD',
backgroundColor: Tint.primary,
alignItems: 'center',
justifyContent: 'center',
},
@@ -98,7 +103,7 @@ const styles = StyleSheet.create({
fontSize: FontSize.sm,
fontWeight: FontWeight.bold,
color: Colors.primary,
minWidth: 22,
minWidth: COUNT_MIN_WIDTH,
textAlign: 'right',
},
});
mobile/app/admin/utilisateurs.tsx
+9 -2
View File
@@ -26,6 +26,9 @@ import type { Utilisateur } from '@/types';
const ROLE_MEMBRE = 2;
const ROLE_ADMIN = 3;
/** Voile sombre derrière la modale (noir DSFR à 40 % d'opacité). */
const OVERLAY = 'rgba(22, 22, 22, 0.4)';
interface FormState {
prenom: string;
nom: string;
@@ -192,8 +195,10 @@ export default function AdminUtilisateursScreen() {
/>
<Text style={styles.fieldLabel}>Rôle</Text>
<View style={styles.segment}>
<View style={styles.segment} accessibilityRole="radiogroup">
<Pressable
accessibilityRole="radio"
accessibilityState={{ selected: form.role_id === ROLE_MEMBRE }}
style={[styles.segmentItem, form.role_id === ROLE_MEMBRE && styles.segmentItemActive]}
onPress={() => setForm((f) => ({ ...f, role_id: ROLE_MEMBRE }))}
>
@@ -202,6 +207,8 @@ export default function AdminUtilisateursScreen() {
</Text>
</Pressable>
<Pressable
accessibilityRole="radio"
accessibilityState={{ selected: form.role_id === ROLE_ADMIN }}
style={[styles.segmentItem, form.role_id === ROLE_ADMIN && styles.segmentItemActive]}
onPress={() => setForm((f) => ({ ...f, role_id: ROLE_ADMIN }))}
>
@@ -234,7 +241,7 @@ const styles = StyleSheet.create({
email: { fontSize: FontSize.sm, color: Colors.gray[500], marginTop: 2 },
badges: { flexDirection: 'row', gap: Spacing.sm, flexWrap: 'wrap' },
actions: { flexDirection: 'row', gap: Spacing.sm, marginTop: Spacing.xs },
modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(22,22,22,0.4)' },
modalOverlay: { flex: 1, justifyContent: 'flex-end', backgroundColor: OVERLAY },
modalSheet: {
backgroundColor: Colors.white,
borderTopLeftRadius: Radius.md,
mobile/app/auth/forgot-password.tsx
+7 -7
View File
@@ -3,7 +3,7 @@ import { View, Text, StyleSheet, KeyboardAvoidingView, Platform, ScrollView } fr
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, ICON_CIRCLE, IconSize, LineHeight, Radius, Spacing, Tint } from '@/lib/theme';
import { AppBar, Button, Card, TextField } from '@/components/ui';
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -33,7 +33,7 @@ export default function ForgotPasswordScreen() {
<AppBar title="Demande enregistrée" />
<View style={styles.successWrap}>
<View style={styles.iconCircle}>
<Ionicons name="mail-open" size={32} color={Colors.primary} />
<Ionicons name="mail-open" size={IconSize.xl} color={Colors.primary} />
</View>
<Text style={styles.successTitle}>Vérifiez votre boîte mail</Text>
<Text style={styles.successText}>
@@ -102,20 +102,20 @@ export default function ForgotPasswordScreen() {
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.gray[50] },
scrollContent: { flexGrow: 1, justifyContent: 'center', padding: Spacing.xl },
intro: { fontSize: FontSize.sm, color: Colors.gray[600], lineHeight: 20, marginBottom: Spacing.xl, textAlign: 'center' },
intro: { fontSize: FontSize.sm, color: Colors.gray[600], lineHeight: LineHeight.normal, marginBottom: Spacing.xl, textAlign: 'center' },
backRow: { alignItems: 'center', marginTop: Spacing.sm },
successWrap: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: Spacing.xl },
iconCircle: {
width: 72,
height: 72,
width: ICON_CIRCLE,
height: ICON_CIRCLE,
borderRadius: Radius.pill,
backgroundColor: '#E3E3FD',
backgroundColor: Tint.primary,
alignItems: 'center',
justifyContent: 'center',
marginBottom: Spacing.lg,
},
successTitle: { fontSize: FontSize.xl, fontWeight: FontWeight.heavy, color: Colors.black, marginBottom: Spacing.md, textAlign: 'center' },
successText: { fontSize: FontSize.sm, color: Colors.gray[600], textAlign: 'center', lineHeight: 20, marginBottom: Spacing.md },
successText: { fontSize: FontSize.sm, color: Colors.gray[600], textAlign: 'center', lineHeight: LineHeight.normal, marginBottom: Spacing.md },
bold: { fontWeight: FontWeight.bold, color: Colors.black },
successAction: { alignSelf: 'stretch', marginTop: Spacing.lg },
});
mobile/app/auth/login.tsx
+4 -4
View File
@@ -5,7 +5,7 @@ import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '@/lib/auth-store';
import { getApiError } from '@/lib/api';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, IconSize, Radius, Spacing } from '@/lib/theme';
import { AppBar, Button, Card, TextField } from '@/components/ui';
export default function LoginScreen() {
@@ -46,8 +46,8 @@ export default function LoginScreen() {
<Card padding={Spacing.xl} elevated>
{error ? (
<View style={styles.errorBanner}>
<Ionicons name="alert-circle" size={18} color={Colors.error} />
<View style={styles.errorBanner} accessibilityLiveRegion="polite">
<Ionicons name="alert-circle" size={IconSize.md} color={Colors.error} />
<Text style={styles.errorBannerText}>{error}</Text>
</View>
) : null}
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
gap: Spacing.sm,
backgroundColor: Colors.errorBg,
borderRadius: Radius.sm,
borderLeftWidth: 3,
borderLeftWidth: Spacing.xs - 1,
borderLeftColor: Colors.error,
padding: Spacing.md,
marginBottom: Spacing.lg,
mobile/app/auth/register.tsx
+5 -5
View File
@@ -5,7 +5,7 @@ import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '@/lib/auth-store';
import { getApiError } from '@/lib/api';
import { Colors } from '@/lib/colors';
import { FontSize, FontWeight, MIN_TOUCH, Radius, Spacing } from '@/lib/theme';
import { FontSize, FontWeight, IconSize, LineHeight, MIN_TOUCH, Radius, Spacing } from '@/lib/theme';
import { AppBar, Button, Card, TextField } from '@/components/ui';
const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -132,7 +132,7 @@ export default function RegisterScreen() {
>
<Ionicons
name={consentement ? 'checkbox' : 'square-outline'}
size={24}
size={IconSize.lg}
color={consentement ? Colors.primary : Colors.gray[500]}
style={styles.consentIcon}
/>
@@ -143,7 +143,7 @@ export default function RegisterScreen() {
</Pressable>
{consentError ? (
<View style={styles.consentErrorRow}>
<Ionicons name="alert-circle" size={14} color={Colors.error} />
<Ionicons name="alert-circle" size={IconSize.sm} color={Colors.error} />
<Text style={styles.consentErrorText}>{consentError}</Text>
</View>
) : null}
@@ -185,8 +185,8 @@ const styles = StyleSheet.create({
paddingVertical: Spacing.sm,
minHeight: MIN_TOUCH,
},
consentIcon: { marginTop: 1 },
consentText: { flex: 1, fontSize: FontSize.xs, color: Colors.black, lineHeight: 19 },
consentIcon: { marginTop: Spacing.xs / 4 },
consentText: { flex: 1, fontSize: FontSize.xs, color: Colors.black, lineHeight: LineHeight.snug },
consentLink: { color: Colors.primary, fontWeight: FontWeight.semibold, textDecorationLine: 'underline' },
consentErrorRow: { flexDirection: 'row', alignItems: 'center', gap: Spacing.xs, marginTop: Spacing.xs },
consentErrorText: { fontSize: FontSize.xs, color: Colors.error },