sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: title textarea auto-resize (no overflow), auto-title 10-word check + toast feedback, AI expand = fixed overlay (no compress)

Browse Source
This commit is contained in:
Antigravity
2026-05-07 23:39:19 +00:00
parent 38c637cfac
commit 29e65038b7
2 changed files with 58 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
memento-note/components/contextual-ai-chat.tsx
View File

@@ -515,11 +515,21 @@ export function ContextualAIChat({
return (
<aside className={cn(
'border-l border-border/40 bg-background flex flex-col h-full flex-shrink-0 z-10 transition-all duration-300',
expanded ? 'w-[560px]' : 'w-[360px]',
className,
)}>
<>
{/* Backdrop when expanded */}
{expanded && (
<div
className="fixed inset-0 z-[199] bg-black/10 dark:bg-black/20 backdrop-blur-[1px]"
onClick={() => setExpanded(false)}
/>
)}
<aside className={cn(
'border-l border-border/40 bg-background flex flex-col flex-shrink-0 z-10 transition-all duration-300',
expanded
? 'fixed right-0 top-0 h-screen w-[640px] z-[200] shadow-2xl border-l'
: 'h-full w-[360px]',
!expanded && className,
)}>
{/* ── Header ─────────────────────────────────────────── */}
<div className="px-5 pt-5 pb-4 border-b border-border/40 shrink-0">
@@ -1386,6 +1396,7 @@ export function ContextualAIChat({
</div>
)}
</aside>
</>
)
}

55
memento-note/components/note-editor.tsx
View File

@@ -783,18 +783,23 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
</span>
</div>
{/* Title — editable input styled as h1 */}
{/* Title — auto-resizing textarea to prevent overflow */}
<div className="group relative">
<input
<textarea
dir="auto"
type="text"
rows={1}
placeholder={t('notes.titlePlaceholder') || 'Untitled…'}
value={title}
onChange={(e) => { setTitle(e.target.value); setIsDirty(true); setDismissedTitleSuggestions(true) }}
onInput={(e) => {
const el = e.currentTarget
el.style.height = 'auto'
el.style.height = el.scrollHeight + 'px'
}}
disabled={readOnly}
className={cn(
'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',
'placeholder:text-foreground/20 resize-none overflow-hidden',
!readOnly && 'pr-12'
)}
/>
@@ -804,7 +809,11 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
type="button"
onClick={async () => {
const plain = content.replace(/<[^>]+>/g, ' ').trim()
if (plain.split(/\s+/).filter(Boolean).length < 3) return
const wordCount = plain.split(/\s+/).filter(Boolean).length
if (wordCount < 10) {
toast.error('Ajoutez au moins 10 mots avant de générer un titre.')
return
}
setIsProcessingAI(true)
try {
const res = await fetch('/api/ai/title-suggestions', {
@@ -814,13 +823,21 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
})
if (res.ok) {
const data = await res.json()
const s = data.title || data.suggestedTitle || (data.suggestions?.[0]?.title ?? '')
if (s) { setTitle(s); setIsDirty(true) }
const s = data.suggestions?.[0]?.title ?? ''
if (s) {
setTitle(s)
setIsDirty(true)
toast.success('Titre généré !')
} else {
toast.error('Impossible de générer un titre.')
}
} else {
toast.error('Erreur lors de la génération du titre.')
}
} catch {} finally { setIsProcessingAI(false) }
} catch { toast.error('Erreur réseau.') } finally { setIsProcessingAI(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"
className="absolute right-0 top-2 opacity-0 group-hover:opacity-60 hover:!opacity-100 transition-opacity rounded-lg p-2 text-foreground/50 hover:bg-black/5"
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" />}
@@ -918,7 +935,11 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
diagramInsertFormat={noteType === 'richtext' ? 'html' : 'markdown'}
onGenerateTitle={async () => {
const plain = content.replace(/<[^>]+>/g, ' ').trim()
if (plain.split(/\s+/).filter(Boolean).length < 3) return
const wordCount = plain.split(/\s+/).filter(Boolean).length
if (wordCount < 10) {
toast.error('Ajoutez au moins 10 mots avant de générer un titre.')
return
}
setIsProcessingAI(true)
try {
const res = await fetch('/api/ai/title-suggestions', {
@@ -928,10 +949,18 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
})
if (res.ok) {
const data = await res.json()
const s = data.title || data.suggestedTitle || (data.suggestions?.[0]?.title ?? '')
if (s) { setTitle(s); setIsDirty(true) }
const s = data.suggestions?.[0]?.title ?? ''
if (s) {
setTitle(s)
setIsDirty(true)
toast.success('Titre généré !')
} else {
toast.error('Impossible de générer un titre.')
}
} else {
toast.error('Erreur lors de la génération du titre.')
}
} catch {} finally { setIsProcessingAI(false) }
} catch { toast.error('Erreur réseau.') } finally { setIsProcessingAI(false) }
}}
/>
</div>