Add safe database migration workflow and note history infrastructure.
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 5s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 5s
This introduces guarded migrations with automatic backups, fixes note creation after DB reset, and wires snapshot/restore history across notes surfaces.
This commit is contained in:
Sepehr Ramezani
994
Momento-main/momento/memento-note/components/notes-tabs-view.tsx
Normal file
994
Momento-main/momento/memento-note/components/notes-tabs-view.tsx
Normal file
@@ -0,0 +1,994 @@
|
||||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState, useTransition } from 'react'
|
||||
import { useNoteRefreshOptional } from '@/context/NoteRefreshContext'
|
||||
import {
|
||||
DndContext,
|
||||
type DragEndEvent,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
closestCenter,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core'
|
||||
import {
|
||||
SortableContext,
|
||||
arrayMove,
|
||||
verticalListSortingStrategy,
|
||||
sortableKeyboardCoordinates,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable'
|
||||
import { CSS } from '@dnd-kit/utilities'
|
||||
import { Note, NOTE_COLORS, NoteColor } from '@/lib/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { NoteInlineEditor } from '@/components/note-inline-editor'
|
||||
import { useLanguage } from '@/lib/i18n'
|
||||
import { getNoteDisplayTitle } from '@/lib/note-preview'
|
||||
import {
|
||||
updateFullOrderWithoutRevalidation,
|
||||
createNote,
|
||||
deleteNote,
|
||||
updateNote,
|
||||
toggleArchive,
|
||||
} from '@/app/actions/notes'
|
||||
import { useNotebooks } from '@/context/notebooks-context'
|
||||
import {
|
||||
GripVertical,
|
||||
ListChecks,
|
||||
Pin,
|
||||
PinOff,
|
||||
FileText,
|
||||
Plus,
|
||||
Loader2,
|
||||
Trash2,
|
||||
ListFilter,
|
||||
FolderInput,
|
||||
Archive,
|
||||
Share2,
|
||||
Check,
|
||||
Hash,
|
||||
History,
|
||||
PanelRightClose,
|
||||
PanelRightOpen,
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu'
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
import { toast } from 'sonner'
|
||||
import { format, type Locale } from 'date-fns'
|
||||
import { fr } from 'date-fns/locale/fr'
|
||||
import { enUS } from 'date-fns/locale/en-US'
|
||||
|
||||
interface NotesTabsViewProps {
|
||||
notes: Note[]
|
||||
onEdit?: (note: Note, readOnly?: boolean) => void
|
||||
currentNotebookId?: string | null
|
||||
noteHistoryEnabled?: boolean
|
||||
onOpenHistory?: (note: Note) => void
|
||||
onEnableHistory?: () => Promise<void>
|
||||
}
|
||||
|
||||
type SortOrder = 'date-desc' | 'date-asc' | 'title-asc' | 'title-desc'
|
||||
|
||||
// Color accent strip for each note
|
||||
const COLOR_ACCENT: Record<NoteColor, string> = {
|
||||
default: 'bg-primary',
|
||||
red: 'bg-red-400',
|
||||
orange: 'bg-orange-400',
|
||||
yellow: 'bg-amber-400',
|
||||
green: 'bg-emerald-400',
|
||||
teal: 'bg-teal-400',
|
||||
blue: 'bg-sky-400',
|
||||
purple: 'bg-violet-400',
|
||||
pink: 'bg-fuchsia-400',
|
||||
gray: 'bg-gray-400',
|
||||
}
|
||||
|
||||
// Background tint gradient for selected note panel
|
||||
const COLOR_PANEL_BG: Record<NoteColor, string> = {
|
||||
default: 'from-background to-background',
|
||||
red: 'from-red-50/60 dark:from-red-950/20 to-background',
|
||||
orange: 'from-orange-50/60 dark:from-orange-950/20 to-background',
|
||||
yellow: 'from-amber-50/60 dark:from-amber-950/20 to-background',
|
||||
green: 'from-emerald-50/60 dark:from-emerald-950/20 to-background',
|
||||
teal: 'from-teal-50/60 dark:from-teal-950/20 to-background',
|
||||
blue: 'from-sky-50/60 dark:from-sky-950/20 to-background',
|
||||
purple: 'from-violet-50/60 dark:from-violet-950/20 to-background',
|
||||
pink: 'from-fuchsia-50/60 dark:from-fuchsia-950/20 to-background',
|
||||
gray: 'from-gray-50/60 dark:from-gray-900/20 to-background',
|
||||
}
|
||||
|
||||
const COLOR_ICON: Record<NoteColor, string> = {
|
||||
default: 'text-primary',
|
||||
red: 'text-red-500',
|
||||
orange: 'text-orange-500',
|
||||
yellow: 'text-amber-500',
|
||||
green: 'text-emerald-500',
|
||||
teal: 'text-teal-500',
|
||||
blue: 'text-sky-500',
|
||||
purple: 'text-violet-500',
|
||||
pink: 'text-fuchsia-500',
|
||||
gray: 'text-gray-500',
|
||||
}
|
||||
|
||||
function getColorKey(note: Note): NoteColor {
|
||||
return (typeof note.color === 'string' && note.color in NOTE_COLORS
|
||||
? note.color
|
||||
: 'default') as NoteColor
|
||||
}
|
||||
|
||||
function getDateLocale(language: string) {
|
||||
if (language === 'fr') return fr
|
||||
if (language === 'fa') return require('date-fns/locale').faIR
|
||||
return enUS
|
||||
}
|
||||
|
||||
function formatNoteDate(date: Date | string, locale: Locale): string {
|
||||
const d = typeof date === 'string' ? new Date(date) : date
|
||||
return format(d, 'd MMM yyyy', { locale })
|
||||
}
|
||||
|
||||
function countWords(content: string | null | undefined): number {
|
||||
if (!content) return 0
|
||||
return content.trim().split(/\s+/).filter(Boolean).length
|
||||
}
|
||||
|
||||
// ─── Sortable List Item ───────────────────────────────────────────────────────
|
||||
|
||||
function SortableNoteListItem({
|
||||
note,
|
||||
selected,
|
||||
onSelect,
|
||||
onDelete,
|
||||
reorderLabel,
|
||||
deleteLabel,
|
||||
language,
|
||||
untitledLabel,
|
||||
}: {
|
||||
note: Note
|
||||
selected: boolean
|
||||
onSelect: () => void
|
||||
onDelete: () => void
|
||||
reorderLabel: string
|
||||
deleteLabel: string
|
||||
language: string
|
||||
untitledLabel: string
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: note.id,
|
||||
})
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
zIndex: isDragging ? 50 : undefined,
|
||||
}
|
||||
|
||||
const ck = getColorKey(note)
|
||||
const title = getNoteDisplayTitle(note, untitledLabel)
|
||||
const snippet =
|
||||
note.type === 'checklist'
|
||||
? (note.checkItems?.map((i) => i.text).join(' · ') || '').substring(0, 200)
|
||||
: (note.content || '').substring(0, 200)
|
||||
|
||||
const dateLocale = getDateLocale(language)
|
||||
const dateStr = formatNoteDate(note.updatedAt, dateLocale)
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn(
|
||||
'group relative flex cursor-pointer select-none items-stretch transition-all duration-150',
|
||||
'border-b border-border/50 last:border-b-0',
|
||||
selected
|
||||
? 'bg-primary/[0.06] dark:bg-primary/10'
|
||||
: 'bg-background hover:bg-muted/40 dark:hover:bg-muted/20',
|
||||
isDragging && 'opacity-75 shadow-lg ring-1 ring-primary/20'
|
||||
)}
|
||||
onClick={onSelect}
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
>
|
||||
{/* Left accent bar — solid when selected, transparent otherwise */}
|
||||
<div
|
||||
className={cn(
|
||||
'w-[3px] shrink-0 rounded-r-full transition-all duration-200',
|
||||
selected ? COLOR_ACCENT[ck] : 'bg-transparent'
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Main card content */}
|
||||
<div className="min-w-0 flex-1 px-4 py-4">
|
||||
|
||||
{/* Row 1: type icon + date */}
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{note.type === 'checklist' ? (
|
||||
<ListChecks
|
||||
className={cn(
|
||||
'h-3.5 w-3.5 shrink-0',
|
||||
selected ? COLOR_ICON[ck] : 'text-muted-foreground/40'
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<FileText
|
||||
className={cn(
|
||||
'h-3.5 w-3.5 shrink-0',
|
||||
selected ? COLOR_ICON[ck] : 'text-muted-foreground/40'
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{note.isPinned && (
|
||||
<Pin className="h-3 w-3 shrink-0 fill-current text-primary/70" />
|
||||
)}
|
||||
</div>
|
||||
<span className={cn(
|
||||
'shrink-0 text-[11px] tabular-nums',
|
||||
selected ? 'text-muted-foreground' : 'text-muted-foreground/60'
|
||||
)}>
|
||||
{dateStr}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Row 2: title */}
|
||||
<p
|
||||
className={cn(
|
||||
'mb-1.5 text-[13.5px] leading-snug transition-colors',
|
||||
selected
|
||||
? 'font-semibold text-foreground'
|
||||
: 'font-medium text-foreground/85 group-hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
|
||||
{/* Row 3: snippet */}
|
||||
{snippet && (
|
||||
<p className="line-clamp-2 text-[12px] leading-relaxed text-muted-foreground/60">
|
||||
{snippet}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Row 4: label chips */}
|
||||
{Array.isArray(note.labels) && note.labels.length > 0 && (
|
||||
<div className="mt-2.5 flex flex-wrap gap-1.5">
|
||||
{note.labels.slice(0, 3).map((label) => (
|
||||
<span
|
||||
key={label}
|
||||
className={cn(
|
||||
'inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[10px] font-medium leading-none transition-colors',
|
||||
selected
|
||||
? 'border-primary/25 text-primary/70'
|
||||
: 'border-border text-muted-foreground/65 group-hover:border-border/80'
|
||||
)}
|
||||
>
|
||||
<span className="h-1 w-1 rounded-full bg-current opacity-60" />
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
{note.labels.length > 3 && (
|
||||
<span className="inline-flex items-center rounded-full border border-border/60 px-2 py-0.5 text-[10px] text-muted-foreground/50">
|
||||
+{note.labels.length - 3}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions column: drag + delete on hover */}
|
||||
<div className="flex flex-col items-center justify-between py-3 pe-2 opacity-0 transition-opacity group-hover:opacity-100">
|
||||
<button
|
||||
type="button"
|
||||
className="cursor-grab p-1 text-muted-foreground/30 active:cursor-grabbing"
|
||||
aria-label={reorderLabel}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<GripVertical className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onDelete()
|
||||
}}
|
||||
className="p-1 text-muted-foreground/40 hover:text-destructive"
|
||||
aria-label={deleteLabel}
|
||||
title={deleteLabel}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Note Meta Sidebar ────────────────────────────────────────────────────────
|
||||
|
||||
function SidebarSection({ title }: { title: string }) {
|
||||
return (
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<p className="text-[10px] font-black uppercase tracking-[0.12em] text-muted-foreground whitespace-nowrap">
|
||||
{title}
|
||||
</p>
|
||||
<div className="flex-1 h-px bg-border/60" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarActionBtn({
|
||||
icon,
|
||||
label,
|
||||
onClick,
|
||||
disabled = false,
|
||||
}: {
|
||||
icon: React.ReactNode
|
||||
label: string
|
||||
onClick: () => void
|
||||
disabled?: boolean
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"group flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-[13px] font-medium transition-all duration-150",
|
||||
disabled
|
||||
? "cursor-not-allowed text-muted-foreground/60 opacity-70"
|
||||
: "text-foreground/70 hover:bg-sky-50 hover:text-sky-700"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"transition-colors",
|
||||
disabled ? "text-muted-foreground/60" : "text-muted-foreground group-hover:text-sky-600"
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function NoteMetaSidebar({
|
||||
note,
|
||||
onPinToggle,
|
||||
onArchive,
|
||||
noteHistoryEnabled = false,
|
||||
onOpenHistory,
|
||||
onEnableHistory,
|
||||
}: {
|
||||
note: Note
|
||||
onPinToggle: (note: Note) => void
|
||||
onArchive: (note: Note) => void
|
||||
noteHistoryEnabled?: boolean
|
||||
onOpenHistory?: (note: Note) => void
|
||||
onEnableHistory?: () => Promise<void>
|
||||
}) {
|
||||
const { t } = useLanguage()
|
||||
const { notebooks, moveNoteToNotebookOptimistic } = useNotebooks()
|
||||
const [moveOpen, setMoveOpen] = useState(false)
|
||||
const [isMoving, setIsMoving] = useState(false)
|
||||
|
||||
// t() returns the key itself when not found — use this wrapper for safe fallbacks
|
||||
const ts = (key: string, fallback: string) => {
|
||||
const v = t(key as Parameters<typeof t>[0])
|
||||
return v === key ? fallback : v
|
||||
}
|
||||
|
||||
const wordCount = countWords(note.content)
|
||||
|
||||
const noteTypeLabel =
|
||||
note.type === 'checklist'
|
||||
? ts('notes.typeChecklist', 'Checklist')
|
||||
: note.isMarkdown
|
||||
? ts('notes.typeMarkdown', 'Markdown')
|
||||
: ts('notes.typeText', 'Text')
|
||||
|
||||
const handleMoveToNotebook = async (notebookId: string | null) => {
|
||||
setIsMoving(true)
|
||||
try {
|
||||
await moveNoteToNotebookOptimistic(note.id, notebookId)
|
||||
setMoveOpen(false)
|
||||
toast.success(ts('notebookSuggestion.movedToNotebook', 'Note déplacée'))
|
||||
} catch {
|
||||
toast.error(ts('notes.moveFailed', 'Déplacement échoué'))
|
||||
} finally {
|
||||
setIsMoving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleHistory = async () => {
|
||||
if (!noteHistoryEnabled) {
|
||||
if (!onEnableHistory) {
|
||||
toast.info(ts('notes.historyDisabledDesc', "L'historique est désactivé pour votre compte."))
|
||||
return
|
||||
}
|
||||
try {
|
||||
await onEnableHistory()
|
||||
toast.success(ts('notes.historyEnabled', 'Historique activé'))
|
||||
onOpenHistory?.(note)
|
||||
} catch {
|
||||
toast.error(ts('general.error', 'Erreur'))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
onOpenHistory?.(note)
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="flex w-56 shrink-0 flex-col bg-muted border-l border-slate-300 border-t-2 border-t-primary/40 overflow-y-auto shadow-[-6px_0_16px_-4px_rgba(0,0,0,0.08)]">
|
||||
|
||||
{/* ── DOCUMENT INFO ── */}
|
||||
<div className="px-4 pt-5 pb-4 border-b border-border">
|
||||
<SidebarSection title={ts('notes.documentInfo', 'Document Info')} />
|
||||
|
||||
<div className="space-y-3">
|
||||
{/* Type */}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[11px] font-semibold text-muted-foreground">{ts('notes.type', 'Type')}</p>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
|
||||
note.type === 'checklist'
|
||||
? "bg-emerald-50 border-emerald-200 text-emerald-700"
|
||||
: note.isMarkdown
|
||||
? "bg-violet-50 border-violet-200 text-violet-700"
|
||||
: "bg-card border-slate-200 text-slate-600"
|
||||
)}
|
||||
>
|
||||
{note.type === 'checklist'
|
||||
? <ListChecks className="h-3 w-3" />
|
||||
: <FileText className="h-3 w-3" />}
|
||||
{noteTypeLabel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Word count — discreet inline row */}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[11px] font-semibold text-muted-foreground">{ts('notes.wordCount', 'Mots')}</p>
|
||||
<p className="text-[13px] font-semibold text-foreground/70 tabular-nums">
|
||||
{wordCount.toLocaleString()} <span className="text-[10px] font-normal text-muted-foreground">{ts('notes.words', 'mots')}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
{Array.isArray(note.labels) && note.labels.length > 0 && (
|
||||
<div>
|
||||
<p className="mb-1.5 text-[11px] font-semibold text-muted-foreground">{ts('notes.labels', 'Labels')}</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{note.labels.map((label) => (
|
||||
<span
|
||||
key={label}
|
||||
className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-card px-2 py-0.5 text-[11px] font-medium text-foreground/70"
|
||||
>
|
||||
<Hash className="h-2.5 w-2.5" />
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── ACTIONS ── */}
|
||||
<div className="px-4 pt-4 pb-5 flex-1">
|
||||
<SidebarSection title={ts('notes.actions', 'Actions')} />
|
||||
|
||||
<div className="space-y-0.5">
|
||||
|
||||
{/* Move to notebook */}
|
||||
<Popover open={moveOpen} onOpenChange={setMoveOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="group flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-[13px] font-medium text-foreground/70 hover:bg-sky-50 hover:text-sky-700 transition-all duration-150"
|
||||
>
|
||||
<span className="text-muted-foreground group-hover:text-sky-600 transition-colors">
|
||||
{isMoving
|
||||
? <Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
: <FolderInput className="h-3.5 w-3.5" />}
|
||||
</span>
|
||||
{t('notebookSuggestion.moveToNotebook')}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side="left" align="start" className="w-52 p-1.5">
|
||||
<div className="mb-1 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-muted-foreground/60">
|
||||
{t('notebookSuggestion.moveToNotebook')}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleMoveToNotebook(null)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded px-2 py-1.5 text-[12px] font-medium hover:bg-muted transition-colors',
|
||||
!note.notebookId ? 'text-primary' : 'text-foreground/70'
|
||||
)}
|
||||
>
|
||||
{!note.notebookId
|
||||
? <Check className="h-3 w-3 shrink-0" />
|
||||
: <span className="h-3 w-3 shrink-0" />}
|
||||
{t('notes.generalNotes')}
|
||||
</button>
|
||||
{notebooks.map((nb) => (
|
||||
<button
|
||||
key={nb.id}
|
||||
type="button"
|
||||
onClick={() => handleMoveToNotebook(nb.id)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-2 rounded px-2 py-1.5 text-[12px] font-medium hover:bg-muted transition-colors',
|
||||
note.notebookId === nb.id ? 'text-primary' : 'text-foreground/70'
|
||||
)}
|
||||
>
|
||||
{note.notebookId === nb.id
|
||||
? <Check className="h-3 w-3 shrink-0" />
|
||||
: <span className="h-3 w-3 shrink-0" />}
|
||||
{nb.name}
|
||||
</button>
|
||||
))}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
{/* Pin / Unpin */}
|
||||
<SidebarActionBtn
|
||||
icon={note.isPinned ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />}
|
||||
label={note.isPinned ? t('notes.unpin') : t('notes.pin')}
|
||||
onClick={() => onPinToggle(note)}
|
||||
disabled
|
||||
/>
|
||||
|
||||
{/* Archive */}
|
||||
<SidebarActionBtn
|
||||
icon={<Archive className="h-3.5 w-3.5" />}
|
||||
label={t('notes.archive')}
|
||||
onClick={() => onArchive(note)}
|
||||
/>
|
||||
|
||||
{/* History */}
|
||||
<SidebarActionBtn
|
||||
icon={<History className="h-3.5 w-3.5" />}
|
||||
label={
|
||||
noteHistoryEnabled
|
||||
? ts('notes.history', 'Historique')
|
||||
: ts('notes.enableHistory', "Activer l'historique")
|
||||
}
|
||||
onClick={() => void handleHistory()}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main Component ───────────────────────────────────────────────────────────
|
||||
|
||||
export function NotesTabsView({
|
||||
notes,
|
||||
onEdit,
|
||||
currentNotebookId,
|
||||
noteHistoryEnabled = false,
|
||||
onOpenHistory,
|
||||
onEnableHistory,
|
||||
}: NotesTabsViewProps) {
|
||||
const { t, language } = useLanguage()
|
||||
const { triggerRefresh } = useNoteRefreshOptional()
|
||||
const [items, setItems] = useState<Note[]>(notes)
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||
const [isCreating, startCreating] = useTransition()
|
||||
const [noteToDelete, setNoteToDelete] = useState<Note | null>(null)
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>('date-desc')
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
setItems((prev) => {
|
||||
const prevIds = prev.map((n) => n.id).join(',')
|
||||
const incomingIds = notes.map((n) => n.id).join(',')
|
||||
if (prevIds === incomingIds) {
|
||||
return prev.map((p) => {
|
||||
const fresh = notes.find((n) => n.id === p.id)
|
||||
if (!fresh) return p
|
||||
const labelsChanged = JSON.stringify(fresh.labels?.sort()) !== JSON.stringify(p.labels?.sort())
|
||||
return {
|
||||
...fresh,
|
||||
title: p.title,
|
||||
content: p.content,
|
||||
checkItems: p.checkItems,
|
||||
labels: labelsChanged ? fresh.labels : p.labels
|
||||
}
|
||||
})
|
||||
}
|
||||
return notes.map((fresh) => {
|
||||
const local = prev.find((p) => p.id === fresh.id)
|
||||
if (!local) return fresh
|
||||
const labelsChanged = JSON.stringify(fresh.labels?.sort()) !== JSON.stringify(local.labels?.sort())
|
||||
return {
|
||||
...fresh,
|
||||
title: local.title,
|
||||
content: local.content,
|
||||
checkItems: local.checkItems,
|
||||
labels: labelsChanged ? fresh.labels : local.labels
|
||||
}
|
||||
})
|
||||
})
|
||||
}, [notes])
|
||||
|
||||
useEffect(() => {
|
||||
if (items.length === 0) {
|
||||
setSelectedId(null)
|
||||
return
|
||||
}
|
||||
setSelectedId((prev) =>
|
||||
prev && items.some((n) => n.id === prev) ? prev : items[0].id
|
||||
)
|
||||
}, [items])
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: Event) => {
|
||||
const { name } = (e as CustomEvent).detail
|
||||
if (!name) return
|
||||
setItems((prev) =>
|
||||
prev.map((note) => {
|
||||
const currentLabels = note.labels || []
|
||||
const updated = currentLabels.filter((l) => l.toLowerCase() !== name.toLowerCase())
|
||||
if (updated.length === currentLabels.length) return note
|
||||
return { ...note, labels: updated.length > 0 ? updated : null }
|
||||
})
|
||||
)
|
||||
}
|
||||
window.addEventListener('label-deleted', handler)
|
||||
return () => window.removeEventListener('label-deleted', handler)
|
||||
}, [])
|
||||
|
||||
// Sorted display items (does NOT affect persisted order)
|
||||
const sortedItems = useMemo(() => {
|
||||
if (sortOrder === 'date-desc') return [...items]
|
||||
return [...items].sort((a, b) => {
|
||||
if (sortOrder === 'date-asc') {
|
||||
return new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
|
||||
}
|
||||
if (sortOrder === 'title-asc') {
|
||||
return (a.title || '').localeCompare(b.title || '')
|
||||
}
|
||||
if (sortOrder === 'title-desc') {
|
||||
return (b.title || '').localeCompare(a.title || '')
|
||||
}
|
||||
return 0
|
||||
})
|
||||
}, [items, sortOrder])
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
|
||||
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
|
||||
)
|
||||
|
||||
const handleDragEnd = useCallback(
|
||||
async (event: DragEndEvent) => {
|
||||
const { active, over } = event
|
||||
if (!over || active.id === over.id) return
|
||||
const oldIndex = items.findIndex((n) => n.id === active.id)
|
||||
const newIndex = items.findIndex((n) => n.id === over.id)
|
||||
if (oldIndex < 0 || newIndex < 0) return
|
||||
const reordered = arrayMove(items, oldIndex, newIndex)
|
||||
setItems(reordered)
|
||||
try {
|
||||
await updateFullOrderWithoutRevalidation(reordered.map((n) => n.id))
|
||||
} catch {
|
||||
setItems(notes)
|
||||
toast.error(t('notes.moveFailed'))
|
||||
}
|
||||
},
|
||||
[items, notes, t]
|
||||
)
|
||||
|
||||
const selected = items.find((n) => n.id === selectedId) ?? null
|
||||
const colorKey = selected ? getColorKey(selected) : 'default'
|
||||
|
||||
const handleCreateNote = () => {
|
||||
startCreating(async () => {
|
||||
try {
|
||||
const newNote = await createNote({
|
||||
content: '',
|
||||
title: undefined,
|
||||
notebookId: currentNotebookId || undefined,
|
||||
skipRevalidation: true
|
||||
})
|
||||
if (!newNote) return
|
||||
setItems((prev) => {
|
||||
const pinned = prev.filter(n => n.isPinned)
|
||||
const unpinned = prev.filter(n => !n.isPinned)
|
||||
return [...pinned, newNote, ...unpinned]
|
||||
})
|
||||
setSelectedId(newNote.id)
|
||||
triggerRefresh()
|
||||
} catch {
|
||||
toast.error(t('notes.createFailed') || 'Impossible de créer la note')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handlePinToggle = async (note: Note) => {
|
||||
const next = !note.isPinned
|
||||
setItems((prev) => prev.map((n) => n.id === note.id ? { ...n, isPinned: next } : n))
|
||||
try {
|
||||
await updateNote(note.id, { isPinned: next }, { skipRevalidation: true })
|
||||
toast.success(next ? (t('notes.pinned') || 'Épinglée') : (t('notes.unpinned') || 'Désépinglée'))
|
||||
} catch {
|
||||
setItems((prev) => prev.map((n) => n.id === note.id ? { ...n, isPinned: note.isPinned } : n))
|
||||
toast.error(t('notes.updateFailed') || 'Mise à jour échouée')
|
||||
}
|
||||
}
|
||||
|
||||
const handleArchive = async (note: Note) => {
|
||||
try {
|
||||
await toggleArchive(note.id, true)
|
||||
setItems((prev) => prev.filter((n) => n.id !== note.id))
|
||||
setSelectedId((prev) => (prev === note.id ? null : prev))
|
||||
triggerRefresh()
|
||||
toast.success(t('notes.archived') || 'Note archivée')
|
||||
} catch {
|
||||
toast.error(t('notes.archiveFailed') || 'Archivage échoué')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex min-h-0 flex-1 gap-0 overflow-hidden rounded-xl border border-border/70 shadow-sm"
|
||||
style={{ height: 'max(360px, min(85vh, calc(100vh - 9rem)))' }}
|
||||
data-testid="notes-grid-tabs"
|
||||
>
|
||||
{/* ── Left panel: note list ── */}
|
||||
<div className="flex w-80 shrink-0 flex-col border-r border-border/60 bg-background">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-border/60 bg-background/95 px-4 py-3.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold tracking-tight text-foreground">
|
||||
{t('notes.title')}
|
||||
</span>
|
||||
<span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
|
||||
{items.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Sort / filter button */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
'h-7 w-7 p-0 text-muted-foreground/70 hover:bg-primary/8 hover:text-primary',
|
||||
sortOrder !== 'date-desc' && 'text-primary bg-primary/8'
|
||||
)}
|
||||
title={t('notes.sort') || 'Trier'}
|
||||
>
|
||||
<ListFilter className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
<DropdownMenuLabel className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60 py-1">
|
||||
{t('notes.sortBy') || 'Trier par'}
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuRadioGroup value={sortOrder} onValueChange={(v) => setSortOrder(v as SortOrder)}>
|
||||
<DropdownMenuRadioItem value="date-desc" className="text-[13px]">
|
||||
{t('notes.sortDateDesc') || 'Date (récent)'}
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="date-asc" className="text-[13px]">
|
||||
{t('notes.sortDateAsc') || 'Date (ancien)'}
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="title-asc" className="text-[13px]">
|
||||
{t('notes.sortTitleAsc') || 'Titre A → Z'}
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="title-desc" className="text-[13px]">
|
||||
{t('notes.sortTitleDesc') || 'Titre Z → A'}
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* New note button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 w-7 p-0 text-muted-foreground/70 hover:bg-primary/8 hover:text-primary"
|
||||
onClick={handleCreateNote}
|
||||
disabled={isCreating}
|
||||
title={t('notes.newNote')}
|
||||
>
|
||||
{isCreating
|
||||
? <Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
: <Plus className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable note list */}
|
||||
<div
|
||||
className="flex-1 overflow-y-auto overscroll-contain bg-background"
|
||||
role="listbox"
|
||||
aria-label={t('notes.viewTabs')}
|
||||
>
|
||||
{items.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center px-6 py-16 text-center">
|
||||
<div className="mb-4 rounded-2xl border border-border/60 bg-muted/30 p-4">
|
||||
<FileText className="h-6 w-6 text-muted-foreground/40" />
|
||||
</div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{t('notes.emptyStateTabs') || 'Aucune note'}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground/60">{t('notes.createFirst') || 'Créez votre première note'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
id="notes-tabs-dnd"
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={items.map((n) => n.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
{sortedItems.map((note) => (
|
||||
<SortableNoteListItem
|
||||
key={note.id}
|
||||
note={note}
|
||||
selected={note.id === selectedId}
|
||||
onSelect={() => setSelectedId(note.id)}
|
||||
onDelete={() => setNoteToDelete(note)}
|
||||
reorderLabel={t('notes.reorderTabs')}
|
||||
deleteLabel={t('notes.delete')}
|
||||
language={language}
|
||||
untitledLabel={t('notes.untitled')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Right content panel ── */}
|
||||
{selected ? (
|
||||
<div className="flex min-w-0 flex-1 overflow-hidden">
|
||||
{/* Editor */}
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex min-w-0 flex-1 flex-col overflow-hidden bg-gradient-to-b',
|
||||
COLOR_PANEL_BG[colorKey]
|
||||
)}
|
||||
>
|
||||
<NoteInlineEditor
|
||||
key={selected.id}
|
||||
note={selected}
|
||||
noteHistoryEnabled={noteHistoryEnabled}
|
||||
onOpenHistory={onOpenHistory}
|
||||
colorKey={colorKey}
|
||||
defaultPreviewMode={true}
|
||||
onChange={(noteId, fields) => {
|
||||
setItems((prev) =>
|
||||
prev.map((n) => (n.id === noteId ? { ...n, ...fields } : n))
|
||||
)
|
||||
}}
|
||||
onDelete={(noteId) => {
|
||||
setItems((prev) => prev.filter((n) => n.id !== noteId))
|
||||
setSelectedId((prev) => (prev === noteId ? null : prev))
|
||||
}}
|
||||
onArchive={(noteId) => {
|
||||
setItems((prev) => prev.filter((n) => n.id !== noteId))
|
||||
setSelectedId((prev) => (prev === noteId ? null : prev))
|
||||
triggerRefresh()
|
||||
}}
|
||||
/>
|
||||
{/* Toggle sidebar button — top-right of editor, always visible */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSidebarOpen((v) => !v)}
|
||||
title={sidebarOpen ? 'Masquer le panneau' : 'Afficher le panneau'}
|
||||
className="absolute top-3 right-3 z-20 flex h-7 w-7 items-center justify-center rounded-md border border-border/70 bg-background/90 backdrop-blur-sm shadow-sm text-muted-foreground hover:text-primary hover:border-primary/40 hover:bg-primary/5 transition-colors"
|
||||
>
|
||||
{sidebarOpen
|
||||
? <PanelRightClose className="h-3.5 w-3.5" />
|
||||
: <PanelRightOpen className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Meta sidebar — collapsible */}
|
||||
{sidebarOpen && (
|
||||
<NoteMetaSidebar
|
||||
note={selected}
|
||||
onPinToggle={handlePinToggle}
|
||||
onArchive={handleArchive}
|
||||
noteHistoryEnabled={noteHistoryEnabled}
|
||||
onOpenHistory={onOpenHistory}
|
||||
onEnableHistory={onEnableHistory}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex min-w-0 flex-1 items-center justify-center bg-muted/10">
|
||||
<div className="px-10 text-center">
|
||||
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-2xl border border-border/60 bg-background shadow-sm">
|
||||
<FileText className="h-7 w-7 text-muted-foreground/30" />
|
||||
</div>
|
||||
<p className="text-sm font-medium text-foreground/60">
|
||||
{items.length === 0 ? t('notes.emptyNotebook') : t('notes.noNoteSelected')}
|
||||
</p>
|
||||
<p className="mt-1.5 text-xs text-muted-foreground/50 max-w-[200px] mx-auto leading-relaxed">
|
||||
{items.length === 0
|
||||
? t('notes.emptyNotebookDesc')
|
||||
: t('notes.selectOrCreateNote')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={!!noteToDelete} onOpenChange={() => setNoteToDelete(null)}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t('notes.confirmDeleteTitle') || t('notes.delete')}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{t('notes.confirmDelete') || 'Are you sure you want to delete this note?'}
|
||||
{noteToDelete && (
|
||||
<span className="mt-2 block font-medium text-foreground">
|
||||
"{getNoteDisplayTitle(noteToDelete, t('notes.untitled'))}"
|
||||
</span>
|
||||
)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setNoteToDelete(null)}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={async () => {
|
||||
if (!noteToDelete) return
|
||||
try {
|
||||
await deleteNote(noteToDelete.id, { skipRevalidation: true })
|
||||
setItems((prev) => prev.filter((n) => n.id !== noteToDelete.id))
|
||||
setSelectedId((prev) => (prev === noteToDelete.id ? null : prev))
|
||||
setNoteToDelete(null)
|
||||
triggerRefresh()
|
||||
toast.success(t('notes.deleted'))
|
||||
} catch {
|
||||
toast.error(t('notes.deleteFailed'))
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('notes.delete')}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user