fix(mobile): migrate to Expo SDK 54, replace NativeWind with StyleSheet
- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5 - Remove NativeWind/Tailwind dependencies - Fix babel.config.js: presets babel-preset-expo only - Rewrite all screens with StyleSheet.create (no className) - Add lucide-react-native + react-native-svg - Export design tokens C from _layout.tsx for shared usage - Install node_modules (702 packages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Antigravity
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, ScrollView, TouchableOpacity,
|
||||
ActivityIndicator, RefreshControl,
|
||||
ActivityIndicator, RefreshControl, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
@@ -9,6 +9,7 @@ import { CalendarDays, Sparkles, BookOpen } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { useAuthStore } from '@/lib/store'
|
||||
import { C } from '../_layout'
|
||||
|
||||
interface Note {
|
||||
id: string
|
||||
@@ -48,85 +49,73 @@ export default function HomeScreen() {
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (iso: string) => {
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
const formatDate = (iso: string) =>
|
||||
new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
<SafeAreaView style={s.safe}>
|
||||
<ScrollView
|
||||
className="flex-1"
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
|
||||
style={{ flex: 1 }}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
|
||||
>
|
||||
{/* Header */}
|
||||
<View className="px-5 pt-4 pb-2">
|
||||
<Text className="text-2xl font-serif italic text-ink">
|
||||
<View style={s.headerBlock}>
|
||||
<Text style={s.greeting}>
|
||||
Bonjour{user?.name ? `, ${user.name.split(' ')[0]}` : ''} 👋
|
||||
</Text>
|
||||
<Text className="text-[13px] text-concrete mt-0.5">
|
||||
<Text style={s.date}>
|
||||
{new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Quick actions */}
|
||||
<View className="flex-row gap-3 px-5 mt-4">
|
||||
<TouchableOpacity
|
||||
onPress={handleDailyNote}
|
||||
className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
|
||||
>
|
||||
<CalendarDays size={22} color="#A47148" />
|
||||
<Text className="text-[12px] font-semibold text-ink">Note du jour</Text>
|
||||
<View style={s.quickRow}>
|
||||
<TouchableOpacity onPress={handleDailyNote} style={s.quickBtn}>
|
||||
<CalendarDays size={22} color={C.brand} />
|
||||
<Text style={s.quickLabel}>Note du jour</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/(tabs)/notebooks')}
|
||||
className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
|
||||
>
|
||||
<BookOpen size={22} color="#A47148" />
|
||||
<Text className="text-[12px] font-semibold text-ink">Carnets</Text>
|
||||
<TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickBtn}>
|
||||
<BookOpen size={22} color={C.brand} />
|
||||
<Text style={s.quickLabel}>Carnets</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/(tabs)/search')}
|
||||
className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
|
||||
>
|
||||
<Sparkles size={22} color="#A47148" />
|
||||
<Text className="text-[12px] font-semibold text-ink">Recherche IA</Text>
|
||||
<TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickBtn}>
|
||||
<Sparkles size={22} color={C.brand} />
|
||||
<Text style={s.quickLabel}>Recherche IA</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Recent notes */}
|
||||
<View className="px-5 mt-6">
|
||||
<Text className="text-[11px] font-bold uppercase tracking-widest text-concrete mb-3">
|
||||
Récentes
|
||||
</Text>
|
||||
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#A47148" />
|
||||
) : recentNotes.length === 0 ? (
|
||||
<Text className="text-concrete text-[14px]">Aucune note pour l'instant.</Text>
|
||||
) : (
|
||||
recentNotes.map((note) => (
|
||||
<TouchableOpacity
|
||||
key={note.id}
|
||||
onPress={() => router.push(`/note/${note.id}`)}
|
||||
className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
|
||||
>
|
||||
<Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
|
||||
{note.title || 'Sans titre'}
|
||||
</Text>
|
||||
<View className="flex-row items-center gap-2 mt-1">
|
||||
{note.notebookName && (
|
||||
<Text className="text-[11px] text-concrete">{note.notebookName}</Text>
|
||||
)}
|
||||
<Text className="text-[11px] text-concrete/60">{formatDate(note.updatedAt)}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))
|
||||
)}
|
||||
<View style={s.recentBlock}>
|
||||
<Text style={s.sectionLabel}>Récentes</Text>
|
||||
{loading
|
||||
? <ActivityIndicator color={C.brand} />
|
||||
: recentNotes.length === 0
|
||||
? <Text style={s.empty}>Aucune note pour l'instant.</Text>
|
||||
: recentNotes.map((note) => (
|
||||
<TouchableOpacity key={note.id} onPress={() => router.push(`/note/${note.id}`)} style={s.noteCard}>
|
||||
<Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
|
||||
<View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
|
||||
{note.notebookName && <Text style={s.noteMeta}>{note.notebookName}</Text>}
|
||||
<Text style={s.noteMeta}>{formatDate(note.updatedAt)}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className="h-8" />
|
||||
<View style={{ height: 32 }} />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: C.paper },
|
||||
headerBlock: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
|
||||
greeting: { fontSize: 22, fontWeight: '700', fontStyle: 'italic', color: C.ink },
|
||||
date: { fontSize: 13, color: C.concrete, marginTop: 2 },
|
||||
quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginTop: 16 },
|
||||
quickBtn: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 14, alignItems: 'center', gap: 8 },
|
||||
quickLabel: { fontSize: 11, fontWeight: '600', color: C.ink, textAlign: 'center' },
|
||||
recentBlock: { paddingHorizontal: 20, marginTop: 24 },
|
||||
sectionLabel: { fontSize: 10, fontWeight: '800', letterSpacing: 2, textTransform: 'uppercase', color: C.concrete, marginBottom: 12 },
|
||||
empty: { color: C.concrete, fontSize: 14 },
|
||||
noteCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
|
||||
noteTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
|
||||
noteMeta: { fontSize: 11, color: C.concrete },
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user