sepehr
153c921960
Some checks failed
Deploy to Production / Build and Deploy (push) Failing after 1m7s
Replaced ~100+ hardcoded French and English text strings across 30+ components with proper i18n t() calls. Added 57 new translation keys to all 15 locale files (ar, de, en, es, fa, fr, hi, it, ja, ko, nl, pl, pt, ru, zh). Key changes: - contextual-ai-chat.tsx: 30 French strings → t() (actions, toasts, labels, placeholders) - ai-chat.tsx: 15 French/English strings → t() (header, tabs, welcome, insights, history) - note-inline-editor.tsx: 20 French fallbacks removed (toolbar, save status, checklist) - lab-skeleton.tsx: French loading text → t() - admin-header.tsx, header.tsx, editor-connections-section.tsx: French fallbacks removed - New AI chat component, agent cards, sidebar, settings panel i18n cleanup Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
547 lines
19 KiB
TypeScript
547 lines
19 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, 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 } from '@/app/actions/notes'
|
|
import {
|
|
GripVertical,
|
|
Hash,
|
|
ListChecks,
|
|
Pin,
|
|
FileText,
|
|
Clock,
|
|
Plus,
|
|
Loader2,
|
|
Trash2,
|
|
} from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { toast } from 'sonner'
|
|
import { formatDistanceToNow } 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
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// ─── 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, 150)
|
|
: (note.content || '').substring(0, 150)
|
|
|
|
const dateLocale = getDateLocale(language)
|
|
const timeAgo = formatDistanceToNow(new Date(note.updatedAt), {
|
|
addSuffix: true,
|
|
locale: dateLocale,
|
|
})
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
className={cn(
|
|
'group relative flex cursor-pointer select-none items-stretch gap-0 transition-all duration-150',
|
|
'border-b border-border/40 last:border-b-0',
|
|
selected
|
|
? 'bg-primary/5 dark:bg-primary/10 shadow-sm'
|
|
: 'hover:bg-muted/50',
|
|
isDragging && 'opacity-80 shadow-xl ring-2 ring-primary/30 rounded-lg'
|
|
)}
|
|
onClick={onSelect}
|
|
role="option"
|
|
aria-selected={selected}
|
|
>
|
|
{/* Color accent bar */}
|
|
<div
|
|
className={cn(
|
|
'w-1 shrink-0 transition-all duration-200',
|
|
selected ? COLOR_ACCENT[ck] : 'bg-transparent group-hover:bg-border/40'
|
|
)}
|
|
/>
|
|
|
|
{/* Drag handle */}
|
|
<button
|
|
type="button"
|
|
className="flex cursor-grab items-center px-1.5 text-muted-foreground/30 opacity-0 transition-opacity group-hover:opacity-100 active:cursor-grabbing"
|
|
aria-label={reorderLabel}
|
|
{...attributes}
|
|
{...listeners}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<GripVertical className="h-3.5 w-3.5" />
|
|
</button>
|
|
|
|
{/* Note type icon */}
|
|
<div className="flex items-center py-4 pe-1">
|
|
{note.type === 'checklist' ? (
|
|
<ListChecks
|
|
className={cn(
|
|
'h-4 w-4 shrink-0 transition-colors',
|
|
selected ? COLOR_ICON[ck] : 'text-muted-foreground/50 group-hover:text-muted-foreground'
|
|
)}
|
|
/>
|
|
) : (
|
|
<FileText
|
|
className={cn(
|
|
'h-4 w-4 shrink-0 transition-colors',
|
|
selected ? COLOR_ICON[ck] : 'text-muted-foreground/50 group-hover:text-muted-foreground'
|
|
)}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Text content */}
|
|
<div className="min-w-0 flex-1 py-3.5 pe-3">
|
|
<div className="flex items-center gap-2">
|
|
<p
|
|
className={cn(
|
|
'truncate text-base font-heading font-medium transition-colors',
|
|
selected ? 'text-foreground' : 'text-foreground/80 group-hover:text-foreground'
|
|
)}
|
|
>
|
|
{title}
|
|
</p>
|
|
{note.isPinned && (
|
|
<Pin className="h-3 w-3 shrink-0 fill-current text-primary" aria-label="Épinglée" />
|
|
)}
|
|
</div>
|
|
{snippet && (
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground/70">{snippet}</p>
|
|
)}
|
|
<div className="mt-1.5 flex items-center gap-2">
|
|
<span className="flex items-center gap-1 text-[11px] text-muted-foreground/50">
|
|
<Clock className="h-2.5 w-2.5" />
|
|
{timeAgo}
|
|
</span>
|
|
{Array.isArray(note.labels) && note.labels.length > 0 && (
|
|
<>
|
|
<span className="text-muted-foreground/30">·</span>
|
|
<div className="flex items-center gap-1">
|
|
<Hash className="h-2.5 w-2.5 text-muted-foreground/40" />
|
|
<span className="truncate text-[11px] text-muted-foreground/50">
|
|
{note.labels.slice(0, 2).join(', ')}
|
|
{note.labels.length > 2 && ` +${note.labels.length - 2}`}
|
|
</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Delete button - visible on hover */}
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onDelete()
|
|
}}
|
|
className="flex items-center px-2 text-red-500/60 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-600"
|
|
aria-label={deleteLabel}
|
|
title={deleteLabel}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Main Component ───────────────────────────────────────────────────────────
|
|
|
|
export function NotesTabsView({ notes, onEdit, currentNotebookId }: 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)
|
|
|
|
useEffect(() => {
|
|
// Only reset when notes are added or removed, NOT on content/field changes
|
|
// Field changes arrive through onChange -> setItems already
|
|
setItems((prev) => {
|
|
const prevIds = prev.map((n) => n.id).join(',')
|
|
const incomingIds = notes.map((n) => n.id).join(',')
|
|
if (prevIds === incomingIds) {
|
|
// Same set of notes: merge only structural fields (pin, color, archive)
|
|
return prev.map((p) => {
|
|
const fresh = notes.find((n) => n.id === p.id)
|
|
if (!fresh) return p
|
|
// Use fresh labels from server if they've changed (e.g., global label deletion)
|
|
const labelsChanged = JSON.stringify(fresh.labels?.sort()) !== JSON.stringify(p.labels?.sort())
|
|
return {
|
|
...fresh,
|
|
title: p.title,
|
|
content: p.content,
|
|
checkItems: p.checkItems,
|
|
isMarkdown: p.isMarkdown,
|
|
// Always use server labels if different (for global label changes)
|
|
labels: labelsChanged ? fresh.labels : p.labels
|
|
}
|
|
})
|
|
}
|
|
// Different set (add/remove) or reordered from server: full sync
|
|
// CRITICAL: We MUST preserve local text edits so inline editor state isn't lost
|
|
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,
|
|
isMarkdown: local.isMarkdown,
|
|
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])
|
|
|
|
// Scroll to top of sidebar on note change handled by NoteInlineEditor internally
|
|
|
|
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'
|
|
|
|
/** Create a new blank note, add it to the sidebar and select it immediately */
|
|
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')
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
<div
|
|
className="flex min-h-0 flex-1 gap-0 overflow-hidden rounded-2xl border border-border/60 shadow-sm"
|
|
style={{ height: 'max(360px, min(85vh, calc(100vh - 9rem)))' }}
|
|
data-testid="notes-grid-tabs"
|
|
>
|
|
{/* ── Left sidebar: note list ── */}
|
|
<div className="flex w-72 shrink-0 flex-col border-r border-border/60 bg-muted/20">
|
|
{/* Sidebar header with note count + new note button */}
|
|
<div className="border-b border-border/40 px-3 py-2.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60">
|
|
{t('notes.title')}
|
|
<span className="ms-2 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
|
|
{items.length}
|
|
</span>
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
|
|
onClick={handleCreateNote}
|
|
disabled={isCreating}
|
|
title={t('notes.newNote') || 'Nouvelle note'}
|
|
>
|
|
{isCreating
|
|
? <Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
: <Plus className="h-3.5 w-3.5" />}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scrollable note list */}
|
|
<div
|
|
className="flex-1 overflow-y-auto overscroll-contain p-2"
|
|
role="listbox"
|
|
aria-label={t('notes.viewTabs')}
|
|
>
|
|
{items.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 px-4 text-center">
|
|
<div className="mb-3 rounded-full bg-background p-3 shadow-sm border border-border/50">
|
|
<FileText className="h-5 w-5 text-muted-foreground/40" />
|
|
</div>
|
|
<p className="text-sm font-medium text-muted-foreground">{t('notes.emptyStateTabs') || 'Aucune 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 gap-0.5">
|
|
{items.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 — always in edit mode ── */}
|
|
{selected ? (
|
|
<div
|
|
className={cn(
|
|
'flex min-w-0 flex-1 flex-col overflow-hidden bg-gradient-to-br',
|
|
COLOR_PANEL_BG[colorKey]
|
|
)}
|
|
>
|
|
<NoteInlineEditor
|
|
key={selected.id}
|
|
note={selected}
|
|
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))
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="flex min-w-0 flex-1 items-center justify-center bg-muted/10 border-l border-border/40">
|
|
<div className="text-center px-6">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-background shadow-sm border border-border/50">
|
|
<FileText className="h-8 w-8 text-muted-foreground/30" />
|
|
</div>
|
|
<h3 className="text-lg font-heading font-medium text-foreground">{items.length === 0 ? 'Carnet vide' : 'Aucune note sélectionnée'}</h3>
|
|
<p className="mt-2 text-sm text-muted-foreground max-w-sm mx-auto">
|
|
{items.length === 0
|
|
? "Ce carnet ne contient aucune note. Cliquez sur le bouton + pour en créer une."
|
|
: "Sélectionnez une note dans la liste à gauche ou créez-en une nouvelle."}
|
|
</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>
|
|
)
|
|
}
|
|
|