Files
Momento/memento-note/components/structured-views/structured-views-intro.tsx
Antigravity 96e7902f01
Some checks failed
CI / Lint, Unit Tests & Build (push) Failing after 1m22s
CI / Deploy production (on server) (push) Has been skipped
feat: publication IA (magazine/brief/essay) + fixes critique
Publication IA:
- 4 templates (magazine, brief, essay, simple) avec CSS riche
- Rewrite IA (article/exercises/tutorial/reference/mixed)
- Modération avec timeout 12s + fallback safe
- Quotas publish_enhance par tier (basic=2, pro=15, business=100)
- Détection contenu stale (hash)
- Migration DB publishedContent/publishedTemplate/publishedSourceHash

Fixes:
- cheerio v1.2: Element -> AnyNode (domhandler), decodeEntities cast
- _isShared ajouté au type Note (champ virtuel serveur)
- callout colors PDF export: extraction fonction pure testable
- admin/published: guard note.userId null
- Cmd+S fonctionne en mode dialog (pas seulement fullPage)

i18n:
- 23 clés publish* traduites dans les 15 locales
- Extension Web Clipper: 13 locales mise à jour

Tests:
- callout-colors.test.ts (6 tests)
- note-visible-in-view.test.ts (5 tests)
- entitlements.test.ts + byok-entitlements.test.ts: mock usageLog + unstubAllEnvs
- 199/199 tests passent

Tracker: user-stories.md sync avec sprint-status.yaml
2026-06-28 07:32:57 +00:00

109 lines
3.7 KiB
TypeScript

'use client'
import { Columns3, Database, Table2, Wand2, 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
onOpenWizard?: () => void
}
export function StructuredViewsIntro({ target, enabling, onEnable, onOpenWizard }: 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>
<div className="flex items-center gap-3 flex-wrap">
<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>
{onOpenWizard && (
<button
type="button"
onClick={onOpenWizard}
className="flex items-center gap-1.5 px-4 py-2.5 rounded-full text-[11px] font-semibold transition-all border border-border/60 text-muted-foreground hover:text-foreground hover:border-border"
>
<Wand2 size={13} />
{t('structuredViews.wizard.openFromKanban') || 'Configurer avec l\'assistant'}
</button>
)}
</div>
</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>
)
}