244 lines
10 KiB
TypeScript
244 lines
10 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo } from 'react'
|
|
import { Note } from '@/lib/types'
|
|
import { format, formatDistanceToNow } from 'date-fns'
|
|
import { fr } from 'date-fns/locale/fr'
|
|
import { enUS } from 'date-fns/locale/en-US'
|
|
import { X, Info, Clock, Hash, Book, FileText, Calendar, Tag, ChevronRight } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
import { useNotebooks } from '@/context/notebooks-context'
|
|
import { LabelBadge } from './label-badge'
|
|
import { NoteHistoryModal } from './note-history-modal'
|
|
import { enableNoteHistory } from '@/app/actions/notes'
|
|
|
|
type Tab = 'info' | 'versions'
|
|
|
|
interface NoteDocumentInfoPanelProps {
|
|
note: Note
|
|
content: string
|
|
onClose: () => void
|
|
onNoteRestored?: (note: Note) => void
|
|
}
|
|
|
|
function getLocale(lang: string) {
|
|
return lang === 'fr' ? fr : enUS
|
|
}
|
|
|
|
function wordCount(text: string) {
|
|
return text.replace(/<[^>]+>/g, ' ').trim().split(/\s+/).filter(Boolean).length
|
|
}
|
|
|
|
function charCount(text: string) {
|
|
return text.replace(/<[^>]+>/g, '').length
|
|
}
|
|
|
|
const noteTypeLabel: Record<string, string> = {
|
|
richtext: 'Rich Text',
|
|
markdown: 'Markdown',
|
|
text: 'Texte',
|
|
checklist: 'Liste de tâches',
|
|
}
|
|
|
|
export function NoteDocumentInfoPanel({ note, content, onClose, onNoteRestored }: NoteDocumentInfoPanelProps) {
|
|
const { t, language } = useLanguage()
|
|
const { notebooks } = useNotebooks()
|
|
const [activeTab, setActiveTab] = useState<Tab>('info')
|
|
const [showHistory, setShowHistory] = useState(false)
|
|
const [historyEnabled, setHistoryEnabled] = useState(note.historyEnabled ?? false)
|
|
const locale = getLocale(language)
|
|
|
|
const notebook = useMemo(
|
|
() => notebooks.find(nb => nb.id === note.notebookId),
|
|
[notebooks, note.notebookId]
|
|
)
|
|
|
|
const words = useMemo(() => wordCount(content), [content])
|
|
const chars = useMemo(() => charCount(content), [content])
|
|
|
|
const createdAt = note.createdAt ? new Date(note.createdAt as unknown as string) : null
|
|
const updatedAt = note.contentUpdatedAt ? new Date(note.contentUpdatedAt as unknown as string) : null
|
|
|
|
return (
|
|
<>
|
|
<div className="flex w-80 shrink-0 flex-col border-l border-border/40 bg-background overflow-hidden">
|
|
|
|
{/* Header tabs */}
|
|
<div className="flex items-center justify-between px-5 py-4 border-b border-border/40">
|
|
<div className="flex gap-1">
|
|
{(['info', 'versions'] as Tab[]).map(tab => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={cn(
|
|
'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all',
|
|
activeTab === tab
|
|
? 'bg-foreground text-background'
|
|
: 'text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5'
|
|
)}
|
|
>
|
|
{tab === 'info' && <Info className="h-3 w-3" />}
|
|
{tab === 'versions' && <Clock className="h-3 w-3" />}
|
|
{tab === 'info' ? 'Info' : 'Versions'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-full text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
|
|
{/* ── INFO TAB ── */}
|
|
{activeTab === 'info' && (
|
|
<div>
|
|
{/* Stats — grand display numbers */}
|
|
<div className="grid grid-cols-2 border-b border-border/30">
|
|
<div className="flex flex-col items-center gap-1 py-6 border-r border-border/30">
|
|
<span className="text-4xl font-bold font-memento-serif tabular-nums tracking-tight">{words}</span>
|
|
<span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground font-semibold">mots</span>
|
|
</div>
|
|
<div className="flex flex-col items-center gap-1 py-6">
|
|
<span className="text-4xl font-bold font-memento-serif tabular-nums tracking-tight">{chars}</span>
|
|
<span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground font-semibold">caractères</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-border/30">
|
|
{notebook && (
|
|
<div className="flex items-start gap-3 px-4 py-3">
|
|
<Book className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-0.5">Carnet</p>
|
|
<p className="text-sm font-medium">{notebook.name}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-start gap-3 px-4 py-3">
|
|
<FileText className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-0.5">Type</p>
|
|
<p className="text-sm font-medium">{noteTypeLabel[note.type] || note.type}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{createdAt && (
|
|
<div className="flex items-start gap-3 px-4 py-3">
|
|
<Calendar className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-0.5">Créée le</p>
|
|
<p className="text-sm font-medium">{format(createdAt, 'd MMM yyyy', { locale })}</p>
|
|
<p className="text-[11px] text-muted-foreground mt-0.5">
|
|
{formatDistanceToNow(createdAt, { addSuffix: true, locale })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{updatedAt && (
|
|
<div className="flex items-start gap-3 px-4 py-3">
|
|
<Clock className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div>
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-0.5">Modifiée</p>
|
|
<p className="text-sm font-medium">{format(updatedAt, 'd MMM yyyy · HH:mm', { locale })}</p>
|
|
<p className="text-[11px] text-muted-foreground mt-0.5">
|
|
{formatDistanceToNow(updatedAt, { addSuffix: true, locale })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{(note.labels ?? []).length > 0 && (
|
|
<div className="flex items-start gap-3 px-4 py-3">
|
|
<Tag className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-1.5">Labels</p>
|
|
<div className="flex flex-wrap gap-1">
|
|
{(note.labels ?? []).map(label => (
|
|
<LabelBadge key={label} label={label} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-start gap-3 px-4 py-3">
|
|
<Hash className="h-3.5 w-3.5 text-muted-foreground mt-0.5 shrink-0" />
|
|
<div className="min-w-0">
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-0.5">ID</p>
|
|
<p className="text-[11px] text-muted-foreground font-mono truncate">{note.id}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── VERSIONS TAB ── */}
|
|
{activeTab === 'versions' && (
|
|
<div className="p-4 space-y-4">
|
|
{!historyEnabled ? (
|
|
<div className="text-center py-6 space-y-3">
|
|
<Clock className="h-8 w-8 text-muted-foreground/30 mx-auto" />
|
|
<p className="text-sm text-muted-foreground">L'historique n'est pas activé pour cette note.</p>
|
|
<button
|
|
className="text-xs px-4 py-2 rounded-lg bg-foreground text-background font-medium hover:opacity-80 transition-opacity"
|
|
onClick={async () => {
|
|
await enableNoteHistory(note.id)
|
|
setHistoryEnabled(true)
|
|
setShowHistory(true)
|
|
}}
|
|
>
|
|
Activer l'historique
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<p className="text-[10px] uppercase tracking-widest text-muted-foreground mb-3">Versions sauvegardées</p>
|
|
<button
|
|
className="w-full flex items-center justify-between p-3 rounded-xl border border-border hover:bg-muted transition-colors text-left"
|
|
onClick={() => setShowHistory(true)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-2 h-2 rounded-full bg-emerald-500 shrink-0" />
|
|
<div>
|
|
<p className="text-sm font-medium">Voir l'historique</p>
|
|
<p className="text-[11px] text-muted-foreground">Comparer et restaurer des versions</p>
|
|
</div>
|
|
</div>
|
|
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* NoteHistoryModal with correct props */}
|
|
{showHistory && (
|
|
<NoteHistoryModal
|
|
open={showHistory}
|
|
onOpenChange={(v) => setShowHistory(v)}
|
|
note={note}
|
|
enabled={historyEnabled}
|
|
onEnableHistory={async () => {
|
|
await enableNoteHistory(note.id)
|
|
setHistoryEnabled(true)
|
|
}}
|
|
onRestored={(restored) => {
|
|
setShowHistory(false)
|
|
onNoteRestored?.(restored)
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|