feat: App mobile Expo + API mobile dédiée

memento-mobile/ (Expo + React Native + expo-router): - Auth: login email/password → Bearer token (expo-secure-store) - Layout: guard auth → redirect /(auth)/login ou /(tabs)/home - Tabs: Accueil, Carnets, Recherche, Profil - Screens: login, home (recent notes + quick actions), notebooks list, note viewer (WebView HTML), search (texte), notebook detail, profile - Design: tokens brand-accent (#A47148), ink, concrete, paper, border - lib/config.ts: API_URL dev/prod configurable - lib/api.ts: apiFetch avec Bearer token automatique - lib/store.ts: Zustand auth store (login/logout/restore) memento-note/ (API mobile dédiée): - lib/mobile-auth.ts: createMobileToken / verifyMobileToken (HMAC-SHA256, 90j) - POST /api/mobile/auth/login: email+password → token + user - GET /api/mobile/auth/me: valider token, retourner profil - GET /api/mobile/notebooks: liste carnets avec nb notes - GET /api/mobile/notes: notes récentes (filtre par carnet optionnel) - GET /api/mobile/notes/[id]: contenu complet d'une note - GET /api/mobile/search: recherche fulltext titre+contenu Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-29 15:53:13 +00:00
parent c7d2e35ea6
commit aeedb2846f
27 changed files with 1228 additions and 10 deletions
--- a/memento-mobile/app/note/[id].tsx
+++ b/memento-mobile/app/note/[id].tsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react'
+import {
+  View, Text, ScrollView, ActivityIndicator,
+  TouchableOpacity, Share,
+} from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { useLocalSearchParams, useRouter } from 'expo-router'
+import { ArrowLeft, Share2 } from 'lucide-react-native'
+import { WebView } from 'react-native-webview'
+import { apiFetch } from '@/lib/api'
+import { ENDPOINTS } from '@/lib/config'
+
+interface Note {
+  id: string
+  title: string
+  content: string
+  updatedAt: string
+  notebookName?: string
+}
+
+// Wrap HTML content in a minimal styled page for WebView rendering
+function buildHtml(content: string, title: string) {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, sans-serif; font-size: 16px; line-height: 1.7;
+    color: #1A1A18; background: #FAFAF8; padding: 0 16px 32px; }
+  h1 { font-size: 22px; font-weight: 700; margin: 20px 0 12px; }
+  h2 { font-size: 18px; font-weight: 700; margin: 16px 0 10px; }
+  h3 { font-size: 16px; font-weight: 600; margin: 14px 0 8px; }
+  p { margin: 0 0 12px; }
+  ul, ol { padding-left: 20px; margin: 0 0 12px; }
+  li { margin-bottom: 4px; }
+  blockquote { border-left: 3px solid #A47148; padding-left: 12px; color: #666; margin: 12px 0; }
+  code { background: #f0ede8; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
+  pre { background: #f0ede8; padding: 12px; border-radius: 8px; overflow: auto; margin: 12px 0; }
+  a { color: #A47148; }
+  img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
+  strong { font-weight: 700; }
+  em { font-style: italic; }
+</style>
+</head>
+<body>${content}</body>
+</html>`
+}
+
+export default function NoteScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>()
+  const [note, setNote] = useState<Note | null>(null)
+  const [loading, setLoading] = useState(true)
+  const router = useRouter()
+
+  useEffect(() => {
+    apiFetch(ENDPOINTS.note(id))
+      .then((r) => r.json())
+      .then((data) => setNote(data.note ?? null))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  const handleShare = async () => {
+    if (!note) return
+    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" />
+        </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" />
+        </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>
+      )}
+    </SafeAreaView>
+  )
+}