feat: App mobile Expo + API mobile dédiée
memento-mobile/ (Expo + React Native + expo-router): - Auth: login email/password → Bearer token (expo-secure-store) - Layout: guard auth → redirect /(auth)/login ou /(tabs)/home - Tabs: Accueil, Carnets, Recherche, Profil - Screens: login, home (recent notes + quick actions), notebooks list, note viewer (WebView HTML), search (texte), notebook detail, profile - Design: tokens brand-accent (#A47148), ink, concrete, paper, border - lib/config.ts: API_URL dev/prod configurable - lib/api.ts: apiFetch avec Bearer token automatique - lib/store.ts: Zustand auth store (login/logout/restore) memento-note/ (API mobile dédiée): - lib/mobile-auth.ts: createMobileToken / verifyMobileToken (HMAC-SHA256, 90j) - POST /api/mobile/auth/login: email+password → token + user - GET /api/mobile/auth/me: valider token, retourner profil - GET /api/mobile/notebooks: liste carnets avec nb notes - GET /api/mobile/notes: notes récentes (filtre par carnet optionnel) - GET /api/mobile/notes/[id]: contenu complet d'une note - GET /api/mobile/search: recherche fulltext titre+contenu Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Antigravity
5
memento-mobile/app/(auth)/_layout.tsx
Normal file
5
memento-mobile/app/(auth)/_layout.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { Stack } from 'expo-router'
|
||||
|
||||
export default function AuthLayout() {
|
||||
return <Stack screenOptions={{ headerShown: false }} />
|
||||
}
|
||||
98
memento-mobile/app/(auth)/login.tsx
Normal file
98
memento-mobile/app/(auth)/login.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
} from 'react-native'
|
||||
import { useAuthStore } from '@/lib/store'
|
||||
|
||||
export default function LoginScreen() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const login = useAuthStore((s) => s.login)
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!email.trim() || !password.trim()) return
|
||||
setLoading(true)
|
||||
try {
|
||||
await login(email.trim().toLowerCase(), password)
|
||||
} catch (e: any) {
|
||||
Alert.alert('Connexion échouée', e.message)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||
className="flex-1 bg-paper"
|
||||
>
|
||||
<View className="flex-1 justify-center px-8">
|
||||
{/* Logo */}
|
||||
<View className="mb-12 items-center">
|
||||
<Text className="text-4xl font-serif text-ink italic tracking-tight">Momento</Text>
|
||||
<Text className="text-sm text-concrete mt-1">Votre espace de connaissance</Text>
|
||||
</View>
|
||||
|
||||
{/* Form */}
|
||||
<View className="space-y-3">
|
||||
<View>
|
||||
<Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
|
||||
Email
|
||||
</Text>
|
||||
<TextInput
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
placeholder="vous@exemple.com"
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
autoComplete="email"
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
|
||||
placeholderTextColor="#8A8A82"
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<Text className="text-[11px] font-semibold uppercase tracking-widest text-concrete mb-1.5">
|
||||
Mot de passe
|
||||
</Text>
|
||||
<TextInput
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholder="••••••••"
|
||||
secureTextEntry
|
||||
autoComplete="password"
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-ink text-[15px] bg-white"
|
||||
placeholderTextColor="#8A8A82"
|
||||
onSubmitEditing={handleLogin}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleLogin}
|
||||
disabled={loading || !email || !password}
|
||||
className="mt-4 bg-ink rounded-xl py-3.5 items-center active:opacity-80"
|
||||
style={{ opacity: loading || !email || !password ? 0.5 : 1 }}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color="white" size="small" />
|
||||
) : (
|
||||
<Text className="text-paper font-semibold text-[15px]">Se connecter</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Text className="text-center text-[12px] text-concrete mt-8">
|
||||
memento-note.com
|
||||
</Text>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
)
|
||||
}
|
||||
55
memento-mobile/app/(tabs)/_layout.tsx
Normal file
55
memento-mobile/app/(tabs)/_layout.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { Tabs } from 'expo-router'
|
||||
import { BookOpen, Search, Home, User } from 'lucide-react-native'
|
||||
|
||||
export default function TabsLayout() {
|
||||
return (
|
||||
<Tabs
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
tabBarActiveTintColor: '#A47148',
|
||||
tabBarInactiveTintColor: '#8A8A82',
|
||||
tabBarStyle: {
|
||||
backgroundColor: '#FAFAF8',
|
||||
borderTopColor: '#E8E6E0',
|
||||
borderTopWidth: 1,
|
||||
paddingBottom: 4,
|
||||
height: 60,
|
||||
},
|
||||
tabBarLabelStyle: {
|
||||
fontSize: 10,
|
||||
fontWeight: '600',
|
||||
marginTop: -2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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="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>
|
||||
)
|
||||
}
|
||||
132
memento-mobile/app/(tabs)/home.tsx
Normal file
132
memento-mobile/app/(tabs)/home.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, ScrollView, TouchableOpacity,
|
||||
ActivityIndicator, RefreshControl,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { CalendarDays, Sparkles, BookOpen } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
import { useAuthStore } from '@/lib/store'
|
||||
|
||||
interface Note {
|
||||
id: string
|
||||
title: string
|
||||
updatedAt: string
|
||||
notebookName?: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
export default function HomeScreen() {
|
||||
const user = useAuthStore((s) => s.user)
|
||||
const [recentNotes, setRecentNotes] = useState<Note[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.notes())
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setRecentNotes((data.notes ?? []).slice(0, 10))
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
const handleDailyNote = async () => {
|
||||
const res = await apiFetch(ENDPOINTS.dailyNote)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
router.push(`/note/${data.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (iso: string) => {
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
<ScrollView
|
||||
className="flex-1"
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
|
||||
>
|
||||
{/* Header */}
|
||||
<View className="px-5 pt-4 pb-2">
|
||||
<Text className="text-2xl font-serif italic text-ink">
|
||||
Bonjour{user?.name ? `, ${user.name.split(' ')[0]}` : ''} 👋
|
||||
</Text>
|
||||
<Text className="text-[13px] text-concrete mt-0.5">
|
||||
{new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Quick actions */}
|
||||
<View className="flex-row gap-3 px-5 mt-4">
|
||||
<TouchableOpacity
|
||||
onPress={handleDailyNote}
|
||||
className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
|
||||
>
|
||||
<CalendarDays size={22} color="#A47148" />
|
||||
<Text className="text-[12px] font-semibold text-ink">Note du jour</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/(tabs)/notebooks')}
|
||||
className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
|
||||
>
|
||||
<BookOpen size={22} color="#A47148" />
|
||||
<Text className="text-[12px] font-semibold text-ink">Carnets</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push('/(tabs)/search')}
|
||||
className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
|
||||
>
|
||||
<Sparkles size={22} color="#A47148" />
|
||||
<Text className="text-[12px] font-semibold text-ink">Recherche IA</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{/* Recent notes */}
|
||||
<View className="px-5 mt-6">
|
||||
<Text className="text-[11px] font-bold uppercase tracking-widest text-concrete mb-3">
|
||||
Récentes
|
||||
</Text>
|
||||
|
||||
{loading ? (
|
||||
<ActivityIndicator color="#A47148" />
|
||||
) : recentNotes.length === 0 ? (
|
||||
<Text className="text-concrete text-[14px]">Aucune note pour l'instant.</Text>
|
||||
) : (
|
||||
recentNotes.map((note) => (
|
||||
<TouchableOpacity
|
||||
key={note.id}
|
||||
onPress={() => router.push(`/note/${note.id}`)}
|
||||
className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
|
||||
>
|
||||
<Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
|
||||
{note.title || 'Sans titre'}
|
||||
</Text>
|
||||
<View className="flex-row items-center gap-2 mt-1">
|
||||
{note.notebookName && (
|
||||
<Text className="text-[11px] text-concrete">{note.notebookName}</Text>
|
||||
)}
|
||||
<Text className="text-[11px] text-concrete/60">{formatDate(note.updatedAt)}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="h-8" />
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
78
memento-mobile/app/(tabs)/notebooks.tsx
Normal file
78
memento-mobile/app/(tabs)/notebooks.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, FlatList, TouchableOpacity,
|
||||
ActivityIndicator, RefreshControl,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { ChevronRight } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
|
||||
interface Notebook {
|
||||
id: string
|
||||
name: string
|
||||
icon: string | null
|
||||
_count: { notes: number }
|
||||
}
|
||||
|
||||
export default function NotebooksScreen() {
|
||||
const [notebooks, setNotebooks] = useState<Notebook[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.notebooks)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setNotebooks(data.notebooks ?? [])
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper items-center justify-center">
|
||||
<ActivityIndicator color="#A47148" />
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
<View className="px-5 pt-4 pb-2">
|
||||
<Text className="text-2xl font-serif italic text-ink">Carnets</Text>
|
||||
</View>
|
||||
|
||||
<FlatList
|
||||
data={notebooks}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerClassName="px-5 pb-8"
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/notebook/${item.id}`)}
|
||||
className="flex-row items-center bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
|
||||
>
|
||||
<Text className="text-2xl mr-3">{item.icon ?? '📓'}</Text>
|
||||
<View className="flex-1">
|
||||
<Text className="text-[15px] font-semibold text-ink">{item.name}</Text>
|
||||
<Text className="text-[12px] text-concrete">{item._count?.notes ?? 0} notes</Text>
|
||||
</View>
|
||||
<ChevronRight size={16} color="#8A8A82" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<Text className="text-concrete text-center mt-12">Aucun carnet.</Text>
|
||||
}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
73
memento-mobile/app/(tabs)/profile.tsx
Normal file
73
memento-mobile/app/(tabs)/profile.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import { View, Text, TouchableOpacity, ScrollView, Alert } from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { LogOut, CreditCard, Globe } from 'lucide-react-native'
|
||||
import { useAuthStore } from '@/lib/store'
|
||||
|
||||
const TIER_LABELS: Record<string, string> = {
|
||||
FREE: 'Gratuit',
|
||||
BASIC: 'Basic',
|
||||
PRO: 'Pro',
|
||||
BUSINESS: 'Business',
|
||||
ENTERPRISE: 'Enterprise',
|
||||
}
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user, logout } = useAuthStore()
|
||||
|
||||
const handleLogout = () => {
|
||||
Alert.alert(
|
||||
'Se déconnecter',
|
||||
'Voulez-vous vraiment vous déconnecter ?',
|
||||
[
|
||||
{ text: 'Annuler', style: 'cancel' },
|
||||
{ text: 'Déconnecter', style: 'destructive', onPress: logout },
|
||||
]
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
<ScrollView className="flex-1 px-5">
|
||||
<Text className="text-2xl font-serif italic text-ink pt-4 pb-6">Profil</Text>
|
||||
|
||||
{/* User info */}
|
||||
<View className="bg-white border border-border rounded-2xl p-5 mb-4">
|
||||
<View className="w-14 h-14 rounded-full bg-brand/10 items-center justify-center mb-3">
|
||||
<Text className="text-2xl font-bold text-brand">
|
||||
{user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="text-[17px] font-semibold text-ink">{user?.name ?? 'Utilisateur'}</Text>
|
||||
<Text className="text-[13px] text-concrete mt-0.5">{user?.email}</Text>
|
||||
{user?.tier && (
|
||||
<View className="mt-3 self-start bg-brand/10 px-3 py-1 rounded-full">
|
||||
<Text className="text-[11px] font-bold text-brand uppercase tracking-wider">
|
||||
{TIER_LABELS[user.tier] ?? user.tier}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Actions */}
|
||||
<View className="bg-white border border-border rounded-2xl overflow-hidden mb-4">
|
||||
<TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 border-b border-border active:bg-border/20">
|
||||
<CreditCard size={18} color="#8A8A82" />
|
||||
<Text className="text-[15px] text-ink flex-1">Abonnement</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 active:bg-border/20">
|
||||
<Globe size={18} color="#8A8A82" />
|
||||
<Text className="text-[15px] text-ink flex-1">Ouvrir memento-note.com</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleLogout}
|
||||
className="bg-white border border-rose-200 rounded-2xl flex-row items-center gap-3 px-4 py-3.5 active:opacity-70"
|
||||
>
|
||||
<LogOut size={18} color="#e11d48" />
|
||||
<Text className="text-[15px] text-rose-600 font-medium">Se déconnecter</Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
106
memento-mobile/app/(tabs)/search.tsx
Normal file
106
memento-mobile/app/(tabs)/search.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
View, Text, TextInput, FlatList,
|
||||
TouchableOpacity, ActivityIndicator,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { Search as SearchIcon, X } from 'lucide-react-native'
|
||||
import { useRouter } from 'expo-router'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
|
||||
interface SearchResult {
|
||||
id: string
|
||||
title: string
|
||||
snippet: string
|
||||
notebookName?: string
|
||||
score?: number
|
||||
}
|
||||
|
||||
export default function SearchScreen() {
|
||||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState<SearchResult[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [searched, setSearched] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const handleSearch = async () => {
|
||||
if (!query.trim()) return
|
||||
setLoading(true)
|
||||
setSearched(true)
|
||||
try {
|
||||
const res = await apiFetch(`${ENDPOINTS.search}?q=${encodeURIComponent(query)}`)
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setResults(data.results ?? [])
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
<View className="px-5 pt-4 pb-2">
|
||||
<Text className="text-2xl font-serif italic text-ink mb-4">Recherche</Text>
|
||||
|
||||
<View className="flex-row items-center bg-white border border-border rounded-xl px-3 py-2.5 gap-2">
|
||||
<SearchIcon size={16} color="#8A8A82" />
|
||||
<TextInput
|
||||
value={query}
|
||||
onChangeText={setQuery}
|
||||
placeholder="Chercher dans vos notes…"
|
||||
className="flex-1 text-[15px] text-ink"
|
||||
placeholderTextColor="#8A8A82"
|
||||
returnKeyType="search"
|
||||
onSubmitEditing={handleSearch}
|
||||
/>
|
||||
{query.length > 0 && (
|
||||
<TouchableOpacity onPress={() => { setQuery(''); setResults([]); setSearched(false) }}>
|
||||
<X size={14} color="#8A8A82" />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color="#A47148" />
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={results}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerClassName="px-5 pt-3 pb-8"
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/note/${item.id}`)}
|
||||
className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
|
||||
>
|
||||
<Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
|
||||
{item.title || 'Sans titre'}
|
||||
</Text>
|
||||
{item.snippet && (
|
||||
<Text className="text-[12px] text-concrete mt-1" numberOfLines={2}>
|
||||
{item.snippet}
|
||||
</Text>
|
||||
)}
|
||||
{item.notebookName && (
|
||||
<Text className="text-[11px] text-concrete/60 mt-1">{item.notebookName}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
searched ? (
|
||||
<Text className="text-concrete text-center mt-12">Aucun résultat pour "{query}"</Text>
|
||||
) : (
|
||||
<Text className="text-concrete text-center mt-12 text-[13px]">
|
||||
Tapez votre recherche puis appuyez sur Entrée
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
41
memento-mobile/app/_layout.tsx
Normal file
41
memento-mobile/app/_layout.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Slot, useRouter, useSegments } from 'expo-router'
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { View, ActivityIndicator } from 'react-native'
|
||||
import { useAuthStore } from '@/lib/store'
|
||||
|
||||
export default function RootLayout() {
|
||||
const { user, loading, restore } = useAuthStore()
|
||||
const router = useRouter()
|
||||
const segments = useSegments()
|
||||
|
||||
useEffect(() => {
|
||||
restore()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (loading) return
|
||||
const inAuth = segments[0] === '(auth)'
|
||||
if (!user && !inAuth) {
|
||||
router.replace('/(auth)/login')
|
||||
} else if (user && inAuth) {
|
||||
router.replace('/(tabs)/home')
|
||||
}
|
||||
}, [user, loading, segments])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className="flex-1 items-center justify-center bg-paper">
|
||||
<ActivityIndicator size="large" color="#A47148" />
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<StatusBar style="auto" />
|
||||
<Slot />
|
||||
</SafeAreaProvider>
|
||||
)
|
||||
}
|
||||
104
memento-mobile/app/note/[id].tsx
Normal file
104
memento-mobile/app/note/[id].tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, ScrollView, ActivityIndicator,
|
||||
TouchableOpacity, Share,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||||
import { ArrowLeft, Share2 } from 'lucide-react-native'
|
||||
import { WebView } from 'react-native-webview'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
|
||||
interface Note {
|
||||
id: string
|
||||
title: string
|
||||
content: string
|
||||
updatedAt: string
|
||||
notebookName?: string
|
||||
}
|
||||
|
||||
// Wrap HTML content in a minimal styled page for WebView rendering
|
||||
function buildHtml(content: string, title: string) {
|
||||
return `<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: -apple-system, sans-serif; font-size: 16px; line-height: 1.7;
|
||||
color: #1A1A18; background: #FAFAF8; padding: 0 16px 32px; }
|
||||
h1 { font-size: 22px; font-weight: 700; margin: 20px 0 12px; }
|
||||
h2 { font-size: 18px; font-weight: 700; margin: 16px 0 10px; }
|
||||
h3 { font-size: 16px; font-weight: 600; margin: 14px 0 8px; }
|
||||
p { margin: 0 0 12px; }
|
||||
ul, ol { padding-left: 20px; margin: 0 0 12px; }
|
||||
li { margin-bottom: 4px; }
|
||||
blockquote { border-left: 3px solid #A47148; padding-left: 12px; color: #666; margin: 12px 0; }
|
||||
code { background: #f0ede8; padding: 2px 6px; border-radius: 4px; font-size: 13px; }
|
||||
pre { background: #f0ede8; padding: 12px; border-radius: 8px; overflow: auto; margin: 12px 0; }
|
||||
a { color: #A47148; }
|
||||
img { max-width: 100%; border-radius: 8px; margin: 8px 0; }
|
||||
strong { font-weight: 700; }
|
||||
em { font-style: italic; }
|
||||
</style>
|
||||
</head>
|
||||
<body>${content}</body>
|
||||
</html>`
|
||||
}
|
||||
|
||||
export default function NoteScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>()
|
||||
const [note, setNote] = useState<Note | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
apiFetch(ENDPOINTS.note(id))
|
||||
.then((r) => r.json())
|
||||
.then((data) => setNote(data.note ?? null))
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
|
||||
const handleShare = async () => {
|
||||
if (!note) return
|
||||
await Share.share({
|
||||
title: note.title,
|
||||
message: `${note.title}\nhttps://memento-note.com`,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
{/* Header */}
|
||||
<View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
|
||||
<TouchableOpacity onPress={() => router.back()} className="p-1">
|
||||
<ArrowLeft size={22} color="#1A1A18" />
|
||||
</TouchableOpacity>
|
||||
<Text className="flex-1 text-[15px] font-semibold text-ink" numberOfLines={1}>
|
||||
{note?.title ?? '…'}
|
||||
</Text>
|
||||
<TouchableOpacity onPress={handleShare} className="p-1">
|
||||
<Share2 size={18} color="#8A8A82" />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color="#A47148" size="large" />
|
||||
</View>
|
||||
) : note ? (
|
||||
<WebView
|
||||
source={{ html: buildHtml(note.content, note.title) }}
|
||||
style={{ flex: 1, backgroundColor: '#FAFAF8' }}
|
||||
scrollEnabled
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
) : (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<Text className="text-concrete">Note introuvable.</Text>
|
||||
</View>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
78
memento-mobile/app/notebook/[id].tsx
Normal file
78
memento-mobile/app/notebook/[id].tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl,
|
||||
} from 'react-native'
|
||||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router'
|
||||
import { ArrowLeft } from 'lucide-react-native'
|
||||
import { apiFetch } from '@/lib/api'
|
||||
import { ENDPOINTS } from '@/lib/config'
|
||||
|
||||
interface Note {
|
||||
id: string
|
||||
title: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export default function NotebookScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>()
|
||||
const [notes, setNotes] = useState<Note[]>([])
|
||||
const [notebookName, setNotebookName] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [refreshing, setRefreshing] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
const load = async () => {
|
||||
try {
|
||||
const res = await apiFetch(ENDPOINTS.notes(id))
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setNotes(data.notes ?? [])
|
||||
setNotebookName(data.notebookName ?? '')
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setRefreshing(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [id])
|
||||
|
||||
return (
|
||||
<SafeAreaView className="flex-1 bg-paper">
|
||||
<View className="flex-row items-center gap-3 px-4 py-3 border-b border-border">
|
||||
<TouchableOpacity onPress={() => router.back()} className="p-1">
|
||||
<ArrowLeft size={22} color="#1A1A18" />
|
||||
</TouchableOpacity>
|
||||
<Text className="text-[17px] font-semibold text-ink flex-1">{notebookName || 'Carnet'}</Text>
|
||||
</View>
|
||||
|
||||
{loading ? (
|
||||
<View className="flex-1 items-center justify-center">
|
||||
<ActivityIndicator color="#A47148" />
|
||||
</View>
|
||||
) : (
|
||||
<FlatList
|
||||
data={notes}
|
||||
keyExtractor={(item) => item.id}
|
||||
contentContainerClassName="px-5 pt-4 pb-8"
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
|
||||
renderItem={({ item }) => (
|
||||
<TouchableOpacity
|
||||
onPress={() => router.push(`/note/${item.id}`)}
|
||||
className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
|
||||
>
|
||||
<Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
|
||||
{item.title || 'Sans titre'}
|
||||
</Text>
|
||||
<Text className="text-[12px] text-concrete mt-0.5">
|
||||
{new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
ListEmptyComponent={<Text className="text-concrete text-center mt-12">Carnet vide.</Text>}
|
||||
/>
|
||||
)}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user