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

fix: fullpage editor large text via .fullpage-editor CSS, AI tabs no-wrap, tone selector stronger style, doc-info panel redesign

Browse Source
This commit is contained in:
Antigravity
2026-05-07 22:59:26 +00:00
parent 24b5d6bdac
commit 8d4e4d5d56
4 changed files with 73 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
memento-note/app/globals.css
View File

@@ -1737,4 +1737,44 @@ html.font-system * {
.rt-preview h3 { font-size: 1rem; font-weight: 600; margin: 0.3em 0; } .rt-preview h3 { font-size: 1rem; font-weight: 600; margin: 0.3em 0; }
.rt-preview p { margin: 0.2em 0; } .rt-preview p { margin: 0.2em 0; }
.rt-preview ul, .rt-preview ol { padding-left: 1.25rem; margin: 0.2em 0; } .rt-preview ul, .rt-preview ol { padding-left: 1.25rem; margin: 0.2em 0; }
.rt-preview blockquote { border-left: 3px solid var(--border); padding-left: 0.75rem; color: var(--muted-foreground); margin: 0.3em 0; } .rt-preview blockquote { border-left: 3px solid var(--border); padding-left: 0.75rem; color: var(--muted-foreground); margin: 0.3em 0; }
/* ── Full-page editorial editor: enforce prototype typography ──────────── */
/* TipTap ProseMirror text size — scoped to fullPage editor only */
.fullpage-editor .ProseMirror {
font-size: 1.125rem; /* 18px */
line-height: 1.875;
color: var(--foreground);
outline: none;
}
.fullpage-editor .ProseMirror p {
font-size: 1.125rem;
line-height: 1.875;
margin-bottom: 1.25em;
color: var(--foreground);
opacity: 0.85;
}
.fullpage-editor .ProseMirror h1 { font-size: 2rem; line-height: 1.3; font-family: var(--font-memento-serif, Georgia, serif); margin-bottom: 0.75em; }
.fullpage-editor .ProseMirror h2 { font-size: 1.5rem; line-height: 1.35; font-family: var(--font-memento-serif, Georgia, serif); margin-bottom: 0.6em; }
.fullpage-editor .ProseMirror h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 0.5em; }
.fullpage-editor .ProseMirror ul,
.fullpage-editor .ProseMirror ol { font-size: 1.125rem; line-height: 1.8; padding-left: 1.5em; margin-bottom: 1em; }
.fullpage-editor .ProseMirror li { margin-bottom: 0.3em; }
.fullpage-editor .ProseMirror blockquote {
border-left: 3px solid var(--foreground);
padding-left: 1.25rem;
font-size: 1.2rem;
font-style: italic;
font-family: var(--font-memento-serif, Georgia, serif);
color: var(--foreground);
opacity: 0.7;
margin: 1.5em 0;
}
.fullpage-editor .ProseMirror p.is-editor-empty:first-child::before {
color: var(--muted-foreground);
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
font-size: 1.125rem;
opacity: 0.4;
}

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

@@ -558,24 +558,24 @@ export function ContextualAIChat({
</div> </div>
</div> </div>
{/* ── Tabs ────────────────────────────────────────────── */} {/* ── Tabs ── */}
<div className="flex border-b border-border/40 shrink-0"> <div className="flex border-b border-border/40 shrink-0">
{([ {([
{ id: 'chat', icon: Bot, label: t('ai.chatTab') }, { id: 'chat', icon: Bot, label: 'Chat' },
{ id: 'actions', icon: Wand2, label: t('ai.noteActions') }, { id: 'actions', icon: Wand2, label: 'Actions' },
{ id: 'resource', icon: ArrowDownToLine, label: t('ai.resourceTab') }, { id: 'resource', icon: ArrowDownToLine, label: 'Source' },
] as const).map(tab => ( ] as const).map(tab => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id as any)} onClick={() => setActiveTab(tab.id as any)}
className={cn( className={cn(
'relative flex-1 py-3 text-[10px] font-bold uppercase tracking-[0.15em] flex items-center justify-center gap-1.5 transition-all', 'relative flex-1 py-2.5 text-[11px] font-semibold uppercase tracking-wider flex items-center justify-center gap-1.5 transition-all whitespace-nowrap',
activeTab === tab.id activeTab === tab.id
? 'text-foreground' ? 'text-foreground'
: 'text-muted-foreground hover:text-foreground', : 'text-muted-foreground hover:text-foreground',
)} )}
> >
<tab.icon className="h-3 w-3" /> <tab.icon className="h-3.5 w-3.5 shrink-0" />
{tab.label} {tab.label}
{activeTab === tab.id && ( {activeTab === tab.id && (
<span className="absolute bottom-0 left-0 right-0 h-[2px] bg-foreground" /> <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-foreground" />
@@ -584,6 +584,7 @@ export function ContextualAIChat({
))} ))}
</div> </div>
{/* ══════════════════════════════════════════════════════════ */} {/* ══════════════════════════════════════════════════════════ */}
{/* ── TAB: CHAT ─────────────────────────────────────────── */} {/* ── TAB: CHAT ─────────────────────────────────────────── */}
{/* ══════════════════════════════════════════════════════════ */} {/* ══════════════════════════════════════════════════════════ */}
@@ -592,11 +593,11 @@ export function ContextualAIChat({
{/* Messages */} {/* Messages */}
<div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-3 flex flex-col"> <div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-3 flex flex-col">
{messages.length === 0 && ( {messages.length === 0 && (
<div className="flex-1 flex flex-col items-center justify-center text-center opacity-60"> <div className="flex-1 flex flex-col items-center justify-center gap-3 py-8">
<div className="w-14 h-14 rounded-full bg-primary/5 flex items-center justify-center border border-primary/10 mb-4"> <div className="w-10 h-10 rounded-full bg-amber-50 dark:bg-amber-950/30 border border-amber-200/50 flex items-center justify-center">
<Sparkles className="h-6 w-6 text-primary/50" /> <Sparkles className="h-5 w-5 text-amber-500" />
</div> </div>
<p className="text-sm text-muted-foreground max-w-[220px]"> <p className="text-[13px] text-muted-foreground text-center max-w-[200px] leading-relaxed">
{t('ai.askToStart')} {t('ai.askToStart')}
</p> </p>
</div> </div>
@@ -824,7 +825,7 @@ export function ContextualAIChat({
{/* Tone selector */} {/* Tone selector */}
<div className="px-3 py-2 flex flex-col gap-1.5"> <div className="px-3 py-2 flex flex-col gap-1.5">
<label className="text-xs font-bold tracking-wider text-muted-foreground uppercase"> <label className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
{t('ai.writingTone')} {t('ai.writingTone')}
</label> </label>
<div className="grid grid-cols-4 gap-1"> <div className="grid grid-cols-4 gap-1">
@@ -837,13 +838,13 @@ export function ContextualAIChat({
onClick={() => setSelectedTone(tone.id)} onClick={() => setSelectedTone(tone.id)}
title={tone.full} title={tone.full}
className={cn( className={cn(
'py-1.5 rounded border text-xs font-medium transition-all flex flex-col items-center gap-1', 'py-2 rounded-lg border text-[11px] font-semibold transition-all flex flex-col items-center gap-1',
sel sel
? 'border-primary bg-primary/10 text-primary' ? 'border-foreground bg-foreground text-background'
: 'border-border/40 text-muted-foreground hover:bg-muted bg-card', : 'border-border/60 text-muted-foreground hover:border-foreground/40 hover:text-foreground bg-background',
)} )}
> >
<Icon className="h-3 w-3" /> <Icon className="h-4 w-4" />
{tone.label} {tone.label}
</button> </button>
) )

28
memento-note/components/note-document-info-panel.tsx
View File

@@ -62,20 +62,20 @@ export function NoteDocumentInfoPanel({ note, content, onClose, onNoteRestored }
return ( return (
<> <>
<div className="flex w-72 shrink-0 flex-col border-l border-border/60 bg-card overflow-hidden"> <div className="flex w-80 shrink-0 flex-col border-l border-border/40 bg-background overflow-hidden">
{/* Header tabs */} {/* Header tabs */}
<div className="flex items-center justify-between px-4 py-3 border-b border-border/60"> <div className="flex items-center justify-between px-5 py-4 border-b border-border/40">
<div className="flex gap-1"> <div className="flex gap-1">
{(['info', 'versions'] as Tab[]).map(tab => ( {(['info', 'versions'] as Tab[]).map(tab => (
<button <button
key={tab} key={tab}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab)}
className={cn( className={cn(
'flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors', 'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all',
activeTab === tab activeTab === tab
? 'bg-foreground text-background' ? 'bg-foreground text-background'
: 'text-muted-foreground hover:text-foreground hover:bg-muted' : 'text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5'
)} )}
> >
{tab === 'info' && <Info className="h-3 w-3" />} {tab === 'info' && <Info className="h-3 w-3" />}
@@ -86,7 +86,7 @@ export function NoteDocumentInfoPanel({ note, content, onClose, onNoteRestored }
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors" className="p-1.5 rounded-full text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
@@ -97,16 +97,16 @@ export function NoteDocumentInfoPanel({ note, content, onClose, onNoteRestored }
{/* ── INFO TAB ── */} {/* ── INFO TAB ── */}
{activeTab === 'info' && ( {activeTab === 'info' && (
<div className="space-y-0"> <div>
{/* Stats */} {/* Stats — grand display numbers */}
<div className="grid grid-cols-2 border-b border-border/40"> <div className="grid grid-cols-2 border-b border-border/30">
<div className="flex flex-col items-center gap-0.5 py-4 border-r border-border/40"> <div className="flex flex-col items-center gap-1 py-6 border-r border-border/30">
<span className="text-2xl font-bold font-memento-serif tabular-nums">{words}</span> <span className="text-4xl font-bold font-memento-serif tabular-nums tracking-tight">{words}</span>
<span className="text-[10px] uppercase tracking-widest text-muted-foreground">mots</span> <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground font-semibold">mots</span>
</div> </div>
<div className="flex flex-col items-center gap-0.5 py-4"> <div className="flex flex-col items-center gap-1 py-6">
<span className="text-2xl font-bold font-memento-serif tabular-nums">{chars}</span> <span className="text-4xl font-bold font-memento-serif tabular-nums tracking-tight">{chars}</span>
<span className="text-[10px] uppercase tracking-widest text-muted-foreground">caractères</span> <span className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground font-semibold">caractères</span>
</div> </div>
</div> </div>

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

@@ -838,11 +838,11 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
{/* Content area — max-w-2xl, like prototype */} {/* Content area — max-w-2xl, like prototype */}
<div className="max-w-2xl mx-auto pb-32"> <div className="max-w-2xl mx-auto pb-32">
{noteType === 'richtext' ? ( {noteType === 'richtext' ? (
<div className="prose prose-lg dark:prose-invert max-w-none [&_.notion-editor]:min-h-[280px]"> <div className="fullpage-editor">
<RichTextEditor <RichTextEditor
content={content} content={content}
onChange={(v) => { setContent(v); setIsDirty(true) }} onChange={(v) => { setContent(v); setIsDirty(true) }}
className="min-h-[280px] text-lg font-light leading-relaxed" className="min-h-[280px]"
onImageUpload={uploadImageFile} onImageUpload={uploadImageFile}
/> />
</div> </div>