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>
2026-05-29 18:49:40 +00:00
parent 1121b8c345
commit 0fa8978395
54 changed files with 2648 additions and 245 deletions
--- a/memento-mobile/app/note/[id].tsx
+++ b/memento-mobile/app/note/[id].tsx
@@ -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(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&nbsp;/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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    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 || '&#8203;'}</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, '&lt;').replace(/>/g, '&gt;')
-  // 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 },
 })
--- a/memento-mobile/app/note/create.tsx
+++ b/memento-mobile/app/note/create.tsx
@@ -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 },
+})