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

feat(mobile): refonte design DSFR complète + partie admin

Browse Source 
- écrans auth/dashboard/journal/info/urgence/profil refondus sur le design system
- AppBar institutionnel République Française sur tous les écrans
- partie admin (utilisateurs, contenus, émotions) avec AdminGuard
- entrée Espace administration dans le profil (admins uniquement)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Azmog
2026-06-19 15:22:15 +02:00
parent 2e96e07c7e
commit 7fd27d8dc2
22 changed files with 2102 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/app/(tabs)/info/index.tsx
+63 -60
View File
@@ -1,81 +1,84 @@
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { View, Text, StyleSheet, FlatList } from 'react-native';
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 { AppBar, Card, EmptyState, Loader } from '@/components/ui';
import type { Feed } from '@/types';
export default function InfoListScreen() {
const { data: feeds, isLoading } = useFeeds();
const router = useRouter();
const renderItem = ({ item }: { item: Feed }) => (
<TouchableOpacity
style={styles.card}
onPress={() => router.push(`/(tabs)/info/${item.slug}`)}
>
<View style={styles.cardIcon}>
<Ionicons name="document-text" size={24} color={Colors.primary} />
</View>
<View style={styles.cardContent}>
<Text style={styles.cardTitle}>{item.titre}</Text>
<Text style={styles.cardExcerpt} numberOfLines={2}>
{item.contenu?.replace(/<[^>]*>/g, '').substring(0, 120)}...
</Text>
<Text style={styles.cardDate}>
{new Date(item.created_at).toLocaleDateString('fr-FR')}
</Text>
</View>
<Ionicons name="chevron-forward" size={20} color={Colors.gray[300]} />
</TouchableOpacity>
);
const renderItem = ({ item }: { item: Feed }) => {
const extrait = (item.contenu ?? '').replace(/<[^>]*>/g, '').trim();
return (
<Card onPress={() => router.push(`/(tabs)/info/${item.slug}`)} style={styles.card}>
<View style={styles.cardRow}>
<View style={styles.cardIcon}>
<Ionicons name="document-text" size={24} color={Colors.primary} />
</View>
<View style={styles.cardContent}>
<Text style={styles.cardTitle}>{item.titre}</Text>
{extrait ? (
<Text style={styles.cardExcerpt} numberOfLines={2}>
{extrait}
</Text>
) : null}
<Text style={styles.cardDate}>
{new Date(item.created_at).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'long',
year: 'numeric',
})}
</Text>
</View>
<Ionicons name="chevron-forward" size={20} color={Colors.gray[400]} />
</View>
</Card>
);
};
return (
<View style={styles.container}>
<FlatList
data={feeds || []}
keyExtractor={(item) => String(item.id)}
renderItem={renderItem}
contentContainerStyle={styles.listContent}
ListHeaderComponent={
<View style={styles.header}>
<Text style={styles.headerTitle}>Santé mentale</Text>
<Text style={styles.headerSubtitle}>Ressources et informations pour votre bien-être</Text>
</View>
}
ListEmptyComponent={
isLoading ? (
<View style={styles.loading}><Text style={styles.loadingText}>Chargement...</Text></View>
) : (
<View style={styles.empty}>
<Ionicons name="newspaper-outline" size={48} color={Colors.gray[300]} />
<Text style={styles.emptyText}>Aucun article disponible</Text>
</View>
)
}
/>
<AppBar title="Informations" subtitle="Ressources pour votre santé mentale" />
{isLoading ? (
<Loader label="Chargement des articles…" />
) : (
<FlatList
data={feeds ?? []}
keyExtractor={(item) => String(item.id)}
renderItem={renderItem}
contentContainerStyle={styles.listContent}
ListEmptyComponent={
<EmptyState
icon="newspaper-outline"
title="Aucun article disponible"
message="Les ressources d'information apparaîtront ici dès leur publication."
/>
}
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: Colors.white },
listContent: { padding: 16 },
header: { marginBottom: 20 },
headerTitle: { fontSize: 14, fontWeight: '700', color: Colors.primary, textTransform: 'uppercase', letterSpacing: 1 },
headerSubtitle: { fontSize: 15, color: Colors.gray[500], marginTop: 4 },
card: {
flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16,
backgroundColor: Colors.white, borderRadius: 4, marginBottom: 10,
borderWidth: 1, borderColor: Colors.gray[200],
container: { flex: 1, backgroundColor: Colors.gray[50] },
listContent: { padding: Spacing.lg, gap: Spacing.md },
card: { padding: Spacing.lg },
cardRow: { flexDirection: 'row', alignItems: 'center', gap: Spacing.md },
cardIcon: {
width: 48,
height: 48,
borderRadius: Radius.sm,
backgroundColor: '#E3E3FD',
justifyContent: 'center',
alignItems: 'center',
},
cardIcon: { width: 48, height: 48, borderRadius: 4, backgroundColor: `${Colors.primary}15`, justifyContent: 'center', alignItems: 'center' },
cardContent: { flex: 1 },
cardTitle: { fontSize: 15, fontWeight: '700', color: Colors.black, marginBottom: 4 },
cardExcerpt: { fontSize: 13, color: Colors.gray[500], lineHeight: 18 },
cardDate: { fontSize: 11, color: Colors.gray[400], marginTop: 4 },
loading: { padding: 40, alignItems: 'center' },
loadingText: { color: Colors.gray[400] },
empty: { alignItems: 'center', paddingTop: 60 },
emptyText: { fontSize: 16, color: Colors.gray[400], marginTop: 12 },
cardTitle: { fontSize: FontSize.body, fontWeight: FontWeight.bold, color: Colors.black, marginBottom: Spacing.xs },
cardExcerpt: { fontSize: FontSize.xs, color: Colors.gray[500], lineHeight: 18 },
cardDate: { fontSize: FontSize.tiny, color: Colors.gray[400], marginTop: Spacing.xs },
});