feat: hierarchical notebook system - trash, selectors, breadcrumb, sidebar tree
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m9s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 2m9s
- 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
This commit is contained in:
Antigravity
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'}
|
||||
|
||||
240
memento-note/components/hierarchical-notebook-selector.tsx
Normal file
240
memento-note/components/hierarchical-notebook-selector.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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'}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user