feat: mobile app complet + flashcards fixes + drag handle améliorations
Mobile app: - Révision flashcards : liste decks, session flip-card SM-2, couleurs harmonisées web - Génération flashcards depuis note (FlashcardSheet + route /api/mobile/flashcards/generate) - Audio Whisper : hook useAudioRecorder reécrit, MicButton avec erreurs - IA : AISheet (améliorer/clarifier/résumer), TitleSheet (titre automatique) - Suppression note (soft delete + confirmation Alert) - Note du jour : titre lisible + HTML (plus JSON TipTap brut) - Parser TipTap→HTML côté mobile (tipTapToHtml) - Icône 🎓 dans header note → génération flashcards - Endpoint flashcardGenerate dans config.ts Web fixes: - Bug flashcards groupées par carnet → deck par note (migration + schema) - Bug filtre 'cartes dues' ignoré (suppression fallback buildSessionQueue) - Suppression UI création deck manuelle (inutile) - Fix setViewType is not defined dans home-client.tsx Drag handle menu: - Fix : clearNodes() avant transformation (heading→liste/code/citation) - Ajout : option 'Texte' (paragraphe) dans Transformer en - Ajout : Monter / Descendre le bloc - Ajout : Copier le contenu du bloc - Fix : sous-menu hover stable (délai 200ms) - Fix : Supprimer en rouge via classe --danger (plus :first-child) - i18n : nouvelles clés dans 15 locales Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Antigravity
6
memento-mobile/.expo/types/router.d.ts
vendored
6
memento-mobile/.expo/types/router.d.ts
vendored
@@ -6,9 +6,9 @@ export * from 'expo-router';
|
||||
declare module 'expo-router' {
|
||||
export namespace ExpoRouter {
|
||||
export interface __routes<T extends string | object = string> {
|
||||
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/home` | `/home`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/notebooks` | `/notebooks`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/search` | `/search`; params?: Router.UnknownInputParams; } | { pathname: `/note/[id]`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `/notebook/[id]`, params: Router.UnknownInputParams & { id: string | number; } };
|
||||
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/home` | `/home`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/notebooks` | `/notebooks`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/search` | `/search`; params?: Router.UnknownOutputParams; } | { pathname: `/note/[id]`, params: Router.UnknownOutputParams & { id: string; } } | { pathname: `/notebook/[id]`, params: Router.UnknownOutputParams & { id: string; } };
|
||||
href: Router.RelativePathString | Router.ExternalPathString | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/login${`?${string}` | `#${string}` | ''}` | `/login${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/home${`?${string}` | `#${string}` | ''}` | `/home${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/notebooks${`?${string}` | `#${string}` | ''}` | `/notebooks${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/profile${`?${string}` | `#${string}` | ''}` | `/profile${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/search${`?${string}` | `#${string}` | ''}` | `/search${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/home` | `/home`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/notebooks` | `/notebooks`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/search` | `/search`; params?: Router.UnknownInputParams; } | `/note/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | `/notebook/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | { pathname: `/note/[id]`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `/notebook/[id]`, params: Router.UnknownInputParams & { id: string | number; } };
|
||||
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/home` | `/home`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/notebooks` | `/notebooks`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/revision` | `/revision`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/search` | `/search`; params?: Router.UnknownInputParams; } | { pathname: `/note/create`; params?: Router.UnknownInputParams; } | { pathname: `/revision/session`; params?: Router.UnknownInputParams; } | { pathname: `/note/[id]`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `/notebook/[id]`, params: Router.UnknownInputParams & { id: string | number; } };
|
||||
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/home` | `/home`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/notebooks` | `/notebooks`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/revision` | `/revision`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/search` | `/search`; params?: Router.UnknownOutputParams; } | { pathname: `/note/create`; params?: Router.UnknownOutputParams; } | { pathname: `/revision/session`; params?: Router.UnknownOutputParams; } | { pathname: `/note/[id]`, params: Router.UnknownOutputParams & { id: string; } } | { pathname: `/notebook/[id]`, params: Router.UnknownOutputParams & { id: string; } };
|
||||
href: Router.RelativePathString | Router.ExternalPathString | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/login${`?${string}` | `#${string}` | ''}` | `/login${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/home${`?${string}` | `#${string}` | ''}` | `/home${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/notebooks${`?${string}` | `#${string}` | ''}` | `/notebooks${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/profile${`?${string}` | `#${string}` | ''}` | `/profile${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/revision${`?${string}` | `#${string}` | ''}` | `/revision${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/search${`?${string}` | `#${string}` | ''}` | `/search${`?${string}` | `#${string}` | ''}` | `/note/create${`?${string}` | `#${string}` | ''}` | `/revision/session${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/login` | `/login`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/home` | `/home`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/notebooks` | `/notebooks`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/profile` | `/profile`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/revision` | `/revision`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/search` | `/search`; params?: Router.UnknownInputParams; } | { pathname: `/note/create`; params?: Router.UnknownInputParams; } | { pathname: `/revision/session`; params?: Router.UnknownInputParams; } | `/note/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | `/notebook/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | { pathname: `/note/[id]`, params: Router.UnknownInputParams & { id: string | number; } } | { pathname: `/notebook/[id]`, params: Router.UnknownInputParams & { id: string | number; } };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,11 +21,18 @@
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#FAFAF8"
|
||||
},
|
||||
"package": "com.momentonote.app"
|
||||
"package": "com.momentonote.app",
|
||||
"permissions": ["android.permission.RECORD_AUDIO"]
|
||||
},
|
||||
"plugins": [
|
||||
"expo-router",
|
||||
"expo-secure-store"
|
||||
"expo-secure-store",
|
||||
[
|
||||
"expo-av",
|
||||
{
|
||||
"microphonePermission": "Momento a besoin du microphone pour la saisie vocale."
|
||||
}
|
||||
]
|
||||
],
|
||||
"experiments": {
|
||||
"typedRoutes": true
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import {
|
||||
View, Text, TextInput, TouchableOpacity,
|
||||
KeyboardAvoidingView, Platform, ActivityIndicator,
|
||||
@@ -20,34 +20,35 @@ export default function LoginScreen() {
|
||||
const [googleLoading, setGoogleLoading] = useState(false)
|
||||
const { login, loginWithToken } = useAuthStore()
|
||||
|
||||
// Écoute le deep link memento://auth?token=...
|
||||
useEffect(() => {
|
||||
const handleUrl = async (event: { url: string }) => {
|
||||
const parsed = Linking.parse(event.url)
|
||||
if (parsed.scheme === 'memento' && parsed.path === 'auth') {
|
||||
const p = parsed.queryParams as Record<string, string> | undefined
|
||||
if (p?.error) {
|
||||
Alert.alert('Connexion Google échouée', p.error === 'unauthorized' ? 'Non autorisé' : 'Erreur serveur')
|
||||
setGoogleLoading(false)
|
||||
return
|
||||
}
|
||||
if (p?.token && p?.id) {
|
||||
await loginWithToken(p.token, {
|
||||
id: p.id,
|
||||
name: p.name || null,
|
||||
email: p.email || '',
|
||||
tier: p.tier || 'FREE',
|
||||
})
|
||||
}
|
||||
setGoogleLoading(false)
|
||||
}
|
||||
}
|
||||
// Traitement du deep link OAuth — mémorisé pour éviter les re-créations
|
||||
const handleOAuthCallback = useCallback(async (url: string) => {
|
||||
const parsed = Linking.parse(url)
|
||||
// memento://auth?token=... → scheme='memento', hostname='auth', path=''
|
||||
if (parsed.scheme !== 'memento' || parsed.hostname !== 'auth') return
|
||||
|
||||
const sub = Linking.addEventListener('url', handleUrl)
|
||||
// Vérifier si l'app a été lancée via un deep link
|
||||
Linking.getInitialURL().then((url) => { if (url) handleUrl({ url }) })
|
||||
const p = parsed.queryParams as Record<string, string> | undefined
|
||||
if (p?.error) {
|
||||
Alert.alert('Connexion Google échouée', p.error === 'unauthorized' ? 'Non autorisé' : 'Erreur serveur')
|
||||
setGoogleLoading(false)
|
||||
return
|
||||
}
|
||||
if (p?.token && p?.id) {
|
||||
await loginWithToken(p.token, {
|
||||
id: p.id,
|
||||
name: p.name || null,
|
||||
email: p.email || '',
|
||||
tier: p.tier || 'FREE',
|
||||
})
|
||||
}
|
||||
setGoogleLoading(false)
|
||||
}, [loginWithToken])
|
||||
|
||||
// Écoute le deep link (Android + app lancée via deep link)
|
||||
useEffect(() => {
|
||||
const sub = Linking.addEventListener('url', (event) => handleOAuthCallback(event.url))
|
||||
Linking.getInitialURL().then((url) => { if (url) handleOAuthCallback(url) })
|
||||
return () => sub.remove()
|
||||
}, [])
|
||||
}, [handleOAuthCallback])
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!email.trim() || !password.trim()) return
|
||||
@@ -71,11 +72,13 @@ export default function LoginScreen() {
|
||||
try {
|
||||
const url = `${API_URL}/api/mobile/auth/google-start`
|
||||
const result = await WebBrowser.openAuthSessionAsync(url, 'memento://auth')
|
||||
// Si l'utilisateur ferme sans terminer
|
||||
if (result.type !== 'success') {
|
||||
if (result.type === 'success') {
|
||||
// iOS : le deep link est capturé dans result.url, pas via Linking.addEventListener
|
||||
await handleOAuthCallback(result.url)
|
||||
} else {
|
||||
// Annulé par l'utilisateur
|
||||
setGoogleLoading(false)
|
||||
}
|
||||
// Si succès, le deep link listener prend le relais
|
||||
} catch (e: any) {
|
||||
Alert.alert('Erreur', e.message)
|
||||
setGoogleLoading(false)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Tabs } from 'expo-router'
|
||||
import { BookOpen, Search, Home, User } from 'lucide-react-native'
|
||||
import { BookOpen, Search, Home, User, GraduationCap } from 'lucide-react-native'
|
||||
import { C } from '@/lib/theme'
|
||||
|
||||
export default function TabsLayout() {
|
||||
@@ -15,6 +15,7 @@ export default function TabsLayout() {
|
||||
>
|
||||
<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="revision" options={{ title: 'Révision', tabBarIcon: ({ color, size }) => <GraduationCap 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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, ScrollView, TouchableOpacity,
|
||||
View, Text, ScrollView, TouchableOpacity, Alert,
|
||||
ActivityIndicator, RefreshControl, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
@@ -42,10 +42,18 @@ export default function HomeScreen() {
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
const handleDailyNote = async () => {
|
||||
const res = await apiFetch(ENDPOINTS.dailyNote)
|
||||
if (res.ok) {
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.dailyNote)
|
||||
if (!res.ok) {
|
||||
Alert.alert('Erreur', 'Impossible de charger la note du jour.')
|
||||
return
|
||||
}
|
||||
const data = await res.json()
|
||||
router.push({ pathname: '/note/[id]', params: { id: data.id } })
|
||||
const id = data.id ?? data.note?.id
|
||||
if (!id) { Alert.alert('Erreur', 'Note introuvable.'); return }
|
||||
router.push({ pathname: '/note/[id]', params: { id } })
|
||||
} catch {
|
||||
Alert.alert('Erreur réseau', 'Vérifiez votre connexion.')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,13 +87,13 @@ export default function HomeScreen() {
|
||||
</View>
|
||||
<Text style={s.quickLabel}>Note du jour</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => router.push({ pathname: '/(tabs)/search' })} style={s.quickCard} activeOpacity={0.7}>
|
||||
<TouchableOpacity onPress={() => router.push({ pathname: '/note/create' })} style={s.quickCard} activeOpacity={0.7}>
|
||||
<View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}>
|
||||
<PenLine size={20} color="#5b7ec7" />
|
||||
</View>
|
||||
<Text style={s.quickLabel}>Nouvelle note</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => router.push({ pathname: '/(tabs)/search' })} style={s.quickCard} activeOpacity={0.7}>
|
||||
<TouchableOpacity onPress={() => router.push({ pathname: '/(tabs)/revision' })} style={s.quickCard} activeOpacity={0.7}>
|
||||
<View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}>
|
||||
<GraduationCap size={20} color="#4a9b61" />
|
||||
</View>
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { ChevronRight, BookOpen, Folder } from 'lucide-react-native'
|
||||
import { ChevronRight, BookOpen, Folder, Plus } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '@/lib/theme'
|
||||
@@ -65,6 +65,12 @@ export default function NotebooksScreen() {
|
||||
<BookOpen size={18} color={C.brand} style={{ marginRight: 8 }} />
|
||||
<Text style={s.title}>Carnets</Text>
|
||||
<Text style={s.count}>{notebooks.length}</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push({ pathname: '/note/create' })}
|
||||
style={s.newNoteBtn}
|
||||
>
|
||||
<Plus size={18} color={C.brand} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<FlatList
|
||||
data={notebooks}
|
||||
@@ -98,7 +104,8 @@ const s = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: C.paper },
|
||||
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' },
|
||||
count: { fontSize: 12, color: C.concrete, backgroundColor: C.border, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden', marginRight: 8 },
|
||||
newNoteBtn: { width: 34, height: 34, borderRadius: 17, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center' },
|
||||
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' },
|
||||
|
||||
174
memento-mobile/app/(tabs)/revision.tsx
Normal file
174
memento-mobile/app/(tabs)/revision.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import {
|
||||
View, Text, StyleSheet, FlatList, TouchableOpacity,
|
||||
ActivityIndicator, RefreshControl,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { GraduationCap, BookOpen, ChevronRight, Clock } from 'lucide-react-native'
|
||||
import { C } from '@/lib/theme'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
|
||||
interface Deck {
|
||||
id: string
|
||||
name: string
|
||||
notebookName: string | null
|
||||
totalCards: number
|
||||
dueCount: number
|
||||
masteredCount: number
|
||||
}
|
||||
|
||||
export default function RevisionScreen() {
|
||||
const router = useRouter()
|
||||
const [decks, setDecks] = useState<Deck[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const load = useCallback(async (silent = false) => {
|
||||
if (!silent) setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.flashcardDecks)
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error ?? `Erreur ${res.status}`)
|
||||
setDecks(data.decks ?? [])
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? 'Erreur de chargement')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
const totalDue = decks.reduce((s, d) => s + d.dueCount, 0)
|
||||
|
||||
if (loading) return (
|
||||
<SafeAreaView style={s.center}>
|
||||
<ActivityIndicator color={C.brand} size="large" />
|
||||
</SafeAreaView>
|
||||
)
|
||||
|
||||
return (
|
||||
<SafeAreaView style={s.safe}>
|
||||
{/* Header */}
|
||||
<View style={s.header}>
|
||||
<View style={s.headerLeft}>
|
||||
<GraduationCap size={22} color={C.brand} />
|
||||
<Text style={s.title}>Révision</Text>
|
||||
</View>
|
||||
{totalDue > 0 && (
|
||||
<View style={s.badge}>
|
||||
<Text style={s.badgeTxt}>{totalDue} à revoir</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{error ? (
|
||||
<View style={s.center}>
|
||||
<Text style={s.errorTxt}>{error}</Text>
|
||||
<TouchableOpacity onPress={() => load()} style={s.retryBtn}>
|
||||
<Text style={s.retryTxt}>Réessayer</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : decks.length === 0 ? (
|
||||
<View style={s.center}>
|
||||
<GraduationCap size={48} color={C.concrete} />
|
||||
<Text style={s.emptyTitle}>Aucun paquet</Text>
|
||||
<Text style={s.emptyHint}>
|
||||
Générez des flashcards depuis une note (bouton ✦ dans l'éditeur) pour commencer à réviser.
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={decks}
|
||||
keyExtractor={(d) => d.id}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load(true) }} tintColor={C.brand} />}
|
||||
contentContainerStyle={s.list}
|
||||
renderItem={({ item }) => <DeckCard deck={item} onPress={() => router.push({ pathname: '/revision/session', params: { deckId: item.id, deckName: item.name } })} />}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
function DeckCard({ deck, onPress }: { deck: Deck; onPress: () => void }) {
|
||||
const progress = deck.totalCards > 0 ? deck.masteredCount / deck.totalCards : 0
|
||||
|
||||
return (
|
||||
<TouchableOpacity style={s.card} onPress={onPress} activeOpacity={0.8}>
|
||||
<View style={s.cardLeft}>
|
||||
<View style={s.deckIcon}>
|
||||
<BookOpen size={18} color={C.brand} />
|
||||
</View>
|
||||
<View style={s.cardInfo}>
|
||||
<Text style={s.deckName} numberOfLines={1}>{deck.name}</Text>
|
||||
{deck.notebookName && <Text style={s.deckSub} numberOfLines={1}>{deck.notebookName}</Text>}
|
||||
<View style={s.progressBar}>
|
||||
<View style={[s.progressFill, { width: `${Math.round(progress * 100)}%` }]} />
|
||||
</View>
|
||||
<Text style={s.progressTxt}>
|
||||
{deck.masteredCount}/{deck.totalCards} maîtrisées
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={s.cardRight}>
|
||||
{deck.dueCount > 0 ? (
|
||||
<View style={s.duePill}>
|
||||
<Clock size={11} color="#e11d48" />
|
||||
<Text style={s.dueTxt}>{deck.dueCount}</Text>
|
||||
</View>
|
||||
) : (
|
||||
<Text style={s.upToDate}>✓</Text>
|
||||
)}
|
||||
<ChevronRight size={16} color={C.concrete} style={{ marginTop: 4 }} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: C.paper },
|
||||
center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
|
||||
header: {
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
|
||||
paddingHorizontal: 20, paddingTop: 12, paddingBottom: 16,
|
||||
borderBottomWidth: 1, borderBottomColor: C.border,
|
||||
},
|
||||
headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 8 },
|
||||
title: { fontSize: 20, fontWeight: '700', color: C.ink },
|
||||
badge: { backgroundColor: '#fee2e2', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 20 },
|
||||
badgeTxt: { fontSize: 12, fontWeight: '600', color: '#e11d48' },
|
||||
list: { padding: 16, gap: 10 },
|
||||
card: {
|
||||
backgroundColor: C.surface, borderRadius: 14, padding: 14,
|
||||
flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
|
||||
borderWidth: 1, borderColor: C.border,
|
||||
},
|
||||
cardLeft: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12, marginRight: 8 },
|
||||
deckIcon: {
|
||||
width: 40, height: 40, borderRadius: 12,
|
||||
backgroundColor: '#f0f7ff', alignItems: 'center', justifyContent: 'center',
|
||||
},
|
||||
cardInfo: { flex: 1 },
|
||||
deckName: { fontSize: 15, fontWeight: '600', color: C.ink, marginBottom: 2 },
|
||||
deckSub: { fontSize: 12, color: C.concrete, marginBottom: 6 },
|
||||
progressBar: { height: 4, backgroundColor: C.border, borderRadius: 2, marginBottom: 4 },
|
||||
progressFill: { height: 4, backgroundColor: C.brand, borderRadius: 2 },
|
||||
progressTxt: { fontSize: 11, color: C.concrete },
|
||||
cardRight: { alignItems: 'flex-end', gap: 2 },
|
||||
duePill: {
|
||||
flexDirection: 'row', alignItems: 'center', gap: 3,
|
||||
backgroundColor: '#fee2e2', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 10,
|
||||
},
|
||||
dueTxt: { fontSize: 12, fontWeight: '700', color: '#e11d48' },
|
||||
upToDate: { fontSize: 16, color: C.brand, fontWeight: '700' },
|
||||
emptyTitle: { fontSize: 18, fontWeight: '700', color: C.ink, marginTop: 16, marginBottom: 8 },
|
||||
emptyHint: { fontSize: 14, color: C.concrete, textAlign: 'center', lineHeight: 20 },
|
||||
errorTxt: { fontSize: 15, color: '#e11d48', textAlign: 'center', marginBottom: 12 },
|
||||
retryBtn: { backgroundColor: C.brand, paddingHorizontal: 20, paddingVertical: 10, borderRadius: 10 },
|
||||
retryTxt: { color: '#fff', fontWeight: '600' },
|
||||
})
|
||||
@@ -25,9 +25,11 @@ export default function RootLayout() {
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={s.loader}>
|
||||
<ActivityIndicator size="large" color={C.brand} />
|
||||
</View>
|
||||
<SafeAreaProvider>
|
||||
<View style={s.loader}>
|
||||
<ActivityIndicator size="large" color={C.brand} />
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, ActivityIndicator,
|
||||
TouchableOpacity, Share, StyleSheet,
|
||||
TouchableOpacity, Share, Alert,
|
||||
TextInput, StyleSheet,
|
||||
} 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 { ArrowLeft, Share2, Pencil, Check, Trash2, GraduationCap } from 'lucide-react-native'
|
||||
import { WebView } from 'react-native-webview'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '@/lib/theme'
|
||||
import { AISheet } from '@/components/AISheet'
|
||||
import { MicButton } from '@/components/MicButton'
|
||||
import { FlashcardSheet } from '@/components/FlashcardSheet'
|
||||
import { useAudioRecorder } from '@/lib/useAudioRecorder'
|
||||
|
||||
interface Note {
|
||||
id: string
|
||||
@@ -19,37 +24,71 @@ interface Note {
|
||||
notebookName?: string
|
||||
}
|
||||
|
||||
// Le contenu TipTap est stocké en HTML — on l'enveloppe dans un style CSS propre
|
||||
const AI_MODES = [
|
||||
{ key: 'improve', label: '✨ Améliorer le style' },
|
||||
{ key: 'fix_grammar', label: '🔤 Corriger la grammaire' },
|
||||
{ key: 'shorten', label: '✂️ Raccourcir' },
|
||||
{ key: 'clarify', label: '💡 Clarifier' },
|
||||
]
|
||||
|
||||
/** Extrait le texte brut depuis le HTML TipTap */
|
||||
function htmlToPlainText(html: string): string {
|
||||
return html
|
||||
.replace(/<br\s*\/?>/gi, '\n')
|
||||
.replace(/<\/p>/gi, '\n')
|
||||
.replace(/<\/h[1-6]>/gi, '\n')
|
||||
.replace(/<\/li>/gi, '\n')
|
||||
.replace(/<[^>]+>/g, '')
|
||||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/ /g, ' ')
|
||||
.replace(/\n{3,}/g, '\n\n')
|
||||
.trim()
|
||||
}
|
||||
|
||||
function tipTapToHtml(node: any): string {
|
||||
if (!node) return ''
|
||||
if (node.type === 'doc') return (node.content ?? []).map(tipTapToHtml).join('')
|
||||
if (node.type === 'text') {
|
||||
let t = (node.text ?? '').replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
if (node.marks?.some((m: any) => m.type === 'bold')) t = `<strong>${t}</strong>`
|
||||
if (node.marks?.some((m: any) => m.type === 'italic')) t = `<em>${t}</em>`
|
||||
if (node.marks?.some((m: any) => m.type === 'code')) t = `<code>${t}</code>`
|
||||
return t
|
||||
}
|
||||
const inner = (node.content ?? []).map(tipTapToHtml).join('')
|
||||
switch (node.type) {
|
||||
case 'paragraph': return `<p>${inner || '​'}</p>`
|
||||
case 'heading': return `<h${node.attrs?.level ?? 1}>${inner}</h${node.attrs?.level ?? 1}>`
|
||||
case 'bulletList': return `<ul>${inner}</ul>`
|
||||
case 'orderedList': return `<ol>${inner}</ol>`
|
||||
case 'listItem': return `<li>${inner}</li>`
|
||||
case 'blockquote': return `<blockquote>${inner}</blockquote>`
|
||||
case 'codeBlock': return `<pre><code>${inner}</code></pre>`
|
||||
case 'hardBreak': return '<br>'
|
||||
default: return inner
|
||||
}
|
||||
}
|
||||
|
||||
function buildHtml(content: string, title: string) {
|
||||
const safeTitle = title.replace(/</g, '<').replace(/>/g, '>')
|
||||
// Détecter si le contenu est déjà du HTML ou du texte brut
|
||||
const isHtml = content.trimStart().startsWith('<')
|
||||
const body = isHtml ? content : `<p>${content.replace(/\n/g, '<br>')}</p>`
|
||||
let body: string
|
||||
const trimmed = content.trimStart()
|
||||
if (trimmed.startsWith('<')) {
|
||||
body = content
|
||||
} else if (trimmed.startsWith('{')) {
|
||||
try { body = tipTapToHtml(JSON.parse(content)) } catch { body = `<p>${content.replace(/\n/g, '<br>')}</p>` }
|
||||
} else {
|
||||
body = `<p>${content.replace(/\n/g, '<br>')}</p>`
|
||||
}
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
|
||||
<style>
|
||||
:root {
|
||||
--brand: #A47148;
|
||||
--ink: #1A1A18;
|
||||
--paper: #FAFAF8;
|
||||
--concrete: #8A8A82;
|
||||
--border: #E8E6E0;
|
||||
--code-bg: #f0ede8;
|
||||
}
|
||||
:root { --brand: #A47148; --ink: #1A1A18; --paper: #FAFAF8; --concrete: #8A8A82; --border: #E8E6E0; --code-bg: #f0ede8; }
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
font-family: -apple-system, 'Helvetica Neue', sans-serif;
|
||||
font-size: 16px; line-height: 1.75; color: var(--ink);
|
||||
background: var(--paper); padding: 20px 20px 80px;
|
||||
word-break: break-word;
|
||||
}
|
||||
.note-title {
|
||||
font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
|
||||
color: var(--ink); margin-bottom: 4px; line-height: 1.3;
|
||||
}
|
||||
body { font-family: -apple-system, 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.75; color: var(--ink); background: var(--paper); padding: 20px 20px 80px; word-break: break-word; }
|
||||
.note-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
|
||||
.note-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 20px; }
|
||||
h1 { font-size: 22px; font-weight: 700; margin: 24px 0 10px; }
|
||||
h2 { font-size: 19px; font-weight: 700; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
|
||||
@@ -75,15 +114,10 @@ function buildHtml(content: string, title: string) {
|
||||
del, s { text-decoration: line-through; color: var(--concrete); }
|
||||
mark { background: #fff3cd; padding: 1px 3px; border-radius: 3px; }
|
||||
input[type=checkbox] { accent-color: var(--brand); margin-right: 6px; width: 16px; height: 16px; }
|
||||
/* TipTap task list */
|
||||
ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
|
||||
ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
|
||||
ul[data-type="taskList"] li > label { margin-top: 2px; }
|
||||
/* TipTap nœuds spéciaux cachés sur mobile */
|
||||
[data-type="liveBlock"], [data-type="structuredViewBlock"] {
|
||||
border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
|
||||
margin: 8px 0; background: #f8f6f2; color: var(--concrete); font-size: 13px;
|
||||
}
|
||||
[data-type="liveBlock"], [data-type="structuredViewBlock"] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: #f8f6f2; color: var(--concrete); font-size: 13px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -99,50 +133,155 @@ export default function NoteScreen() {
|
||||
const [note, setNote] = useState<Note | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const [editTitle, setEditTitle] = useState('')
|
||||
const [editContent, setEditContent] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [aiSheetOpen, setAiSheetOpen] = useState(false)
|
||||
const [flashcardSheetOpen, setFlashcardSheetOpen] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
// Audio en mode édition
|
||||
const { state: audioState, startRecording, stopAndTranscribe, cancelRecording } = useAudioRecorder(
|
||||
(text) => setEditContent((prev) => prev ? prev + ' ' + text : text)
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
apiFetch(ENDPOINTS.note(id as string))
|
||||
.then((r) => {
|
||||
if (!r.ok) throw new Error(`Erreur ${r.status}`)
|
||||
return r.json()
|
||||
})
|
||||
.then((r) => { if (!r.ok) throw new Error(`Erreur ${r.status}`); return r.json() })
|
||||
.then((data) => setNote(data.note ?? null))
|
||||
.catch((e) => setError(e.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
const handleEdit = () => {
|
||||
if (!note) return
|
||||
setEditTitle(note.title)
|
||||
setEditContent(htmlToPlainText(note.content ?? ''))
|
||||
setEditMode(true)
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!note || !editTitle.trim()) return
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.note(note.id), {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ title: editTitle.trim(), content: editContent }),
|
||||
})
|
||||
if (!res.ok) throw new Error('Erreur de sauvegarde')
|
||||
setNote((prev) => prev ? { ...prev, title: editTitle.trim(), content: editContent } : prev)
|
||||
setEditMode(false)
|
||||
} catch (e: any) {
|
||||
Alert.alert('Erreur', e.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleMic = () => {
|
||||
if (audioState === 'idle' || audioState === 'error') startRecording()
|
||||
else if (audioState === 'recording') stopAndTranscribe()
|
||||
else cancelRecording()
|
||||
}
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!note) return
|
||||
await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!note) return
|
||||
Alert.alert(
|
||||
'Supprimer la note',
|
||||
`Mettre "${note.title}" à la corbeille ?`,
|
||||
[
|
||||
{ text: 'Annuler', style: 'cancel' },
|
||||
{
|
||||
text: 'Supprimer', style: 'destructive',
|
||||
onPress: async () => {
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.note(note.id), { method: 'DELETE' })
|
||||
if (!res.ok) throw new Error(`Erreur ${res.status}`)
|
||||
router.back()
|
||||
} catch (e: any) {
|
||||
Alert.alert('Erreur', e.message ?? 'Impossible de supprimer la note')
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={s.safe}>
|
||||
<View style={s.header}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={s.backBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<TouchableOpacity onPress={() => { if (editMode) setEditMode(false); else router.back() }} style={s.backBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<ArrowLeft size={22} color={C.ink} />
|
||||
</TouchableOpacity>
|
||||
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
|
||||
{note && (
|
||||
<TouchableOpacity onPress={handleShare} style={s.shareBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<Share2 size={18} color={C.concrete} />
|
||||
<Text style={s.headerTitle} numberOfLines={1}>{editMode ? (editTitle || '…') : (note?.title ?? '…')}</Text>
|
||||
{note && !editMode && (
|
||||
<>
|
||||
<TouchableOpacity onPress={handleEdit} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<Pencil size={18} color={C.concrete} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setFlashcardSheetOpen(true)} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<GraduationCap size={18} color={C.concrete} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleShare} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<Share2 size={18} color={C.concrete} />
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={handleDelete} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
|
||||
<Trash2 size={18} color="#e11d48" />
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
)}
|
||||
{editMode && (
|
||||
<TouchableOpacity onPress={handleSave} disabled={saving || !editTitle.trim()} style={[s.saveBtn, (!editTitle.trim() || saving) && { opacity: 0.35 }]}>
|
||||
{saving ? <ActivityIndicator size="small" color={C.white} /> : <Check size={18} color={C.white} />}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{loading && <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>}
|
||||
{error && <View style={s.center}><Text style={{ color: C.rose }}>{error}</Text></View>}
|
||||
{error && <View style={s.center}><Text style={{ color: '#e11d48' }}>{error}</Text></View>}
|
||||
{!loading && !error && !note && <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
|
||||
{note && (
|
||||
|
||||
{/* Mode lecture */}
|
||||
{note && !editMode && (
|
||||
<WebView
|
||||
source={{ html: buildHtml(note.content ?? '', note.title ?? '') }}
|
||||
style={{ flex: 1, backgroundColor: C.paper }}
|
||||
javaScriptEnabled={true}
|
||||
scrollEnabled={true}
|
||||
showsVerticalScrollIndicator={false}
|
||||
originWhitelist={['*']}
|
||||
javaScriptEnabled scrollEnabled showsVerticalScrollIndicator={false} originWhitelist={['*']}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Mode édition */}
|
||||
{note && editMode && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<TextInput value={editTitle} onChangeText={setEditTitle} style={s.editTitle} placeholder="Titre…" placeholderTextColor={C.border} />
|
||||
<View style={s.editDivider} />
|
||||
<TextInput value={editContent} onChangeText={setEditContent} style={s.editContent} placeholder="Contenu…" placeholderTextColor={C.concrete} multiline textAlignVertical="top" scrollEnabled />
|
||||
{/* Barre outils */}
|
||||
<View style={s.toolbar}>
|
||||
<MicButton state={audioState} onPress={handleMic} />
|
||||
{audioState === 'recording'
|
||||
? <Text style={s.recordHint}>● Enregistrement… Appuyez pour arrêter</Text>
|
||||
: <TouchableOpacity onPress={() => setAiSheetOpen(true)} disabled={!editContent.trim()} style={[s.aiBtn, !editContent.trim() && { opacity: 0.35 }]} activeOpacity={0.8}>
|
||||
<Text style={s.aiBtnText}>✨ Améliorer avec l'IA</Text>
|
||||
</TouchableOpacity>}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<AISheet visible={aiSheetOpen} onClose={() => setAiSheetOpen(false)} text={editContent} onApply={(t) => setEditContent(t)} />
|
||||
{note && (
|
||||
<FlashcardSheet
|
||||
visible={flashcardSheetOpen}
|
||||
onClose={() => setFlashcardSheetOpen(false)}
|
||||
noteId={note.id}
|
||||
noteTitle={note.title}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
@@ -151,9 +290,17 @@ export default function NoteScreen() {
|
||||
|
||||
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, backgroundColor: C.paper },
|
||||
header: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: C.paper },
|
||||
backBtn: { padding: 4 },
|
||||
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
|
||||
shareBtn: { padding: 4 },
|
||||
iconBtn: { padding: 4 },
|
||||
saveBtn: { backgroundColor: C.brand, padding: 7, borderRadius: 10 },
|
||||
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
||||
editTitle: { fontSize: 24, fontWeight: '800', color: C.ink, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8, letterSpacing: -0.5 },
|
||||
editDivider: { height: 1, backgroundColor: C.border, marginHorizontal: 20, marginBottom: 12 },
|
||||
editContent: { flex: 1, fontSize: 16, color: C.ink, lineHeight: 26, paddingHorizontal: 20, paddingBottom: 80 },
|
||||
toolbar: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingHorizontal: 16, paddingVertical: 12, borderTopWidth: 1, borderTopColor: C.border, backgroundColor: C.paper },
|
||||
recordHint: { flex: 1, fontSize: 13, color: '#e11d48', fontWeight: '500' },
|
||||
aiBtn: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: C.ink, paddingVertical: 11, paddingHorizontal: 14, borderRadius: 12, justifyContent: 'center' },
|
||||
aiBtnText: { color: C.white, fontWeight: '600', fontSize: 14 },
|
||||
})
|
||||
|
||||
177
memento-mobile/app/note/create.tsx
Normal file
177
memento-mobile/app/note/create.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import {
|
||||
View, Text, TextInput, TouchableOpacity, ScrollView,
|
||||
KeyboardAvoidingView, Platform, ActivityIndicator,
|
||||
Alert, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useRouter, useLocalSearchParams } from 'expo-router'
|
||||
import { Sparkles, X } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '@/lib/theme'
|
||||
import { AISheet } from '@/components/AISheet'
|
||||
import { TitleSheet } from '@/components/TitleSheet'
|
||||
import { MicButton } from '@/components/MicButton'
|
||||
import { useAudioRecorder } from '@/lib/useAudioRecorder'
|
||||
|
||||
export default function CreateNoteScreen() {
|
||||
const router = useRouter()
|
||||
const { notebookId } = useLocalSearchParams<{ notebookId?: string }>()
|
||||
|
||||
const [title, setTitle] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [aiSheetOpen, setAiSheetOpen] = useState(false)
|
||||
const [titleSheetOpen, setTitleSheetOpen] = useState(false)
|
||||
const contentRef = useRef<TextInput>(null)
|
||||
|
||||
// Audio
|
||||
const { state: audioState, startRecording, stopAndTranscribe, cancelRecording } = useAudioRecorder(
|
||||
(text) => setContent((prev) => prev ? prev + ' ' + text : text)
|
||||
)
|
||||
|
||||
const handleMic = () => {
|
||||
if (audioState === 'idle' || audioState === 'error') startRecording()
|
||||
else if (audioState === 'recording') stopAndTranscribe()
|
||||
else cancelRecording()
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!title.trim()) {
|
||||
Alert.alert('Titre requis', 'Donnez un titre à votre note.')
|
||||
return
|
||||
}
|
||||
setSaving(true)
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.createNote, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ title: title.trim(), content, notebookId }),
|
||||
})
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}))
|
||||
throw new Error(d.error ?? 'Erreur serveur')
|
||||
}
|
||||
const { note } = await res.json()
|
||||
router.replace({ pathname: '/note/[id]', params: { id: note.id } })
|
||||
} catch (e: any) {
|
||||
Alert.alert('Erreur', e.message)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={s.safe}>
|
||||
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
|
||||
|
||||
{/* Header */}
|
||||
<View style={s.header}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={s.cancelBtn}>
|
||||
<X size={20} color={C.concrete} />
|
||||
</TouchableOpacity>
|
||||
<Text style={s.headerTitle}>Nouvelle note</Text>
|
||||
<TouchableOpacity
|
||||
onPress={handleSave}
|
||||
disabled={saving || !title.trim()}
|
||||
style={[s.saveBtn, (!title.trim() || saving) && s.saveBtnDisabled]}
|
||||
>
|
||||
{saving
|
||||
? <ActivityIndicator size="small" color={C.white} />
|
||||
: <Text style={s.saveBtnText}>Enregistrer</Text>}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps="handled">
|
||||
{/* Titre */}
|
||||
<View style={s.titleRow}>
|
||||
<TextInput
|
||||
value={title}
|
||||
onChangeText={setTitle}
|
||||
placeholder="Titre de la note…"
|
||||
style={s.titleInput}
|
||||
placeholderTextColor={C.border}
|
||||
returnKeyType="next"
|
||||
onSubmitEditing={() => contentRef.current?.focus()}
|
||||
autoFocus
|
||||
/>
|
||||
{content.trim().length >= 10 && (
|
||||
<TouchableOpacity onPress={() => setTitleSheetOpen(true)} style={s.sparkleBtn} activeOpacity={0.8}>
|
||||
<Sparkles size={16} color={C.brand} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={s.divider} />
|
||||
|
||||
{/* Contenu */}
|
||||
<TextInput
|
||||
ref={contentRef}
|
||||
value={content}
|
||||
onChangeText={setContent}
|
||||
placeholder="Commencez à écrire…"
|
||||
style={s.contentInput}
|
||||
placeholderTextColor={C.concrete}
|
||||
multiline
|
||||
textAlignVertical="top"
|
||||
scrollEnabled={false}
|
||||
/>
|
||||
</ScrollView>
|
||||
|
||||
{/* Barre outils bas */}
|
||||
<View style={s.toolbar}>
|
||||
<MicButton state={audioState} onPress={handleMic} />
|
||||
{audioState === 'recording' && (
|
||||
<Text style={s.recordingHint}>● Enregistrement… Appuyez pour arrêter</Text>
|
||||
)}
|
||||
{audioState !== 'recording' && (
|
||||
<TouchableOpacity
|
||||
onPress={() => setAiSheetOpen(true)}
|
||||
disabled={!content.trim()}
|
||||
style={[s.aiBtn, !content.trim() && s.aiBtnDisabled]}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Sparkles size={15} color={C.white} />
|
||||
<Text style={s.aiBtnText}>Améliorer avec l'IA</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
||||
</KeyboardAvoidingView>
|
||||
|
||||
{/* Modaux propres */}
|
||||
<AISheet
|
||||
visible={aiSheetOpen}
|
||||
onClose={() => setAiSheetOpen(false)}
|
||||
text={content}
|
||||
onApply={(improved) => setContent(improved)}
|
||||
/>
|
||||
<TitleSheet
|
||||
visible={titleSheetOpen}
|
||||
onClose={() => setTitleSheetOpen(false)}
|
||||
content={content}
|
||||
onSelect={(t) => setTitle(t)}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: C.paper },
|
||||
header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
|
||||
cancelBtn: { padding: 4, marginRight: 4 },
|
||||
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink, textAlign: 'center' },
|
||||
saveBtn: { backgroundColor: C.brand, paddingHorizontal: 14, paddingVertical: 7, borderRadius: 10 },
|
||||
saveBtnDisabled: { opacity: 0.35 },
|
||||
saveBtnText: { color: C.white, fontWeight: '700', fontSize: 13 },
|
||||
titleRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 8, gap: 8 },
|
||||
titleInput: { flex: 1, fontSize: 26, fontWeight: '800', color: C.ink, letterSpacing: -0.5, lineHeight: 32 },
|
||||
sparkleBtn: { padding: 8, borderRadius: 10, backgroundColor: '#f3ece4' },
|
||||
divider: { height: 1, backgroundColor: C.border, marginHorizontal: 20, marginBottom: 16 },
|
||||
contentInput: { flex: 1, fontSize: 16, color: C.ink, lineHeight: 26, paddingHorizontal: 20, paddingBottom: 120, minHeight: 300 },
|
||||
toolbar: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingHorizontal: 16, paddingVertical: 12, borderTopWidth: 1, borderTopColor: C.border, backgroundColor: C.paper },
|
||||
recordingHint: { flex: 1, fontSize: 13, color: '#e11d48', fontWeight: '500' },
|
||||
aiBtn: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: C.ink, paddingVertical: 11, paddingHorizontal: 14, borderRadius: 12, justifyContent: 'center' },
|
||||
aiBtnDisabled: { opacity: 0.35 },
|
||||
aiBtnText: { color: C.white, fontWeight: '600', fontSize: 14 },
|
||||
})
|
||||
@@ -4,7 +4,7 @@ import {
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||||
import { ArrowLeft } from 'lucide-react-native'
|
||||
import { ArrowLeft, Plus } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '@/lib/theme'
|
||||
@@ -46,6 +46,12 @@ export default function NotebookScreen() {
|
||||
<ArrowLeft size={22} color={C.ink} />
|
||||
</TouchableOpacity>
|
||||
<Text style={s.headerTitle}>{notebookName || 'Carnet'}</Text>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push({ pathname: '/note/create', params: { notebookId: id } })}
|
||||
style={s.addBtn}
|
||||
>
|
||||
<Plus size={20} color={C.brand} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{loading
|
||||
@@ -73,6 +79,7 @@ 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 },
|
||||
addBtn: { width: 34, height: 34, borderRadius: 17, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center' },
|
||||
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 },
|
||||
|
||||
237
memento-mobile/app/revision/session.tsx
Normal file
237
memento-mobile/app/revision/session.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { useState, useCallback, useRef } from 'react'
|
||||
import {
|
||||
View, Text, StyleSheet, TouchableOpacity, ActivityIndicator,
|
||||
Animated, ScrollView,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||||
import { ArrowLeft, GraduationCap } from 'lucide-react-native'
|
||||
import { C } from '@/lib/theme'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { useFocusEffect } from 'expo-router'
|
||||
|
||||
interface Card {
|
||||
id: string
|
||||
front: string
|
||||
back: string
|
||||
interval: number
|
||||
type?: string
|
||||
}
|
||||
|
||||
type SessionState = 'loading' | 'reviewing' | 'done' | 'error'
|
||||
|
||||
const GRADE_LABELS: { grade: 1 | 2 | 3 | 4; label: string; color: string; bg: string; border: string }[] = [
|
||||
{ grade: 1, label: 'Oublié', color: '#dc2626', bg: 'rgba(239,68,68,0.10)', border: 'rgba(239,68,68,0.30)' },
|
||||
{ grade: 2, label: 'Difficile',color: '#b45309', bg: 'rgba(245,158,11,0.10)', border: 'rgba(245,158,11,0.30)' },
|
||||
{ grade: 3, label: 'Bien', color: '#047857', bg: 'rgba(16,185,129,0.10)', border: 'rgba(16,185,129,0.30)' },
|
||||
{ grade: 4, label: 'Parfait', color: '#A47148', bg: 'rgba(164,113,72,0.10)', border: 'rgba(164,113,72,0.30)' },
|
||||
]
|
||||
|
||||
export default function SessionScreen() {
|
||||
const router = useRouter()
|
||||
const params = useLocalSearchParams<{ deckId: string; deckName: string }>()
|
||||
const { deckId, deckName } = params
|
||||
|
||||
const [state, setState] = useState<SessionState>('loading')
|
||||
const [cards, setCards] = useState<Card[]>([])
|
||||
const [index, setIndex] = useState(0)
|
||||
const [flipped, setFlipped] = useState(false)
|
||||
const [reviewed, setReviewed] = useState(0)
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null)
|
||||
|
||||
// Animation flip
|
||||
const flipAnim = useRef(new Animated.Value(0)).current
|
||||
const frontInterp = flipAnim.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] })
|
||||
const backInterp = flipAnim.interpolate({ inputRange: [0, 1], outputRange: ['180deg', '360deg'] })
|
||||
|
||||
const loadSession = useCallback(async () => {
|
||||
if (!deckId) return
|
||||
setState('loading')
|
||||
setIndex(0)
|
||||
setFlipped(false)
|
||||
setReviewed(0)
|
||||
flipAnim.setValue(0)
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.flashcardSession(deckId))
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error ?? `Erreur ${res.status}`)
|
||||
setCards(data.cards ?? [])
|
||||
setState(data.cards?.length === 0 ? 'done' : 'reviewing')
|
||||
} catch (e: any) {
|
||||
setErrorMsg(e.message ?? 'Erreur')
|
||||
setState('error')
|
||||
}
|
||||
}, [deckId])
|
||||
|
||||
useFocusEffect(useCallback(() => { loadSession() }, [loadSession]))
|
||||
|
||||
const flip = () => {
|
||||
if (flipped) return
|
||||
setFlipped(true)
|
||||
Animated.spring(flipAnim, { toValue: 1, useNativeDriver: true, friction: 8 }).start()
|
||||
}
|
||||
|
||||
const grade = async (g: 1 | 2 | 3 | 4) => {
|
||||
const card = cards[index]
|
||||
if (!card) return
|
||||
try {
|
||||
await apiFetch(ENDPOINTS.flashcardReview, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ cardId: card.id, grade: g }),
|
||||
})
|
||||
} catch { /* silencieux — on avance quand même */ }
|
||||
|
||||
const next = index + 1
|
||||
setReviewed((r) => r + 1)
|
||||
if (next >= cards.length) {
|
||||
setState('done')
|
||||
} else {
|
||||
setIndex(next)
|
||||
setFlipped(false)
|
||||
Animated.timing(flipAnim, { toValue: 0, duration: 0, useNativeDriver: true }).start()
|
||||
}
|
||||
}
|
||||
|
||||
const current = cards[index]
|
||||
const progress = cards.length > 0 ? index / cards.length : 0
|
||||
|
||||
return (
|
||||
<SafeAreaView style={s.safe}>
|
||||
{/* Header */}
|
||||
<View style={s.header}>
|
||||
<TouchableOpacity onPress={() => router.back()} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
||||
<ArrowLeft size={22} color={C.ink} />
|
||||
</TouchableOpacity>
|
||||
<Text style={s.headerTitle} numberOfLines={1}>{deckName ?? 'Révision'}</Text>
|
||||
{state === 'reviewing' && (
|
||||
<Text style={s.counter}>{index + 1}/{cards.length}</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Barre de progression */}
|
||||
{state === 'reviewing' && (
|
||||
<View style={s.progressBarWrap}>
|
||||
<View style={[s.progressBarFill, { width: `${Math.round(progress * 100)}%` }]} />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Contenu */}
|
||||
{state === 'loading' && (
|
||||
<View style={s.center}>
|
||||
<ActivityIndicator color={C.brand} size="large" />
|
||||
</View>
|
||||
)}
|
||||
|
||||
{state === 'error' && (
|
||||
<View style={s.center}>
|
||||
<Text style={s.errorTxt}>{errorMsg}</Text>
|
||||
<TouchableOpacity onPress={loadSession} style={s.retryBtn}>
|
||||
<Text style={s.retryTxt}>Réessayer</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{state === 'done' && (
|
||||
<View style={s.center}>
|
||||
<GraduationCap size={56} color={C.brand} />
|
||||
<Text style={s.doneTitle}>Session terminée !</Text>
|
||||
<Text style={s.doneSub}>
|
||||
{reviewed > 0 ? `${reviewed} carte${reviewed > 1 ? 's' : ''} révisée${reviewed > 1 ? 's' : ''}` : 'Tout est à jour 🎉'}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={() => router.back()} style={s.doneBtn}>
|
||||
<Text style={s.doneBtnTxt}>Retour aux paquets</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{state === 'reviewing' && current && (
|
||||
<View style={s.sessionWrap}>
|
||||
{/* Carte flip */}
|
||||
<TouchableOpacity activeOpacity={0.95} onPress={flip} style={s.cardWrap}>
|
||||
{/* Face avant */}
|
||||
<Animated.View style={[s.card, s.cardFront, { transform: [{ rotateY: frontInterp }] }]}>
|
||||
<ScrollView contentContainerStyle={s.cardContent} showsVerticalScrollIndicator={false}>
|
||||
<Text style={s.cardLabel}>Question</Text>
|
||||
<Text style={s.cardText}>{current.front}</Text>
|
||||
</ScrollView>
|
||||
{!flipped && (
|
||||
<View style={s.tapHint}>
|
||||
<Text style={s.tapTxt}>Appuyez pour révéler la réponse</Text>
|
||||
</View>
|
||||
)}
|
||||
</Animated.View>
|
||||
|
||||
{/* Face arrière */}
|
||||
<Animated.View style={[s.card, s.cardBack, { transform: [{ rotateY: backInterp }] }]}>
|
||||
<ScrollView contentContainerStyle={s.cardContent} showsVerticalScrollIndicator={false}>
|
||||
<Text style={s.cardLabel}>Réponse</Text>
|
||||
<Text style={s.cardText}>{current.back}</Text>
|
||||
</ScrollView>
|
||||
</Animated.View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{/* Boutons de note (visibles seulement après flip) */}
|
||||
{flipped && (
|
||||
<View style={s.gradeRow}>
|
||||
{GRADE_LABELS.map(({ grade: g, label, color, bg, border }) => (
|
||||
<TouchableOpacity
|
||||
key={g}
|
||||
style={[s.gradeBtn, { backgroundColor: bg, borderColor: border }]}
|
||||
onPress={() => grade(g)}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[s.gradeNum, { color }]}>{g}</Text>
|
||||
<Text style={[s.gradeLbl, { color }]}>{label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
safe: { flex: 1, backgroundColor: C.paper },
|
||||
header: {
|
||||
flexDirection: 'row', alignItems: 'center', gap: 12,
|
||||
paddingHorizontal: 20, paddingVertical: 14,
|
||||
borderBottomWidth: 1, borderBottomColor: C.border,
|
||||
},
|
||||
headerTitle: { flex: 1, fontSize: 17, fontWeight: '700', color: C.ink },
|
||||
counter: { fontSize: 13, color: C.concrete, fontWeight: '600' },
|
||||
progressBarWrap: { height: 3, backgroundColor: C.border },
|
||||
progressBarFill: { height: 3, backgroundColor: C.brand },
|
||||
center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
|
||||
sessionWrap: { flex: 1, padding: 20, justifyContent: 'space-between' },
|
||||
cardWrap: { flex: 1, marginBottom: 16 },
|
||||
card: {
|
||||
position: 'absolute', inset: 0,
|
||||
borderRadius: 18, borderWidth: 1, borderColor: C.border,
|
||||
backgroundColor: C.surface,
|
||||
backfaceVisibility: 'hidden',
|
||||
padding: 24,
|
||||
},
|
||||
cardFront: { zIndex: 1 },
|
||||
cardBack: { backgroundColor: '#f0f7ff' },
|
||||
cardContent: { flexGrow: 1, justifyContent: 'center', alignItems: 'center', paddingBottom: 48 },
|
||||
cardLabel: { fontSize: 11, fontWeight: '700', color: C.brand, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 16 },
|
||||
cardText: { fontSize: 20, color: C.ink, textAlign: 'center', lineHeight: 30, fontWeight: '500' },
|
||||
tapHint: { position: 'absolute', bottom: 20, left: 0, right: 0, alignItems: 'center' },
|
||||
tapTxt: { fontSize: 12, color: C.concrete, fontStyle: 'italic' },
|
||||
gradeRow: { flexDirection: 'row', gap: 8 },
|
||||
gradeBtn: {
|
||||
flex: 1, alignItems: 'center', paddingVertical: 12, borderRadius: 14, borderWidth: 1.5,
|
||||
},
|
||||
gradeNum: { fontSize: 18, fontWeight: '800' },
|
||||
gradeLbl: { fontSize: 10, fontWeight: '600', marginTop: 2 },
|
||||
doneTitle: { fontSize: 24, fontWeight: '800', color: C.ink, marginTop: 20, marginBottom: 8 },
|
||||
doneSub: { fontSize: 15, color: C.concrete, marginBottom: 32 },
|
||||
doneBtn: { backgroundColor: C.brand, paddingHorizontal: 28, paddingVertical: 14, borderRadius: 14 },
|
||||
doneBtnTxt: { color: '#fff', fontWeight: '700', fontSize: 16 },
|
||||
errorTxt: { fontSize: 15, color: '#e11d48', textAlign: 'center', marginBottom: 12 },
|
||||
retryBtn: { backgroundColor: C.brand, paddingHorizontal: 20, paddingVertical: 10, borderRadius: 10 },
|
||||
retryTxt: { color: '#fff', fontWeight: '600' },
|
||||
})
|
||||
142
memento-mobile/components/AISheet.tsx
Normal file
142
memento-mobile/components/AISheet.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
/**
|
||||
* AISheet — bottom sheet IA avec modes d'amélioration + résultat
|
||||
* Remplace les Alert.alert natifs par une UI propre au design Momento
|
||||
*/
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
View, Text, TouchableOpacity, ActivityIndicator,
|
||||
ScrollView, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { Sparkles, Scissors, MessageSquare, Pencil, CheckCircle2, RefreshCw } from 'lucide-react-native'
|
||||
import { BottomSheet } from '@/components/BottomSheet'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '@/lib/theme'
|
||||
|
||||
const MODES = [
|
||||
{ key: 'improve', label: 'Améliorer le style', icon: Sparkles, color: C.brand },
|
||||
{ key: 'fix_grammar', label: 'Corriger la grammaire', icon: CheckCircle2, color: '#5b7ec7' },
|
||||
{ key: 'shorten', label: 'Raccourcir', icon: Scissors, color: '#4a9b61' },
|
||||
{ key: 'clarify', label: 'Clarifier les idées', icon: MessageSquare,color: '#c77a3a' },
|
||||
]
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
text: string
|
||||
onApply: (improved: string) => void
|
||||
}
|
||||
|
||||
export function AISheet({ visible, onClose, text, onApply }: Props) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [result, setResult] = useState<string | null>(null)
|
||||
const [selectedMode, setSelectedMode] = useState<string | null>(null)
|
||||
|
||||
const handleClose = () => {
|
||||
setResult(null)
|
||||
setSelectedMode(null)
|
||||
onClose()
|
||||
}
|
||||
|
||||
const handleMode = async (mode: string) => {
|
||||
setSelectedMode(mode)
|
||||
setLoading(true)
|
||||
setResult(null)
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.aiImprove, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ text, mode }),
|
||||
})
|
||||
const d = await res.json().catch(() => ({}))
|
||||
if (!res.ok) {
|
||||
setResult(`⚠️ ${d.error === 'quota_exceeded' ? 'Quota IA dépassé' : (d.error ?? 'Erreur serveur')}`)
|
||||
return
|
||||
}
|
||||
setResult(d.improved ?? '')
|
||||
} catch {
|
||||
setResult('⚠️ Erreur réseau — vérifiez votre connexion.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleApply = () => {
|
||||
if (result && !result.startsWith('⚠️')) {
|
||||
onApply(result)
|
||||
}
|
||||
handleClose()
|
||||
}
|
||||
|
||||
const handleRetry = () => {
|
||||
if (selectedMode) handleMode(selectedMode)
|
||||
}
|
||||
|
||||
const title = result ? 'Résultat IA' : 'Améliorer avec l\'IA'
|
||||
|
||||
return (
|
||||
<BottomSheet visible={visible} onClose={handleClose} title={title}>
|
||||
{!result && !loading && (
|
||||
<View style={s.modeList}>
|
||||
{MODES.map((m) => {
|
||||
const Icon = m.icon
|
||||
return (
|
||||
<TouchableOpacity key={m.key} onPress={() => handleMode(m.key)} style={s.modeRow} activeOpacity={0.7}>
|
||||
<View style={[s.modeIcon, { backgroundColor: m.color + '18' }]}>
|
||||
<Icon size={18} color={m.color} />
|
||||
</View>
|
||||
<Text style={s.modeLabel}>{m.label}</Text>
|
||||
</TouchableOpacity>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<View style={s.loadingBox}>
|
||||
<ActivityIndicator color={C.brand} size="large" />
|
||||
<Text style={s.loadingText}>Génération en cours…</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{result && !loading && (
|
||||
<View style={s.resultBox}>
|
||||
<ScrollView style={s.resultScroll} showsVerticalScrollIndicator={false}>
|
||||
<Text style={[s.resultText, result.startsWith('⚠️') && { color: '#e11d48' }]}>
|
||||
{result}
|
||||
</Text>
|
||||
</ScrollView>
|
||||
{!result.startsWith('⚠️') && (
|
||||
<TouchableOpacity onPress={handleApply} style={s.applyBtn} activeOpacity={0.8}>
|
||||
<Pencil size={15} color={C.white} />
|
||||
<Text style={s.applyBtnText}>Remplacer le texte</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<TouchableOpacity onPress={handleRetry} style={s.retryBtn} activeOpacity={0.8}>
|
||||
<RefreshCw size={14} color={C.concrete} />
|
||||
<Text style={s.retryText}>Réessayer</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</BottomSheet>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
modeList: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 8 },
|
||||
modeRow: {
|
||||
flexDirection: 'row', alignItems: 'center', gap: 14,
|
||||
paddingHorizontal: 12, paddingVertical: 14,
|
||||
borderRadius: 14, marginBottom: 4,
|
||||
},
|
||||
modeIcon: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
|
||||
modeLabel: { fontSize: 15, fontWeight: '500', color: C.ink },
|
||||
loadingBox: { alignItems: 'center', paddingVertical: 36, gap: 12 },
|
||||
loadingText: { fontSize: 14, color: C.concrete },
|
||||
resultBox: { paddingHorizontal: 20, paddingTop: 8 },
|
||||
resultScroll: { maxHeight: 200, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, marginBottom: 14 },
|
||||
resultText: { fontSize: 15, color: C.ink, lineHeight: 23 },
|
||||
applyBtn: { flexDirection: 'row', alignItems: 'center', gap: 8, backgroundColor: C.ink, paddingVertical: 13, borderRadius: 14, justifyContent: 'center', marginBottom: 8 },
|
||||
applyBtnText: { color: C.white, fontWeight: '700', fontSize: 14 },
|
||||
retryBtn: { flexDirection: 'row', alignItems: 'center', gap: 6, justifyContent: 'center', paddingVertical: 10 },
|
||||
retryText: { fontSize: 13, color: C.concrete },
|
||||
})
|
||||
80
memento-mobile/components/BottomSheet.tsx
Normal file
80
memento-mobile/components/BottomSheet.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* BottomSheet — modal bas d'écran respectant le design Momento
|
||||
* Usage:
|
||||
* <BottomSheet visible={v} onClose={() => setV(false)} title="Titre">
|
||||
* ...children
|
||||
* </BottomSheet>
|
||||
*/
|
||||
import { useEffect, useRef } from 'react'
|
||||
import {
|
||||
View, Text, Modal, TouchableOpacity, Animated,
|
||||
Pressable, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { X } from 'lucide-react-native'
|
||||
import { C } from '@/lib/theme'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
title?: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function BottomSheet({ visible, onClose, title, children }: Props) {
|
||||
const translateY = useRef(new Animated.Value(400)).current
|
||||
const opacity = useRef(new Animated.Value(0)).current
|
||||
|
||||
useEffect(() => {
|
||||
if (visible) {
|
||||
Animated.parallel([
|
||||
Animated.spring(translateY, { toValue: 0, useNativeDriver: true, damping: 20, stiffness: 200 }),
|
||||
Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }),
|
||||
]).start()
|
||||
} else {
|
||||
Animated.parallel([
|
||||
Animated.timing(translateY, { toValue: 400, duration: 220, useNativeDriver: true }),
|
||||
Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }),
|
||||
]).start()
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
return (
|
||||
<Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
|
||||
<Animated.View style={[s.overlay, { opacity }]}>
|
||||
<Pressable style={StyleSheet.absoluteFill} onPress={onClose} />
|
||||
<Animated.View style={[s.sheet, { transform: [{ translateY }] }]}>
|
||||
{/* Handle bar */}
|
||||
<View style={s.handle} />
|
||||
{title && (
|
||||
<View style={s.titleRow}>
|
||||
<Text style={s.title}>{title}</Text>
|
||||
<TouchableOpacity onPress={onClose} style={s.closeBtn} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
||||
<X size={18} color={C.concrete} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
{children}
|
||||
</Animated.View>
|
||||
</Animated.View>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
overlay: { flex: 1, backgroundColor: 'rgba(26,26,24,0.5)', justifyContent: 'flex-end' },
|
||||
sheet: {
|
||||
backgroundColor: C.paper,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
paddingBottom: 32,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: -4 },
|
||||
shadowOpacity: 0.12,
|
||||
shadowRadius: 16,
|
||||
elevation: 16,
|
||||
},
|
||||
handle: { width: 36, height: 4, backgroundColor: C.border, borderRadius: 2, alignSelf: 'center', marginTop: 12, marginBottom: 4 },
|
||||
titleRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: C.border },
|
||||
title: { flex: 1, fontSize: 15, fontWeight: '700', color: C.ink },
|
||||
closeBtn: { padding: 2 },
|
||||
})
|
||||
173
memento-mobile/components/FlashcardSheet.tsx
Normal file
173
memento-mobile/components/FlashcardSheet.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
/**
|
||||
* FlashcardSheet — génère et sauvegarde des flashcards depuis une note
|
||||
*/
|
||||
import { useState } from 'react'
|
||||
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, ScrollView } from 'react-native'
|
||||
import { GraduationCap, Check, RefreshCw } from 'lucide-react-native'
|
||||
import { BottomSheet } from './BottomSheet'
|
||||
import { C } from '@/lib/theme'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { useRouter } from 'expo-router'
|
||||
|
||||
const STYLES = [
|
||||
{ key: 'qa', label: 'Q&A', desc: 'Questions / Réponses' },
|
||||
{ key: 'concept', label: 'Concept', desc: 'Terme / Définition' },
|
||||
{ key: 'cloze', label: 'Cloze', desc: 'Texte à trous' },
|
||||
] as const
|
||||
|
||||
const COUNTS = [5, 10, 15, 20]
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
noteId: string
|
||||
noteTitle: string
|
||||
}
|
||||
|
||||
export function FlashcardSheet({ visible, onClose, noteId, noteTitle }: Props) {
|
||||
const router = useRouter()
|
||||
const [style, setStyle] = useState<'qa' | 'concept' | 'cloze'>('qa')
|
||||
const [count, setCount] = useState(10)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [result, setResult] = useState<{ deckId: string; count: number } | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const generate = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setResult(null)
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.flashcardGenerate, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ noteId, style, count }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (!res.ok) throw new Error(data.error ?? `Erreur ${res.status}`)
|
||||
setResult({ deckId: data.deckId, count: data.count })
|
||||
} catch (e: any) {
|
||||
setError(e.message ?? 'Erreur de génération')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const goRevise = () => {
|
||||
onClose()
|
||||
router.push({ pathname: '/(tabs)/revision' })
|
||||
}
|
||||
|
||||
const reset = () => { setResult(null); setError(null) }
|
||||
|
||||
return (
|
||||
<BottomSheet visible={visible} onClose={onClose}>
|
||||
<View style={s.header}>
|
||||
<GraduationCap size={20} color={C.brand} />
|
||||
<Text style={s.title}>Générer des flashcards</Text>
|
||||
</View>
|
||||
<Text style={s.noteTitle} numberOfLines={1}>📝 {noteTitle}</Text>
|
||||
|
||||
{!result && !loading && (
|
||||
<ScrollView showsVerticalScrollIndicator={false}>
|
||||
{/* Style */}
|
||||
<Text style={s.sectionLabel}>Type de cartes</Text>
|
||||
<View style={s.pills}>
|
||||
{STYLES.map((st) => (
|
||||
<TouchableOpacity
|
||||
key={st.key}
|
||||
style={[s.pill, style === st.key && s.pillActive]}
|
||||
onPress={() => setStyle(st.key)}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[s.pillLabel, style === st.key && s.pillLabelActive]}>{st.label}</Text>
|
||||
<Text style={[s.pillDesc, style === st.key && s.pillDescActive]}>{st.desc}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Nombre */}
|
||||
<Text style={s.sectionLabel}>Nombre de cartes</Text>
|
||||
<View style={s.countRow}>
|
||||
{COUNTS.map((n) => (
|
||||
<TouchableOpacity
|
||||
key={n}
|
||||
style={[s.countBtn, count === n && s.countBtnActive]}
|
||||
onPress={() => setCount(n)}
|
||||
activeOpacity={0.8}
|
||||
>
|
||||
<Text style={[s.countTxt, count === n && s.countTxtActive]}>{n}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{error && <Text style={s.error}>{error}</Text>}
|
||||
|
||||
<TouchableOpacity style={s.generateBtn} onPress={generate} activeOpacity={0.85}>
|
||||
<GraduationCap size={16} color="#fff" />
|
||||
<Text style={s.generateTxt}>Générer {count} cartes</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<View style={s.center}>
|
||||
<ActivityIndicator color={C.brand} size="large" />
|
||||
<Text style={s.loadingTxt}>Génération en cours…</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{result && (
|
||||
<View style={s.resultWrap}>
|
||||
<View style={s.checkCircle}>
|
||||
<Check size={28} color="#16a34a" />
|
||||
</View>
|
||||
<Text style={s.resultTitle}>{result.count} cartes créées !</Text>
|
||||
<Text style={s.resultSub}>Votre paquet est prêt pour la révision.</Text>
|
||||
<View style={s.resultActions}>
|
||||
<TouchableOpacity style={s.reviseBtn} onPress={goRevise} activeOpacity={0.85}>
|
||||
<GraduationCap size={16} color="#fff" />
|
||||
<Text style={s.reviseTxt}>Réviser maintenant</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={s.retryBtn} onPress={reset} activeOpacity={0.8}>
|
||||
<RefreshCw size={14} color={C.concrete} />
|
||||
<Text style={s.retryTxt}>Regénérer</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</BottomSheet>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
header: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 4 },
|
||||
title: { fontSize: 17, fontWeight: '700', color: C.ink },
|
||||
noteTitle: { fontSize: 13, color: C.concrete, marginBottom: 20 },
|
||||
sectionLabel: { fontSize: 11, fontWeight: '700', color: C.concrete, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 10 },
|
||||
pills: { flexDirection: 'row', gap: 8, marginBottom: 20 },
|
||||
pill: { flex: 1, padding: 12, borderRadius: 12, borderWidth: 1.5, borderColor: C.border, backgroundColor: C.paper },
|
||||
pillActive: { borderColor: C.brand, backgroundColor: 'rgba(164,113,72,0.08)' },
|
||||
pillLabel: { fontSize: 13, fontWeight: '700', color: C.ink, marginBottom: 2 },
|
||||
pillLabelActive: { color: C.brand },
|
||||
pillDesc: { fontSize: 10, color: C.concrete },
|
||||
pillDescActive: { color: C.brand },
|
||||
countRow: { flexDirection: 'row', gap: 8, marginBottom: 24 },
|
||||
countBtn: { flex: 1, paddingVertical: 12, borderRadius: 12, borderWidth: 1.5, borderColor: C.border, alignItems: 'center', backgroundColor: C.paper },
|
||||
countBtnActive: { borderColor: C.brand, backgroundColor: 'rgba(164,113,72,0.08)' },
|
||||
countTxt: { fontSize: 15, fontWeight: '700', color: C.ink },
|
||||
countTxtActive: { color: C.brand },
|
||||
error: { color: '#e11d48', fontSize: 13, marginBottom: 12, textAlign: 'center' },
|
||||
generateBtn: { backgroundColor: C.brand, borderRadius: 14, paddingVertical: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 },
|
||||
generateTxt: { color: '#fff', fontWeight: '700', fontSize: 15 },
|
||||
center: { alignItems: 'center', justifyContent: 'center', paddingVertical: 40 },
|
||||
loadingTxt: { marginTop: 16, color: C.concrete, fontSize: 14 },
|
||||
resultWrap: { alignItems: 'center', paddingVertical: 20 },
|
||||
checkCircle: { width: 64, height: 64, borderRadius: 32, backgroundColor: '#dcfce7', alignItems: 'center', justifyContent: 'center', marginBottom: 16 },
|
||||
resultTitle: { fontSize: 20, fontWeight: '800', color: C.ink, marginBottom: 8 },
|
||||
resultSub: { fontSize: 14, color: C.concrete, marginBottom: 28 },
|
||||
resultActions: { width: '100%', gap: 10 },
|
||||
reviseBtn: { backgroundColor: C.brand, borderRadius: 14, paddingVertical: 14, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 8 },
|
||||
reviseTxt: { color: '#fff', fontWeight: '700', fontSize: 15 },
|
||||
retryBtn: { borderRadius: 14, paddingVertical: 12, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, borderWidth: 1, borderColor: C.border },
|
||||
retryTxt: { color: C.concrete, fontWeight: '600', fontSize: 13 },
|
||||
})
|
||||
66
memento-mobile/components/MicButton.tsx
Normal file
66
memento-mobile/components/MicButton.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* MicButton — bouton enregistrement vocal avec feedback visuel
|
||||
* États : idle → recording (pulsé rouge) → processing (spinner)
|
||||
*/
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { TouchableOpacity, ActivityIndicator, Animated, StyleSheet, View, Text } from 'react-native'
|
||||
import { Mic, MicOff, Square } from 'lucide-react-native'
|
||||
import { AudioState } from '@/lib/useAudioRecorder'
|
||||
import { C } from '@/lib/theme'
|
||||
|
||||
interface Props {
|
||||
state: AudioState
|
||||
onPress: () => void
|
||||
errorMsg?: string | null
|
||||
size?: number
|
||||
}
|
||||
|
||||
export function MicButton({ state, onPress, errorMsg, size = 20 }: Props) {
|
||||
const pulse = useRef(new Animated.Value(1)).current
|
||||
|
||||
useEffect(() => {
|
||||
if (state === 'recording') {
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulse, { toValue: 1.25, duration: 600, useNativeDriver: true }),
|
||||
Animated.timing(pulse, { toValue: 1, duration: 600, useNativeDriver: true }),
|
||||
])
|
||||
).start()
|
||||
} else {
|
||||
pulse.stopAnimation()
|
||||
pulse.setValue(1)
|
||||
}
|
||||
}, [state])
|
||||
|
||||
const bgColor =
|
||||
state === 'recording' ? '#fee2e2' :
|
||||
state === 'processing' ? '#f3ece4' :
|
||||
state === 'error' ? '#fee2e2' :
|
||||
'#f3ece4'
|
||||
|
||||
const borderColor =
|
||||
state === 'recording' ? '#fca5a5' :
|
||||
state === 'error' ? '#fca5a5' :
|
||||
C.border
|
||||
|
||||
return (
|
||||
<Animated.View style={[s.wrap, { backgroundColor: bgColor, borderColor }, { transform: [{ scale: state === 'recording' ? pulse : 1 }] }]}>
|
||||
<TouchableOpacity onPress={onPress} disabled={state === 'processing'} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
|
||||
{state === 'processing'
|
||||
? <ActivityIndicator size="small" color={C.brand} />
|
||||
: state === 'recording'
|
||||
? <Square size={size - 2} color="#e11d48" />
|
||||
: state === 'error'
|
||||
? <MicOff size={size} color="#e11d48" />
|
||||
: <Mic size={size} color={C.brand} />}
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
wrap: {
|
||||
width: 40, height: 40, borderRadius: 12,
|
||||
borderWidth: 1, alignItems: 'center', justifyContent: 'center',
|
||||
},
|
||||
})
|
||||
115
memento-mobile/components/TitleSheet.tsx
Normal file
115
memento-mobile/components/TitleSheet.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* TitleSheet — suggère 3 titres IA dans un bottom sheet propre
|
||||
*/
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
View, Text, TouchableOpacity, ActivityIndicator, StyleSheet,
|
||||
} from 'react-native'
|
||||
import { Sparkles } from 'lucide-react-native'
|
||||
import { BottomSheet } from '@/components/BottomSheet'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { C } from '@/lib/theme'
|
||||
|
||||
interface Props {
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
content: string
|
||||
onSelect: (title: string) => void
|
||||
}
|
||||
|
||||
export function TitleSheet({ visible, onClose, content, onSelect }: Props) {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [suggestions, setSuggestions] = useState<string[]>([])
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (visible && content.trim()) {
|
||||
fetchTitles()
|
||||
}
|
||||
}, [visible])
|
||||
|
||||
const fetchTitles = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
setSuggestions([])
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.aiTitle, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ content }),
|
||||
})
|
||||
const d = await res.json().catch(() => ({}))
|
||||
if (!res.ok) {
|
||||
setError(d.error === 'quota_exceeded' ? 'Quota dépassé' : 'Erreur serveur')
|
||||
return
|
||||
}
|
||||
const raw: unknown[] = d.suggestions ?? []
|
||||
setSuggestions(raw.map((s) => (typeof s === 'string' ? s : (s as any).title ?? '')).filter(Boolean))
|
||||
} catch {
|
||||
setError('Erreur réseau')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = (t: string) => {
|
||||
onSelect(t)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<BottomSheet visible={visible} onClose={onClose} title="Titres suggérés">
|
||||
{loading && (
|
||||
<View style={s.center}>
|
||||
<ActivityIndicator color={C.brand} size="large" />
|
||||
<Text style={s.hint}>Génération des titres…</Text>
|
||||
</View>
|
||||
)}
|
||||
{error && !loading && (
|
||||
<View style={s.center}>
|
||||
<Text style={s.errorText}>{error}</Text>
|
||||
<TouchableOpacity onPress={fetchTitles} style={s.retryBtn}>
|
||||
<Text style={s.retryText}>Réessayer</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
{!loading && !error && suggestions.length > 0 && (
|
||||
<View style={s.list}>
|
||||
{suggestions.map((t, i) => (
|
||||
<TouchableOpacity key={i} onPress={() => handleSelect(t)} style={s.row} activeOpacity={0.7}>
|
||||
<View style={s.numBadge}>
|
||||
<Text style={s.numText}>{i + 1}</Text>
|
||||
</View>
|
||||
<Text style={s.titleText}>{t}</Text>
|
||||
<Sparkles size={14} color={C.brand} />
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{!loading && !error && suggestions.length === 0 && (
|
||||
<View style={s.center}>
|
||||
<Text style={s.hint}>Aucune suggestion disponible</Text>
|
||||
</View>
|
||||
)}
|
||||
</BottomSheet>
|
||||
)
|
||||
}
|
||||
|
||||
const s = StyleSheet.create({
|
||||
center: { alignItems: 'center', paddingVertical: 32, gap: 12 },
|
||||
hint: { fontSize: 14, color: C.concrete },
|
||||
errorText: { fontSize: 14, color: '#e11d48' },
|
||||
retryBtn: { paddingHorizontal: 20, paddingVertical: 10, borderRadius: 10, backgroundColor: C.border },
|
||||
retryText: { fontSize: 13, color: C.ink, fontWeight: '600' },
|
||||
list: { paddingHorizontal: 12, paddingTop: 8, paddingBottom: 8 },
|
||||
row: {
|
||||
flexDirection: 'row', alignItems: 'center', gap: 12,
|
||||
paddingHorizontal: 12, paddingVertical: 14,
|
||||
borderRadius: 14, marginBottom: 8,
|
||||
backgroundColor: C.white, borderWidth: 1, borderColor: C.border,
|
||||
marginHorizontal: 8,
|
||||
},
|
||||
numBadge: { width: 26, height: 26, borderRadius: 13, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center' },
|
||||
numText: { fontSize: 12, fontWeight: '700', color: C.brand },
|
||||
titleText: { flex: 1, fontSize: 14, fontWeight: '500', color: C.ink },
|
||||
})
|
||||
@@ -3,11 +3,19 @@ import * as SecureStore from 'expo-secure-store'
|
||||
const TOKEN_KEY = 'memento_token'
|
||||
|
||||
export async function getToken(): Promise<string | null> {
|
||||
return SecureStore.getItemAsync(TOKEN_KEY)
|
||||
try {
|
||||
return await SecureStore.getItemAsync(TOKEN_KEY)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export async function setToken(token: string): Promise<void> {
|
||||
await SecureStore.setItemAsync(TOKEN_KEY, token)
|
||||
try {
|
||||
await SecureStore.setItemAsync(TOKEN_KEY, token)
|
||||
} catch (e) {
|
||||
console.warn('[SecureStore] setToken failed:', e)
|
||||
}
|
||||
}
|
||||
|
||||
export async function clearToken(): Promise<void> {
|
||||
|
||||
@@ -13,6 +13,14 @@ export const ENDPOINTS = {
|
||||
? `${API_URL}/api/mobile/notes?notebookId=${notebookId}`
|
||||
: `${API_URL}/api/mobile/notes`,
|
||||
note: (id: string) => `${API_URL}/api/mobile/notes/${id}`,
|
||||
createNote: `${API_URL}/api/mobile/notes`,
|
||||
search: `${API_URL}/api/mobile/search`,
|
||||
dailyNote: `${API_URL}/api/notes/daily`,
|
||||
dailyNote: `${API_URL}/api/mobile/notes/daily`,
|
||||
aiImprove: `${API_URL}/api/mobile/ai/improve`,
|
||||
aiTitle: `${API_URL}/api/mobile/ai/title`,
|
||||
aiTranscribe: `${API_URL}/api/mobile/ai/transcribe`,
|
||||
flashcardDecks: `${API_URL}/api/mobile/flashcards/decks`,
|
||||
flashcardSession: (deckId: string) => `${API_URL}/api/mobile/flashcards/session?deckId=${deckId}`,
|
||||
flashcardReview: `${API_URL}/api/mobile/flashcards/review`,
|
||||
flashcardGenerate: `${API_URL}/api/mobile/flashcards/generate`,
|
||||
}
|
||||
|
||||
100
memento-mobile/lib/useAudioRecorder.ts
Normal file
100
memento-mobile/lib/useAudioRecorder.ts
Normal file
@@ -0,0 +1,100 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import { Audio } from 'expo-av'
|
||||
import { getToken } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
|
||||
export type AudioState = 'idle' | 'recording' | 'processing' | 'error'
|
||||
|
||||
export function useAudioRecorder(onTranscript: (text: string) => void) {
|
||||
const [state, setState] = useState<AudioState>('idle')
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null)
|
||||
const recordingRef = useRef<Audio.Recording | null>(null)
|
||||
|
||||
const startRecording = async () => {
|
||||
setErrorMsg(null)
|
||||
try {
|
||||
// Demande de permission
|
||||
const { granted } = await Audio.requestPermissionsAsync()
|
||||
if (!granted) {
|
||||
setErrorMsg('Permission micro refusée')
|
||||
setState('error')
|
||||
setTimeout(() => setState('idle'), 3000)
|
||||
return
|
||||
}
|
||||
|
||||
await Audio.setAudioModeAsync({
|
||||
allowsRecordingIOS: true,
|
||||
playsInSilentModeIOS: true,
|
||||
})
|
||||
|
||||
const { recording } = await Audio.Recording.createAsync(
|
||||
Audio.RecordingOptionsPresets.HIGH_QUALITY
|
||||
)
|
||||
recordingRef.current = recording
|
||||
setState('recording')
|
||||
} catch (e: any) {
|
||||
setErrorMsg(e.message ?? 'Impossible de démarrer le micro')
|
||||
setState('error')
|
||||
setTimeout(() => setState('idle'), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const stopAndTranscribe = async () => {
|
||||
const recording = recordingRef.current
|
||||
if (!recording) { setState('idle'); return }
|
||||
|
||||
setState('processing')
|
||||
recordingRef.current = null
|
||||
|
||||
try {
|
||||
// Sauvegarder l'URI AVANT d'unload
|
||||
const uri = recording.getURI()
|
||||
await recording.stopAndUnloadAsync()
|
||||
|
||||
// Rétablir le mode audio normal
|
||||
await Audio.setAudioModeAsync({ allowsRecordingIOS: false })
|
||||
|
||||
if (!uri) throw new Error('Fichier audio vide')
|
||||
|
||||
const token = await getToken()
|
||||
|
||||
// FormData RN : objet {uri, name, type}
|
||||
const form = new FormData()
|
||||
form.append('audio', { uri, name: 'audio.m4a', type: 'audio/m4a' } as any)
|
||||
|
||||
const res = await fetch(ENDPOINTS.aiTranscribe, {
|
||||
method: 'POST',
|
||||
headers: { Authorization: `Bearer ${token ?? ''}` },
|
||||
body: form,
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}))
|
||||
throw new Error(d.error ?? `Erreur ${res.status}`)
|
||||
}
|
||||
|
||||
const { text } = await res.json()
|
||||
if (text?.trim()) onTranscript(text.trim())
|
||||
setState('idle')
|
||||
} catch (e: any) {
|
||||
setErrorMsg(e.message ?? 'Erreur transcription')
|
||||
setState('error')
|
||||
setTimeout(() => { setState('idle'); setErrorMsg(null) }, 4000)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelRecording = async () => {
|
||||
const recording = recordingRef.current
|
||||
recordingRef.current = null
|
||||
if (recording) {
|
||||
try {
|
||||
await recording.stopAndUnloadAsync()
|
||||
await Audio.setAudioModeAsync({ allowsRecordingIOS: false })
|
||||
} catch {}
|
||||
}
|
||||
setState('idle')
|
||||
setErrorMsg(null)
|
||||
}
|
||||
|
||||
return { state, errorMsg, startRecording, stopAndTranscribe, cancelRecording }
|
||||
}
|
||||
42
memento-mobile/package-lock.json
generated
42
memento-mobile/package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"expo": "~54.0.35",
|
||||
"expo-av": "^16.0.8",
|
||||
"expo-constants": "~18.0.13",
|
||||
"expo-font": "~14.0.12",
|
||||
"expo-linking": "~8.0.12",
|
||||
@@ -17,8 +18,8 @@
|
||||
"expo-secure-store": "~15.0.8",
|
||||
"expo-splash-screen": "~31.0.13",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
"expo-web-browser": "~14.1.6",
|
||||
"lucide-react-native": "^0.477.0",
|
||||
"marked": "^18.0.4",
|
||||
"react": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
"react-native-safe-area-context": "~5.6.0",
|
||||
@@ -4769,6 +4770,23 @@
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-av": {
|
||||
"version": "16.0.8",
|
||||
"resolved": "https://registry.npmjs.org/expo-av/-/expo-av-16.0.8.tgz",
|
||||
"integrity": "sha512-cmVPftGR/ca7XBgs7R6ky36lF3OC0/MM/lpgX/yXqfv0jASTsh7AYX9JxHCwFmF+Z6JEB1vne9FDx4GiLcGreQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-web": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react-native-web": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/expo-constants": {
|
||||
"version": "18.0.13",
|
||||
"resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.13.tgz",
|
||||
@@ -4986,6 +5004,16 @@
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-web-browser": {
|
||||
"version": "14.1.6",
|
||||
"resolved": "https://registry.npmjs.org/expo-web-browser/-/expo-web-browser-14.1.6.tgz",
|
||||
"integrity": "sha512-/4P8eWqRyfXIMZna3acg320LXNA+P2cwyEVbjDX8vHnWU+UnOtyRKWy3XaAIyMPQ9hVjBNUQTh4MPvtnPRzakw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/exponential-backoff": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.3.tgz",
|
||||
@@ -6226,18 +6254,6 @@
|
||||
"tmpl": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "18.0.4",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-18.0.4.tgz",
|
||||
"integrity": "sha512-c/BTaKzg0G6ezQx97DAkYU7k0HM6ys0FqYeKBL6hlBByZwy+ycA1+f0vDdjMHKKeEjdgkx0GOv9Il6D+85cOqA==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/marky": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/marky/-/marky-1.3.0.tgz",
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "2.2.0",
|
||||
"expo": "~54.0.35",
|
||||
"expo-av": "^16.0.8",
|
||||
"expo-constants": "~18.0.13",
|
||||
"expo-font": "~14.0.12",
|
||||
"expo-linking": "~8.0.12",
|
||||
@@ -19,6 +20,7 @@
|
||||
"expo-secure-store": "~15.0.8",
|
||||
"expo-splash-screen": "~31.0.13",
|
||||
"expo-status-bar": "~3.0.9",
|
||||
"expo-web-browser": "~14.1.6",
|
||||
"lucide-react-native": "^0.477.0",
|
||||
"react": "19.1.0",
|
||||
"react-native": "0.81.5",
|
||||
@@ -26,8 +28,7 @@
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-svg": "15.12.0",
|
||||
"react-native-webview": "13.15.0",
|
||||
"zustand": "^5.0.2",
|
||||
"expo-web-browser": "~14.1.6"
|
||||
"zustand": "^5.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.25.2",
|
||||
|
||||
Reference in New Issue
Block a user