sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): migrate to Expo SDK 54, replace NativeWind with StyleSheet
Some checks failed
CI / Lint, Unit Tests & Build (push) Failing after 1m5s
Details
CI / Deploy production (on server) (push) Has been skipped
Details

Browse Source 
- 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
2026-05-29 16:18:44 +00:00
parent 9ba30b8644
commit 7c8695cacf
12 changed files with 1243 additions and 2449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
memento-mobile/app/(auth)/login.tsx
View File

@@ -1,15 +1,11 @@
import { useState } from 'react'
import {
View,
Text,
TextInput,
TouchableOpacity,
KeyboardAvoidingView,
Platform,
ActivityIndicator,
Alert,
View, Text, TextInput, TouchableOpacity,
KeyboardAvoidingView, Platform, ActivityIndicator,
Alert, StyleSheet,
} from 'react-native'
import { useAuthStore } from '@/lib/store'
import { C } from '../_layout'
export default function LoginScreen() {
const [email, setEmail] = useState('')
@@ -30,69 +26,56 @@ export default function LoginScreen() {
}
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
className="flex-1 bg-paper"
>
<View className="flex-1 justify-center px-8">
{/* Logo */}
<View className="mb-12 items-center">
<Text className="text-4xl font-serif text-ink italic tracking-tight">Momento</Text>
<Text className="text-sm text-concrete mt-1">Votre espace de connaissance</Text>
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={s.container}>
<View style={s.inner}>
<View style={s.logoBlock}>
<Text style={s.logo}>Momento</Text>
<Text style={s.tagline}>Votre espace de connaissance</Text>
</View>
{/* Form */}
<View className="space-y-3">
<View>
<Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
Email
</Text>
<View style={s.form}>
<Text style={s.label}>Email</Text>
<TextInput
value={email}
onChangeText={setEmail}
placeholder="vous@exemple.com"
autoCapitalize="none"
keyboardType="email-address"
autoComplete="email"
className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
placeholderTextColor="#8A8A82"
value={email} onChangeText={setEmail}
placeholder="vous@exemple.com" autoCapitalize="none"
keyboardType="email-address" autoComplete="email"
style={s.input} placeholderTextColor={C.concrete}
/>
</View>
<View>
<Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
Mot de passe
</Text>
<Text style={[s.label, { marginTop: 16 }]}>Mot de passe</Text>
<TextInput
value={password}
onChangeText={setPassword}
placeholder="••••••••"
secureTextEntry
autoComplete="password"
className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
placeholderTextColor="#8A8A82"
onSubmitEditing={handleLogin}
value={password} onChangeText={setPassword}
placeholder="••••••••" secureTextEntry
autoComplete="password" style={s.input}
placeholderTextColor={C.concrete} onSubmitEditing={handleLogin}
/>
</View>
<TouchableOpacity
onPress={handleLogin}
disabled={loading || !email || !password}
className="mt-4 bg-ink rounded-xl py-3.5 items-center active:opacity-80"
style={{ opacity: loading || !email || !password ? 0.5 : 1 }}
style={[s.btn, (loading || !email || !password) && s.btnDisabled]}
>
{loading ? (
<ActivityIndicator color="white" size="small" />
) : (
<Text className="text-paper font-semibold text-[15px]">Se connecter</Text>
)}
{loading
? <ActivityIndicator color={C.white} size="small" />
: <Text style={s.btnText}>Se connecter</Text>}
</TouchableOpacity>
</View>
<Text className="text-center text-[12px] text-concrete mt-8">
memento-note.com
</Text>
<Text style={s.footer}>memento-note.com</Text>
</View>
</KeyboardAvoidingView>
)
}
const s = StyleSheet.create({
container: { flex: 1, backgroundColor: C.paper },
inner: { flex: 1, justifyContent: 'center', paddingHorizontal: 32 },
logoBlock: { marginBottom: 48, alignItems: 'center' },
logo: { fontSize: 36, fontStyle: 'italic', color: C.ink, fontWeight: '600' },
tagline: { fontSize: 14, color: C.concrete, marginTop: 4 },
form: {},
label: { fontSize: 11, fontWeight: '700', letterSpacing: 1.5, textTransform: 'uppercase', color: C.concrete, marginBottom: 6 },
input: { borderWidth: 1, borderColor: C.border, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 12, fontSize: 15, color: C.ink, backgroundColor: C.white },
btn: { marginTop: 24, backgroundColor: C.ink, borderRadius: 12, paddingVertical: 14, alignItems: 'center' },
btnDisabled: { opacity: 0.5 },
btnText: { color: C.white, fontWeight: '600', fontSize: 15 },
footer: { textAlign: 'center', fontSize: 12, color: C.concrete, marginTop: 32 },
})

51
memento-mobile/app/(tabs)/_layout.tsx
View File

@@ -1,55 +1,22 @@
import { Tabs } from 'expo-router'
import { BookOpen, Search, Home, User } from 'lucide-react-native'
import { C } from '../_layout'
export default function TabsLayout() {
return (
<Tabs
screenOptions={{
headerShown: false,
tabBarActiveTintColor: '#A47148',
tabBarInactiveTintColor: '#8A8A82',
tabBarStyle: {
backgroundColor: '#FAFAF8',
borderTopColor: '#E8E6E0',
borderTopWidth: 1,
paddingBottom: 4,
height: 60,
},
tabBarLabelStyle: {
fontSize: 10,
fontWeight: '600',
marginTop: -2,
},
tabBarActiveTintColor: C.brand,
tabBarInactiveTintColor: C.concrete,
tabBarStyle: { backgroundColor: C.paper, borderTopColor: C.border, borderTopWidth: 1, paddingBottom: 4, height: 60 },
tabBarLabelStyle: { fontSize: 10, fontWeight: '600', marginTop: -2 },
}}
>
<Tabs.Screen
name="home"
options={{
title: 'Accueil',
tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
}}
/>
<Tabs.Screen
name="notebooks"
options={{
title: 'Carnets',
tabBarIcon: ({ color, size }) => <BookOpen size={size} color={color} />,
}}
/>
<Tabs.Screen
name="search"
options={{
title: 'Recherche',
tabBarIcon: ({ color, size }) => <Search size={size} color={color} />,
}}
/>
<Tabs.Screen
name="profile"
options={{
title: 'Profil',
tabBarIcon: ({ color, size }) => <User size={size} color={color} />,
}}
/>
<Tabs.Screen name="home" options={{ title: 'Accueil', tabBarIcon: ({ color, size }) => <Home size={size} color={color} /> }} />
<Tabs.Screen name="notebooks" options={{ title: 'Carnets', tabBarIcon: ({ color, size }) => <BookOpen size={size} color={color} /> }} />
<Tabs.Screen name="search" options={{ title: 'Recherche', tabBarIcon: ({ color, size }) => <Search size={size} color={color} /> }} />
<Tabs.Screen name="profile" options={{ title: 'Profil', tabBarIcon: ({ color, size }) => <User size={size} color={color} /> }} />
</Tabs>
)
}

111
memento-mobile/app/(tabs)/home.tsx
View File

@@ -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 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 },
})

49
memento-mobile/app/(tabs)/notebooks.tsx
View File

@@ -1,13 +1,14 @@
import { useEffect, useState } from 'react'
import {
View, Text, FlatList, TouchableOpacity,
ActivityIndicator, RefreshControl,
ActivityIndicator, RefreshControl, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { ChevronRight } from 'lucide-react-native'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'
interface Notebook {
id: string
@@ -39,40 +40,46 @@ export default function NotebooksScreen() {
if (loading) {
return (
<SafeAreaView className="flex-1 bg-paper items-center justify-center">
<ActivityIndicator color="#A47148" />
<SafeAreaView style={[s.safe, { alignItems: 'center', justifyContent: 'center' }]}>
<ActivityIndicator color={C.brand} />
</SafeAreaView>
)
}
return (
<SafeAreaView className="flex-1 bg-paper">
<View className="px-5 pt-4 pb-2">
<Text className="text-2xl font-serif italic text-ink">Carnets</Text>
<SafeAreaView style={s.safe}>
<View style={s.header}>
<Text style={s.title}>Carnets</Text>
</View>
<FlatList
data={notebooks}
keyExtractor={(item) => item.id}
contentContainerClassName="px-5 pb-8"
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
contentContainerStyle={s.list}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => router.push(`/notebook/${item.id}`)}
className="flex-row items-center bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
>
<Text className="text-2xl mr-3">{item.icon ?? '📓'}</Text>
<View className="flex-1">
<Text className="text-[15px] font-semibold text-ink">{item.name}</Text>
<Text className="text-[12px] text-concrete">{item._count?.notes ?? 0} notes</Text>
<TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card}>
<Text style={s.icon}>{item.icon ?? '📓'}</Text>
<View style={{ flex: 1 }}>
<Text style={s.cardTitle}>{item.name}</Text>
<Text style={s.cardMeta}>{item._count?.notes ?? 0} notes</Text>
</View>
<ChevronRight size={16} color="#8A8A82" />
<ChevronRight size={16} color={C.concrete} />
</TouchableOpacity>
)}
ListEmptyComponent={
<Text className="text-concrete text-center mt-12">Aucun carnet.</Text>
}
ListEmptyComponent={<Text style={s.empty}>Aucun carnet.</Text>}
/>
</SafeAreaView>
)
}
const s = StyleSheet.create({
safe: { flex: 1, backgroundColor: C.paper },
header: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink },
list: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 32 },
card: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
icon: { fontSize: 24, marginRight: 12 },
cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
cardMeta: { fontSize: 12, color: C.concrete, marginTop: 2 },
empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
})

71
memento-mobile/app/(tabs)/profile.tsx
View File

@@ -1,7 +1,8 @@
import { View, Text, TouchableOpacity, ScrollView, Alert } from 'react-native'
import { View, Text, TouchableOpacity, ScrollView, Alert, StyleSheet } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { LogOut, CreditCard, Globe } from 'lucide-react-native'
import { useAuthStore } from '@/lib/store'
import { C } from '../_layout'
const TIER_LABELS: Record<string, string> = {
FREE: 'Gratuit',
@@ -13,6 +14,7 @@ const TIER_LABELS: Record<string, string> = {
export default function ProfileScreen() {
const { user, logout } = useAuthStore()
const initial = (user?.name?.[0] ?? user?.email?.[0] ?? '?').toUpperCase()
const handleLogout = () => {
Alert.alert(
@@ -26,48 +28,57 @@ export default function ProfileScreen() {
}
return (
<SafeAreaView className="flex-1 bg-paper">
<ScrollView className="flex-1 px-5">
<Text className="text-2xl font-serif italic text-ink pt-4 pb-6">Profil</Text>
<SafeAreaView style={s.safe}>
<ScrollView style={{ flex: 1, paddingHorizontal: 20 }}>
<Text style={s.title}>Profil</Text>
{/* User info */}
<View className="bg-white border border-border rounded-2xl p-5 mb-4">
<View className="w-14 h-14 rounded-full bg-brand/10 items-center justify-center mb-3">
<Text className="text-2xl font-bold text-brand">
{user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'}
</Text>
<View style={s.card}>
<View style={s.avatar}>
<Text style={s.avatarText}>{initial}</Text>
</View>
<Text className="text-[17px] font-semibold text-ink">{user?.name ?? 'Utilisateur'}</Text>
<Text className="text-[13px] text-concrete mt-0.5">{user?.email}</Text>
<Text style={s.name}>{user?.name ?? 'Utilisateur'}</Text>
<Text style={s.email}>{user?.email}</Text>
{user?.tier && (
<View className="mt-3 self-start bg-brand/10 px-3 py-1 rounded-full">
<Text className="text-[11px] font-bold text-brand uppercase tracking-wider">
{TIER_LABELS[user.tier] ?? user.tier}
</Text>
<View style={s.badge}>
<Text style={s.badgeText}>{TIER_LABELS[user.tier] ?? user.tier}</Text>
</View>
)}
</View>
{/* Actions */}
<View className="bg-white border border-border rounded-2xl overflow-hidden mb-4">
<TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 border-b border-border active:bg-border/20">
<CreditCard size={18} color="#8A8A82" />
<Text className="text-[15px] text-ink flex-1">Abonnement</Text>
<View style={s.actionsCard}>
<TouchableOpacity style={[s.actionRow, s.actionRowBorder]}>
<CreditCard size={18} color={C.concrete} />
<Text style={s.actionText}>Abonnement</Text>
</TouchableOpacity>
<TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 active:bg-border/20">
<Globe size={18} color="#8A8A82" />
<Text className="text-[15px] text-ink flex-1">Ouvrir memento-note.com</Text>
<TouchableOpacity style={s.actionRow}>
<Globe size={18} color={C.concrete} />
<Text style={s.actionText}>Ouvrir memento-note.com</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
onPress={handleLogout}
className="bg-white border border-rose-200 rounded-2xl flex-row items-center gap-3 px-4 py-3.5 active:opacity-70"
>
<LogOut size={18} color="#e11d48" />
<Text className="text-[15px] text-rose-600 font-medium">Se déconnecter</Text>
<TouchableOpacity onPress={handleLogout} style={s.logoutBtn}>
<LogOut size={18} color={C.rose} />
<Text style={s.logoutText}>Se déconnecter</Text>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
)
}
const s = StyleSheet.create({
safe: { flex: 1, backgroundColor: C.paper },
title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, paddingTop: 16, paddingBottom: 24 },
card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, padding: 20, marginBottom: 16 },
avatar: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
avatarText: { fontSize: 22, fontWeight: '700', color: C.brand },
name: { fontSize: 17, fontWeight: '600', color: C.ink },
email: { fontSize: 13, color: C.concrete, marginTop: 2 },
badge: { marginTop: 12, alignSelf: 'flex-start', backgroundColor: '#f3ece4', paddingHorizontal: 12, paddingVertical: 4, borderRadius: 20 },
badgeText: { fontSize: 11, fontWeight: '800', color: C.brand, letterSpacing: 1, textTransform: 'uppercase' },
actionsCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, overflow: 'hidden', marginBottom: 16 },
actionRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
actionRowBorder: { borderBottomWidth: 1, borderBottomColor: C.border },
actionText: { fontSize: 15, color: C.ink, flex: 1 },
logoutBtn: { backgroundColor: C.white, borderWidth: 1, borderColor: C.roseBorder, borderRadius: 20, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
logoutText: { fontSize: 15, color: C.rose, fontWeight: '500' },
})

81
memento-mobile/app/(tabs)/search.tsx
View File

@@ -1,13 +1,14 @@
import { useState } from 'react'
import {
View, Text, TextInput, FlatList,
TouchableOpacity, ActivityIndicator,
TouchableOpacity, ActivityIndicator, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Search as SearchIcon, X } from 'lucide-react-native'
import { useRouter } from 'expo-router'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'
interface SearchResult {
id: string
@@ -40,67 +41,59 @@ export default function SearchScreen() {
}
return (
<SafeAreaView className="flex-1 bg-paper">
<View className="px-5 pt-4 pb-2">
<Text className="text-2xl font-serif italic text-ink mb-4">Recherche</Text>
<View className="flex-row items-center bg-white border border-border rounded-xl px-3 py-2.5 gap-2">
<SearchIcon size={16} color="#8A8A82" />
<SafeAreaView style={s.safe}>
<View style={s.top}>
<Text style={s.title}>Recherche</Text>
<View style={s.inputRow}>
<SearchIcon size={16} color={C.concrete} />
<TextInput
value={query}
onChangeText={setQuery}
value={query} onChangeText={setQuery}
placeholder="Chercher dans vos notes…"
className="flex-1 text-[15px] text-ink"
placeholderTextColor="#8A8A82"
returnKeyType="search"
onSubmitEditing={handleSearch}
style={s.input} placeholderTextColor={C.concrete}
returnKeyType="search" onSubmitEditing={handleSearch}
/>
{query.length > 0 && (
<TouchableOpacity onPress={() => { setQuery(''); setResults([]); setSearched(false) }}>
<X size={14} color="#8A8A82" />
<X size={14} color={C.concrete} />
</TouchableOpacity>
)}
</View>
</View>
{loading ? (
<View className="flex-1 items-center justify-center">
<ActivityIndicator color="#A47148" />
</View>
) : (
<FlatList
{loading
? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
: <FlatList
data={results}
keyExtractor={(item) => item.id}
contentContainerClassName="px-5 pt-3 pb-8"
contentContainerStyle={s.list}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => router.push(`/note/${item.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}>
{item.title || 'Sans titre'}
</Text>
{item.snippet && (
<Text className="text-[12px] text-concrete mt-1" numberOfLines={2}>
{item.snippet}
</Text>
)}
{item.notebookName && (
<Text className="text-[11px] text-concrete/60 mt-1">{item.notebookName}</Text>
)}
<TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
<Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
{item.snippet && <Text style={s.snippet} numberOfLines={2}>{item.snippet}</Text>}
{item.notebookName && <Text style={s.nb}>{item.notebookName}</Text>}
</TouchableOpacity>
)}
ListEmptyComponent={
searched ? (
<Text className="text-concrete text-center mt-12">Aucun résultat pour "{query}"</Text>
) : (
<Text className="text-concrete text-center mt-12 text-[13px]">
Tapez votre recherche puis appuyez sur Entrée
<Text style={s.empty}>
{searched ? `Aucun résultat pour "${query}"` : 'Tapez votre recherche puis appuyez sur Entrée'}
</Text>
)
}
/>
)}
/>}
</SafeAreaView>
)
}
const s = StyleSheet.create({
safe: { flex: 1, backgroundColor: C.paper },
top: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, marginBottom: 16 },
inputRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 10, gap: 8 },
input: { flex: 1, fontSize: 15, color: C.ink },
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
list: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 32 },
card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
snippet: { fontSize: 12, color: C.concrete, marginTop: 4 },
nb: { fontSize: 11, color: C.concrete, marginTop: 4, opacity: 0.7 },
empty: { textAlign: 'center', color: C.concrete, marginTop: 48, fontSize: 13 },
})

33
memento-mobile/app/_layout.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
import { Slot, useRouter, useSegments } from 'expo-router'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { StatusBar } from 'expo-status-bar'
import { View, ActivityIndicator } from 'react-native'
import { View, ActivityIndicator, StyleSheet } from 'react-native'
import { useAuthStore } from '@/lib/store'
export default function RootLayout() {
@@ -10,24 +10,19 @@ export default function RootLayout() {
const router = useRouter()
const segments = useSegments()
useEffect(() => {
restore()
}, [])
useEffect(() => { restore() }, [])
useEffect(() => {
if (loading) return
const inAuth = segments[0] === '(auth)'
if (!user && !inAuth) {
router.replace('/(auth)/login')
} else if (user && inAuth) {
router.replace('/(tabs)/home')
}
if (!user && !inAuth) router.replace('/(auth)/login')
else if (user && inAuth) router.replace('/(tabs)/home')
}, [user, loading, segments])
if (loading) {
return (
<View className="flex-1 items-center justify-center bg-paper">
<ActivityIndicator size="large" color="#A47148" />
<View style={s.loader}>
<ActivityIndicator size="large" color={C.brand} />
</View>
)
}
@@ -39,3 +34,19 @@ export default function RootLayout() {
</SafeAreaProvider>
)
}
export const C = {
brand: '#A47148',
ink: '#1A1A18',
paper: '#FAFAF8',
concrete: '#8A8A82',
border: '#E8E6E0',
white: '#FFFFFF',
rose: '#e11d48',
roseBg: '#fff1f2',
roseBorder: '#fecdd3',
}
const s = StyleSheet.create({
loader: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: C.paper },
})

58
memento-mobile/app/note/[id].tsx
View File

@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import {
View, Text, ScrollView, ActivityIndicator,
TouchableOpacity, Share,
View, Text, ActivityIndicator,
TouchableOpacity, Share, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useLocalSearchParams, useRouter } from 'expo-router'
@@ -9,6 +9,7 @@ import { ArrowLeft, Share2 } from 'lucide-react-native'
import { WebView } from 'react-native-webview'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'
interface Note {
id: string
@@ -18,7 +19,6 @@ interface Note {
notebookName?: string
}
// Wrap HTML content in a minimal styled page for WebView rendering
function buildHtml(content: string, title: string) {
return `<!DOCTYPE html>
<html>
@@ -62,43 +62,35 @@ export default function NoteScreen() {
const handleShare = async () => {
if (!note) return
await Share.share({
title: note.title,
message: `${note.title}\nhttps://memento-note.com`,
})
await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
}
return (
<SafeAreaView className="flex-1 bg-paper">
{/* Header */}
<View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
<TouchableOpacity onPress={() => router.back()} className="p-1">
<ArrowLeft size={22} color="#1A1A18" />
<SafeAreaView style={s.safe}>
<View style={s.header}>
<TouchableOpacity onPress={() => router.back()} style={s.backBtn}>
<ArrowLeft size={22} color={C.ink} />
</TouchableOpacity>
<Text className="flex-1 text-[15px] font-semibold text-ink" numberOfLines={1}>
{note?.title ?? '…'}
</Text>
<TouchableOpacity onPress={handleShare} className="p-1">
<Share2 size={18} color="#8A8A82" />
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
<TouchableOpacity onPress={handleShare} style={s.shareBtn}>
<Share2 size={18} color={C.concrete} />
</TouchableOpacity>
</View>
{loading ? (
<View className="flex-1 items-center justify-center">
<ActivityIndicator color="#A47148" size="large" />
</View>
) : note ? (
<WebView
source={{ html: buildHtml(note.content, note.title) }}
style={{ flex: 1, backgroundColor: '#FAFAF8' }}
scrollEnabled
showsVerticalScrollIndicator={false}
/>
) : (
<View className="flex-1 items-center justify-center">
<Text className="text-concrete">Note introuvable.</Text>
</View>
)}
{loading
? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>
: note
? <WebView source={{ html: buildHtml(note.content, note.title) }} style={{ flex: 1, backgroundColor: C.paper }} scrollEnabled showsVerticalScrollIndicator={false} />
: <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
</SafeAreaView>
)
}
const s = StyleSheet.create({
safe: { flex: 1, backgroundColor: C.paper },
header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
backBtn: { padding: 4 },
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
shareBtn: { padding: 4 },
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
})

54
memento-mobile/app/notebook/[id].tsx
View File

@@ -1,12 +1,13 @@
import { useEffect, useState } from 'react'
import {
View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl,
View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl, StyleSheet,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useLocalSearchParams, useRouter } from 'expo-router'
import { ArrowLeft } from 'lucide-react-native'
import { apiFetch } from '@/lib/api'
import { ENDPOINTS } from '@/lib/config'
import { C } from '../_layout'
interface Note {
id: string
@@ -39,40 +40,43 @@ export default function NotebookScreen() {
useEffect(() => { load() }, [id])
return (
<SafeAreaView className="flex-1 bg-paper">
<View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
<TouchableOpacity onPress={() => router.back()} className="p-1">
<ArrowLeft size={22} color="#1A1A18" />
<SafeAreaView style={s.safe}>
<View style={s.header}>
<TouchableOpacity onPress={() => router.back()} style={{ padding: 4 }}>
<ArrowLeft size={22} color={C.ink} />
</TouchableOpacity>
<Text className="text-[17px] font-semibold text-ink flex-1">{notebookName || 'Carnet'}</Text>
<Text style={s.headerTitle}>{notebookName || 'Carnet'}</Text>
</View>
{loading ? (
<View className="flex-1 items-center justify-center">
<ActivityIndicator color="#A47148" />
</View>
) : (
<FlatList
{loading
? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
: <FlatList
data={notes}
keyExtractor={(item) => item.id}
contentContainerClassName="px-5 pt-4 pb-8"
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
contentContainerStyle={s.list}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => router.push(`/note/${item.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}>
{item.title || 'Sans titre'}
</Text>
<Text className="text-[12px] text-concrete mt-0.5">
<TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
<Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
<Text style={s.cardDate}>
{new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
</Text>
</TouchableOpacity>
)}
ListEmptyComponent={<Text className="text-concrete text-center mt-12">Carnet vide.</Text>}
/>
)}
ListEmptyComponent={<Text style={s.empty}>Carnet vide.</Text>}
/>}
</SafeAreaView>
)
}
const s = StyleSheet.create({
safe: { flex: 1, backgroundColor: C.paper },
header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
headerTitle: { fontSize: 17, fontWeight: '600', color: C.ink, flex: 1 },
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
list: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 32 },
card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
cardDate: { fontSize: 12, color: C.concrete, marginTop: 4 },
empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
})

5
memento-mobile/babel.config.js
View File

@@ -1,9 +1,6 @@
module.exports = function (api) {
api.cache(true);
return {
presets: [
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
'nativewind/babel',
],
presets: ['babel-preset-expo'],
};
};

3003
memento-mobile/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

37
memento-mobile/package.json
View File

@@ -10,25 +10,28 @@
"build:ios": "eas build --platform ios"
},
"dependencies": {
"expo": "~54.0.0",
"expo-router": "~5.1.11",
"expo-status-bar": "~2.2.3",
"expo-secure-store": "~14.2.0",
"expo-font": "~13.3.1",
"expo-splash-screen": "~0.30.8",
"react": "19.0.0",
"react-native": "0.79.6",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-webview": "13.13.5",
"@react-native-async-storage/async-storage": "2.1.2",
"nativewind": "^4.1.23",
"tailwindcss": "^3.4.0",
"zustand": "^5.0.2"
"expo": "~54.0.35",
"expo-router": "~6.0.24",
"expo-status-bar": "~3.0.9",
"expo-secure-store": "~15.0.8",
"expo-font": "~14.0.12",
"expo-splash-screen": "~31.0.13",
"expo-linking": "~8.0.12",
"expo-constants": "~18.0.13",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-webview": "13.15.0",
"@react-native-async-storage/async-storage": "2.2.0",
"zustand": "^5.0.2",
"lucide-react-native": "^0.477.0",
"react-native-svg": "15.12.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~19.0.10",
"typescript": "~5.8.3"
"@types/react": "~19.1.0",
"typescript": "~5.9.2"
}
}