Files
Momento/memento-note/components/structured-views/structured-views-intro.tsx
Antigravity 0784c94242
Some checks failed
CI / Lint, Test & Build (push) Failing after 57s
CI / Deploy production (on server) (push) Has been skipped
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>
2026-05-24 23:03:16 +00:00

96 lines
3.0 KiB
TypeScript

'use client'
import { Columns3, Database, Table2, type LucideIcon } from 'lucide-react'
import { useLanguage } from '@/lib/i18n'
import { cn } from '@/lib/utils'
import type { BootstrapStructuredTarget } from '@/lib/structured-views/bootstrap-structured-notebook'
type StructuredViewsIntroProps = {
target: BootstrapStructuredTarget
enabling?: boolean
onEnable: () => void
}
export function StructuredViewsIntro({ target, enabling, onEnable }: StructuredViewsIntroProps) {
const { t } = useLanguage()
return (
<div className="max-w-2xl mx-auto space-y-8 py-6">
<div className="space-y-3">
<div className="flex items-center gap-2 text-brand-accent">
<Database size={18} />
<h2 className="font-memento-serif text-2xl text-foreground">{t('structuredViews.intro.databaseTitle')}</h2>
</div>
<p className="text-[14px] leading-relaxed text-muted-foreground">
{t('structuredViews.intro.databaseBody')}
</p>
</div>
<div className="grid gap-4 sm:grid-cols-2">
<IntroCard
icon={Table2}
title={t('structuredViews.intro.tableTitle')}
body={t('structuredViews.intro.tableBody')}
active={target === 'table'}
/>
<IntroCard
icon={Columns3}
title={t('structuredViews.intro.kanbanTitle')}
body={t('structuredViews.intro.kanbanBody')}
active={target === 'kanban'}
/>
</div>
<div className="rounded-2xl border border-border/50 bg-foreground/[0.02] px-5 py-4 space-y-4">
<p className="text-[13px] text-muted-foreground leading-relaxed">
{target === 'kanban'
? t('structuredViews.intro.activateKanbanHint')
: t('structuredViews.intro.activateTableHint')}
</p>
<button
type="button"
disabled={enabling}
onClick={onEnable}
className={cn(
'px-6 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-wider transition-all',
'bg-foreground text-background hover:opacity-90 disabled:opacity-50',
)}
>
{enabling
? t('structuredViews.intro.enabling')
: target === 'kanban'
? t('structuredViews.intro.enableKanban')
: t('structuredViews.intro.enableTable')}
</button>
</div>
</div>
)
}
function IntroCard({
icon: Icon,
title,
body,
active,
}: {
icon: LucideIcon
title: string
body: string
active?: boolean
}) {
return (
<div
className={cn(
'rounded-2xl border p-4 space-y-2 transition-colors',
active ? 'border-brand-accent/40 bg-brand-accent/[0.04]' : 'border-border/40 bg-card/40',
)}
>
<div className="flex items-center gap-2">
<Icon size={16} className={active ? 'text-brand-accent' : 'text-muted-foreground'} />
<h3 className="text-[13px] font-semibold text-foreground">{title}</h3>
</div>
<p className="text-[12px] leading-relaxed text-muted-foreground">{body}</p>
</div>
)
}