feat: add AI-powered notebook organization with preview dialog

memento-note/components/home-client.tsx

@@ -42,6 +42,10 @@ const NotebookSummaryDialog = dynamic(
   () => import('@/components/notebook-summary-dialog').then(m => ({ default: m.NotebookSummaryDialog })),
   { ssr: false }
 )
+const OrganizeNotebookDialog = dynamic(
+  () => import('@/components/organize-notebook-dialog').then(m => ({ default: m.OrganizeNotebookDialog })),
+  { ssr: false }
+)
 
 type InitialSettings = {
   showRecentNotes: boolean
@@ -88,6 +92,7 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
   const [autoLabelOpen, setAutoLabelOpen] = useState(false)
   const [summaryDialogOpen, setSummaryDialogOpen] = useState(false)
   const [createSubNotebookOpen, setCreateSubNotebookOpen] = useState(false)
+  const [organizeNotebookOpen, setOrganizeNotebookOpen] = useState(false)
   const [selectedTagIds, setSelectedTagIds] = useState<string[]>([])
   const [isTagsExpanded, setIsTagsExpanded] = useState(false)
   const [tagSearchQuery, setTagSearchQuery] = useState('')
@@ -591,6 +596,17 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
                     <span>{t('notes.reorganize') || 'Réorganiser les notes'}</span>
                   </button>
                 )}
+
+                {currentNotebook && initialSettings.aiAssistantEnabled && (
+                  <button
+                    onClick={() => setOrganizeNotebookOpen(true)}
+                    className="flex items-center gap-2 text-[13px] text-blueprint font-medium hover:opacity-70 transition-opacity"
+                    title="Organiser ce carnet avec l'IA"
+                  >
+                    <Sparkles size={16} />
+                    <span>Organiser</span>
+                  </button>
+                )}
               </div>
               <div className="flex items-center gap-6">
                 {searchParams.get('notebook') && (
@@ -804,6 +820,15 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
           parentNotebookId={searchParams.get('notebook')}
         />
       )}
+      {currentNotebook && (
+        <OrganizeNotebookDialog
+          open={organizeNotebookOpen}
+          onOpenChange={setOrganizeNotebookOpen}
+          notebookId={currentNotebook.id}
+          notebookName={currentNotebook.name}
+          onDone={() => router.refresh()}
+        />
+      )}
     </div>
   )
 }

memento-note/components/organize-notebook-dialog.tsx

@@ -0,0 +1,444 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { Sparkles, X, CheckCircle2, FolderPlus, Folder, ChevronDown, ChevronUp, Loader2, AlertCircle, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import {
+  analyzeNotebookForOrganization,
+  executeNotebookOrganization,
+  type OrganizationGroup,
+  type OrganizationPlan,
+} from '@/app/actions/organize-notebook'
+import { toast } from 'sonner'
+
+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 [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 inconnue')
+      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 next = new Set(prev)
+      next.has(idx) ? next.delete(idx) : next.add(idx)
+      return next
+    })
+  }
+
+  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 inconnue')
+      setStep('preview')
+      return
+    }
+
+    setResult({ created: res.created, moved: res.moved })
+    setStep('done')
+    toast.success(`Carnet organisé — ${res.created} sous-carnet(s) créé(s), ${res.moved} note(s) déplacée(s)`)
+    onDone?.()
+  }, [plan, editableGroups, onDone])
+
+  const handleClose = () => {
+    if (step === 'analyzing' || step === 'executing') return
+    onOpenChange(false)
+    // Reset after close animation
+    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 && (
+        <>
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-ink/30 backdrop-blur-sm"
+            onClick={handleClose}
+          />
+
+          {/* Panel */}
+          <motion.div
+            initial={{ opacity: 0, x: 60 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 60 }}
+            transition={{ type: 'spring', stiffness: 280, damping: 30 }}
+            className="fixed right-0 top-0 bottom-0 z-50 w-[460px] bg-card border-l border-border shadow-2xl flex flex-col"
+            onClick={e => e.stopPropagation()}
+          >
+            {/* Header */}
+            <div className="px-6 py-5 border-b border-border/60 flex items-center justify-between shrink-0">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 rounded-lg bg-blueprint/10 flex items-center justify-center">
+                  <Sparkles size={16} className="text-blueprint" />
+                </div>
+                <div>
+                  <h2 className="text-[13px] font-semibold text-ink">Organiser le carnet</h2>
+                  <p className="text-[11px] text-muted-ink truncate max-w-[240px]">{notebookName}</p>
+                </div>
+              </div>
+              <button
+                onClick={handleClose}
+                disabled={step === 'analyzing' || step === 'executing'}
+                className="w-7 h-7 rounded-md flex items-center justify-center text-muted-ink hover:text-ink hover:bg-foreground/5 transition-colors disabled:opacity-30"
+              >
+                <X size={14} />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-y-auto">
+              <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-6 space-y-5"
+                  >
+                    {error && (
+                      <div className="flex items-start gap-3 p-3 rounded-xl bg-rose-50 dark:bg-rose-950/30 border border-rose-200 dark:border-rose-800/50">
+                        <AlertCircle size={14} className="text-rose-500 mt-0.5 shrink-0" />
+                        <p className="text-[12px] text-rose-600 dark:text-rose-400">{error}</p>
+                      </div>
+                    )}
+                    <div className="space-y-3">
+                      <p className="text-[13px] text-ink leading-relaxed">
+                        L'IA va analyser les notes de ce carnet et vous proposer un plan de réorganisation en sous-carnets thématiques.
+                      </p>
+                      <ul className="space-y-2">
+                        {[
+                          'Regroupement par sujet ou thème',
+                          'Création de sous-carnets manquants',
+                          'Aperçu complet avant modification',
+                        ].map(item => (
+                          <li key={item} className="flex items-center gap-2 text-[12px] text-muted-ink">
+                            <div className="w-1.5 h-1.5 rounded-full bg-blueprint shrink-0" />
+                            {item}
+                          </li>
+                        ))}
+                      </ul>
+                    </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 p-12 gap-6 min-h-[300px]"
+                  >
+                    <div className="relative">
+                      <div className="w-16 h-16 rounded-2xl bg-blueprint/10 flex items-center justify-center">
+                        <Sparkles size={28} className="text-blueprint" />
+                      </div>
+                      <motion.div
+                        animate={{ rotate: 360 }}
+                        transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
+                        className="absolute -inset-2 rounded-2xl border-2 border-transparent border-t-blueprint/40"
+                      />
+                    </div>
+                    <div className="text-center space-y-1.5">
+                      <p className="text-[14px] font-medium text-ink">Analyse en cours…</p>
+                      <p className="text-[12px] text-muted-ink">L'IA lit vos notes et identifie les thèmes</p>
+                    </div>
+                    <div className="flex gap-1.5">
+                      {[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-blueprint"
+                        />
+                      ))}
+                    </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-5 space-y-4"
+                  >
+                    {/* Summary bar */}
+                    <div className="flex items-center gap-3 p-3 rounded-xl bg-blueprint/5 border border-blueprint/20">
+                      <Sparkles size={12} className="text-blueprint shrink-0" />
+                      <p className="text-[11px] text-blueprint font-medium">
+                        {editableGroups.length} groupe(s) · {totalNotes} note(s) · {newSubNbs} nouveau(x) sous-carnet(s)
+                      </p>
+                    </div>
+
+                    {error && (
+                      <div className="flex items-start gap-3 p-3 rounded-xl bg-rose-50 dark:bg-rose-950/30 border border-rose-200 dark:border-rose-800/50">
+                        <AlertCircle size={14} className="text-rose-500 mt-0.5 shrink-0" />
+                        <p className="text-[12px] text-rose-600 dark:text-rose-400">{error}</p>
+                      </div>
+                    )}
+
+                    {/* Groups */}
+                    <div className="space-y-3">
+                      {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 bg-background overflow-hidden"
+                        >
+                          {/* Group header */}
+                          <div className="flex items-center gap-2 px-3 py-2.5">
+                            <div className="w-6 h-6 rounded-md flex items-center justify-center shrink-0">
+                              {group.isNew
+                                ? <FolderPlus size={13} className="text-blueprint" />
+                                : <Folder size={13} className="text-muted-ink" />
+                              }
+                            </div>
+                            <input
+                              value={group.name}
+                              onChange={e => handleRenameGroup(idx, e.target.value)}
+                              className="flex-1 bg-transparent text-[12px] font-semibold text-ink outline-none focus:text-blueprint transition-colors min-w-0"
+                            />
+                            {group.isNew && (
+                              <span className="px-1.5 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider bg-blueprint/10 text-blueprint shrink-0">
+                                Nouveau
+                              </span>
+                            )}
+                            <div className="flex items-center gap-1 shrink-0">
+                              <button
+                                onClick={() => toggleExpand(idx)}
+                                className="w-6 h-6 rounded flex items-center justify-center text-muted-ink hover:text-ink transition-colors"
+                              >
+                                {expandedGroups.has(idx) ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+                              </button>
+                              <button
+                                onClick={() => handleRemoveGroup(idx)}
+                                className="w-6 h-6 rounded flex items-center justify-center text-muted-ink hover:text-rose-500 transition-colors"
+                              >
+                                <X size={12} />
+                              </button>
+                            </div>
+                          </div>
+
+                          {/* Notes list */}
+                          <AnimatePresence>
+                            {expandedGroups.has(idx) && (
+                              <motion.div
+                                initial={{ height: 0 }}
+                                animate={{ height: 'auto' }}
+                                exit={{ height: 0 }}
+                                className="overflow-hidden"
+                              >
+                                <div className="border-t border-border/40 px-3 pb-2 pt-1 space-y-0.5">
+                                  {group.notes.map(note => (
+                                    <div
+                                      key={note.id}
+                                      className="flex items-center gap-2 py-1.5 rounded-lg px-2 hover:bg-foreground/3 transition-colors group cursor-pointer"
+                                      onClick={() => handleToggleNote(idx, note.id)}
+                                    >
+                                      <div className="w-4 h-4 rounded border border-border flex items-center justify-center shrink-0 group-hover:border-blueprint/50 transition-colors">
+                                        <Check size={10} className="text-blueprint" />
+                                      </div>
+                                      <span className="text-[11px] text-muted-ink truncate group-hover:text-ink transition-colors">
+                                        {note.title || 'Note sans titre'}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              </motion.div>
+                            )}
+                          </AnimatePresence>
+
+                          {/* Collapsed count */}
+                          {!expandedGroups.has(idx) && (
+                            <div className="px-4 pb-2.5 text-[11px] text-muted-ink/60">
+                              {group.notes.length} note(s)
+                            </div>
+                          )}
+                        </motion.div>
+                      ))}
+                    </div>
+                  </motion.div>
+                )}
+
+                {/* EXECUTING */}
+                {step === 'executing' && (
+                  <motion.div
+                    key="executing"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    className="flex flex-col items-center justify-center p-12 gap-5 min-h-[300px]"
+                  >
+                    <Loader2 size={32} className="text-blueprint animate-spin" />
+                    <div className="text-center space-y-1">
+                      <p className="text-[14px] font-medium text-ink">Organisation en cours…</p>
+                      <p className="text-[12px] text-muted-ink">Création des sous-carnets et déplacement des notes</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 p-12 gap-5 min-h-[300px]"
+                  >
+                    <div className="w-16 h-16 rounded-2xl bg-emerald-50 dark:bg-emerald-950/30 flex items-center justify-center">
+                      <CheckCircle2 size={32} className="text-emerald-500" />
+                    </div>
+                    <div className="text-center space-y-1.5">
+                      <p className="text-[15px] font-semibold text-ink">Carnet organisé !</p>
+                      {result && (
+                        <p className="text-[12px] text-muted-ink">
+                          {result.created} sous-carnet(s) créé(s) · {result.moved} note(s) déplacée(s)
+                        </p>
+                      )}
+                    </div>
+                  </motion.div>
+                )}
+
+              </AnimatePresence>
+            </div>
+
+            {/* Footer actions */}
+            <div className="px-5 py-4 border-t border-border/60 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-ink text-paper text-[13px] font-semibold hover:opacity-85 transition-opacity"
+                >
+                  <Sparkles size={14} />
+                  Analyser avec l'IA
+                </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 text-[13px] font-medium text-muted-ink hover:text-ink transition-colors"
+                  >
+                    Recommencer
+                  </button>
+                  <button
+                    onClick={handleExecute}
+                    disabled={editableGroups.filter(g => g.notes.length > 0).length === 0}
+                    className={cn(
+                      'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-[13px] font-semibold transition-all',
+                      editableGroups.filter(g => g.notes.length > 0).length > 0
+                        ? 'bg-ink text-paper hover:opacity-85'
+                        : 'bg-foreground/10 text-muted-ink cursor-not-allowed'
+                    )}
+                  >
+                    <Check size={14} />
+                    Valider
+                  </button>
+                </div>
+              )}
+
+              {step === 'done' && (
+                <button
+                  onClick={handleClose}
+                  className="w-full px-4 py-2.5 rounded-xl border border-border text-[13px] font-medium text-muted-ink hover:text-ink transition-colors"
+                >
+                  Fermer
+                </button>
+              )}
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  )
+}