feat: hierarchical notebook system - trash, selectors, breadcrumb, sidebar tree

- Schema: soft delete with trashedAt on Notebook model
- API: PATCH/GET notebooks support trashedAt filtering with cascade
- Sidebar: recursive tree rendering with collapse/expand, visual guides, hover actions
- HierarchicalNotebookSelector: portal-based dropdown with search, breadcrumbs, dropUp support
- AI chat: context selector with Toutes mes notes + notebook selector
- Agent detail: flat selects replaced with HierarchicalNotebookSelector
- Breadcrumb: notebook path display on home page
- Trash view: card grid with countdown, restore/permanent delete
- CSS: design tokens (ink, paper, blueprint, concrete, etc.)
- Types: parentId, trashedAt added to Notebook interface

memento-note/app/(main)/agents/page.tsx

@@ -13,8 +13,9 @@ export default async function AgentsPage() {
   const [agents, notebooks] = await Promise.all([
     getAgents(),
     prisma.notebook.findMany({
-      where: { userId },
-      orderBy: { order: 'asc' }
+      where: { userId, trashedAt: null },
+      orderBy: { order: 'asc' },
+      select: { id: true, name: true, icon: true, parentId: true, trashedAt: true }
     })
   ])
 

memento-note/app/(main)/trash/page.tsx

@@ -1,21 +1,13 @@
-import { getTrashedNotes } from '@/app/actions/notes'
-import { MasonryGrid } from '@/components/masonry-grid'
-import { TrashHeader } from '@/components/trash-header'
-import { TrashEmptyState } from './trash-empty-state'
+import { getTrashedNotes, getTrashedNotebooks } from '@/app/actions/notes'
+import { TrashClient } from './trash-client'
 
 export const dynamic = 'force-dynamic'
 
 export default async function TrashPage() {
-  const notes = await getTrashedNotes()
+  const [notes, notebooks] = await Promise.all([
+    getTrashedNotes(),
+    getTrashedNotebooks(),
+  ])
 
-  return (
-    <main className="container mx-auto px-4 py-8 max-w-7xl">
-      <TrashHeader noteCount={notes.length} />
-      {notes.length > 0 ? (
-        <MasonryGrid notes={notes} isTrashView />
-      ) : (
-        <TrashEmptyState />
-      )}
-    </main>
-  )
+  return <TrashClient initialNotes={notes} initialNotebooks={notebooks} />
 }

memento-note/app/(main)/trash/trash-client.tsx

@@ -0,0 +1,291 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+import { motion, AnimatePresence } from 'motion/react'
+import {
+  Trash2,
+  RotateCcw,
+  X,
+  FileText,
+  Folder,
+  Search,
+  Clock,
+  AlertCircle,
+} from 'lucide-react'
+import { Note, Notebook } from '@/lib/types'
+import { restoreNote, permanentDeleteNote, emptyTrash } from '@/app/actions/notes'
+import { restoreNotebook, permanentDeleteNotebook } from '@/context/notebooks-context'
+import { useLanguage } from '@/lib/i18n'
+import { toast } from 'sonner'
+import { useNotebooks } from '@/context/notebooks-context'
+
+type FilterType = 'all' | 'notes' | 'notebooks'
+
+interface TrashItem {
+  id: string
+  title: string
+  itemType: 'note' | 'notebook'
+  deletedAt: string | null
+  content?: string
+  notesCount?: number
+}
+
+function getDaysRemaining(deletedAt?: string | null): number {
+  if (!deletedAt) return 30
+  const deletedDate = new Date(deletedAt)
+  const now = new Date()
+  const diffTime = now.getTime() - deletedDate.getTime()
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+  return Math.max(0, 30 - diffDays)
+}
+
+export function TrashClient({
+  initialNotes,
+  initialNotebooks,
+}: {
+  initialNotes: Note[]
+  initialNotebooks: any[]
+}) {
+  const { t } = useLanguage()
+  const router = useRouter()
+  const { restoreNotebook: restoreNb, permanentDeleteNotebook: permDeleteNb } = useNotebooks()
+
+  const [notes, setNotes] = useState(initialNotes)
+  const [notebooks, setNotebooks] = useState(initialNotebooks)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterType, setFilterType] = useState<FilterType>('all')
+  const [isEmptying, setIsEmptying] = useState(false)
+
+  const items: TrashItem[] = useMemo(() => {
+    const all: TrashItem[] = [
+      ...notes.map(n => ({
+        id: n.id,
+        title: n.title || t('notes.untitled') || 'Untitled',
+        itemType: 'note' as const,
+        deletedAt: (n as any).trashedAt || null,
+        content: n.content,
+      })),
+      ...notebooks.map((nb: any) => ({
+        id: nb.id,
+        title: nb.name,
+        itemType: 'notebook' as const,
+        deletedAt: nb.trashedAt || null,
+        notesCount: nb._count?.notes ?? 0,
+      })),
+    ]
+
+    return all
+      .filter(item => {
+        const matchesSearch = item.title.toLowerCase().includes(searchQuery.toLowerCase())
+        const matchesType =
+          filterType === 'all' ||
+          (filterType === 'notes' && item.itemType === 'note') ||
+          (filterType === 'notebooks' && item.itemType === 'notebook')
+        return matchesSearch && matchesType
+      })
+      .sort((a, b) => {
+        const dateA = a.deletedAt ? new Date(a.deletedAt).getTime() : 0
+        const dateB = b.deletedAt ? new Date(b.deletedAt).getTime() : 0
+        return dateB - dateA
+      })
+  }, [notes, notebooks, searchQuery, filterType, t])
+
+  const handleRestore = async (item: TrashItem) => {
+    try {
+      if (item.itemType === 'note') {
+        await restoreNote(item.id)
+        setNotes(prev => prev.filter(n => n.id !== item.id))
+      } else {
+        await restoreNb(item.id)
+        setNotebooks(prev => prev.filter((nb: any) => nb.id !== item.id))
+      }
+      toast.success(t('trash.restoreSuccess') || 'Restored successfully')
+    } catch {
+      toast.error(t('trash.restoreError') || 'Failed to restore')
+    }
+  }
+
+  const handlePermanentDelete = async (item: TrashItem) => {
+    try {
+      if (item.itemType === 'note') {
+        await permanentDeleteNote(item.id)
+        setNotes(prev => prev.filter(n => n.id !== item.id))
+      } else {
+        await permDeleteNb(item.id)
+        setNotebooks(prev => prev.filter((nb: any) => nb.id !== item.id))
+      }
+      toast.success(t('trash.permanentDeleteSuccess') || 'Permanently deleted')
+    } catch {
+      toast.error(t('trash.deleteError') || 'Failed to delete')
+    }
+  }
+
+  const handleEmptyTrash = async () => {
+    if (!window.confirm(t('trash.emptyTrashConfirm') || 'Empty trash? This is irreversible.')) return
+    setIsEmptying(true)
+    try {
+      await emptyTrash()
+      setNotes([])
+      setNotebooks([])
+      toast.success(t('trash.emptyTrashSuccess') || 'Trash emptied')
+    } catch {
+      toast.error(t('trash.deleteError') || 'Failed to empty trash')
+    } finally {
+      setIsEmptying(false)
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col bg-[#F9F8F6] dark:bg-[#1a1a1a]">
+      <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-[#F9F8F6]/80 dark:bg-[#1a1a1a]/80 backdrop-blur-md z-30 border-b border-border/20">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h1 className="text-4xl font-memento-serif font-medium text-foreground flex items-center gap-4">
+              {t('sidebar.trash') || 'Trash'} <Trash2 size={28} className="text-rose-400 opacity-40" />
+            </h1>
+            <p className="text-[10px] text-muted-foreground font-bold uppercase tracking-[0.3em] opacity-60">
+              {t('trash.autoDelete30') || 'Auto-delete after 30 days'}
+            </p>
+          </div>
+
+          {items.length > 0 && (
+            <button
+              onClick={handleEmptyTrash}
+              disabled={isEmptying}
+              className="px-6 py-3 bg-card border border-border text-rose-500 rounded-2xl text-[10px] font-bold uppercase tracking-widest hover:bg-rose-50 hover:border-rose-100 transition-all shadow-sm disabled:opacity-50"
+            >
+              {t('trash.emptyTrash') || 'Empty all'}
+            </button>
+          )}
+        </div>
+
+        <div className="flex items-center gap-6">
+          <div className="group relative flex-1 max-w-xl">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-foreground transition-colors" size={16} />
+            <input
+              type="text"
+              placeholder={t('common.search') || 'Search...'}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full bg-white dark:bg-white/5 border border-border/40 rounded-2xl pl-12 pr-6 py-4 text-sm outline-none focus:ring-4 ring-foreground/5 transition-all shadow-sm"
+            />
+          </div>
+
+          <div className="flex bg-white dark:bg-white/5 p-1 rounded-2xl border border-border shadow-sm">
+            {(['all', 'notes', 'notebooks'] as FilterType[]).map(type => (
+              <button
+                key={type}
+                onClick={() => setFilterType(type)}
+                className={`px-6 py-3 rounded-xl text-[10px] font-bold uppercase tracking-widest transition-all
+                  ${filterType === type ? 'bg-foreground text-background shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}
+              >
+                {type === 'all' ? (t('trash.filterAll') || 'All') : type === 'notes' ? (t('nav.notes') || 'Notes') : (t('nav.notebooks') || 'Notebooks')}
+              </button>
+            ))}
+          </div>
+        </div>
+      </header>
+
+      <main className="flex-1 px-12 py-12 overflow-y-auto">
+        {items.length > 0 ? (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <AnimatePresence mode="popLayout">
+              {items.map(item => {
+                const daysLeft = getDaysRemaining(item.deletedAt)
+                return (
+                  <motion.div
+                    key={item.id}
+                    layout
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, scale: 0.9 }}
+                    className="bg-white dark:bg-white/5 border border-border/60 rounded-[32px] p-8 group hover:shadow-2xl hover:border-foreground/20 transition-all relative overflow-hidden flex flex-col"
+                  >
+                    <div className="absolute top-0 left-0 w-full h-1 bg-slate-100 dark:bg-white/5 overflow-hidden">
+                      <motion.div
+                        initial={{ width: 0 }}
+                        animate={{ width: `${(daysLeft / 30) * 100}%` }}
+                        className={`h-full ${daysLeft < 5 ? 'bg-rose-500' : 'bg-blueprint'}`}
+                      />
+                    </div>
+
+                    <div className="flex justify-between items-start mb-6">
+                      <div className={`p-3 rounded-2xl ${item.itemType === 'note' ? 'bg-blueprint/10 text-blueprint' : 'bg-concrete/10 text-concrete'}`}>
+                        {item.itemType === 'note' ? <FileText size={20} /> : <Folder size={20} />}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => handleRestore(item)}
+                          className="flex items-center gap-2 px-4 py-2 bg-emerald-50 text-emerald-600 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-emerald-100 transition-colors"
+                        >
+                          <RotateCcw size={12} /> {t('trash.restore') || 'Restore'}
+                        </button>
+                        <button
+                          onClick={() => handlePermanentDelete(item)}
+                          className="p-2 hover:bg-rose-50 text-rose-500 rounded-xl transition-colors"
+                          title={t('trash.permanentDelete') || 'Delete permanently'}
+                        >
+                          <X size={16} />
+                        </button>
+                      </div>
+                    </div>
+
+                    <div className="space-y-2 mb-8 flex-1">
+                      <h3 className="text-base font-memento-serif font-medium text-foreground leading-tight">
+                        {item.title}
+                      </h3>
+                      <div className="flex items-center gap-3">
+                        <div className={`text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border ${daysLeft < 5 ? 'border-rose-200 text-rose-500 bg-rose-50' : 'border-blueprint/20 text-blueprint bg-blueprint/5'}`}>
+                          {daysLeft} {t('trash.daysRemaining') || 'DAYS LEFT'}
+                        </div>
+                        {item.deletedAt && (
+                          <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-tight flex items-center gap-1">
+                            <Clock size={10} /> {new Date(item.deletedAt).toLocaleDateString()}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+
+                    {item.itemType === 'note' && item.content ? (
+                      <div className="text-[12px] text-muted-foreground line-clamp-3 leading-relaxed opacity-60 font-light border-t border-border/40 pt-4">
+                        {item.content.replace(/[#*`]/g, '').slice(0, 200)}
+                      </div>
+                    ) : (
+                      <div className="border-t border-border/40 pt-4">
+                        <div className="text-[9px] font-bold text-muted-foreground/40 uppercase tracking-widest">
+                          {t('trash.notebookContentPreserved') || 'Notebook content preserved'}
+                        </div>
+                      </div>
+                    )}
+                  </motion.div>
+                )
+              })}
+            </AnimatePresence>
+          </div>
+        ) : (
+          <div className="h-full flex flex-col items-center justify-center text-center space-y-6 opacity-40">
+            <div className="p-8 rounded-full bg-slate-100 border-2 border-dashed border-border flex items-center justify-center">
+              <Trash2 size={64} className="text-muted-foreground" />
+            </div>
+            <div className="space-y-2">
+              <h2 className="text-2xl font-memento-serif text-foreground italic">
+                {t('trash.empty') || 'Trash is empty'}
+              </h2>
+              <p className="text-sm text-muted-foreground max-w-xs">
+                {t('trash.emptyDescription') || 'Deleted items will appear here. They are kept for 30 days before permanent deletion.'}
+              </p>
+            </div>
+          </div>
+        )}
+      </main>
+
+      <footer className="px-12 py-6 bg-white/50 dark:bg-white/5 border-t border-border flex items-center gap-4">
+        <AlertCircle size={14} className="text-muted-foreground" />
+        <p className="text-[10px] text-muted-foreground font-medium uppercase tracking-widest">
+          {t('trash.notebookRestoreHint') || 'Restoring a notebook also restores all its notes.'}
+        </p>
+      </footer>
+    </div>
+  )
+}

memento-note/app/actions/notes.ts

@@ -1053,7 +1053,6 @@ export async function emptyTrash() {
   if (!session?.user?.id) throw new Error('Unauthorized');
 
   try {
-    // Fetch trashed notes with images before deleting
     const trashedNotes = await prisma.note.findMany({
       where: {
         userId: session.user.id,
@@ -1069,7 +1068,6 @@ export async function emptyTrash() {
       }
     })
 
-    // Clean up image files for all deleted notes
     for (const note of trashedNotes) {
       const imageUrls = parseImageUrls(note.images)
       if (imageUrls.length > 0) {
@@ -1077,6 +1075,13 @@ export async function emptyTrash() {
       }
     }
 
+    await prisma.notebook.deleteMany({
+      where: {
+        userId: session.user.id,
+        trashedAt: { not: null }
+      }
+    })
+
     await syncLabels(session.user.id, [])
     revalidatePath('/trash')
     revalidatePath('/')
@@ -1137,14 +1142,44 @@ export async function getTrashCount() {
   if (!session?.user?.id) return 0;
 
   try {
-    return await prisma.note.count({
+    const [noteCount, notebookCount] = await Promise.all([
+      prisma.note.count({
+        where: {
+          userId: session.user.id,
+          trashedAt: { not: null }
+        }
+      }),
+      prisma.notebook.count({
+        where: {
+          userId: session.user.id,
+          trashedAt: { not: null }
+        }
+      })
+    ])
+    return noteCount + notebookCount
+  } catch {
+    return 0
+  }
+}
+
+export async function getTrashedNotebooks() {
+  const session = await auth();
+  if (!session?.user?.id) return [];
+
+  try {
+    return await prisma.notebook.findMany({
       where: {
         userId: session.user.id,
         trashedAt: { not: null }
-      }
+      },
+      include: {
+        _count: { select: { notes: true } }
+      },
+      orderBy: { trashedAt: 'desc' }
     })
-  } catch {
-    return 0
+  } catch (error) {
+    console.error('Error fetching trashed notebooks:', error)
+    return []
   }
 }
 

memento-note/app/api/notebooks/[id]/route.ts

@@ -3,7 +3,19 @@ import prisma from '@/lib/prisma'
 import { auth } from '@/auth'
 import { revalidatePath } from 'next/cache'
 
-// PATCH /api/notebooks/[id] - Update a notebook
+async function getDescendantIds(notebookId: string): Promise<string[]> {
+  const ids: string[] = []
+  const children = await prisma.notebook.findMany({
+    where: { parentId: notebookId },
+    select: { id: true },
+  })
+  for (const child of children) {
+    ids.push(child.id)
+    ids.push(...await getDescendantIds(child.id))
+  }
+  return ids
+}
+
 export async function PATCH(
   request: NextRequest,
   { params }: { params: Promise<{ id: string }> }
@@ -16,9 +28,8 @@ export async function PATCH(
   try {
     const { id } = await params
     const body = await request.json()
-    const { name, icon, color, order } = body
+    const { name, icon, color, order, trashedAt } = body
 
-    // Verify ownership
     const existing = await prisma.notebook.findUnique({
       where: { id },
       select: { userId: true }
@@ -38,32 +49,30 @@ export async function PATCH(
       )
     }
 
-    // Build update data
     const updateData: any = {}
     if (name !== undefined) updateData.name = name.trim()
     if (icon !== undefined) updateData.icon = icon
     if (color !== undefined) updateData.color = color
     if (order !== undefined) updateData.order = order
+    if (trashedAt !== undefined) updateData.trashedAt = trashedAt
 
-    // Update notebook
-    const notebook = await prisma.notebook.update({
-      where: { id },
-      data: updateData,
-      include: {
-        labels: true,
-        _count: {
-          select: { notes: true }
-        }
-      }
-    })
+    if (trashedAt !== undefined) {
+      const descendantIds = await getDescendantIds(id)
+      const allIds = [id, ...descendantIds]
+      await prisma.notebook.updateMany({
+        where: { id: { in: allIds }, userId: session.user.id },
+        data: { trashedAt },
+      })
+    } else {
+      await prisma.notebook.update({
+        where: { id },
+        data: updateData,
+      })
+    }
 
-    revalidatePath('/')
+    try { revalidatePath('/') } catch {}
 
-    return NextResponse.json({
-      success: true,
-      ...notebook,
-      notesCount: notebook._count.notes
-    })
+    return NextResponse.json({ success: true })
   } catch (error) {
     console.error('Error updating notebook:', error)
     return NextResponse.json(
@@ -73,7 +82,6 @@ export async function PATCH(
   }
 }
 
-// DELETE /api/notebooks/[id] - Delete a notebook
 export async function DELETE(
   request: NextRequest,
   { params }: { params: Promise<{ id: string }> }
@@ -86,16 +94,9 @@ export async function DELETE(
   try {
     const { id } = await params
 
-    // Verify ownership and get notebook info
     const notebook = await prisma.notebook.findUnique({
       where: { id },
-      select: {
-        userId: true,
-        name: true,
-        _count: {
-          select: { notes: true, labels: true }
-        }
-      }
+      select: { userId: true, name: true }
     })
 
     if (!notebook) {
@@ -112,18 +113,13 @@ export async function DELETE(
       )
     }
 
-    // Delete notebook (cascade will handle labels and notes)
-    await prisma.notebook.delete({
-      where: { id }
-    })
+    await prisma.notebook.delete({ where: { id } })
 
-    revalidatePath('/')
+    try { revalidatePath('/') } catch {}
 
     return NextResponse.json({
       success: true,
-      message: `Notebook "${notebook.name}" deleted`,
-      notesCount: notebook._count.notes,
-      labelsCount: notebook._count.labels
+      message: `Notebook "${notebook.name}" permanently deleted`,
     })
   } catch (error) {
     console.error('Error deleting notebook:', error)

memento-note/app/api/notebooks/route.ts

@@ -31,7 +31,7 @@ export async function GET(request: NextRequest) {
 
   try {
     const notebooks = await prisma.notebook.findMany({
-      where: { userId: session.user.id },
+      where: { userId: session.user.id, trashedAt: null },
       include: {
         labels: { orderBy: { name: 'asc' } },
         _count: {

memento-note/app/globals.css

@@ -24,6 +24,17 @@
   --color-background-light: var(--color-memento-paper);
   --color-background-dark: #202020;
 
+  /* Design tokens from architectural-grid 10 */
+  --color-ink: #1C1C1C;
+  --color-paper: #F2F0E9;
+  --color-muted-ink: rgba(28, 28, 28, 0.6);
+  --color-concrete: #8D8D8D;
+  --color-blueprint: #75B2D6;
+  --color-ochre: #D4A373;
+  --color-sage: #A3B18A;
+  --color-rust: #9B2226;
+  --color-glass: rgba(255, 255, 255, 0.4);
+
   --font-sans: var(--font-inter);
   --font-heading: var(--font-memento-serif), ui-serif, Georgia, "Times New Roman", serif;
   --shadow-level-1: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06);

memento-note/components/agents/agent-detail-view.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useMemo, useRef, useCallback, useEffect } from 'react'
+import React, { useState, useMemo, useRef, useCallback, useEffect } from 'react'
 import { motion } from 'motion/react'
 import {
   ArrowLeft,
@@ -30,6 +30,7 @@ import {
   BookOpen,
   LifeBuoy,
 } from 'lucide-react'
+import { HierarchicalNotebookSelector } from '@/components/hierarchical-notebook-selector'
 import { toast } from 'sonner'
 import { useLanguage } from '@/lib/i18n'
 import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
@@ -488,21 +489,12 @@ export function AgentDetailView({
                     {showSourceNotebook && (
                       <div className="space-y-4">
                         <label className={labelCls}>{t('agents.form.sourceNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.sourceNotebook')} /></label>
-                        <select
-                          value={sourceNotebookId}
-                          onChange={e => { setSourceNotebookId(e.target.value); setSourceNoteIds([]) }}
-                          className={selectCls}
-                        >
-                          <option value="">{t('agents.form.selectNotebook')}</option>
-                          {notebooks.filter(nb => !nb.parentId).map(nb => (
-                            <>
-                              <option key={nb.id} value={nb.id}>{nb.name}</option>
-                              {notebooks.filter(c => c.parentId === nb.id).map(child => (
-                                <option key={child.id} value={child.id}>  └ {child.name}</option>
-                              ))}
-                            </>
-                          ))}
-                        </select>
+                        <HierarchicalNotebookSelector
+                          notebooks={notebooks.filter((nb: any) => !nb.trashedAt)}
+                          selectedId={sourceNotebookId || null}
+                          onSelect={(id) => { setSourceNotebookId(id); setSourceNoteIds([]) }}
+                          placeholder={t('agents.form.selectNotebook') || 'Select notebook...'}
+                        />
                       </div>
                     )}
 
@@ -648,17 +640,12 @@ export function AgentDetailView({
                     {type !== 'slide-generator' && type !== 'excalidraw-generator' && (
                       <div className="space-y-4">
                         <label className={labelCls}>{t('agents.form.targetNotebook')}<FieldHelp tooltip={t('agents.help.tooltips.targetNotebook')} /></label>
-                        <select value={targetNotebookId} onChange={e => setTargetNotebookId(e.target.value)} className={selectCls}>
-                          <option value="">{t('agents.form.inbox')}</option>
-                          {notebooks.filter(nb => !nb.parentId).map(nb => (
-                            <>
-                              <option key={nb.id} value={nb.id}>{nb.name}</option>
-                              {notebooks.filter(c => c.parentId === nb.id).map(child => (
-                                <option key={child.id} value={child.id}>  └ {child.name}</option>
-                              ))}
-                            </>
-                          ))}
-                        </select>
+                        <HierarchicalNotebookSelector
+                          notebooks={notebooks.filter((nb: any) => !nb.trashedAt)}
+                          selectedId={targetNotebookId || null}
+                          onSelect={(id) => setTargetNotebookId(id)}
+                          placeholder={t('agents.form.inbox') || 'Inbox'}
+                        />
                       </div>
                     )}
 

memento-note/components/ai-chat.tsx

@@ -11,7 +11,7 @@ import { useLanguage } from '@/lib/i18n'
 import { MarkdownContent } from '@/components/markdown-content'
 import { useWebSearchAvailable } from '@/hooks/use-web-search-available'
 import { useNotebooks } from '@/context/notebooks-context'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { HierarchicalNotebookSelector } from '@/components/hierarchical-notebook-selector'
 import { toast } from 'sonner'
 import { createConversation } from '@/app/actions/chat-actions'
 
@@ -352,29 +352,39 @@ export function AIChat({ showFloatingTrigger = true }: { showFloatingTrigger?: b
       {/* Input Area & Tone Controls (Only in Chat tab) */}
       <div className={cn("p-4 border-t border-border/40 bg-background shrink-0", activeTab !== 'chat' && "hidden")}>
         {/* Context Scope */}
-        <div className="mb-3">
-          <span className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground block mb-1.5 ml-1">{t('ai.discussionContextLabel')}</span>
-          <Select value={chatScope} onValueChange={setChatScope}>
-            <SelectTrigger className="h-8 text-xs bg-background border-border/60">
-              <SelectValue placeholder={t('ai.selectNotebook')} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">
-                <div className="flex items-center gap-2">
-                  <Layers className="h-4 w-4 text-muted-foreground" />
-                  <span>{t('ai.allMyNotes')}</span>
-                </div>
-              </SelectItem>
-              {notebooks && notebooks.length > 0 && notebooks.map(nb => (
-                <SelectItem key={nb.id} value={nb.id}>
-                  <div className="flex items-center gap-2">
-                    <BookOpen className="h-4 w-4 text-muted-foreground" />
-                    <span>{nb.name}</span>
-                  </div>
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+        <div className="mb-3 space-y-2">
+          <span className="text-[9px] font-bold uppercase tracking-widest text-muted-foreground block ml-1">Source du Contexte</span>
+          <button
+            onClick={() => setChatScope('all')}
+            className={cn(
+              'w-full p-2.5 border rounded-lg text-xs flex items-center justify-between transition-all',
+              chatScope === 'all' ? 'bg-blueprint/10 border-blueprint/30' : 'bg-card border-border hover:border-foreground/20'
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <Layers className="h-3.5 w-3.5 text-blueprint/60" />
+              <span className={cn('font-medium', chatScope === 'all' ? 'text-blueprint' : 'text-foreground/60')}>
+                {t('ai.allMyNotes') || 'Toutes mes notes'}
+              </span>
+            </div>
+            {chatScope === 'all' && (
+              <span className="text-[8px] bg-blueprint/10 text-blueprint px-1.5 py-0.5 rounded uppercase font-bold">Auto</span>
+            )}
+          </button>
+
+          <div className="flex items-center gap-2 px-2">
+            <div className="h-px flex-1 bg-border/40" />
+            <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest">+ Carnet</span>
+            <div className="h-px flex-1 bg-border/40" />
+          </div>
+
+          <HierarchicalNotebookSelector
+            notebooks={notebooks.filter(nb => !nb.trashedAt)}
+            selectedId={chatScope !== 'all' ? chatScope : null}
+            onSelect={(id) => setChatScope(id)}
+            placeholder={t('ai.selectNotebook') || 'Inclure un carnet...'}
+            dropUp
+          />
         </div>
 
         {/* Tone Selection */}

memento-note/components/contextual-ai-chat.tsx

@@ -46,6 +46,7 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { getNotebookIcon } from '@/lib/notebook-icon'
+import { HierarchicalNotebookSelector } from '@/components/hierarchical-notebook-selector'
 import { scrapePageText } from '@/app/actions/scrape'
 
 // ── Helpers ──────────────────────────────────────────────────────────────────
@@ -111,7 +112,7 @@ interface ContextualAIChatProps {
   /** Whether the last action has been applied (so we can show undo) */
   lastActionApplied?: boolean
   /** Notebooks available for scope selection */
-  notebooks?: Array<{ id: string; name: string }>
+  notebooks?: Array<{ id: string; name: string; parentId?: string | null; trashedAt?: any }>
   /** Extra classes forwarded to the aside root element */
   className?: string
   /** How to embed generated diagram images (markdown vs rich text HTML) */
@@ -679,21 +680,32 @@ export function ContextualAIChat({
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-3">
                       <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-foreground/40 px-1">CONTEXTE</label>
-                      <Select value={chatScope} onValueChange={setChatScope}>
-                        <SelectTrigger className="w-full h-10 px-3 bg-card/60 backdrop-blur-sm border border-border rounded-xl text-[11px] flex items-center justify-between cursor-pointer hover:border-foreground/20 transition-all outline-none ring-0 shadow-sm text-foreground">
-                          <div className="flex items-center gap-2">
-                            <BookOpen size={14} className="text-foreground/40" />
-                            <SelectValue />
-                          </div>
-                        </SelectTrigger>
-                        <SelectContent className="rounded-xl border-border shadow-xl bg-background">
-                          <SelectItem value="note" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Cette note</SelectItem>
-                          <SelectItem value="all" className="text-[11px] py-2.5 uppercase tracking-wider font-bold">Tout Momento</SelectItem>
-                          {notebooks.map(nb => (
-                            <SelectItem key={nb.id} value={nb.id} className="text-[11px] py-2.5 uppercase tracking-wider font-bold">{nb.name}</SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
+                      <div className="flex flex-col gap-2">
+                        <button
+                          onClick={() => setChatScope('note')}
+                          className={cn(
+                            'w-full p-3 border rounded-lg text-xs flex items-center gap-2 transition-all',
+                            chatScope === 'note' ? 'bg-blueprint/10 border-blueprint/30 text-blueprint font-bold' : 'bg-card/60 border-border hover:border-foreground/20 text-foreground/60'
+                          )}
+                        >
+                          <BookOpen size={14} className="text-blueprint/60" />
+                          <span>{t('ai.activeNote') || 'Cette note'}</span>
+                          <span className="ml-auto text-[8px] bg-blueprint/10 text-blueprint px-1.5 py-0.5 rounded uppercase font-bold">Auto</span>
+                        </button>
+                        <div className="flex items-center gap-2 px-2">
+                          <div className="h-px flex-1 bg-border/40" />
+                          <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest">+ Carnet</span>
+                          <div className="h-px flex-1 bg-border/40" />
+                        </div>
+                        <HierarchicalNotebookSelector
+                          notebooks={(notebooks || []).filter(nb => !nb.trashedAt)}
+                          selectedId={chatScope !== 'note' && chatScope !== 'all' ? chatScope : null}
+                          onSelect={(id) => setChatScope(id)}
+                          placeholder="Inclure un carnet..."
+                          className="w-full"
+                          dropUp
+                        />
+                      </div>
                     </div>
                     <div className="space-y-3">
                       <label className="text-[10px] uppercase tracking-[0.25em] font-bold text-foreground/40 px-1">TON D'ÉCRITURE</label>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'motion/react'
 import { useLanguage } from '@/lib/i18n'
 import { useNotebooks } from '@/context/notebooks-context'
@@ -15,10 +15,17 @@ export function CreateNotebookDialog({ open, onOpenChange, parentNotebookId }: C
   const { t } = useLanguage()
   const { createNotebookOptimistic, notebooks } = useNotebooks()
   const [name, setName] = useState('')
-  const [selectedParentId, setSelectedParentId] = useState<string | null>(parentNotebookId ?? null)
+  const [selectedParentId, setSelectedParentId] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
-  const rootNotebooks = notebooks.filter(nb => !nb.parentId)
+  const rootNotebooks = notebooks.filter(nb => !nb.parentId && !nb.trashedAt)
+
+  useEffect(() => {
+    if (open) {
+      setSelectedParentId(parentNotebookId ?? null)
+      setName('')
+    }
+  }, [open, parentNotebookId])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -42,10 +49,12 @@ export function CreateNotebookDialog({ open, onOpenChange, parentNotebookId }: C
 
   const handleClose = () => {
     setName('')
-    setSelectedParentId(parentNotebookId ?? null)
+    setSelectedParentId(null)
     onOpenChange?.(false)
   }
 
+  const isSubNotebook = !!parentNotebookId
+
   return (
     <AnimatePresence>
       {open && (
@@ -66,10 +75,16 @@ export function CreateNotebookDialog({ open, onOpenChange, parentNotebookId }: C
             className="relative w-full max-w-md bg-[#F2F0E9] dark:bg-zinc-900 border border-black/10 dark:border-white/10 shadow-2xl rounded-2xl p-8"
           >
             <h3 className="text-2xl font-memento-serif font-medium text-foreground mb-2">
-              {t('notebook.createNew') || 'Nouveau carnet'}
+              {isSubNotebook
+                ? (t('notebook.createSubNotebook') || 'Nouveau sous-carnet')
+                : (t('notebook.createNew') || 'Nouveau carnet')
+              }
             </h3>
             <p className="text-sm text-muted-foreground mb-6 font-light">
-              {t('notebook.createDescription') || 'Donnez un nom à votre nouveau carnet.'}
+              {isSubNotebook && parentNotebookId
+                ? `${t('notebook.under') || 'Sous'} ${notebooks.find(nb => nb.id === parentNotebookId)?.name || ''}`
+                : (t('notebook.createDescription') || 'Donnez un nom à votre nouveau carnet.')
+              }
             </p>
 
             <form onSubmit={handleSubmit} className="space-y-6">
@@ -87,7 +102,7 @@ export function CreateNotebookDialog({ open, onOpenChange, parentNotebookId }: C
                 />
               </div>
 
-              {!parentNotebookId && rootNotebooks.length > 0 && (
+              {!isSubNotebook && rootNotebooks.length > 0 && (
                 <div>
                   <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-foreground mb-2">
                     {t('notebook.parentNotebook') || 'Carnet parent'}

memento-note/components/hierarchical-notebook-selector.tsx

@@ -0,0 +1,240 @@
+'use client'
+
+import React, { useState, useMemo, useRef, useCallback, useLayoutEffect } from 'react'
+import {
+  ChevronRight,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  Check,
+  Search,
+} from 'lucide-react'
+import { Notebook } from '@/lib/types'
+import { motion, AnimatePresence } from 'motion/react'
+import { cn } from '@/lib/utils'
+import { createPortal } from 'react-dom'
+
+interface HierarchicalNotebookSelectorProps {
+  notebooks: Notebook[]
+  selectedId: string | null
+  onSelect: (id: string) => void
+  className?: string
+  placeholder?: string
+  dropUp?: boolean
+}
+
+export function HierarchicalNotebookSelector({
+  notebooks,
+  selectedId,
+  onSelect,
+  className = '',
+  placeholder = 'Select a notebook...',
+  dropUp = false,
+}: HierarchicalNotebookSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties | null>(null)
+
+  const computeStyle = useCallback(() => {
+    if (!triggerRef.current) return null
+    const rect = triggerRef.current.getBoundingClientRect()
+    if (dropUp) {
+      return {
+        position: 'fixed' as const,
+        bottom: window.innerHeight - rect.top + 8,
+        left: rect.left,
+        width: Math.max(rect.width, 280),
+        zIndex: 9999,
+      }
+    }
+    return {
+      position: 'fixed' as const,
+      top: rect.bottom + 8,
+      left: rect.left,
+      width: Math.max(rect.width, 280),
+      zIndex: 9999,
+    }
+  }, [dropUp])
+
+  useLayoutEffect(() => {
+    if (isOpen) {
+      setDropdownStyle(computeStyle())
+      const handleResize = () => setDropdownStyle(computeStyle())
+      window.addEventListener('resize', handleResize)
+      return () => window.removeEventListener('resize', handleResize)
+    } else {
+      setDropdownStyle(null)
+    }
+  }, [isOpen, computeStyle])
+
+  const selectedNotebook = notebooks.find(nb => nb.id === selectedId)
+
+  const path = useMemo(() => {
+    if (!selectedNotebook) return []
+    const trail: Notebook[] = []
+    let current: Notebook | undefined = selectedNotebook
+    while (current) {
+      trail.unshift(current)
+      if (!current.parentId) break
+      const parent = notebooks.find(nb => nb.id === current!.parentId)
+      if (!parent) break
+      current = parent
+    }
+    return trail
+  }, [selectedNotebook, notebooks])
+
+  const toggleExpand = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation()
+    const next = new Set(expandedIds)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    setExpandedIds(next)
+  }
+
+  const renderTree = (parentId: string | null | undefined, level = 0) => {
+    const children = notebooks.filter(
+      nb => (nb.parentId ?? null) === (parentId ?? null)
+    )
+    if (children.length === 0) return null
+
+    return (
+      <div className={level > 0 ? 'ml-4 border-l border-border/40 pl-2' : ''}>
+        {children.map(notebook => {
+          const isExpanded = expandedIds.has(notebook.id) || searchQuery.length > 0
+          const hasChildren = notebooks.some(nb => nb.parentId === notebook.id)
+          const isSelected = selectedId === notebook.id
+
+          if (searchQuery && !notebook.name.toLowerCase().includes(searchQuery.toLowerCase())) {
+            const hasMatchingChild = (id: string): boolean => {
+              const kids = notebooks.filter(nb => nb.parentId === id)
+              return kids.some(nb => nb.name.toLowerCase().includes(searchQuery.toLowerCase()) || hasMatchingChild(nb.id))
+            }
+            if (!hasMatchingChild(notebook.id)) return null
+          }
+
+          return (
+            <div key={notebook.id} className="select-none">
+              <div
+                onClick={() => {
+                  onSelect(notebook.id)
+                  if (!searchQuery) setIsOpen(false)
+                }}
+                className={`flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all group
+                  ${isSelected ? 'bg-blueprint/10 text-blueprint font-bold dark:bg-blueprint/10' : 'hover:bg-slate-50 dark:hover:bg-white/5 text-ink'}`}
+              >
+                <div className="w-4 flex items-center justify-center">
+                  {hasChildren ? (
+                    <button
+                      onClick={(e) => toggleExpand(e, notebook.id)}
+                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded transition-colors"
+                    >
+                      {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+                    </button>
+                  ) : null}
+                </div>
+
+                <div className={`p-1 rounded ${isSelected ? 'bg-blueprint/20 dark:bg-blueprint/20' : 'bg-slate-100 dark:bg-white/5 group-hover:bg-white/40'}`}>
+                  {isExpanded && hasChildren ? <FolderOpen size={13} /> : <Folder size={13} />}
+                </div>
+
+                <span className="text-[13px] truncate flex-1">{notebook.name}</span>
+
+                {isSelected && <Check size={14} className="opacity-60 shrink-0" />}
+              </div>
+
+              <AnimatePresence>
+                {isExpanded && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    className="overflow-hidden"
+                  >
+                    {renderTree(notebook.id, level + 1)}
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <div
+        ref={triggerRef}
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full bg-slate-50 dark:bg-white/5 border border-border/80 rounded-xl px-4 py-4 text-sm outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all cursor-pointer text-ink flex items-center gap-3"
+      >
+        <Folder size={16} className="text-blueprint/60 shrink-0" />
+        <div className="flex-1 flex items-center gap-1 min-w-0">
+          {path.length > 0 ? (
+            <div className="flex items-center gap-1.5 truncate">
+              {path.map((item, i) => (
+                <React.Fragment key={item.id}>
+                  {i > 0 && <span className="text-concrete/40 text-[10px]">/</span>}
+                  <span className={`truncate ${i === path.length - 1 ? 'font-bold text-ink' : 'text-concrete'}`}>
+                    {item.name}
+                  </span>
+                </React.Fragment>
+              ))}
+            </div>
+          ) : (
+            <span className="text-concrete italic">{placeholder}</span>
+          )}
+        </div>
+        <ChevronDown size={14} className={`transition-transform duration-300 text-concrete shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
+      </div>
+
+      <AnimatePresence>
+        {isOpen && dropdownStyle && typeof window !== 'undefined' && createPortal(
+          <>
+            <div className="fixed inset-0 z-[9998]" onClick={() => setIsOpen(false)} />
+            <motion.div
+              initial={{ opacity: 0, y: dropUp ? -10 : 10, scale: 0.98 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: dropUp ? -10 : 10, scale: 0.98 }}
+              style={dropdownStyle}
+              className="bg-card border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col"
+            >
+              <div className="p-3 border-b border-border/40 bg-slate-50/50 dark:bg-white/5">
+                <div className="relative">
+                  <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-concrete" />
+                  <input
+                    autoFocus
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder={placeholder}
+                    className="w-full bg-card border border-border rounded-lg pl-9 pr-4 py-2 text-xs outline-none focus:border-blueprint transition-colors"
+                  />
+                </div>
+              </div>
+
+              <div className="max-h-72 overflow-y-auto custom-scrollbar p-2">
+                {renderTree(null)}
+              </div>
+
+              <div className="p-2 border-t border-border/40 bg-slate-50/30 dark:bg-white/5 flex justify-between items-center px-4">
+                <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest">
+                  {notebooks.length} notebooks
+                </span>
+                <button
+                  onClick={() => setIsOpen(false)}
+                  className="text-[10px] font-bold text-blueprint hover:underline"
+                >
+                  Close
+                </button>
+              </div>
+            </motion.div>
+          </>,
+          document.body
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}

memento-note/components/home-client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useCallback, useRef, useTransition, useMemo } from 'react'
+import React, { useState, useEffect, useCallback, useRef, useTransition, useMemo } from 'react'
 import { useSearchParams, useRouter } from 'next/navigation'
 import dynamic from 'next/dynamic'
 import { Note } from '@/lib/types'
@@ -11,7 +11,7 @@ import { NotesEditorialView } from '@/components/notes-editorial-view'
 import { MemoryEchoNotification } from '@/components/memory-echo-notification'
 import { NotebookSuggestionToast } from '@/components/notebook-suggestion-toast'
 import { Button } from '@/components/ui/button'
-import { Plus, ArrowUpDown, Search, Sparkles, FileText, FolderOpen } from 'lucide-react'
+import { Plus, ArrowUpDown, Search, Sparkles, FileText, FolderOpen, ChevronRight } from 'lucide-react'
 import { useNoteRefresh } from '@/context/NoteRefreshContext'
 import { useRefresh } from '@/lib/use-refresh'
 import { useReminderCheck } from '@/hooks/use-reminder-check'
@@ -332,6 +332,20 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
 
   const currentNotebook = notebooks.find((n: any) => n.id === searchParams.get('notebook'))
 
+  const notebookPath = useMemo(() => {
+    if (!currentNotebook) return []
+    const trail: any[] = []
+    let current: any = currentNotebook
+    while (current) {
+      trail.unshift(current)
+      if (!current.parentId) break
+      const parent = notebooks.find((nb: any) => nb.id === current.parentId)
+      if (!parent) break
+      current = parent
+    }
+    return trail
+  }, [currentNotebook, notebooks])
+
   useEffect(() => {
     setControls({
       isTabsMode: notesViewMode === 'tabs',
@@ -404,15 +418,29 @@ export function HomeClient({ initialNotes, initialSettings }: HomeClientProps) {
             isEditorialMode ? 'sticky top-0 bg-memento-paper/90 backdrop-blur-md z-30' : ''
           )}>
             <div className="flex justify-between items-start">
-              <h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight pr-12">
-                {currentNotebook 
-                  ? currentNotebook.name 
-                  : searchParams.get('shared') === '1' 
-                    ? (t('sidebar.sharedWithMe') || 'Partagées avec moi')
-                    : searchParams.get('reminders') === '1'
-                      ? (t('sidebar.reminders') || 'Rappels')
-                      : t('notes.title')}
-              </h1>
+              <div>
+                {currentNotebook && notebookPath.length > 0 && (
+                  <div className="flex items-center gap-2 text-base font-semibold mb-1">
+                    {notebookPath.map((nb: any, i: number) => (
+                      <React.Fragment key={nb.id}>
+                        {i > 0 && <ChevronRight size={16} className="text-foreground/40" />}
+                        <span className={i === notebookPath.length - 1 ? 'text-foreground' : 'text-foreground/60'}>
+                          {nb.name}
+                        </span>
+                      </React.Fragment>
+                    ))}
+                  </div>
+                )}
+                <h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight pr-12">
+                  {currentNotebook 
+                    ? currentNotebook.name 
+                    : searchParams.get('shared') === '1' 
+                      ? (t('sidebar.sharedWithMe') || 'Partagées avec moi')
+                      : searchParams.get('reminders') === '1'
+                        ? (t('sidebar.reminders') || 'Rappels')
+                        : t('notes.title')}
+                </h1>
+              </div>
             </div>
 
             <div className="flex items-center justify-between border-b border-foreground/5 pb-4">

memento-note/components/note-card.tsx

@@ -510,35 +510,49 @@ export const NoteCard = memo(function NoteCard({
               <StickyNote className="h-4 w-4 mr-2" />
               {t('notebookSuggestion.generalNotes')}
             </DropdownMenuItem>
-            {notebooks.filter(nb => !nb.parentId).map((notebook: any) => {
-               const NotebookIcon = getNotebookIcon(notebook.icon || 'folder')
-               const children = notebooks.filter((c: any) => c.parentId === notebook.id)
-               if (children.length > 0) {
-                 return (
-                   <DropdownMenuSub key={notebook.id}>
-                     <DropdownMenuSubTrigger className="gap-2">
-                       <NotebookIcon className="h-4 w-4" />
-                       {notebook.name}
-                       <ChevronRight className="h-3 w-3 ml-auto opacity-50" />
-                     </DropdownMenuSubTrigger>
-                     <DropdownMenuSubContent>
-                       <DropdownMenuItem onClick={() => handleMoveToNotebook(notebook.id)}>
-                         <NotebookIcon className="h-4 w-4 mr-2" />
-                         {notebook.name}
-                       </DropdownMenuItem>
-                       {children.map((child: any) => {
-                         const ChildIcon = getNotebookIcon(child.icon || 'folder')
-                         return (
-                           <DropdownMenuItem key={child.id} onClick={() => handleMoveToNotebook(child.id)}>
-                             <ChildIcon className="h-4 w-4 mr-2" />
-                             {child.name}
-                           </DropdownMenuItem>
-                         )
-                       })}
-                     </DropdownMenuSubContent>
-                   </DropdownMenuSub>
-                 )
-               }
+            {notebooks.filter(nb => !nb.parentId && !nb.trashedAt).map((notebook: any) => {
+                const NotebookIcon = getNotebookIcon(notebook.icon || 'folder')
+                const allDescendants = (parentId: string): any[] => {
+                  const kids = notebooks.filter((c: any) => c.parentId === parentId && !c.trashedAt)
+                  return kids.flatMap((k: any) => [k, ...allDescendants(k.id)])
+                }
+                const descendants = allDescendants(notebook.id)
+                if (descendants.length > 0) {
+                  return (
+                    <DropdownMenuSub key={notebook.id}>
+                      <DropdownMenuSubTrigger className="gap-2">
+                        <NotebookIcon className="h-4 w-4" />
+                        {notebook.name}
+                        <ChevronRight className="h-3 w-3 ml-auto opacity-50" />
+                      </DropdownMenuSubTrigger>
+                      <DropdownMenuSubContent>
+                        <DropdownMenuItem onClick={() => handleMoveToNotebook(notebook.id)}>
+                          <NotebookIcon className="h-4 w-4 mr-2" />
+                          {notebook.name}
+                        </DropdownMenuItem>
+                        {descendants.map((child: any) => {
+                          const ChildIcon = getNotebookIcon(child.icon || 'folder')
+                          const depth = (() => {
+                            let d = 0
+                            let current = child
+                            while (current.parentId && current.parentId !== notebook.id) {
+                              d++
+                              current = notebooks.find((nb: any) => nb.id === current.parentId)
+                              if (!current) break
+                            }
+                            return d
+                          })()
+                          return (
+                            <DropdownMenuItem key={child.id} onClick={() => handleMoveToNotebook(child.id)}>
+                              <NotebookIcon className="h-4 w-4 mr-2" />
+                              <span className="ml-{depth * 2}">{child.name}</span>
+                            </DropdownMenuItem>
+                          )
+                        })}
+                      </DropdownMenuSubContent>
+                    </DropdownMenuSub>
+                  )
+                }
                return (
                  <DropdownMenuItem key={notebook.id} onClick={() => handleMoveToNotebook(notebook.id)}>
                    <NotebookIcon className="h-4 w-4 mr-2" />

memento-note/components/note-editor/note-editor-context.tsx

@@ -822,7 +822,7 @@ export function NoteEditorProvider({ note, readOnly = false, fullPage = false, o
     fullPage,
     state,
     actions,
-    notebooks: notebooks.map(nb => ({ id: nb.id, name: nb.name })),
+    notebooks: notebooks.map(nb => ({ id: nb.id, name: nb.name, parentId: nb.parentId, trashedAt: nb.trashedAt })),
     globalLabels,
     fileInputRef,
     textareaRef,

memento-note/components/note-inline-editor.tsx

@@ -978,7 +978,7 @@ export function NoteInlineEditor({
             scheduleSave()
           } : undefined}
           lastActionApplied={previousContent !== null}
-          notebooks={notebooks.map(nb => ({ id: nb.id, name: nb.name }))}
+          notebooks={notebooks.map(nb => ({ id: nb.id, name: nb.name, parentId: nb.parentId, trashedAt: nb.trashedAt }))}
           diagramInsertFormat={noteType === 'richtext' ? 'html' : 'markdown'}
         />
       )}

memento-note/components/sidebar.tsx

@@ -14,8 +14,6 @@ import {
   FlaskConical,
   ArrowUpDown,
   Archive,
-  MessageSquare,
-  Sparkles,
   Trash2,
   User,
   LogOut,
@@ -23,10 +21,12 @@ import {
   GripVertical,
   Users,
   Bell,
+  Pencil,
+  Clock,
 } from 'lucide-react'
 import { useLanguage } from '@/lib/i18n'
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { getAllNotes } from '@/app/actions/notes'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { getAllNotes, getTrashCount } from '@/app/actions/notes'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { useNotebooks } from '@/context/notebooks-context'
 import { Notebook, Note } from '@/lib/types'
@@ -44,7 +44,7 @@ import {
 import { signOut } from 'next-auth/react'
 import { useNoteRefresh } from '@/context/NoteRefreshContext'
 
-type NavigationView = 'notebooks' | 'agents'
+type NavigationView = 'notebooks' | 'agents' | 'reminders'
 type SortOrder = 'newest' | 'oldest' | 'alpha'
 
 function NoteLink({
@@ -83,89 +83,138 @@ function SidebarCarnetItem({
   onCarnetClick,
   onNoteClick,
   onAddSubNotebook,
+  onRename,
+  onDelete,
   children,
   isDragging,
   dragHandleProps,
-  depth = 0,
+  level,
+  isExpanded,
+  toggleExpand,
 }: {
-  carnet: { id: string; name: string; initial: string; isPrivate?: boolean; hasChildren?: boolean }
+  carnet: { id: string; name: string; initial: string; isPrivate?: boolean }
   isActive: boolean
   notes: { id: string; title: string }[]
   activeNoteId: string | null
   onCarnetClick: () => void
   onNoteClick: (noteId: string, carnetId: string) => void
-  onAddSubNotebook?: () => void
+  onAddSubNotebook: () => void
+  onRename: () => void
+  onDelete: () => void
   children?: React.ReactNode
   isDragging?: boolean
   dragHandleProps?: React.HTMLAttributes<HTMLDivElement>
-  depth?: number
+  level: number
+  isExpanded: boolean
+  toggleExpand: () => void
 }) {
   const { t } = useLanguage()
-  const [expanded, setExpanded] = useState(false)
-  const showContent = isActive || expanded
+  const hasChildren = React.Children.count(children) > 0
 
   return (
     <div className={cn('transition-opacity', isDragging && 'opacity-40')}>
-      <div className="relative group/carnet">
+      <div
+        className="flex items-center group relative h-10"
+        style={{ paddingLeft: `${level * 16}px` }}
+      >
+        {level > 0 && (
+          <div className="absolute left-[8px] top-[-10px] bottom-1/2 w-px bg-border/40" />
+        )}
+        {level > 0 && (
+          <div className="absolute left-[8px] top-1/2 w-[8px] h-px bg-border/40" />
+        )}
+
         <div
           {...dragHandleProps}
-          className="absolute left-1 top-1/2 -translate-y-1/2 p-1 rounded text-muted-foreground/30 hover:text-muted-foreground cursor-grab active:cursor-grabbing opacity-0 group-hover/carnet:opacity-100 transition-opacity z-10"
-          title="Déplacer"
+          className="absolute left-1 top-1/2 -translate-y-1/2 p-1 rounded text-muted-foreground/30 hover:text-muted-foreground cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 transition-opacity z-10"
         >
           <GripVertical size={12} />
         </div>
 
-        <div
-          className={cn(
-            'w-full flex items-center gap-3 px-4 py-2.5 rounded-xl transition-all duration-200 group cursor-pointer',
-            isActive ? 'memento-active-nav' : 'hover:bg-white/40'
-          )}
-          onClick={onCarnetClick}
-        >
-          <motion.div
-            animate={{ rotate: showContent ? 90 : 0 }}
-            className="text-muted-foreground shrink-0"
-            onClick={(e) => { e.stopPropagation(); setExpanded(v => !v) }}
-          >
-            <ChevronRight size={14} />
-          </motion.div>
-
-          {depth > 0 && (
-            <div className="w-px h-4 bg-border/50 shrink-0" />
-          )}
-
-          <div className={cn(
-            'w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium border shrink-0',
-            isActive
-              ? 'bg-foreground text-background border-foreground'
-              : 'bg-white/60 text-foreground border-border'
-          )}>
-            {carnet.initial}
-          </div>
-
-          <span className={cn(
-            'text-[13px] font-medium transition-colors truncate flex-1',
-            isActive ? 'text-foreground' : 'text-muted-foreground'
-          )}>
-            {carnet.name}
-          </span>
-
-          {carnet.isPrivate && <Lock size={10} className="text-muted-foreground shrink-0" />}
-
-          {onAddSubNotebook && (
+        <div className="flex-1 flex items-center gap-1">
+          {hasChildren ? (
             <button
-              onClick={(e) => { e.stopPropagation(); onAddSubNotebook() }}
-              className="p-1 rounded-md text-muted-foreground/30 hover:text-foreground hover:bg-white/60 opacity-0 group-hover:opacity-100 transition-all shrink-0"
-              title={t('notebook.createSubNotebook') || 'Nouveau sous-carnet'}
+              onClick={(e) => { e.stopPropagation(); toggleExpand() }}
+              className="p-1 hover:bg-foreground/5 rounded-md transition-colors text-muted-foreground"
             >
-              <Plus size={12} />
+              <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.2 }}>
+                <ChevronRight size={14} />
+              </motion.div>
             </button>
+          ) : (
+            <div className="w-6" />
           )}
+
+          <motion.div
+            whileHover={{ x: 2 }}
+            onClick={onCarnetClick}
+            onDoubleClick={(e) => { e.stopPropagation(); onRename() }}
+            className={cn(
+              'flex-1 flex items-center gap-2.5 px-2 py-1.5 rounded-lg transition-all duration-300 group/item cursor-pointer relative',
+              isActive ? 'bg-white shadow-sm border border-border/40' : 'hover:bg-white/40'
+            )}
+          >
+            {isActive && (
+              <motion.div
+                layoutId="active-indicator"
+                className="absolute -left-1 w-1 h-4 bg-blueprint rounded-full"
+                transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+              />
+            )}
+            <div className={cn(
+              'w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border shrink-0 transition-all',
+              isActive
+                ? 'bg-blueprint text-white border-blueprint'
+                : 'bg-white/60 text-ink border-border'
+            )}>
+              {carnet.initial}
+            </div>
+
+            <div className="flex-1 text-left flex items-center gap-2 min-w-0">
+              <span className={cn(
+                'text-[12px] font-medium transition-colors truncate',
+                isActive ? 'text-ink' : 'text-muted-ink group-hover/item:text-ink'
+              )}>
+                {carnet.name}
+              </span>
+              {carnet.isPrivate && <Lock size={10} className="text-concrete/60 shrink-0" />}
+            </div>
+
+            <div className="flex items-center gap-1 opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0">
+              <button
+                onClick={(e) => { e.stopPropagation(); onAddSubNotebook() }}
+                className="p-1 hover:bg-ink/10 rounded-md transition-all text-concrete hover:text-ink"
+                title={t('notebook.createSubNotebook') || 'Add sub-carnet'}
+              >
+                <Plus size={10} />
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onRename() }}
+                className="p-1 hover:bg-ink/10 rounded-md transition-all text-concrete hover:text-ink"
+                title={t('notebook.rename') || 'Rename'}
+              >
+                <Pencil size={10} />
+              </button>
+              <button
+                onClick={(e) => { e.stopPropagation(); onDelete() }}
+                className="p-1 hover:bg-rose-50 rounded-md transition-all text-concrete hover:text-rose-500"
+                title={t('notebook.delete') || 'Delete'}
+              >
+                <Trash2 size={10} />
+              </button>
+
+              {notes.length > 0 && (
+                <span className="text-[9px] font-bold text-concrete/40 px-1.5 border border-border/40 rounded-full group-hover/item:text-concrete transition-colors">
+                  {notes.length}
+                </span>
+              )}
+            </div>
+          </motion.div>
         </div>
       </div>
 
-      <AnimatePresence>
-        {showContent && (
+      <AnimatePresence initial={false}>
+        {isExpanded && (
           <motion.div
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: 'auto', opacity: 1 }}
@@ -173,19 +222,25 @@ function SidebarCarnetItem({
             transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
             className="overflow-hidden"
           >
-            <div className={cn(depth > 0 && 'ml-4 border-l border-border/30 pl-2')}>
-              {children}
-              {notes.map(note => (
-                <NoteLink
-                  key={note.id}
-                  title={note.title}
-                  isActive={activeNoteId === note.id}
-                  onClick={() => onNoteClick(note.id, carnet.id)}
-                />
-              ))}
-              {notes.length === 0 && !children && (
-                <p className="pl-10 text-[11px] text-muted-foreground/50 py-2 italic font-light">{t('common.noResults')}</p>
-              )}
+            <div className="relative" style={{ marginLeft: `${(level + 1) * 16 + 10}px` }}>
+              <div className="absolute left-[-6px] top-0 bottom-4 w-px bg-border/30" />
+
+              <div className="space-y-0.5 py-1">
+                {children}
+                {isActive && notes.map(note => (
+                  <NoteLink
+                    key={note.id}
+                    title={note.title}
+                    isActive={activeNoteId === note.id}
+                    onClick={() => onNoteClick(note.id, carnet.id)}
+                  />
+                ))}
+                {isActive && notes.length === 0 && !hasChildren && (
+                  <p className="pl-8 py-2 text-[10px] italic text-muted-foreground/40 font-light">
+                    {t('common.noResults') || 'No notes found'}
+                  </p>
+                )}
+              </div>
             </div>
           </motion.div>
         )}
@@ -199,14 +254,21 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
   const searchParams = useSearchParams()
   const router = useRouter()
   const { t } = useLanguage()
-  const { notebooks, updateNotebookOrderOptimistic } = useNotebooks()
+  const { notebooks, trashNotebook, updateNotebookOrderOptimistic } = useNotebooks()
   const { refreshKey } = useNoteRefresh()
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
   const [createParentId, setCreateParentId] = useState<string | null>(null)
+  const [renamingNotebook, setRenamingNotebook] = useState<Notebook | null>(null)
+  const [renameValue, setRenameValue] = useState('')
+  const [deletingNotebook, setDeletingNotebook] = useState<Notebook | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
   const [notebookNotes, setNotebookNotes] = useState<Record<string, { id: string; title: string }[]>>({})
   const [activeView, setActiveView] = useState<NavigationView>('notebooks')
   const [sortOrder, setSortOrder] = useState<SortOrder>('newest')
   const [showSortMenu, setShowSortMenu] = useState(false)
+  const [trashCount, setTrashCount] = useState(0)
 
   const [draggedId, setDraggedId] = useState<string | null>(null)
   const [orderedNotebooks, setOrderedNotebooks] = useState<Notebook[]>([])
@@ -260,6 +322,12 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
     setOrderedNotebooks(sortedNotebooks)
   }, [sortedNotebooks])
 
+  useEffect(() => {
+    let cancelled = false
+    getTrashCount().then(count => { if (!cancelled) setTrashCount(count) })
+    return () => { cancelled = true }
+  }, [refreshKey])
+
   const notebookIdsKey = useMemo(() => notebooks.map(nb => nb.id).sort().join(','), [notebooks])
 
   useEffect(() => {
@@ -367,6 +435,130 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
     alpha: t('sidebar.sortAlpha'),
   }
 
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedIds(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
+
+  const handleStartRename = useCallback((notebook: Notebook) => {
+    setRenamingNotebook(notebook)
+    setRenameValue(notebook.name)
+  }, [])
+
+  const handleConfirmRename = useCallback(async () => {
+    if (!renamingNotebook || !renameValue.trim()) return
+    setIsRenaming(true)
+    try {
+      const res = await fetch(`/api/notebooks/${renamingNotebook.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: renameValue.trim() }),
+      })
+      if (!res.ok) throw new Error('Rename failed')
+      setRenamingNotebook(null)
+      setRenameValue('')
+      router.refresh()
+    } catch (err) {
+      console.error('Rename failed:', err)
+    } finally {
+      setIsRenaming(false)
+    }
+  }, [renamingNotebook, renameValue, router])
+
+  const getDescendantIds = useCallback((notebookId: string): string[] => {
+    const ids: string[] = []
+    const children = childNotebooks.get(notebookId) || []
+    for (const child of children) {
+      ids.push(child.id)
+      ids.push(...getDescendantIds(child.id))
+    }
+    return ids
+  }, [childNotebooks])
+
+  const handleConfirmDelete = useCallback(async () => {
+    if (!deletingNotebook) return
+    setIsDeleting(true)
+    try {
+      await trashNotebook(deletingNotebook.id)
+      setDeletingNotebook(null)
+      if (currentNotebookId === deletingNotebook.id) {
+        router.push('/')
+      }
+    } catch (err) {
+      console.error('Trash failed:', err)
+    } finally {
+      setIsDeleting(false)
+    }
+  }, [deletingNotebook, trashNotebook, currentNotebookId, router])
+
+  const renderCarnetTree = useCallback((parentId: string | undefined, level: number): React.ReactNode => {
+    const items = parentId === undefined
+      ? rootNotebooks
+      : (childNotebooks.get(parentId) || [])
+
+    return items.map((notebook: Notebook) => {
+      const isActive = currentNotebookId === notebook.id
+      const notes = notebookNotes[notebook.id] || []
+      const isDragging = draggedId === notebook.id
+      const children = childNotebooks.get(notebook.id) || []
+      const hasActiveDescendant = children.some(c =>
+        currentNotebookId === c.id || (childNotebooks.get(c.id) || []).some(gc => currentNotebookId === gc.id)
+      )
+      const isExpanded = expandedIds.has(notebook.id) || hasActiveDescendant
+
+      return (
+        <motion.div
+          key={notebook.id}
+        >
+          <div
+            draggable={level === 0}
+            onDragStart={level === 0 ? (e) => handleDragStart(e, notebook.id) : undefined}
+            onDragOver={level === 0 ? (e) => handleDragOver(e, notebook.id) : undefined}
+            onDragEnd={level === 0 ? handleDragEnd : undefined}
+          >
+            <SidebarCarnetItem
+              carnet={{
+                id: notebook.id,
+                name: notebook.name,
+                initial: notebook.name.charAt(0).toUpperCase(),
+                isPrivate: notebook.isPrivate,
+              }}
+              isActive={isActive}
+              notes={notes}
+              activeNoteId={currentNoteId}
+              onCarnetClick={() => {
+                if (currentNotebookId === notebook.id) {
+                  toggleExpand(notebook.id)
+                } else {
+                  handleCarnetClick(notebook.id)
+                  if (!expandedIds.has(notebook.id)) toggleExpand(notebook.id)
+                }
+              }}
+              onNoteClick={handleNoteClick}
+              onAddSubNotebook={() => {
+                setCreateParentId(notebook.id)
+                setIsCreateDialogOpen(true)
+                if (!expandedIds.has(notebook.id)) toggleExpand(notebook.id)
+              }}
+              onRename={() => handleStartRename(notebook)}
+              onDelete={() => setDeletingNotebook(notebook)}
+              isDragging={isDragging}
+              level={level}
+              isExpanded={isExpanded}
+              toggleExpand={() => toggleExpand(notebook.id)}
+            >
+              {renderCarnetTree(notebook.id, level + 1)}
+            </SidebarCarnetItem>
+          </div>
+        </motion.div>
+      )
+    })
+  }, [rootNotebooks, childNotebooks, currentNotebookId, currentNoteId, notebookNotes, draggedId, expandedIds, toggleExpand, handleCarnetClick, handleNoteClick, handleDragStart, handleDragOver, handleDragEnd, handleStartRename])
+
   return (
     <>
       <aside
@@ -435,14 +627,21 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
             <div className="flex bg-white/50 p-1 rounded-full border border-border transition-all">
               <button
                 onClick={() => { setActiveView('notebooks'); if (pathname !== '/') router.push('/') }}
-                className={cn('p-1.5 rounded-full transition-all', activeView === 'notebooks' ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground')}
+                className={cn('p-1.5 rounded-full transition-all', activeView === 'notebooks' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink')}
                 title={t('nav.notebooks')}
               >
                 <BookOpen size={14} />
               </button>
+              <button
+                onClick={() => setActiveView('reminders')}
+                className={cn('p-1.5 rounded-full transition-all', activeView === 'reminders' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink')}
+                title={t('sidebar.reminders')}
+              >
+                <Clock size={14} />
+              </button>
               <button
                 onClick={() => { setActiveView('agents'); router.push('/agents') }}
-                className={cn('p-1.5 rounded-full transition-all', activeView === 'agents' ? 'bg-foreground text-background' : 'text-muted-foreground hover:text-foreground')}
+                className={cn('p-1.5 rounded-full transition-all', activeView === 'agents' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink')}
                 title={t('nav.agents')}
               >
                 <Bot size={14} />
@@ -465,7 +664,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
               >
                 {/* Section header with sort button */}
                 <div className="flex items-center justify-between px-4 mb-3">
-                  <p className="text-[10px] font-bold text-muted-foreground tracking-widest uppercase">
+                  <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase">
                     {t('nav.notebooks')}
                   </p>
                   <div className="flex items-center gap-1">
@@ -521,68 +720,18 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   <div className={cn(
                     'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
                     isInboxActive
-                      ? 'bg-foreground text-background border-foreground'
-                      : 'bg-white/60 text-foreground border-border'
+                      ? 'bg-ink text-paper border-ink'
+                      : 'bg-white/60 text-ink border-border'
                   )}>
                     <Inbox size={14} />
                   </div>
                   <span className={cn(
                     'text-[13px] font-medium truncate',
-                    isInboxActive ? 'text-foreground' : 'text-muted-foreground'
+                    isInboxActive ? 'text-ink' : 'text-muted-ink'
                   )}>
                     {t('sidebar.inbox')}
                   </span>
                 </button>
-                
-                <button
-                  onClick={() => {
-                    const params = new URLSearchParams()
-                    params.set('shared', '1')
-                    params.set('forceList', '1')
-                    router.push(`/?${params.toString()}`)
-                  }}
-                  className={cn('sidebar-inbox-item', searchParams.get('shared') === '1' && pathname === '/' && 'active')}
-                >
-                  <div className={cn(
-                    'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
-                    searchParams.get('shared') === '1' && pathname === '/'
-                      ? 'bg-foreground text-background border-foreground'
-                      : 'bg-white/60 text-foreground border-border'
-                  )}>
-                    <Users size={14} />
-                  </div>
-                  <span className={cn(
-                    'text-[13px] font-medium truncate',
-                    searchParams.get('shared') === '1' && pathname === '/' ? 'text-foreground' : 'text-muted-foreground'
-                  )}>
-                    {t('sidebar.sharedWithMe')}
-                  </span>
-                </button>
-
-                <button
-                  onClick={() => {
-                    const params = new URLSearchParams()
-                    params.set('reminders', '1')
-                    params.set('forceList', '1')
-                    router.push(`/?${params.toString()}`)
-                  }}
-                  className={cn('sidebar-inbox-item', searchParams.get('reminders') === '1' && pathname === '/' && 'active')}
-                >
-                  <div className={cn(
-                    'w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium border shrink-0',
-                    searchParams.get('reminders') === '1' && pathname === '/'
-                      ? 'bg-foreground text-background border-foreground'
-                      : 'bg-white/60 text-foreground border-border'
-                  )}>
-                    <Bell size={14} />
-                  </div>
-                  <span className={cn(
-                    'text-[13px] font-medium truncate',
-                    searchParams.get('reminders') === '1' && pathname === '/' ? 'text-foreground' : 'text-muted-foreground'
-                  )}>
-                    {t('sidebar.reminders')}
-                  </span>
-                </button>
 
                 {/* Divider */}
                 <div className="mx-4 my-3 h-px bg-border/40" />
@@ -593,69 +742,23 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
                   onDrop={handleDrop}
                   onDragOver={(e) => e.preventDefault()}
                 >
-                  {rootNotebooks.map((notebook: Notebook) => {
-                    const isActive = currentNotebookId === notebook.id
-                    const notes = notebookNotes[notebook.id] || []
-                    const isDragging = draggedId === notebook.id
-                    const children = childNotebooks.get(notebook.id) || []
-                    const isChildActive = children.some(c => currentNotebookId === c.id)
-                    const isExpanded = isActive || isChildActive
-                    return (
-                      <motion.div
-                        key={notebook.id}
-                        layout
-                        transition={{ type: 'spring', stiffness: 300, damping: 30, mass: 0.8 }}
-                      >
-                        <div
-                          draggable
-                          onDragStart={(e) => handleDragStart(e, notebook.id)}
-                          onDragOver={(e) => handleDragOver(e, notebook.id)}
-                          onDragEnd={handleDragEnd}
-                        >
-                          <SidebarCarnetItem
-                            carnet={{
-                              id: notebook.id,
-                              name: notebook.name,
-                              initial: notebook.name.charAt(0).toUpperCase(),
-                              hasChildren: children.length > 0,
-                            }}
-                            isActive={isExpanded}
-                            notes={notes}
-                            activeNoteId={currentNoteId}
-                            onCarnetClick={() => handleCarnetClick(notebook.id)}
-                            onNoteClick={handleNoteClick}
-                            onAddSubNotebook={() => {
-                              setCreateParentId(notebook.id)
-                              setIsCreateDialogOpen(true)
-                            }}
-                            isDragging={isDragging}
-                            depth={0}
-                          >
-                            {children.map(child => {
-                              const childActive = currentNotebookId === child.id
-                              const childNotes = notebookNotes[child.id] || []
-                              return (
-                                <SidebarCarnetItem
-                                  key={child.id}
-                                  carnet={{
-                                    id: child.id,
-                                    name: child.name,
-                                    initial: child.name.charAt(0).toUpperCase(),
-                                  }}
-                                  isActive={childActive}
-                                  notes={childNotes}
-                                  activeNoteId={currentNoteId}
-                                  onCarnetClick={() => handleCarnetClick(child.id)}
-                                  onNoteClick={handleNoteClick}
-                                  depth={1}
-                                />
-                              )
-                            })}
-                          </SidebarCarnetItem>
-                        </div>
-                      </motion.div>
-                    )
-                  })}
+                  {renderCarnetTree(undefined, 0)}
+                </div>
+              </motion.div>
+            ) : activeView === 'reminders' ? (
+              <motion.div
+                key="reminders"
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 10 }}
+                transition={{ duration: 0.2 }}
+              >
+                <p className="text-[10px] font-bold text-muted-ink tracking-[0.2em] uppercase mb-4 px-4">
+                  {t('sidebar.reminders')}
+                </p>
+                <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
+                  <Clock size={24} className="mx-auto text-concrete/40 mb-3" />
+                  <p className="text-[11px] text-concrete italic">{t('sidebar.noReminders') || 'No active reminders.'}</p>
                 </div>
               </motion.div>
             ) : (
@@ -703,28 +806,60 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
         </div>
 
         {/* ── Footer ── */}
-        <div className="pt-4 p-5 border-t border-border space-y-1">
-          <Link
-            href="/archive"
-            className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
-          >
-            <Archive size={16} />
-            <span>{t('sidebar.archive')}</span>
-          </Link>
-          <Link
-            href="/trash"
-            className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
-          >
-            <Trash2 size={16} />
-            <span>{t('sidebar.trash')}</span>
-          </Link>
-          <Link
-            href="/settings"
-            className="flex items-center gap-3 px-4 py-2 text-[13px] text-[#1C1C1C]/60 hover:text-[#1C1C1C] transition-colors font-medium rounded-lg hover:bg-white/30"
-          >
-            <Settings size={16} />
-            <span>{t('nav.settings')}</span>
-          </Link>
+        <div className="pt-4 border-t border-border/40 mt-auto pb-4">
+          <div className="px-2 space-y-0.5">
+            <Link
+              href="/?shared=1&forceList=1"
+              className={cn(
+                'w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl',
+                searchParams.get('shared') === '1' && pathname === '/'
+                  ? 'bg-blueprint/5 text-blueprint'
+                  : 'text-muted-ink hover:text-ink hover:bg-black/5'
+              )}
+            >
+              <Users size={14} className={searchParams.get('shared') === '1' && pathname === '/' ? 'text-blueprint' : 'text-muted-ink group-hover:text-ink'} />
+              <span>{t('sidebar.sharedWithMe') || 'Shared'}</span>
+            </Link>
+
+            <Link
+              href="/archive"
+              className="w-full flex items-center gap-3 px-3 py-2 text-[12px] text-muted-ink hover:text-ink hover:bg-black/5 transition-all font-medium group rounded-xl"
+            >
+              <Archive size={14} className="text-muted-ink group-hover:text-ink" />
+              <span>{t('sidebar.archive')}</span>
+            </Link>
+
+            <Link
+              href="/trash"
+              className={cn(
+                'w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl',
+                pathname === '/trash'
+                  ? 'bg-rose-50 text-rose-500'
+                  : 'text-muted-ink hover:text-rose-500 hover:bg-rose-50/50'
+              )}
+            >
+              <Trash2 size={14} className={pathname === '/trash' ? 'text-rose-500' : 'text-muted-ink group-hover:text-rose-500'} />
+              <span>{t('sidebar.trash')}</span>
+              {trashCount > 0 && (
+                <span className="ml-auto w-1.5 h-1.5 rounded-full bg-rose-400" />
+              )}
+            </Link>
+
+            <div className="my-2 h-px bg-border/20 mx-2" />
+
+            <Link
+              href="/settings"
+              className={cn(
+                'w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl',
+                pathname.startsWith('/settings')
+                  ? 'bg-ink text-paper shadow-sm'
+                  : 'text-muted-ink hover:text-ink hover:bg-black/5'
+              )}
+            >
+              <Settings size={14} className={pathname.startsWith('/settings') ? 'text-paper' : 'text-muted-ink group-hover:text-ink'} />
+              <span>{t('nav.settings')}</span>
+            </Link>
+          </div>
         </div>
       </aside>
 
@@ -733,6 +868,109 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
         onOpenChange={setIsCreateDialogOpen}
         parentNotebookId={createParentId}
       />
+
+      {/* Rename Dialog */}
+      <AnimatePresence>
+        {renamingNotebook && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+            onClick={() => !isRenaming && setRenamingNotebook(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0, y: 10 }}
+              animate={{ scale: 1, opacity: 1, y: 0 }}
+              exit={{ scale: 0.9, opacity: 0, y: 10 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+              className="bg-card border border-border rounded-2xl p-6 shadow-xl w-80"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <h3 className="text-sm font-semibold mb-4 font-memento-serif">
+                {t('notebook.rename') || 'Rename notebook'}
+              </h3>
+              <input
+                autoFocus
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmRename(); if (e.key === 'Escape') setRenamingNotebook(null) }}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-transparent focus:outline-none focus:ring-2 focus:ring-foreground/20"
+                placeholder={t('notebook.namePlaceholder') || 'Notebook name'}
+              />
+              <div className="flex justify-end gap-2 mt-4">
+                <button
+                  onClick={() => setRenamingNotebook(null)}
+                  disabled={isRenaming}
+                  className="px-4 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg"
+                >
+                  {t('common.cancel') || 'Cancel'}
+                </button>
+                <button
+                  onClick={handleConfirmRename}
+                  disabled={isRenaming || !renameValue.trim()}
+                  className="px-4 py-1.5 text-xs font-medium bg-foreground text-background rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50"
+                >
+                  {isRenaming ? '...' : (t('common.confirm') || 'Rename')}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Delete Confirmation */}
+      <AnimatePresence>
+        {deletingNotebook && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+            onClick={() => !isDeleting && setDeletingNotebook(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0, y: 10 }}
+              animate={{ scale: 1, opacity: 1, y: 0 }}
+              exit={{ scale: 0.9, opacity: 0, y: 10 }}
+              transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+              className="bg-card border border-border rounded-2xl p-6 shadow-xl w-80"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="w-10 h-10 rounded-full bg-red-50 border border-red-100 flex items-center justify-center mb-3">
+                <Trash2 size={16} className="text-red-500" />
+              </div>
+              <h3 className="text-sm font-semibold mb-1 font-memento-serif">
+                {t('notebook.trashTitle') || 'Move to trash'}
+              </h3>
+              <p className="text-xs text-muted-foreground mb-4">
+                {t('notebook.trashConfirm', { name: deletingNotebook.name }) || `Move "${deletingNotebook.name}" to trash? You can restore it within 30 days.`}
+              </p>
+              {getDescendantIds(deletingNotebook.id).length > 0 && (
+                <p className="text-xs text-amber-600 mb-4 bg-amber-50 px-3 py-2 rounded-lg border border-amber-100">
+                  {t('notebook.trashCascadeWarning', { count: getDescendantIds(deletingNotebook.id).length }) || `${getDescendantIds(deletingNotebook.id).length} sub-notebook(s) will also be moved to trash.`}
+                </p>
+              )}
+              <div className="flex justify-end gap-2">
+                <button
+                  onClick={() => setDeletingNotebook(null)}
+                  disabled={isDeleting}
+                  className="px-4 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors rounded-lg"
+                >
+                  {t('common.cancel') || 'Cancel'}
+                </button>
+                <button
+                  onClick={handleConfirmDelete}
+                  disabled={isDeleting}
+                  className="px-4 py-1.5 text-xs font-medium bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors disabled:opacity-50"
+                >
+                  {isDeleting ? '...' : (t('notebook.moveToTrash') || 'Move to trash')}
+                </button>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </>
   )
 }

memento-note/context/notebooks-context.tsx

@@ -57,6 +57,9 @@ export interface NotebooksContextValue {
   createNotebookOptimistic: (data: CreateNotebookInput) => Promise<void>
   updateNotebook: (notebookId: string, data: UpdateNotebookInput) => Promise<void>
   deleteNotebook: (notebookId: string) => Promise<void>
+  trashNotebook: (notebookId: string) => Promise<void>
+  restoreNotebook: (notebookId: string) => Promise<void>
+  permanentDeleteNotebook: (notebookId: string) => Promise<void>
   updateNotebookOrderOptimistic: (notebookIds: string[]) => Promise<void>
   setCurrentNotebook: (notebook: Notebook | null) => void
 
@@ -215,6 +218,52 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
     triggerRefresh()
   }, [queryClient, triggerNotebooksRefresh, triggerRefresh])
 
+  const trashNotebook = useCallback(async (notebookId: string) => {
+    const response = await fetch(`/api/notebooks/${notebookId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ trashedAt: new Date().toISOString() }),
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to trash notebook')
+    }
+
+    queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
+    triggerNotebooksRefresh()
+    triggerRefresh()
+  }, [queryClient, triggerNotebooksRefresh, triggerRefresh])
+
+  const restoreNotebook = useCallback(async (notebookId: string) => {
+    const response = await fetch(`/api/notebooks/${notebookId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ trashedAt: null }),
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to restore notebook')
+    }
+
+    queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
+    triggerNotebooksRefresh()
+    triggerRefresh()
+  }, [queryClient, triggerNotebooksRefresh, triggerRefresh])
+
+  const permanentDeleteNotebook = useCallback(async (notebookId: string) => {
+    const response = await fetch(`/api/notebooks/${notebookId}`, {
+      method: 'DELETE',
+    })
+
+    if (!response.ok) {
+      throw new Error('Failed to permanently delete notebook')
+    }
+
+    queryClient.invalidateQueries({ queryKey: queryKeys.notebooks() })
+    triggerNotebooksRefresh()
+    triggerRefresh()
+  }, [queryClient, triggerNotebooksRefresh, triggerRefresh])
+
   const updateNotebookOrderOptimistic = useCallback(async (notebookIds: string[]) => {
     const response = await fetch('/api/notebooks/reorder', {
       method: 'POST',
@@ -378,6 +427,9 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
     createNotebookOptimistic,
     updateNotebook,
     deleteNotebook,
+    trashNotebook,
+    restoreNotebook,
+    permanentDeleteNotebook,
     updateNotebookOrderOptimistic,
     setCurrentNotebook,
     createLabel,
@@ -403,6 +455,9 @@ export function NotebooksProvider({ children, initialNotebooks = [] }: Notebooks
     createNotebookOptimistic,
     updateNotebook,
     deleteNotebook,
+    trashNotebook,
+    restoreNotebook,
+    permanentDeleteNotebook,
     updateNotebookOrderOptimistic,
     createLabel,
     updateLabel,

memento-note/lib/types.ts

@@ -14,6 +14,7 @@ export interface Notebook {
   color: string | null;
   order: number;
   parentId: string | null;
+  trashedAt?: Date | null;
   userId: string;
   createdAt: Date;
   updatedAt: Date;

memento-note/prisma/schema.prisma

@@ -83,6 +83,7 @@ model Notebook {
   color         String?
   order         Int
   parentId      String?
+  trashedAt     DateTime?
   userId        String
   createdAt     DateTime       @default(now())
   updatedAt     DateTime       @updatedAt
@@ -98,6 +99,7 @@ model Notebook {
   @@index([userId, order])
   @@index([userId])
   @@index([parentId])
+  @@index([trashedAt])
 }
 
 model Label {