0fa8978395
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>
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
/**
|
|
* 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 },
|
|
})
|