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

fix: toolbar white bg, rounded-full buttons, px-12 padding like prototype

Browse Source
This commit is contained in:
Antigravity
2026-05-07 22:32:12 +00:00
parent e458b63115
commit df943878a0
1 changed files with 34 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -662,45 +662,57 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
if (fullPage) {
return (
<>
<div className="h-full flex flex-col overflow-hidden bg-background">
<div className="h-full flex flex-col overflow-hidden bg-white dark:bg-zinc-950">
<div className="flex-1 flex overflow-hidden">
{/* main scrollable column */}
<div className="flex-1 flex flex-col overflow-y-auto">
<div className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-zinc-950">
{/* sticky toolbar */}
<div className="px-6 py-3 flex items-center justify-between sticky top-0 bg-background/90 backdrop-blur-sm z-40 border-b border-border gap-4">
{/* sticky toolbar — matches prototype */}
<div className="px-12 py-6 flex items-center justify-between sticky top-0 bg-white/95 dark:bg-zinc-950/95 backdrop-blur-sm z-40 border-b border-border/40">
<button onClick={onClose} className="flex items-center gap-2 text-foreground hover:opacity-60 transition-opacity shrink-0">
<ArrowLeft size={16} />
<span className="text-sm font-medium hidden sm:inline">{t('notes.backToCollection') || 'Retour'}</span>
<ArrowLeft size={18} />
<span className="text-sm font-medium">{'← ' + (t('notes.backToCollection') || 'Retour')}</span>
</button>
<div className="flex-1 flex justify-center">
<div className="flex items-center gap-3 shrink-0">
{/* Save status */}
<span className="hidden sm:flex items-center gap-1.5 text-[11px] text-muted-foreground/60 select-none">
{isSaving
? <><Loader2 className="h-3 w-3 animate-spin" /><span>{t('notes.saving') || 'Enregistrement...'}</span></>
: isDirty
? <><span className="h-1.5 w-1.5 rounded-full bg-amber-400 inline-block" /><span>{t('notes.dirtyStatus') || 'Modifié'}</span></>
: <><Check className="h-3 w-3 text-emerald-500" /><span>{t('notes.savedStatus') || 'Enregistré'}</span></>}
</span>
{/* Type selector */}
<NoteTypeSelector
value={noteType}
onChange={(newType) => { setNoteType(newType); setShowMarkdownPreview(newType === 'markdown'); setIsDirty(true) }}
compact
/>
</div>
<div className="flex items-center gap-1 shrink-0">
<span className="hidden sm:flex items-center gap-1 text-[11px] text-muted-foreground/50 mr-2 select-none">
{isSaving
? <><Loader2 className="h-3 w-3 animate-spin" /><span>{t('notes.saving') || 'Saving...'}</span></>
: isDirty
? <><span className="h-1.5 w-1.5 rounded-full bg-amber-400 inline-block" /><span>{t('notes.dirtyStatus') || 'Modifié'}</span></>
: <><Check className="h-3 w-3 text-emerald-500" /><span>{t('notes.savedStatus') || 'Enregistré'}</span></>}
</span>
{/* AI button — rounded-full like prototype */}
<button
onClick={() => { setAiOpen(v => !v); setInfoOpen(false) }}
className={cn('flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-all',
aiOpen ? 'bg-foreground text-background border-foreground' : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted')}
className={cn(
'flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-300',
aiOpen
? 'bg-foreground text-background border-foreground'
: 'border-border text-foreground hover:bg-muted/50'
)}
>
<Sparkles size={13} /><span className="hidden sm:inline">IA</span>
<Sparkles size={14} />
<span>IA</span>
</button>
{/* Info button */}
<button
onClick={() => { setInfoOpen(v => !v); setAiOpen(false) }}
className={cn('flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-all',
infoOpen ? 'bg-foreground text-background border-foreground' : 'border-border text-muted-foreground hover:text-foreground hover:bg-muted')}
className={cn(
'flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-medium transition-all duration-300',
infoOpen
? 'bg-foreground text-background border-foreground'
: 'border-border text-foreground hover:bg-muted/50'
)}
>
<Info size={13} /><span className="hidden sm:inline">Info</span>
<Info size={14} />
<span>Info</span>
</button>
</div>
</div>