96e7902f01
Publication IA: - 4 templates (magazine, brief, essay, simple) avec CSS riche - Rewrite IA (article/exercises/tutorial/reference/mixed) - Modération avec timeout 12s + fallback safe - Quotas publish_enhance par tier (basic=2, pro=15, business=100) - Détection contenu stale (hash) - Migration DB publishedContent/publishedTemplate/publishedSourceHash Fixes: - cheerio v1.2: Element -> AnyNode (domhandler), decodeEntities cast - _isShared ajouté au type Note (champ virtuel serveur) - callout colors PDF export: extraction fonction pure testable - admin/published: guard note.userId null - Cmd+S fonctionne en mode dialog (pas seulement fullPage) i18n: - 23 clés publish* traduites dans les 15 locales - Extension Web Clipper: 13 locales mise à jour Tests: - callout-colors.test.ts (6 tests) - note-visible-in-view.test.ts (5 tests) - entitlements.test.ts + byok-entitlements.test.ts: mock usageLog + unstubAllEnvs - 199/199 tests passent Tracker: user-stories.md sync avec sprint-status.yaml
349 lines
14 KiB
TypeScript
349 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Download, Upload, Trash2, Loader2, RefreshCw, Sparkles, Database, ShieldAlert, FolderArchive } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { useSession } from 'next-auth/react'
|
|
import { DeleteAccountDialog } from '@/components/legal/delete-account-dialog'
|
|
import { useRouter } from 'next/navigation'
|
|
import { motion } from 'motion/react'
|
|
import { cn } from '@/lib/utils'
|
|
import { SettingsHelpBox } from '@/components/settings/settings-help-box'
|
|
|
|
export default function DataSettingsPage() {
|
|
const { t } = useLanguage()
|
|
const router = useRouter()
|
|
const { data: session } = useSession()
|
|
const [deleteOpen, setDeleteOpen] = useState(false)
|
|
const [isExporting, setIsExporting] = useState(false)
|
|
const [isImporting, setIsImporting] = useState(false)
|
|
const [isDeleting, setIsDeleting] = useState(false)
|
|
const [isReindexing, setIsReindexing] = useState(false)
|
|
const [isCleaningUp, setIsCleaningUp] = useState(false)
|
|
const [isZipExporting, setIsZipExporting] = useState(false)
|
|
|
|
const handleZipExport = async () => {
|
|
setIsZipExporting(true)
|
|
try {
|
|
const response = await fetch('/api/user/export')
|
|
if (!response.ok) {
|
|
let message = t('dataManagement.zipExport.failed')
|
|
try {
|
|
const body = (await response.json()) as { error?: string }
|
|
if (body.error) message = body.error
|
|
} catch {
|
|
/* non-JSON error body */
|
|
}
|
|
toast.error(message)
|
|
return
|
|
}
|
|
const blob = await response.blob()
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `memento-workspace-export-${new Date().toISOString().split('T')[0]}.zip`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
window.URL.revokeObjectURL(url)
|
|
toast.success(t('dataManagement.zipExport.success'))
|
|
} catch {
|
|
toast.error(t('dataManagement.zipExport.failed'))
|
|
} finally {
|
|
setIsZipExporting(false)
|
|
}
|
|
}
|
|
|
|
const handleExport = async () => {
|
|
setIsExporting(true)
|
|
try {
|
|
const response = await fetch('/api/notes/export')
|
|
if (response.ok) {
|
|
const blob = await response.blob()
|
|
const url = window.URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = `memento-export-${new Date().toISOString().split('T')[0]}.json`
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
document.body.removeChild(a)
|
|
window.URL.revokeObjectURL(url)
|
|
toast.success(t('dataManagement.export.success'))
|
|
} else {
|
|
throw new Error()
|
|
}
|
|
} catch {
|
|
toast.error(t('dataManagement.export.failed'))
|
|
} finally {
|
|
setIsExporting(false)
|
|
}
|
|
}
|
|
|
|
const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0]
|
|
if (!file) return
|
|
setIsImporting(true)
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('file', file)
|
|
const response = await fetch('/api/notes/import', { method: 'POST', body: formData })
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
toast.success(t('dataManagement.import.success', { count: result.count }))
|
|
router.refresh()
|
|
} else {
|
|
const error = await response.json()
|
|
throw new Error(error.error || 'Import failed')
|
|
}
|
|
} catch (err: any) {
|
|
toast.error(err.message || t('dataManagement.import.failed'))
|
|
} finally {
|
|
setIsImporting(false)
|
|
event.target.value = ''
|
|
}
|
|
}
|
|
|
|
const handleReindex = async () => {
|
|
setIsReindexing(true)
|
|
try {
|
|
const response = await fetch('/api/notes/reindex', { method: 'POST' })
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
toast.success(t('dataManagement.indexing.success', { count: result.count }))
|
|
} else {
|
|
throw new Error()
|
|
}
|
|
} catch {
|
|
toast.error(t('dataManagement.indexing.failed'))
|
|
} finally {
|
|
setIsReindexing(false)
|
|
}
|
|
}
|
|
|
|
const handleCleanup = async () => {
|
|
setIsCleaningUp(true)
|
|
try {
|
|
const response = await fetch('/api/notes/cleanup', { method: 'POST' })
|
|
if (response.ok) {
|
|
const result = await response.json()
|
|
toast.success(t('dataManagement.cleanup.success', { count: result.deletedLabels }))
|
|
} else {
|
|
throw new Error()
|
|
}
|
|
} catch {
|
|
toast.error(t('dataManagement.cleanup.failed'))
|
|
} finally {
|
|
setIsCleaningUp(false)
|
|
}
|
|
}
|
|
|
|
const handleDeleteAll = async () => {
|
|
if (!confirm(t('dataManagement.delete.confirm'))) return
|
|
setIsDeleting(true)
|
|
try {
|
|
const response = await fetch('/api/notes/delete-all', { method: 'POST' })
|
|
if (response.ok) {
|
|
toast.success(t('dataManagement.delete.success'))
|
|
router.refresh()
|
|
} else {
|
|
throw new Error()
|
|
}
|
|
} catch {
|
|
toast.error(t('dataManagement.delete.failed'))
|
|
} finally {
|
|
setIsDeleting(false)
|
|
}
|
|
}
|
|
|
|
const cards = [
|
|
{
|
|
icon: Download,
|
|
iconColor: 'text-zinc-600 dark:text-zinc-400',
|
|
iconBg: 'bg-zinc-500/10 dark:bg-zinc-500/20',
|
|
title: t('dataManagement.export.title'),
|
|
description: t('dataManagement.export.description'),
|
|
loading: isExporting,
|
|
loadingText: t('dataManagement.exporting'),
|
|
buttonText: t('dataManagement.export.button'),
|
|
onAction: handleExport,
|
|
btnClass: 'bg-ink text-paper shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95',
|
|
},
|
|
{
|
|
icon: FolderArchive,
|
|
iconColor: 'text-amber-600 dark:text-amber-400',
|
|
iconBg: 'bg-amber-500/10 dark:bg-amber-500/20',
|
|
title: t('dataManagement.zipExport.title'),
|
|
description: t('dataManagement.zipExport.description'),
|
|
loading: isZipExporting,
|
|
loadingText: t('dataManagement.zipExporting'),
|
|
buttonText: t('dataManagement.zipExport.button'),
|
|
onAction: handleZipExport,
|
|
btnClass: 'bg-ink text-paper shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95',
|
|
},
|
|
{
|
|
icon: Upload,
|
|
iconColor: 'text-primary/80 dark:text-primary',
|
|
iconBg: 'bg-primary/10 dark:bg-primary/20',
|
|
title: t('dataManagement.import.title'),
|
|
description: t('dataManagement.import.description'),
|
|
loading: isImporting,
|
|
loadingText: t('dataManagement.importing'),
|
|
buttonText: t('dataManagement.import.button'),
|
|
onAction: () => document.getElementById('import-file')?.click(),
|
|
btnClass: 'bg-white dark:bg-white/10 text-ink dark:text-paper border border-border hover:scale-[1.02] active:scale-95',
|
|
fileInput: true,
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
iconColor: 'text-amber-600 dark:text-amber-400',
|
|
iconBg: 'bg-amber-500/10 dark:bg-amber-500/20',
|
|
title: t('dataManagement.indexing.title'),
|
|
description: t('dataManagement.indexing.description'),
|
|
loading: isReindexing,
|
|
loadingText: t('dataManagement.exporting'),
|
|
buttonText: t('dataManagement.indexing.button'),
|
|
onAction: handleReindex,
|
|
btnClass: 'bg-white dark:bg-white/10 text-ink dark:text-paper border border-border hover:scale-[1.02] active:scale-95',
|
|
},
|
|
{
|
|
icon: Database,
|
|
iconColor: 'text-purple-600 dark:text-purple-400',
|
|
iconBg: 'bg-purple-500/10 dark:bg-purple-500/20',
|
|
title: t('dataManagement.cleanup.title'),
|
|
description: t('dataManagement.cleanup.description'),
|
|
loading: isCleaningUp,
|
|
loadingText: t('dataManagement.exporting'),
|
|
buttonText: t('dataManagement.cleanup.button'),
|
|
onAction: handleCleanup,
|
|
btnClass: 'bg-white dark:bg-white/10 text-ink dark:text-paper border border-border hover:scale-[1.02] active:scale-95',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="space-y-12"
|
|
>
|
|
<SettingsHelpBox
|
|
title="Import / Export — comment ça fonctionne ?"
|
|
steps={[
|
|
{ text: 'Export ZIP : télécharge toutes vos notes en fichiers Markdown + images + métadonnées. Format universel, lisible partout.' },
|
|
{ text: 'Export JSON : version structurée de vos données — utile pour migrer ou sauvegarder programmatiquement.' },
|
|
{ text: 'Import Markdown : importez un fichier .md existant directement dans Memento en tant que nouvelle note.' },
|
|
{ text: 'Ré-indexer : si la recherche sémantique ne trouve pas certaines notes, relancez l\'indexation pour recalculer les embeddings.' },
|
|
{ icon: '⚠️', text: 'Supprimer le compte efface définitivement toutes vos données. Pensez à exporter d\'abord.' },
|
|
]}
|
|
/>
|
|
|
|
<h3 className="text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">
|
|
{t('dataManagement.toolsDescription')}
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{cards.map((card) => (
|
|
<div
|
|
key={card.title}
|
|
className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 flex flex-col justify-between group hover:shadow-xl hover:shadow-black/5 transition-all duration-300"
|
|
>
|
|
<div className="space-y-6">
|
|
<div className={cn('w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 border border-border/50', card.iconBg, card.iconColor)}>
|
|
<card.icon className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-ink">{card.title}</h4>
|
|
<p className="text-[11px] text-concrete leading-relaxed mt-1.5">
|
|
{card.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{card.fileInput && (
|
|
<input type="file" accept=".json" onChange={handleImport} disabled={isImporting} className="hidden" id="import-file" />
|
|
)}
|
|
<button
|
|
onClick={card.onAction}
|
|
disabled={card.loading}
|
|
className={cn(
|
|
'mt-8 w-full py-3.5 rounded-2xl text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-300',
|
|
card.btnClass,
|
|
'disabled:opacity-60 disabled:pointer-events-none'
|
|
)}
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
{card.loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <card.icon className="h-4 w-4" />}
|
|
{card.loading ? card.loadingText : card.buttonText}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="bg-rose-50/50 dark:bg-rose-500/5 rounded-2xl border border-rose-200/50 dark:border-rose-500/20 p-8 mt-12">
|
|
<div className="flex items-center gap-5 mb-8">
|
|
<div className="p-3 bg-rose-500/10 rounded-2xl text-rose-600 dark:text-rose-400 border border-rose-500/20">
|
|
<Trash2 size={20} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-rose-600 dark:text-rose-400">{t('dataManagement.dangerZone')}</h4>
|
|
<p className="text-[11px] text-concrete mt-0.5">{t('dataManagement.dangerZoneDescription')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-6 bg-white/60 dark:bg-black/20 rounded-2xl border border-rose-200/30 dark:border-rose-500/10 gap-4">
|
|
<div className="space-y-1">
|
|
<p className="text-[13px] font-bold text-ink">{t('dataManagement.delete.title')}</p>
|
|
<p className="text-[11px] text-concrete">{t('dataManagement.delete.description')}</p>
|
|
</div>
|
|
<button
|
|
onClick={handleDeleteAll}
|
|
disabled={isDeleting}
|
|
className="shrink-0 px-6 py-3 rounded-2xl bg-rose-600 text-white text-[10px] font-bold uppercase tracking-[0.2em] shadow-xl shadow-rose-600/20 hover:scale-[1.02] active:scale-95 transition-all duration-300 disabled:opacity-60 disabled:pointer-events-none"
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
{isDeleting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Trash2 className="h-4 w-4" />}
|
|
{isDeleting ? t('dataManagement.deleting') : t('dataManagement.delete.button')}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-rose-50/50 dark:bg-rose-500/5 rounded-2xl border border-rose-200/50 dark:border-rose-500/20 p-8 mt-6">
|
|
<div className="flex items-center gap-5 mb-8">
|
|
<div className="p-3 bg-rose-500/10 rounded-2xl text-rose-600 dark:text-rose-400 border border-rose-500/20">
|
|
<ShieldAlert size={20} />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-sm font-bold text-rose-600 dark:text-rose-400">{t('account.deleteAccount.sectionTitle')}</h4>
|
|
<p className="text-[11px] text-concrete mt-0.5">{t('account.deleteAccount.sectionDescription')}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-6 bg-white/60 dark:bg-black/20 rounded-2xl border border-rose-200/30 dark:border-rose-500/10 gap-4">
|
|
<div className="space-y-1">
|
|
<p className="text-[13px] font-bold text-ink">{t('account.deleteAccount.dialogTitle')}</p>
|
|
<p className="text-[11px] text-concrete">{t('account.deleteAccount.sectionDescription')}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setDeleteOpen(true)}
|
|
className="shrink-0 px-6 py-3 rounded-2xl bg-rose-600 text-white text-[10px] font-bold uppercase tracking-[0.2em] shadow-xl shadow-rose-600/20 hover:scale-[1.02] active:scale-95 transition-all duration-300"
|
|
>
|
|
<div className="flex items-center justify-center gap-2">
|
|
<ShieldAlert className="h-4 w-4" />
|
|
{t('account.deleteAccount.buttonLabel')}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{session?.user?.email && (
|
|
<DeleteAccountDialog
|
|
userEmail={session.user.email}
|
|
open={deleteOpen}
|
|
onOpenChange={setDeleteOpen}
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
)
|
|
}
|