mobile: fix notebook icons + redesign home/notebooks + inline MD parser in WebView

- notebooks.tsx: detect Lucide icon names (folder, book, etc.) vs emoji
  -> render <Folder> component instead of raw string 'folder'
  -> colored icon wrap using notebook color
- home.tsx: full redesign — header greeting + quick actions + recent list
  -> section-based layout, dense note rows with chevron
- note/[id].tsx: remove 'marked' import (Metro bundler issue)
  -> inline minimal MD→HTML parser runs inside WebView JS context
  -> handles headings, lists, blockquotes, code blocks, inline styles
  -> zero external dependency, works 100% offline
- package.json: remove 'marked' dependency

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

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

@@ -5,7 +5,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { CalendarDays, Sparkles, BookOpen } from 'lucide-react-native'
+import { CalendarDays, Search, BookOpen, Clock, ChevronRight } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { useAuthStore } from '@/lib/store'
@@ -31,7 +31,7 @@ export default function HomeScreen() {
       const res = await apiFetch(ENDPOINTS.notes())
       if (res.ok) {
         const data = await res.json()
-        setRecentNotes((data.notes ?? []).slice(0, 10))
+        setRecentNotes((data.notes ?? []).slice(0, 12))
       }
     } finally {
       setLoading(false)
@@ -49,56 +49,80 @@ export default function HomeScreen() {
     }
   }
 
-  const formatDate = (iso: string) =>
-    new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
+  const now = new Date()
+  const hour = now.getHours()
+  const greeting = hour < 12 ? 'Bonjour' : hour < 18 ? 'Bon après-midi' : 'Bonsoir'
+  const firstName = user?.name?.split(' ')[0] ?? ''
 
   return (
     <SafeAreaView style={s.safe}>
       <ScrollView
-        style={{ flex: 1 }}
+        showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
       >
-        <View style={s.headerBlock}>
-          <Text style={s.greeting}>
-            Bonjour{user?.name ? `, ${user.name.split(' ')[0]}` : ''} 👋
-          </Text>
-          <Text style={s.date}>
-            {new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
-          </Text>
+        {/* Header */}
+        <View style={s.header}>
+          <View>
+            <Text style={s.greeting}>{greeting}{firstName ? `, ${firstName}` : ''}</Text>
+            <Text style={s.date}>{now.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}</Text>
+          </View>
+          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.searchBtn}>
+            <Search size={18} color={C.ink} />
+          </TouchableOpacity>
         </View>
 
+        {/* Quick actions */}
         <View style={s.quickRow}>
-          <TouchableOpacity onPress={handleDailyNote} style={s.quickBtn}>
-            <CalendarDays size={22} color={C.brand} />
+          <TouchableOpacity onPress={handleDailyNote} style={s.quickCard} activeOpacity={0.7}>
+            <View style={[s.quickIcon, { backgroundColor: '#f3ece4' }]}>
+              <CalendarDays size={20} color={C.brand} />
+            </View>
             <Text style={s.quickLabel}>Note du jour</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickBtn}>
-            <BookOpen size={22} color={C.brand} />
+          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickCard} activeOpacity={0.7}>
+            <View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}>
+              <BookOpen size={20} color="#5b7ec7" />
+            </View>
             <Text style={s.quickLabel}>Carnets</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickBtn}>
-            <Sparkles size={22} color={C.brand} />
-            <Text style={s.quickLabel}>Recherche IA</Text>
+          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickCard} activeOpacity={0.7}>
+            <View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}>
+              <Search size={20} color="#4a9b61" />
+            </View>
+            <Text style={s.quickLabel}>Recherche</Text>
           </TouchableOpacity>
         </View>
 
-        <View style={s.recentBlock}>
-          <Text style={s.sectionLabel}>Récentes</Text>
+        {/* Recent notes */}
+        <View style={s.section}>
+          <View style={s.sectionHeader}>
+            <Clock size={13} color={C.concrete} />
+            <Text style={s.sectionLabel}>Récentes</Text>
+          </View>
+
           {loading
-            ? <ActivityIndicator color={C.brand} />
+            ? <ActivityIndicator color={C.brand} style={{ marginTop: 24 }} />
             : 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>
+              : recentNotes.map((note, i) => (
+                  <TouchableOpacity
+                    key={note.id}
+                    onPress={() => router.push(`/note/${note.id}`)}
+                    style={[s.noteRow, i === recentNotes.length - 1 && { borderBottomWidth: 0 }]}
+                    activeOpacity={0.6}
+                  >
+                    <View style={{ flex: 1 }}>
+                      <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
+                      {note.notebookName && <Text style={s.noteMeta} numberOfLines={1}>{note.notebookName}</Text>}
+                    </View>
+                    <View style={s.noteRight}>
+                      <Text style={s.noteDate}>{new Date(note.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}</Text>
+                      <ChevronRight size={12} color={C.border} />
                     </View>
                   </TouchableOpacity>
                 ))}
         </View>
-        <View style={{ height: 32 }} />
+        <View style={{ height: 40 }} />
       </ScrollView>
     </SafeAreaView>
   )
@@ -106,16 +130,21 @@ export default function HomeScreen() {
 
 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 },
+  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 16 },
+  greeting: { fontSize: 22, fontWeight: '700', color: C.ink, letterSpacing: -0.3 },
+  date: { fontSize: 13, color: C.concrete, marginTop: 3, textTransform: 'capitalize' },
+  searchBtn: { width: 38, height: 38, borderRadius: 19, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, alignItems: 'center', justifyContent: 'center' },
+  quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginBottom: 24 },
+  quickCard: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, alignItems: 'center', gap: 10 },
+  quickIcon: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
   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 },
+  section: { marginHorizontal: 20, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, overflow: 'hidden' },
+  sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 16, paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: '#f8f6f2' },
+  sectionLabel: { fontSize: 11, fontWeight: '700', color: C.concrete, textTransform: 'uppercase', letterSpacing: 1 },
+  empty: { color: C.concrete, fontSize: 14, textAlign: 'center', padding: 24 },
+  noteRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 13, borderBottomWidth: 1, borderBottomColor: C.border },
+  noteTitle: { fontSize: 14, fontWeight: '500', color: C.ink },
+  noteMeta: { fontSize: 11, color: C.concrete, marginTop: 2 },
+  noteRight: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  noteDate: { fontSize: 11, color: C.concrete },
 })

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

@@ -5,7 +5,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { ChevronRight } from 'lucide-react-native'
+import { ChevronRight, BookOpen, Folder } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { C } from '../_layout'
@@ -14,9 +14,22 @@ interface Notebook {
   id: string
   name: string
   icon: string | null
+  color: string | null
   _count: { notes: number }
 }
 
+// icônes Lucide stockées en string → afficher composant, sinon emoji
+const LUCIDE_ICONS = new Set(['folder','book','archive','bookmark','file','note','inbox'])
+
+function NotebookIcon({ icon, color }: { icon: string | null, color: string | null }) {
+  const tint = color || C.brand
+  if (!icon || LUCIDE_ICONS.has(icon.toLowerCase())) {
+    return <Folder size={18} color={tint} />
+  }
+  // emoji ou autre caractère unicode
+  return <Text style={{ fontSize: 18, lineHeight: 22 }}>{icon}</Text>
+}
+
 export default function NotebooksScreen() {
   const [notebooks, setNotebooks] = useState<Notebook[]>([])
   const [loading, setLoading] = useState(true)
@@ -49,7 +62,9 @@ export default function NotebooksScreen() {
   return (
     <SafeAreaView style={s.safe}>
       <View style={s.header}>
+        <BookOpen size={18} color={C.brand} style={{ marginRight: 8 }} />
         <Text style={s.title}>Carnets</Text>
+        <Text style={s.count}>{notebooks.length}</Text>
       </View>
       <FlatList
         data={notebooks}
@@ -57,16 +72,23 @@ export default function NotebooksScreen() {
         contentContainerStyle={s.list}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
         renderItem={({ item }) => (
-          <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>
+          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card} activeOpacity={0.7}>
+            <View style={[s.iconWrap, { backgroundColor: (item.color || C.brand) + '18' }]}>
+              <NotebookIcon icon={item.icon} color={item.color} />
             </View>
-            <ChevronRight size={16} color={C.concrete} />
+            <View style={{ flex: 1 }}>
+              <Text style={s.cardTitle} numberOfLines={1}>{item.name}</Text>
+              <Text style={s.cardMeta}>{item._count?.notes ?? 0} note{(item._count?.notes ?? 0) !== 1 ? 's' : ''}</Text>
+            </View>
+            <ChevronRight size={14} color={C.border} />
           </TouchableOpacity>
         )}
-        ListEmptyComponent={<Text style={s.empty}>Aucun carnet.</Text>}
+        ListEmptyComponent={
+          <View style={s.emptyWrap}>
+            <BookOpen size={32} color={C.border} />
+            <Text style={s.empty}>Aucun carnet</Text>
+          </View>
+        }
       />
     </SafeAreaView>
   )
@@ -74,12 +96,14 @@ export default function NotebooksScreen() {
 
 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 },
+  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: C.border },
+  title: { fontSize: 20, fontWeight: '700', color: C.ink, flex: 1 },
+  count: { fontSize: 12, color: C.concrete, backgroundColor: C.border, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden' },
+  list: { padding: 12 },
+  card: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, marginBottom: 8 },
+  iconWrap: { width: 38, height: 38, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },
+  cardTitle: { fontSize: 14, fontWeight: '600', color: C.ink, marginBottom: 2 },
+  cardMeta: { fontSize: 12, color: C.concrete },
+  emptyWrap: { alignItems: 'center', marginTop: 60, gap: 12 },
+  empty: { color: C.concrete, fontSize: 14 },
 })