design: OrganizeNotebookDialog → modal centré au lieu de slider
Cohérent avec Wizard, Planning, Exercices — tous en modal centré. Scale animation au lieu de slide x. max-h-85vh avec scroll interne.
This commit is contained in:
@@ -100,36 +100,36 @@ export function OrganizeNotebookDialog({
|
|||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
exit={{ opacity: 0 }}
|
exit={{ opacity: 0 }}
|
||||||
className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
|
className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4"
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
/>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, x: slide }}
|
|
||||||
animate={{ opacity: 1, x: 0 }}
|
|
||||||
exit={{ opacity: 0, x: slide }}
|
|
||||||
transition={{ type: 'spring', stiffness: 300, damping: 32 }}
|
|
||||||
className="fixed end-0 top-0 bottom-0 z-50 w-full max-w-md bg-memento-paper dark:bg-zinc-900 border-s border-border shadow-2xl flex flex-col"
|
|
||||||
onClick={e => e.stopPropagation()}
|
|
||||||
>
|
>
|
||||||
{/* Header */}
|
<motion.div
|
||||||
<div className="px-5 py-4 border-b border-border/40 flex items-center justify-between shrink-0">
|
initial={{ opacity: 0, scale: 0.96 }}
|
||||||
<div className="flex items-center gap-2.5">
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
<div className="w-8 h-8 rounded-xl bg-brand-accent/10 flex items-center justify-center">
|
exit={{ opacity: 0, scale: 0.96 }}
|
||||||
<Sparkles size={15} className="text-brand-accent" />
|
transition={{ type: 'spring', stiffness: 300, damping: 28 }}
|
||||||
</div>
|
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"
|
||||||
<div>
|
onClick={e => e.stopPropagation()}
|
||||||
<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-[200px]">{notebookName}</p>
|
{/* 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>
|
</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>
|
</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 */}
|
{/* Content */}
|
||||||
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
|
|
||||||
{/* IDLE */}
|
{/* IDLE */}
|
||||||
|
|||||||
Reference in New Issue
Block a user