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