feat(notes): vues structurées tableau/kanban, flashcards et MCP robuste
Ajoute la base organisable par carnet (schéma, champs partagés, valeurs par note) avec activation guidée, tableau éditable, kanban et suppression de colonnes. Corrige le multiselect en vue tableau et enrichit sidebar, grille et i18n FR/EN. Inclut aussi les améliorations flashcards SM-2, l'audit consentement IA et la robustesse du serveur MCP (config, validation, rate-limit, métriques). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Antigravity
@@ -0,0 +1,253 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import type { Note } from '@/lib/types'
|
||||
import type {
|
||||
ColumnFilter,
|
||||
ColumnSort,
|
||||
NotebookSchemaPayload,
|
||||
NotePropertyValues,
|
||||
} from '@/lib/structured-views/types'
|
||||
import {
|
||||
filterNotesWithProperties,
|
||||
sortNotesWithProperties,
|
||||
} from '@/lib/structured-views/property-utils'
|
||||
import { PropertyValueEditor } from './property-value-editor'
|
||||
import { getNoteDisplayTitle } from '@/lib/note-preview'
|
||||
import { useLanguage } from '@/lib/i18n'
|
||||
import { formatAbsoluteDateLocalized } from '@/lib/utils/format-localized-date'
|
||||
import { ChevronDown, ChevronUp, Filter, Trash2 } from 'lucide-react'
|
||||
|
||||
type NotesStructuredTableProps = {
|
||||
notes: Note[]
|
||||
schema: NotebookSchemaPayload
|
||||
noteValues: Record<string, NotePropertyValues>
|
||||
onOpen: (note: Note) => void
|
||||
onPropertyChange: (noteId: string, propertyId: string, value: unknown) => void
|
||||
onDeleteProperty?: (propertyId: string) => Promise<void>
|
||||
}
|
||||
|
||||
export function NotesStructuredTable({
|
||||
notes,
|
||||
schema,
|
||||
noteValues,
|
||||
onOpen,
|
||||
onPropertyChange,
|
||||
onDeleteProperty,
|
||||
}: NotesStructuredTableProps) {
|
||||
const { t, language } = useLanguage()
|
||||
const untitled = t('notes.untitled')
|
||||
const [sort, setSort] = useState<ColumnSort>({ propertyId: 'updatedAt', direction: 'desc' })
|
||||
const [filterPropId, setFilterPropId] = useState<string | null>(null)
|
||||
const [filterOp, setFilterOp] = useState<ColumnFilter['operator']>('contains')
|
||||
const [filterValue, setFilterValue] = useState('')
|
||||
const [propertyToDelete, setPropertyToDelete] = useState<{ id: string; name: string } | null>(null)
|
||||
const [deletingProperty, setDeletingProperty] = useState(false)
|
||||
|
||||
const filters: ColumnFilter[] = useMemo(() => {
|
||||
if (!filterPropId) return []
|
||||
return [{ propertyId: filterPropId, operator: filterOp, value: filterValue }]
|
||||
}, [filterPropId, filterOp, filterValue])
|
||||
|
||||
const displayed = useMemo(() => {
|
||||
const filtered = filterNotesWithProperties(notes, noteValues, filters, schema.properties)
|
||||
return sortNotesWithProperties(filtered, noteValues, sort, schema.properties)
|
||||
}, [notes, noteValues, filters, sort, schema.properties])
|
||||
|
||||
const toggleSort = (propertyId: ColumnSort['propertyId']) => {
|
||||
setSort((prev) =>
|
||||
prev.propertyId === propertyId
|
||||
? { propertyId, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
|
||||
: { propertyId, direction: 'asc' },
|
||||
)
|
||||
}
|
||||
|
||||
const SortIcon = ({ field }: { field: ColumnSort['propertyId'] }) =>
|
||||
sort.propertyId !== field ? null : sort.direction === 'asc' ? (
|
||||
<ChevronUp size={12} />
|
||||
) : (
|
||||
<ChevronDown size={12} />
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-3">
|
||||
<div className="flex flex-wrap items-center gap-2 text-[11px]">
|
||||
<Filter size={14} className="text-muted-foreground" />
|
||||
<select
|
||||
value={filterPropId ?? ''}
|
||||
onChange={(e) => setFilterPropId(e.target.value || null)}
|
||||
className="rounded-lg border border-border bg-background px-2 py-1"
|
||||
>
|
||||
<option value="">{t('structuredViews.noFilter')}</option>
|
||||
<option value="title">{t('notes.tableTitle')}</option>
|
||||
{schema.properties.map((p) => (
|
||||
<option key={p.id} value={p.id}>{p.name}</option>
|
||||
))}
|
||||
</select>
|
||||
{filterPropId && (
|
||||
<>
|
||||
<select
|
||||
value={filterOp}
|
||||
onChange={(e) => setFilterOp(e.target.value as ColumnFilter['operator'])}
|
||||
className="rounded-lg border border-border bg-background px-2 py-1"
|
||||
>
|
||||
<option value="contains">{t('structuredViews.filterContains')}</option>
|
||||
<option value="equals">{t('structuredViews.filterEquals')}</option>
|
||||
<option value="empty">{t('structuredViews.filterEmpty')}</option>
|
||||
</select>
|
||||
{filterOp !== 'empty' && (
|
||||
<input
|
||||
value={filterValue}
|
||||
onChange={(e) => setFilterValue(e.target.value)}
|
||||
className="rounded-lg border border-border bg-background px-2 py-1 min-w-[120px]"
|
||||
placeholder={t('structuredViews.filterValue')}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto border border-border/40 rounded-2xl bg-card/30 shadow-sm">
|
||||
<table className="w-full text-left border-collapse min-w-[800px]">
|
||||
<thead>
|
||||
<tr className="border-b border-border/30">
|
||||
<th
|
||||
className="px-4 py-3 text-[10px] uppercase tracking-widest font-black text-muted-foreground cursor-pointer hover:text-foreground w-[22%]"
|
||||
onClick={() => toggleSort('title')}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{t('notes.tableTitle')} <SortIcon field="title" />
|
||||
</span>
|
||||
</th>
|
||||
{schema.properties.map((p) => (
|
||||
<th
|
||||
key={p.id}
|
||||
className="px-4 py-3 text-[10px] uppercase tracking-widest font-black text-muted-foreground group/col"
|
||||
>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleSort(p.id)}
|
||||
className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
|
||||
>
|
||||
{p.name} <SortIcon field={p.id} />
|
||||
</button>
|
||||
{onDeleteProperty && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setPropertyToDelete({ id: p.id, name: p.name })
|
||||
}}
|
||||
className="opacity-40 group-hover/col:opacity-100 p-0.5 rounded hover:text-red-500 hover:bg-red-500/10 transition-all shrink-0"
|
||||
title={t('structuredViews.deleteProperty')}
|
||||
aria-label={t('structuredViews.deleteProperty')}
|
||||
>
|
||||
<Trash2 size={11} />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
<th
|
||||
className="px-4 py-3 text-[10px] uppercase tracking-widest font-black text-muted-foreground cursor-pointer hover:text-foreground w-[12%]"
|
||||
onClick={() => toggleSort('updatedAt')}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{t('notes.tableModified')} <SortIcon field="updatedAt" />
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-foreground/[0.03]">
|
||||
{displayed.map((note) => {
|
||||
const vals = noteValues[note.id] ?? {}
|
||||
return (
|
||||
<tr key={note.id} className="hover:bg-foreground/[0.02] transition-colors group">
|
||||
<td className="px-4 py-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen(note)}
|
||||
className="font-memento-serif text-[13px] font-medium text-left truncate max-w-[220px] group-hover:text-brand-accent transition-colors"
|
||||
>
|
||||
{getNoteDisplayTitle(note, untitled)}
|
||||
</button>
|
||||
</td>
|
||||
{schema.properties.map((p) => (
|
||||
<td
|
||||
key={p.id}
|
||||
className="px-4 py-2 align-top"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="min-w-[100px] max-w-[180px]">
|
||||
<PropertyValueEditor
|
||||
property={p}
|
||||
value={vals[p.id]}
|
||||
compact
|
||||
onChange={(v) => onPropertyChange(note.id, p.id, v)}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
))}
|
||||
<td className="px-4 py-2 text-[11px] text-muted-foreground whitespace-nowrap">
|
||||
{formatAbsoluteDateLocalized(new Date(note.updatedAt), language, 'MMM d, yyyy')}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{displayed.length === 0 && (
|
||||
<p className="text-center py-8 text-muted-foreground text-sm">{t('structuredViews.noMatchingNotes')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<AlertDialog
|
||||
open={Boolean(propertyToDelete)}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) setPropertyToDelete(null)
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t('structuredViews.deletePropertyTitle')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{t('structuredViews.deletePropertyConfirm', { name: propertyToDelete?.name ?? '' })}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deletingProperty}>{t('general.cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
disabled={deletingProperty || !propertyToDelete}
|
||||
className="bg-red-600 hover:bg-red-700"
|
||||
onClick={async (e) => {
|
||||
e.preventDefault()
|
||||
if (!propertyToDelete || !onDeleteProperty) return
|
||||
setDeletingProperty(true)
|
||||
try {
|
||||
await onDeleteProperty(propertyToDelete.id)
|
||||
if (filterPropId === propertyToDelete.id) setFilterPropId(null)
|
||||
setPropertyToDelete(null)
|
||||
} finally {
|
||||
setDeletingProperty(false)
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t('structuredViews.deleteProperty')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user