723f7ef432
Cohérent avec Wizard, Planning, Exercices — tous en modal centré. Scale animation au lieu de slide x. max-h-85vh avec scroll interne.
323 lines
18 KiB
TypeScript
323 lines
18 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useCallback } from 'react'
|
|
import { motion, AnimatePresence } from 'motion/react'
|
|
import { Sparkles, X, CheckCircle2, FolderPlus, Folder, ChevronDown, ChevronUp, Loader2, AlertCircle, Check, ArrowRight } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import {
|
|
analyzeNotebookForOrganization,
|
|
executeNotebookOrganization,
|
|
type OrganizationGroup,
|
|
type OrganizationPlan,
|
|
} from '@/app/actions/organize-notebook'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface OrganizeNotebookDialogProps {
|
|
open: boolean
|
|
onOpenChange: (open: boolean) => void
|
|
notebookId: string
|
|
notebookName: string
|
|
onDone?: () => void
|
|
}
|
|
|
|
type Step = 'idle' | 'analyzing' | 'preview' | 'executing' | 'done'
|
|
|
|
export function OrganizeNotebookDialog({
|
|
open,
|
|
onOpenChange,
|
|
notebookId,
|
|
notebookName,
|
|
onDone,
|
|
}: OrganizeNotebookDialogProps) {
|
|
const { t, language } = useLanguage()
|
|
const slide = language === 'fa' || language === 'ar' ? -480 : 480
|
|
const [step, setStep] = useState<Step>('idle')
|
|
const [plan, setPlan] = useState<OrganizationPlan | null>(null)
|
|
const [editableGroups, setEditableGroups] = useState<OrganizationGroup[]>([])
|
|
const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set())
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [result, setResult] = useState<{ created: number; moved: number } | null>(null)
|
|
|
|
const handleAnalyze = useCallback(async () => {
|
|
setStep('analyzing'); setError(null); setPlan(null)
|
|
const res = await analyzeNotebookForOrganization(notebookId)
|
|
if (!res.success || !res.plan) { setError(res.error ?? 'Erreur'); setStep('idle'); return }
|
|
setPlan(res.plan)
|
|
setEditableGroups(res.plan.groups.map(g => ({ ...g, notes: [...g.notes] })))
|
|
setExpandedGroups(new Set(res.plan.groups.map((_, i) => i)))
|
|
setStep('preview')
|
|
}, [notebookId])
|
|
|
|
const handleRenameGroup = (idx: number, name: string) => {
|
|
setEditableGroups(prev => prev.map((g, i) => i === idx ? { ...g, name } : g))
|
|
}
|
|
const handleToggleNote = (groupIdx: number, noteId: string) => {
|
|
setEditableGroups(prev => prev.map((g, i) => {
|
|
if (i !== groupIdx) return g
|
|
const has = g.notes.some(n => n.id === noteId)
|
|
return { ...g, notes: has ? g.notes.filter(n => n.id !== noteId) : g.notes }
|
|
}))
|
|
}
|
|
const handleRemoveGroup = (idx: number) => {
|
|
setEditableGroups(prev => prev.filter((_, i) => i !== idx))
|
|
}
|
|
const toggleExpand = (idx: number) => {
|
|
setExpandedGroups(prev => { const n = new Set(prev); n.has(idx) ? n.delete(idx) : n.add(idx); return n })
|
|
}
|
|
|
|
const handleExecute = useCallback(async () => {
|
|
if (!plan) return
|
|
setStep('executing')
|
|
const finalPlan: OrganizationPlan = {
|
|
notebookId: plan.notebookId,
|
|
groups: editableGroups.filter(g => g.notes.length > 0 && g.name.trim()),
|
|
}
|
|
const res = await executeNotebookOrganization(finalPlan)
|
|
if (!res.success) { setError(res.error ?? 'Erreur'); setStep('preview'); return }
|
|
setResult({ created: res.created, moved: res.moved })
|
|
setStep('done')
|
|
toast.success(t('organizeNotebook.toastSuccess', { created: res.created, moved: res.moved }))
|
|
onDone?.()
|
|
}, [plan, editableGroups, onDone, t])
|
|
|
|
const handleClose = () => {
|
|
if (step === 'analyzing' || step === 'executing') return
|
|
onOpenChange(false)
|
|
setTimeout(() => { setStep('idle'); setPlan(null); setEditableGroups([]); setError(null); setResult(null) }, 300)
|
|
}
|
|
|
|
if (!open) return null
|
|
|
|
const totalNotes = editableGroups.reduce((acc, g) => acc + g.notes.length, 0)
|
|
const newSubNbs = editableGroups.filter(g => g.isNew).length
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{open && (
|
|
<>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4"
|
|
onClick={handleClose}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.96 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.96 }}
|
|
transition={{ type: 'spring', stiffness: 300, damping: 28 }}
|
|
className="w-full max-w-lg bg-memento-paper dark:bg-zinc-900 rounded-2xl border border-border shadow-2xl flex flex-col max-h-[85vh] overflow-hidden"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className="px-5 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
|
|
<div className="flex items-center gap-2.5">
|
|
<div className="w-8 h-8 rounded-xl bg-brand-accent/10 flex items-center justify-center">
|
|
<Sparkles size={15} className="text-brand-accent" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-sm font-semibold text-ink dark:text-dark-ink font-memento-serif">{t('organizeNotebook.title')}</h2>
|
|
<p className="text-[10px] text-concrete truncate max-w-[240px]">{notebookName}</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={handleClose} disabled={step === 'analyzing' || step === 'executing'}
|
|
className="w-7 h-7 rounded-lg flex items-center justify-center text-concrete hover:text-ink hover:bg-foreground/5 transition-colors disabled:opacity-30">
|
|
<X size={15} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
|
<AnimatePresence mode="wait">
|
|
|
|
{/* IDLE */}
|
|
{step === 'idle' && (
|
|
<motion.div key="idle" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -12 }}
|
|
className="p-5 space-y-4">
|
|
{error && (
|
|
<div className="flex items-start gap-2.5 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50">
|
|
<AlertCircle size={14} className="text-red-500 mt-0.5 shrink-0" />
|
|
<p className="text-xs text-red-600 dark:text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
<div className="space-y-3">
|
|
<p className="text-[13px] text-ink dark:text-dark-ink leading-relaxed">{t('organizeNotebook.intro')}</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
{[{ icon: FolderPlus, text: t('organizeNotebook.bulletThemes') },
|
|
{ icon: Folder, text: t('organizeNotebook.bulletSubfolders') },
|
|
{ icon: Check, text: t('organizeNotebook.bulletPreview') }].map((item, i) => (
|
|
<div key={i} className="flex items-center gap-3 p-2.5 rounded-xl bg-foreground/[0.02] border border-border/30">
|
|
<div className="w-7 h-7 rounded-lg bg-brand-accent/10 flex items-center justify-center shrink-0">
|
|
<item.icon size={13} className="text-brand-accent" />
|
|
</div>
|
|
<span className="text-[12px] text-concrete leading-tight">{item.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* ANALYZING */}
|
|
{step === 'analyzing' && (
|
|
<motion.div key="analyzing" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
|
|
className="flex flex-col items-center justify-center py-20 gap-5">
|
|
<div className="relative">
|
|
<div className="w-14 h-14 rounded-2xl bg-brand-accent/10 flex items-center justify-center">
|
|
<Sparkles size={24} className="text-brand-accent" />
|
|
</div>
|
|
<motion.div animate={{ rotate: 360 }} transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
|
|
className="absolute -inset-1.5 rounded-2xl border-2 border-transparent border-t-brand-accent/40" />
|
|
</div>
|
|
<div className="text-center space-y-1">
|
|
<p className="text-[13px] font-medium text-ink dark:text-dark-ink">{t('organizeNotebook.analyzingTitle')}</p>
|
|
<p className="text-[11px] text-concrete">{t('organizeNotebook.analyzingSubtitle')}</p>
|
|
</div>
|
|
<div className="flex gap-1">
|
|
{[0, 1, 2].map(i => (
|
|
<motion.div key={i} animate={{ opacity: [0.3, 1, 0.3] }} transition={{ duration: 1.2, repeat: Infinity, delay: i * 0.2 }}
|
|
className="w-1.5 h-1.5 rounded-full bg-brand-accent" />
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* PREVIEW */}
|
|
{step === 'preview' && (
|
|
<motion.div key="preview" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}
|
|
className="p-4 space-y-3">
|
|
<div className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl bg-brand-accent/[0.06] border border-brand-accent/15">
|
|
<Sparkles size={12} className="text-brand-accent shrink-0" />
|
|
<p className="text-[11px] text-brand-accent font-medium leading-relaxed">
|
|
{t('organizeNotebook.previewSummary', { groups: editableGroups.length, notes: totalNotes, newSubs: newSubNbs })}
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="flex items-start gap-2.5 p-3 rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800/50">
|
|
<AlertCircle size={14} className="text-red-500 mt-0.5 shrink-0" />
|
|
<p className="text-xs text-red-600 dark:text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{editableGroups.map((group, idx) => (
|
|
<motion.div key={idx} layout initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: idx * 0.05 }}
|
|
className="rounded-xl border border-border/40 bg-card overflow-hidden hover:border-brand-accent/20 transition-colors">
|
|
<div className="flex items-center gap-2 px-3 py-2.5">
|
|
<div className="w-7 h-7 rounded-lg bg-brand-accent/10 flex items-center justify-center shrink-0">
|
|
{group.isNew ? <FolderPlus size={13} className="text-brand-accent" /> : <Folder size={13} className="text-concrete" />}
|
|
</div>
|
|
<input value={group.name} onChange={e => handleRenameGroup(idx, e.target.value)}
|
|
className="flex-1 bg-transparent text-[13px] font-semibold text-ink dark:text-dark-ink outline-none focus:text-brand-accent transition-colors min-w-0" />
|
|
{group.isNew && (
|
|
<span className="px-1.5 py-0.5 rounded-md text-[9px] font-bold uppercase tracking-wider bg-brand-accent/10 text-brand-accent shrink-0">
|
|
{t('organizeNotebook.badgeNew')}
|
|
</span>
|
|
)}
|
|
<div className="flex items-center gap-0.5 shrink-0">
|
|
<button onClick={() => toggleExpand(idx)}
|
|
className="w-6 h-6 rounded-md flex items-center justify-center text-concrete hover:text-ink hover:bg-foreground/5 transition-colors">
|
|
{expandedGroups.has(idx) ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
|
|
</button>
|
|
<button onClick={() => handleRemoveGroup(idx)}
|
|
className="w-6 h-6 rounded-md flex items-center justify-center text-concrete hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors">
|
|
<X size={13} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<AnimatePresence>
|
|
{expandedGroups.has(idx) && (
|
|
<motion.div initial={{ height: 0 }} animate={{ height: 'auto' }} exit={{ height: 0 }} className="overflow-hidden">
|
|
<div className="border-t border-border/30 px-3 pb-2 pt-1.5 space-y-0.5">
|
|
{group.notes.map(note => (
|
|
<div key={note.id} onClick={() => handleToggleNote(idx, note.id)}
|
|
className="flex items-center gap-2 py-1.5 rounded-lg px-2 hover:bg-foreground/[0.03] transition-colors group cursor-pointer">
|
|
<div className="w-4 h-4 rounded border border-border group-hover:border-brand-accent/50 flex items-center justify-center shrink-0 transition-colors">
|
|
<Check size={10} className="text-brand-accent" />
|
|
</div>
|
|
<span className="text-[11px] text-concrete truncate group-hover:text-ink transition-colors">{note.title || t('organizeNotebook.untitledNote')}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
{!expandedGroups.has(idx) && (
|
|
<div className="px-4 pb-2 text-[10px] text-concrete/60">{t('organizeNotebook.notesInGroup', { count: group.notes.length })}</div>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* EXECUTING */}
|
|
{step === 'executing' && (
|
|
<motion.div key="executing" initial={{ opacity: 0 }} animate={{ opacity: 1 }}
|
|
className="flex flex-col items-center justify-center py-20 gap-4">
|
|
<Loader2 size={28} className="text-brand-accent animate-spin" />
|
|
<div className="text-center space-y-1">
|
|
<p className="text-[13px] font-medium text-ink dark:text-dark-ink">{t('organizeNotebook.executingTitle')}</p>
|
|
<p className="text-[11px] text-concrete">{t('organizeNotebook.executingSubtitle')}</p>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* DONE */}
|
|
{step === 'done' && (
|
|
<motion.div key="done" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }}
|
|
className="flex flex-col items-center justify-center py-20 gap-5">
|
|
<div className="w-14 h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center">
|
|
<CheckCircle2 size={28} className="text-emerald-500" />
|
|
</div>
|
|
<div className="text-center space-y-1.5">
|
|
<p className="text-[14px] font-semibold text-ink dark:text-dark-ink">{t('organizeNotebook.doneTitle')}</p>
|
|
{result && <p className="text-[12px] text-concrete">{t('organizeNotebook.doneStats', { created: result.created, moved: result.moved })}</p>}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-4 py-3.5 border-t border-border/40 shrink-0">
|
|
{step === 'idle' && (
|
|
<button onClick={handleAnalyze}
|
|
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-brand-accent text-white text-[13px] font-medium hover:bg-brand-accent/90 transition-colors">
|
|
<Sparkles size={14} />
|
|
{t('organizeNotebook.analyzeButton')}
|
|
</button>
|
|
)}
|
|
{step === 'preview' && (
|
|
<div className="flex gap-2">
|
|
<button onClick={() => { setStep('idle'); setError(null) }}
|
|
className="flex-1 px-4 py-2.5 rounded-xl border border-border/60 text-[13px] font-medium text-concrete hover:text-ink dark:hover:text-dark-ink hover:border-border transition-colors">
|
|
{t('organizeNotebook.restart')}
|
|
</button>
|
|
<button onClick={handleExecute}
|
|
disabled={editableGroups.filter(g => g.notes.length > 0).length === 0}
|
|
className={cn('flex-1 flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-xl text-[13px] font-medium transition-all',
|
|
editableGroups.filter(g => g.notes.length > 0).length > 0
|
|
? 'bg-brand-accent text-white hover:bg-brand-accent/90'
|
|
: 'bg-foreground/10 text-concrete cursor-not-allowed')}>
|
|
<ArrowRight size={14} />
|
|
{t('organizeNotebook.confirm')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
{step === 'done' && (
|
|
<button onClick={handleClose}
|
|
className="w-full px-4 py-2.5 rounded-xl border border-border/60 text-[13px] font-medium text-concrete hover:text-ink dark:hover:text-dark-ink hover:border-border transition-colors">
|
|
{t('organizeNotebook.closeButton')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|