fix: auto-title button always visible on hover + wired to AI panel Wand button, title text-4xl/5xl no overflow, content max-w-3xl

This commit is contained in:
Antigravity
2026-05-07 23:29:18 +00:00
parent ea62d68cdd
commit 3b036e84b8
2 changed files with 40 additions and 20 deletions

View File

@@ -793,13 +793,13 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
onChange={(e) => { setTitle(e.target.value); setIsDirty(true); setDismissedTitleSuggestions(true) }}
disabled={readOnly}
className={cn(
'w-full text-5xl md:text-6xl font-memento-serif font-bold border-0 outline-none px-0 bg-transparent text-foreground leading-tight',
'w-full text-4xl md:text-5xl font-memento-serif font-bold border-0 outline-none px-0 bg-transparent text-foreground leading-tight',
'placeholder:text-foreground/20',
!readOnly && 'pr-14'
!readOnly && 'pr-12'
)}
/>
{/* AI title generation — shown when title is empty */}
{!title && !readOnly && (
{/* AI title generation — always visible on hover */}
{!readOnly && (
<button
type="button"
onClick={async () => {
@@ -821,7 +821,7 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
}}
disabled={isProcessingAI}
className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-60 hover:!opacity-100 transition-opacity rounded-lg p-2 text-foreground/50 hover:bg-black/5"
title="Generate AI title"
title="Générer un titre automatique avec l'IA"
>
{isProcessingAI ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
</button>
@@ -849,8 +849,8 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
</div>
)}
{/* Content area — max-w-2xl, like prototype */}
<div className="max-w-2xl mx-auto pb-32">
{/* Content area — max-w-3xl for wider reading column */}
<div className="max-w-3xl mx-auto w-full pb-32">
{noteType === 'richtext' ? (
<div className="fullpage-editor">
<RichTextEditor
@@ -882,7 +882,7 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
onFocus={() => setShowMarkdownPreview(false)}
onChange={(e) => { setContent(e.target.value); setIsDirty(true) }}
disabled={readOnly}
className="w-full min-h-[280px] border-0 outline-none px-0 bg-transparent text-lg leading-relaxed font-light resize-none overflow-hidden placeholder:text-foreground/20 text-foreground/80"
className="w-full min-h-[280px] border-0 outline-none px-0 bg-transparent text-xl leading-relaxed resize-none overflow-hidden placeholder:text-foreground/30 text-foreground"
/>
{!readOnly && (
<MarkdownSlashCommands
@@ -916,10 +916,28 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
lastActionApplied={previousContentForCopilot !== null}
notebooks={notebooks.map(nb => ({ id: nb.id, name: nb.name }))}
diagramInsertFormat={noteType === 'richtext' ? 'html' : 'markdown'}
onGenerateTitle={async () => {
const plain = content.replace(/<[^>]+>/g, ' ').trim()
if (plain.split(/\s+/).filter(Boolean).length < 3) return
setIsProcessingAI(true)
try {
const res = await fetch('/api/ai/title-suggestions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: plain }),
})
if (res.ok) {
const data = await res.json()
const s = data.title || data.suggestedTitle || (data.suggestions?.[0]?.title ?? '')
if (s) { setTitle(s); setIsDirty(true) }
}
} catch {} finally { setIsProcessingAI(false) }
}}
/>
</div>
)}
{/* ── Side panel: Document Info ── */}
{infoOpen && (
<div className="w-[400px] h-full self-stretch border-l border-black/10 dark:border-white/10 bg-background flex flex-col z-50 shrink-0">