7c8695cacf
- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5 - Remove NativeWind/Tailwind dependencies - Fix babel.config.js: presets babel-preset-expo only - Rewrite all screens with StyleSheet.create (no className) - Add lucide-react-native + react-native-svg - Export design tokens C from _layout.tsx for shared usage - Install node_modules (702 packages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
97 lines
3.6 KiB
TypeScript
97 lines
3.6 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import {
|
|
View, Text, ActivityIndicator,
|
|
TouchableOpacity, Share, 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 { WebView } from 'react-native-webview'
|
|
import { apiFetch } from '@/lib/api'
|
|
import { ENDPOINTS } from '@/lib/config'
|
|
import { C } from '../_layout'
|
|
|
|
interface Note {
|
|
id: string
|
|
title: string
|
|
content: string
|
|
updatedAt: string
|
|
notebookName?: string
|
|
}
|
|
|
|
function buildHtml(content: string, title: string) {
|
|
return `<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, sans-serif; font-size: 16px; line-height: 1.7;
|
|
color: #1A1A18; background: #FAFAF8; padding: 0 16px 32px; }
|
|
h1 { font-size: 22px; font-weight: 700; margin: 20px 0 12px; }
|
|
h2 { font-size: 18px; font-weight: 700; margin: 16px 0 10px; }
|
|
h3 { font-size: 16px; font-weight: 600; margin: 14px 0 8px; }
|
|
p { margin: 0 0 12px; }
|
|
ul, ol { padding-left: 20px; margin: 0 0 12px; }
|
|
li { margin-bottom: 4px; }
|
|
blockquote { border-left: 3px solid #A47148; padding-left: 12px; color: #666; margin: 12px 0; }
|
|
code { background: #f0ede8; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
|
|
pre { background: #f0ede8; padding: 12px; border-radius: 8px; overflow: auto; margin: 12px 0; }
|
|
a { color: #A47148; }
|
|
img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
|
|
strong { font-weight: 700; }
|
|
em { font-style: italic; }
|
|
</style>
|
|
</head>
|
|
<body>${content}</body>
|
|
</html>`
|
|
}
|
|
|
|
export default function NoteScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>()
|
|
const [note, setNote] = useState<Note | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const router = useRouter()
|
|
|
|
useEffect(() => {
|
|
apiFetch(ENDPOINTS.note(id))
|
|
.then((r) => r.json())
|
|
.then((data) => setNote(data.note ?? null))
|
|
.finally(() => setLoading(false))
|
|
}, [id])
|
|
|
|
const handleShare = async () => {
|
|
if (!note) return
|
|
await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={s.safe}>
|
|
<View style={s.header}>
|
|
<TouchableOpacity onPress={() => router.back()} style={s.backBtn}>
|
|
<ArrowLeft size={22} color={C.ink} />
|
|
</TouchableOpacity>
|
|
<Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
|
|
<TouchableOpacity onPress={handleShare} style={s.shareBtn}>
|
|
<Share2 size={18} color={C.concrete} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{loading
|
|
? <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>
|
|
: note
|
|
? <WebView source={{ html: buildHtml(note.content, note.title) }} style={{ flex: 1, backgroundColor: C.paper }} scrollEnabled showsVerticalScrollIndicator={false} />
|
|
: <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
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 },
|
|
backBtn: { padding: 4 },
|
|
headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
|
|
shareBtn: { padding: 4 },
|
|
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
|
})
|