aeedb2846f
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>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { HelpCircle, ChevronDown, ChevronUp, ExternalLink } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface HelpStep {
|
|
icon?: string
|
|
text: string
|
|
link?: { label: string; href: string }
|
|
}
|
|
|
|
interface SettingsHelpBoxProps {
|
|
title: string
|
|
steps: HelpStep[]
|
|
defaultOpen?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function SettingsHelpBox({ title, steps, defaultOpen = false, className }: SettingsHelpBoxProps) {
|
|
const [open, setOpen] = useState(defaultOpen)
|
|
|
|
return (
|
|
<div className={cn('rounded-xl border border-border/50 bg-border/5 overflow-hidden', className)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-border/10 transition-colors"
|
|
>
|
|
<HelpCircle size={14} className="text-brand-accent shrink-0" />
|
|
<span className="text-[12px] font-semibold text-ink flex-1">{title}</span>
|
|
{open ? (
|
|
<ChevronUp size={13} className="text-concrete shrink-0" />
|
|
) : (
|
|
<ChevronDown size={13} className="text-concrete shrink-0" />
|
|
)}
|
|
</button>
|
|
|
|
{open && (
|
|
<ol className="px-4 pb-4 space-y-2.5 border-t border-border/30 pt-3">
|
|
{steps.map((step, i) => (
|
|
<li key={i} className="flex items-start gap-2.5">
|
|
<span className="w-5 h-5 rounded-full bg-brand-accent/10 text-brand-accent text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">
|
|
{step.icon ?? i + 1}
|
|
</span>
|
|
<span className="text-[12px] text-concrete leading-relaxed">
|
|
{step.text}
|
|
{step.link && (
|
|
<>
|
|
{' '}
|
|
<a
|
|
href={step.link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-0.5 text-brand-accent underline underline-offset-2 font-medium hover:opacity-80"
|
|
>
|
|
{step.link.label}
|
|
<ExternalLink size={10} />
|
|
</a>
|
|
</>
|
|
)}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|