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/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>
     </>
   )
 }