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>

memento-mobile/app/(auth)/login.tsx

@@ -1,15 +1,11 @@
 import { useState } from 'react'
 import {
-  View,
+  View, Text, TextInput, TouchableOpacity,
-  Text,
+  KeyboardAvoidingView, Platform, ActivityIndicator,
-  TextInput,
+  Alert, StyleSheet,
-  TouchableOpacity,
-  KeyboardAvoidingView,
-  Platform,
-  ActivityIndicator,
-  Alert,
 } 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
+    <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={s.container}>
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      <View style={s.inner}>
-      className="flex-1 bg-paper"
+        <View style={s.logoBlock}>
-    >
+          <Text style={s.logo}>Momento</Text>
-      <View className="flex-1 justify-center px-8">
+          <Text style={s.tagline}>Votre espace de connaissance</Text>
-        {/* 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>
         </View>
 
-        {/* Form */}
+        <View style={s.form}>
-        <View className="space-y-3">
+          <Text style={s.label}>Email</Text>
-          <View>
+          <TextInput
-            <Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
+            value={email} onChangeText={setEmail}
-              Email
+            placeholder="vous@exemple.com" autoCapitalize="none"
-            </Text>
+            keyboardType="email-address" autoComplete="email"
-            <TextInput
+            style={s.input} placeholderTextColor={C.concrete}
-              value={email}
+          />
-              onChangeText={setEmail}
+          <Text style={[s.label, { marginTop: 16 }]}>Mot de passe</Text>
-              placeholder="vous@exemple.com"
+          <TextInput
-              autoCapitalize="none"
+            value={password} onChangeText={setPassword}
-              keyboardType="email-address"
+            placeholder="••••••••" secureTextEntry
-              autoComplete="email"
+            autoComplete="password" style={s.input}
-              className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
+            placeholderTextColor={C.concrete} onSubmitEditing={handleLogin}
-              placeholderTextColor="#8A8A82"
+          />
-            />
-          </View>
-
-          <View>
-            <Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
-              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}
-            />
-          </View>
-
           <TouchableOpacity
             onPress={handleLogin}
             disabled={loading || !email || !password}
-            className="mt-4 bg-ink rounded-xl py-3.5 items-center active:opacity-80"
+            style={[s.btn, (loading || !email || !password) && s.btnDisabled]}
-            style={{ opacity: loading || !email || !password ? 0.5 : 1 }}
           >
-            {loading ? (
+            {loading
-              <ActivityIndicator color="white" size="small" />
+              ? <ActivityIndicator color={C.white} size="small" />
-            ) : (
+              : <Text style={s.btnText}>Se connecter</Text>}
-              <Text className="text-paper font-semibold text-[15px]">Se connecter</Text>
-            )}
           </TouchableOpacity>
         </View>
 
-        <Text className="text-center text-[12px] text-concrete mt-8">
+        <Text style={s.footer}>memento-note.com</Text>
-          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 },
+})

memento-mobile/app/(tabs)/_layout.tsx

@@ -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',
+        tabBarActiveTintColor: C.brand,
-        tabBarInactiveTintColor: '#8A8A82',
+        tabBarInactiveTintColor: C.concrete,
-        tabBarStyle: {
+        tabBarStyle: { backgroundColor: C.paper, borderTopColor: C.border, borderTopWidth: 1, paddingBottom: 4, height: 60 },
-          backgroundColor: '#FAFAF8',
+        tabBarLabelStyle: { fontSize: 10, fontWeight: '600', marginTop: -2 },
-          borderTopColor: '#E8E6E0',
-          borderTopWidth: 1,
-          paddingBottom: 4,
-          height: 60,
-        },
-        tabBarLabelStyle: {
-          fontSize: 10,
-          fontWeight: '600',
-          marginTop: -2,
-        },
       }}
     >
-      <Tabs.Screen
+      <Tabs.Screen name="home" options={{ title: 'Accueil', tabBarIcon: ({ color, size }) => <Home size={size} color={color} /> }} />
-        name="home"
+      <Tabs.Screen name="notebooks" options={{ title: 'Carnets', tabBarIcon: ({ color, size }) => <BookOpen size={size} color={color} /> }} />
-        options={{
+      <Tabs.Screen name="search" options={{ title: 'Recherche', tabBarIcon: ({ color, size }) => <Search size={size} color={color} /> }} />
-          title: 'Accueil',
+      <Tabs.Screen name="profile" options={{ title: 'Profil', tabBarIcon: ({ color, size }) => <User size={size} color={color} /> }} />
-          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>
   )
 }

memento-mobile/app/(tabs)/home.tsx

@@ -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 formatDate = (iso: string) =>
-    const d = new Date(iso)
+    new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
-    return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
-  }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
+    <SafeAreaView style={s.safe}>
       <ScrollView
-        className="flex-1"
+        style={{ flex: 1 }}
-        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
       >
-        {/* Header */}
+        <View style={s.headerBlock}>
-        <View className="px-5 pt-4 pb-2">
+          <Text style={s.greeting}>
-          <Text className="text-2xl font-serif italic text-ink">
             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 style={s.quickRow}>
-        <View className="flex-row gap-3 px-5 mt-4">
+          <TouchableOpacity onPress={handleDailyNote} style={s.quickBtn}>
-          <TouchableOpacity
+            <CalendarDays size={22} color={C.brand} />
-            onPress={handleDailyNote}
+            <Text style={s.quickLabel}>Note du jour</Text>
-            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>
           </TouchableOpacity>
-          <TouchableOpacity
+          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickBtn}>
-            onPress={() => router.push('/(tabs)/notebooks')}
+            <BookOpen size={22} color={C.brand} />
-            className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
+            <Text style={s.quickLabel}>Carnets</Text>
-          >
-            <BookOpen size={22} color="#A47148" />
-            <Text className="text-[12px] font-semibold text-ink">Carnets</Text>
           </TouchableOpacity>
-          <TouchableOpacity
+          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickBtn}>
-            onPress={() => router.push('/(tabs)/search')}
+            <Sparkles size={22} color={C.brand} />
-            className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
+            <Text style={s.quickLabel}>Recherche IA</Text>
-          >
-            <Sparkles size={22} color="#A47148" />
-            <Text className="text-[12px] font-semibold text-ink">Recherche IA</Text>
           </TouchableOpacity>
         </View>
 
-        {/* Recent notes */}
+        <View style={s.recentBlock}>
-        <View className="px-5 mt-6">
+          <Text style={s.sectionLabel}>Récentes</Text>
-          <Text className="text-[11px] font-bold uppercase tracking-widest text-concrete mb-3">
+          {loading
-            Récentes
+            ? <ActivityIndicator color={C.brand} />
-          </Text>
+            : recentNotes.length === 0
-
+              ? <Text style={s.empty}>Aucune note pour l'instant.</Text>
-          {loading ? (
+              : recentNotes.map((note) => (
-            <ActivityIndicator color="#A47148" />
+                  <TouchableOpacity key={note.id} onPress={() => router.push(`/note/${note.id}`)} style={s.noteCard}>
-          ) : recentNotes.length === 0 ? (
+                    <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
-            <Text className="text-concrete text-[14px]">Aucune note pour l'instant.</Text>
+                    <View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
-          ) : (
+                      {note.notebookName && <Text style={s.noteMeta}>{note.notebookName}</Text>}
-            recentNotes.map((note) => (
+                      <Text style={s.noteMeta}>{formatDate(note.updatedAt)}</Text>
-              <TouchableOpacity
+                    </View>
-                key={note.id}
+                  </TouchableOpacity>
-                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>
-
+        <View style={{ height: 32 }} />
-        <View className="h-8" />
       </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 },
+})

memento-mobile/app/(tabs)/notebooks.tsx

@@ -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">
+      <SafeAreaView style={[s.safe, { alignItems: 'center', justifyContent: 'center' }]}>
-        <ActivityIndicator color="#A47148" />
+        <ActivityIndicator color={C.brand} />
       </SafeAreaView>
     )
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
+    <SafeAreaView style={s.safe}>
-      <View className="px-5 pt-4 pb-2">
+      <View style={s.header}>
-        <Text className="text-2xl font-serif italic text-ink">Carnets</Text>
+        <Text style={s.title}>Carnets</Text>
       </View>
-
       <FlatList
         data={notebooks}
         keyExtractor={(item) => item.id}
-        contentContainerClassName="px-5 pb-8"
+        contentContainerStyle={s.list}
-        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
         renderItem={({ item }) => (
-          <TouchableOpacity
+          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card}>
-            onPress={() => router.push(`/notebook/${item.id}`)}
+            <Text style={s.icon}>{item.icon ?? '📓'}</Text>
-            className="flex-row items-center bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
+            <View style={{ flex: 1 }}>
-          >
+              <Text style={s.cardTitle}>{item.name}</Text>
-            <Text className="text-2xl mr-3">{item.icon ?? '📓'}</Text>
+              <Text style={s.cardMeta}>{item._count?.notes ?? 0} notes</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>
             </View>
-            <ChevronRight size={16} color="#8A8A82" />
+            <ChevronRight size={16} color={C.concrete} />
           </TouchableOpacity>
         )}
-        ListEmptyComponent={
+        ListEmptyComponent={<Text style={s.empty}>Aucun carnet.</Text>}
-          <Text className="text-concrete text-center mt-12">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 },
+})

memento-mobile/app/(tabs)/profile.tsx

@@ -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">
+    <SafeAreaView style={s.safe}>
-      <ScrollView className="flex-1 px-5">
+      <ScrollView style={{ flex: 1, paddingHorizontal: 20 }}>
-        <Text className="text-2xl font-serif italic text-ink pt-4 pb-6">Profil</Text>
+        <Text style={s.title}>Profil</Text>
 
-        {/* User info */}
+        <View style={s.card}>
-        <View className="bg-white border border-border rounded-2xl p-5 mb-4">
+          <View style={s.avatar}>
-          <View className="w-14 h-14 rounded-full bg-brand/10 items-center justify-center mb-3">
+            <Text style={s.avatarText}>{initial}</Text>
-            <Text className="text-2xl font-bold text-brand">
-              {user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'}
-            </Text>
           </View>
-          <Text className="text-[17px] font-semibold text-ink">{user?.name ?? 'Utilisateur'}</Text>
+          <Text style={s.name}>{user?.name ?? 'Utilisateur'}</Text>
-          <Text className="text-[13px] text-concrete mt-0.5">{user?.email}</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">
+            <View style={s.badge}>
-              <Text className="text-[11px] font-bold text-brand uppercase tracking-wider">
+              <Text style={s.badgeText}>{TIER_LABELS[user.tier] ?? user.tier}</Text>
-                {TIER_LABELS[user.tier] ?? user.tier}
-              </Text>
             </View>
           )}
         </View>
 
-        {/* Actions */}
+        <View style={s.actionsCard}>
-        <View className="bg-white border border-border rounded-2xl overflow-hidden mb-4">
+          <TouchableOpacity style={[s.actionRow, s.actionRowBorder]}>
-          <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={C.concrete} />
-            <CreditCard size={18} color="#8A8A82" />
+            <Text style={s.actionText}>Abonnement</Text>
-            <Text className="text-[15px] text-ink flex-1">Abonnement</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 active:bg-border/20">
+          <TouchableOpacity style={s.actionRow}>
-            <Globe size={18} color="#8A8A82" />
+            <Globe size={18} color={C.concrete} />
-            <Text className="text-[15px] text-ink flex-1">Ouvrir memento-note.com</Text>
+            <Text style={s.actionText}>Ouvrir memento-note.com</Text>
           </TouchableOpacity>
         </View>
 
-        <TouchableOpacity
+        <TouchableOpacity onPress={handleLogout} style={s.logoutBtn}>
-          onPress={handleLogout}
+          <LogOut size={18} color={C.rose} />
-          className="bg-white border border-rose-200 rounded-2xl flex-row items-center gap-3 px-4 py-3.5 active:opacity-70"
+          <Text style={s.logoutText}>Se déconnecter</Text>
-        >
-          <LogOut size={18} color="#e11d48" />
-          <Text className="text-[15px] text-rose-600 font-medium">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' },
+})

memento-mobile/app/(tabs)/search.tsx

@@ -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">
+    <SafeAreaView style={s.safe}>
-      <View className="px-5 pt-4 pb-2">
+      <View style={s.top}>
-        <Text className="text-2xl font-serif italic text-ink mb-4">Recherche</Text>
+        <Text style={s.title}>Recherche</Text>
-
+        <View style={s.inputRow}>
-        <View className="flex-row items-center bg-white border border-border rounded-xl px-3 py-2.5 gap-2">
+          <SearchIcon size={16} color={C.concrete} />
-          <SearchIcon size={16} color="#8A8A82" />
           <TextInput
-            value={query}
+            value={query} onChangeText={setQuery}
-            onChangeText={setQuery}
             placeholder="Chercher dans vos notes…"
-            className="flex-1 text-[15px] text-ink"
+            style={s.input} placeholderTextColor={C.concrete}
-            placeholderTextColor="#8A8A82"
+            returnKeyType="search" onSubmitEditing={handleSearch}
-            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 ? (
+      {loading
-        <View className="flex-1 items-center justify-center">
+        ? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
-          <ActivityIndicator color="#A47148" />
+        : <FlatList
-        </View>
+            data={results}
-      ) : (
+            keyExtractor={(item) => item.id}
-        <FlatList
+            contentContainerStyle={s.list}
-          data={results}
+            renderItem={({ item }) => (
-          keyExtractor={(item) => item.id}
+              <TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
-          contentContainerClassName="px-5 pt-3 pb-8"
+                <Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
-          renderItem={({ item }) => (
+                {item.snippet && <Text style={s.snippet} numberOfLines={2}>{item.snippet}</Text>}
-            <TouchableOpacity
+                {item.notebookName && <Text style={s.nb}>{item.notebookName}</Text>}
-              onPress={() => router.push(`/note/${item.id}`)}
+              </TouchableOpacity>
-              className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
+            )}
-            >
+            ListEmptyComponent={
-              <Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
+              <Text style={s.empty}>
-                {item.title || 'Sans titre'}
+                {searched ? `Aucun résultat pour "${query}"` : 'Tapez votre recherche puis appuyez sur Entrée'}
               </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>
-          )}
-          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>
-            )
-          }
-        />
-      )}
     </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 },
+})

memento-mobile/app/_layout.tsx

@@ -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(() => {
+  useEffect(() => { restore() }, [])
-    restore()
-  }, [])
 
   useEffect(() => {
     if (loading) return
     const inAuth = segments[0] === '(auth)'
-    if (!user && !inAuth) {
+    if (!user && !inAuth) router.replace('/(auth)/login')
-      router.replace('/(auth)/login')
+    else if (user && inAuth) router.replace('/(tabs)/home')
-    } else if (user && inAuth) {
-      router.replace('/(tabs)/home')
-    }
   }, [user, loading, segments])
 
   if (loading) {
     return (
-      <View className="flex-1 items-center justify-center bg-paper">
+      <View style={s.loader}>
-        <ActivityIndicator size="large" color="#A47148" />
+        <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 },
+})

memento-mobile/app/note/[id].tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
-  View, Text, ScrollView, ActivityIndicator,
+  View, Text, ActivityIndicator,
-  TouchableOpacity, Share,
+  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({
+    await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
-      title: note.title,
-      message: `${note.title}\nhttps://memento-note.com`,
-    })
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
+    <SafeAreaView style={s.safe}>
-      {/* Header */}
+      <View style={s.header}>
-      <View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
+        <TouchableOpacity onPress={() => router.back()} style={s.backBtn}>
-        <TouchableOpacity onPress={() => router.back()} className="p-1">
+          <ArrowLeft size={22} color={C.ink} />
-          <ArrowLeft size={22} color="#1A1A18" />
         </TouchableOpacity>
-        <Text className="flex-1 text-[15px] font-semibold text-ink" numberOfLines={1}>
+        <Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
-          {note?.title ?? '…'}
+        <TouchableOpacity onPress={handleShare} style={s.shareBtn}>
-        </Text>
+          <Share2 size={18} color={C.concrete} />
-        <TouchableOpacity onPress={handleShare} className="p-1">
-          <Share2 size={18} color="#8A8A82" />
         </TouchableOpacity>
       </View>
 
-      {loading ? (
+      {loading
-        <View className="flex-1 items-center justify-center">
+        ? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>
-          <ActivityIndicator color="#A47148" size="large" />
+        : note
-        </View>
+          ? <WebView source={{ html: buildHtml(note.content, note.title) }} style={{ flex: 1, backgroundColor: C.paper }} scrollEnabled showsVerticalScrollIndicator={false} />
-      ) : note ? (
+          : <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
-        <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>
-      )}
     </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' },
+})

memento-mobile/app/notebook/[id].tsx

@@ -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">
+    <SafeAreaView style={s.safe}>
-      <View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
+      <View style={s.header}>
-        <TouchableOpacity onPress={() => router.back()} className="p-1">
+        <TouchableOpacity onPress={() => router.back()} style={{ padding: 4 }}>
-          <ArrowLeft size={22} color="#1A1A18" />
+          <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 ? (
+      {loading
-        <View className="flex-1 items-center justify-center">
+        ? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
-          <ActivityIndicator color="#A47148" />
+        : <FlatList
-        </View>
+            data={notes}
-      ) : (
+            keyExtractor={(item) => item.id}
-        <FlatList
+            contentContainerStyle={s.list}
-          data={notes}
+            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
-          keyExtractor={(item) => item.id}
+            renderItem={({ item }) => (
-          contentContainerClassName="px-5 pt-4 pb-8"
+              <TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
-          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
+                <Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
-          renderItem={({ item }) => (
+                <Text style={s.cardDate}>
-            <TouchableOpacity
+                  {new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
-              onPress={() => router.push(`/note/${item.id}`)}
+                </Text>
-              className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
+              </TouchableOpacity>
-            >
+            )}
-              <Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
+            ListEmptyComponent={<Text style={s.empty}>Carnet vide.</Text>}
-                {item.title || 'Sans titre'}
+          />}
-              </Text>
-              <Text className="text-[12px] text-concrete mt-0.5">
-                {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>}
-        />
-      )}
     </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 },
+})

memento-mobile/babel.config.js

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

memento-mobile/package.json

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