From df943878a0fdc2ef415a7f71bbaa10c281e29d17 Mon Sep 17 00:00:00 2001
From: Antigravity <antigravity@gemini.ai>
Date: Thu, 7 May 2026 22:32:12 +0000
Subject: [PATCH] fix: toolbar white bg, rounded-full buttons, px-12 padding
 like prototype

---
 memento-note/components/note-editor.tsx | 56 +++++++++++++++----------
 1 file changed, 34 insertions(+), 22 deletions(-)

diff --git a/memento-note/components/note-editor.tsx b/memento-note/components/note-editor.tsx
index 5dfa633..8475e46 100644
--- a/memento-note/components/note-editor.tsx
+++ b/memento-note/components/note-editor.tsx
@@ -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>