From ccbd1b5abc9ba8aee8bdbc1df4564c3c68501a37 Mon Sep 17 00:00:00 2001
From: Antigravity <antigravity@gemini.ai>
Date: Thu, 7 May 2026 22:35:52 +0000
Subject: [PATCH] feat: fullPage layout 1:1 prototype - white bg, px-12 py-8
 toolbar, rounded-full buttons, breadcrumb notebook>date, hero image, prose-lg
 content

---
 memento-note/components/note-editor.tsx | 390 ++++++++++++++----------
 1 file changed, 230 insertions(+), 160 deletions(-)

diff --git a/memento-note/components/note-editor.tsx b/memento-note/components/note-editor.tsx
index 8475e46..2164c3d 100644
--- a/memento-note/components/note-editor.tsx
+++ b/memento-note/components/note-editor.tsx
@@ -25,7 +25,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { NoteTypeSelector } from '@/components/note-type-selector'
 import { RichTextEditor } from '@/components/rich-text-editor'
-import { X, Plus, Palette, Image as ImageIcon, Bell, Eye, Link as LinkIcon, Sparkles, Maximize2, Copy, Wand2, LogOut, ArrowLeft, Info, Check, Loader2 } from 'lucide-react'
+import { X, Plus, Palette, Image as ImageIcon, Bell, Eye, Link as LinkIcon, Sparkles, Maximize2, Copy, Wand2, LogOut, ArrowLeft, ChevronRight, Info, Check, Loader2 } from 'lucide-react'
 import { updateNote, createNote, cleanupOrphanedImages, leaveSharedNote } from '@/app/actions/notes'
 import { format } from 'date-fns'
 import { useTitleSuggestions } from '@/hooks/use-title-suggestions'
@@ -658,187 +658,257 @@ export function NoteEditor({ note, readOnly = false, onClose, fullPage = false }
     }
   }
 
-  // ── fullPage mode: early return with editorial layout ──
+  // ── fullPage mode: editorial layout (fidèle au prototype) ──
   if (fullPage) {
+    const notebookName = notebooks.find(nb => nb.id === note.notebookId)?.name || null
+    const plainFirstSentence = content.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().split(/[.!?]/)[0]
+
     return (
       <>
-        <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 bg-white dark:bg-zinc-950">
+        {/* ── outer container: white like prototype ── */}
+        <div className="h-full flex overflow-hidden transition-all duration-500">
 
-              {/* 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={18} />
-                  <span className="text-sm font-medium">{'← ' + (t('notes.backToCollection') || 'Retour')}</span>
+          {/* ── main scrollable column ── */}
+          <div className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-zinc-950">
+
+            {/* TOOLBAR — px-12 py-8, bg-white/90, rounded-full buttons */}
+            <div className="px-12 py-8 flex items-center justify-between sticky top-0 bg-white/90 dark:bg-zinc-950/90 backdrop-blur-sm z-40 border-b border-black/10 dark:border-white/10">
+              {/* Left: back */}
+              <button
+                onClick={onClose}
+                className="flex items-center gap-2 text-foreground hover:opacity-60 transition-opacity"
+              >
+                <ArrowLeft size={18} />
+                <span className="text-sm font-medium">Back to collection</span>
+              </button>
+
+              {/* Right: status + type + AI + Info */}
+              <div className="flex items-center gap-4">
+                {/* Save status */}
+                <span className="hidden sm:flex items-center gap-1.5 text-[11px] text-foreground/40 select-none">
+                  {isSaving
+                    ? <><Loader2 className="h-3 w-3 animate-spin" /><span>Saving…</span></>
+                    : isDirty
+                    ? <><span className="h-1.5 w-1.5 rounded-full bg-amber-400 inline-block" /><span>Modified</span></>
+                    : <><Check className="h-3 w-3 text-emerald-500" /><span>Saved</span></>}
+                </span>
+
+                {/* Note type */}
+                <NoteTypeSelector
+                  value={noteType}
+                  onChange={(newType) => { setNoteType(newType); setShowMarkdownPreview(newType === 'markdown'); setIsDirty(true) }}
+                  compact
+                />
+
+                {/* AI — rounded-full, exact prototype style */}
+                <button
+                  onClick={() => { setAiOpen(v => !v); setInfoOpen(false) }}
+                  className={cn(
+                    'flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all duration-300 text-xs font-medium',
+                    aiOpen
+                      ? 'bg-foreground text-background border-foreground'
+                      : 'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5'
+                  )}
+                >
+                  <Sparkles size={16} />
+                  <span>AI Assistant</span>
                 </button>
-                <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
-                  />
-                  {/* AI button — rounded-full like prototype */}
-                  <button
-                    onClick={() => { setAiOpen(v => !v); setInfoOpen(false) }}
-                    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={14} />
-                    <span>IA</span>
-                  </button>
-                  {/* Info button */}
-                  <button
-                    onClick={() => { setInfoOpen(v => !v); setAiOpen(false) }}
-                    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={14} />
-                    <span>Info</span>
-                  </button>
-                </div>
-              </div>
 
-              {/* body */}
-              <div className="max-w-4xl mx-auto w-full px-12 py-16 space-y-12">
-                {/* meta */}
-                <div className="text-[12px] text-muted-foreground uppercase tracking-[.25em] font-bold" suppressHydrationWarning>
-                  {format(new Date(note.contentUpdatedAt), 'MMM d, yyyy')}
-                </div>
-
-                {/* title + AI */}
-                <div className="space-y-4">
-                  <div className="group relative">
-                    <input
-                      dir="auto" type="text"
-                      placeholder={t('notes.titlePlaceholder')}
-                      value={title}
-                      onChange={(e) => { setTitle(e.target.value); setIsDirty(true); setDismissedTitleSuggestions(true) }}
-                      disabled={readOnly}
-                      className="w-full text-5xl md:text-6xl font-memento-serif font-bold border-0 outline-none px-0 bg-transparent text-foreground leading-tight placeholder:text-muted-foreground/30 pr-14"
-                    />
-                    {!title && !readOnly && (
-                      <button
-                        type="button"
-                        onClick={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) }
-                        }}
-                        disabled={isProcessingAI}
-                        className="absolute right-0 top-1/2 -translate-y-1/2 opacity-30 hover:opacity-100 transition-opacity rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-primary"
-                        title={t('ai.suggestTitle') || 'Générer un titre IA'}
-                      >
-                        {isProcessingAI ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
-                      </button>
-                    )}
-                  </div>
-                  {!title && !dismissedTitleSuggestions && autoTitleSuggestions.length > 0 && (
-                    <TitleSuggestions
-                      suggestions={autoTitleSuggestions}
-                      onSelect={(s) => { setTitle(s); setDismissedTitleSuggestions(true); setIsDirty(true) }}
-                      onDismiss={() => setDismissedTitleSuggestions(true)}
-                    />
+                {/* Info — rounded-full */}
+                <button
+                  onClick={() => { setInfoOpen(v => !v); setAiOpen(false) }}
+                  className={cn(
+                    'flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all duration-300 text-xs font-medium',
+                    infoOpen
+                      ? 'bg-foreground text-background border-foreground'
+                      : 'border-black/20 dark:border-white/20 text-foreground hover:bg-black/5 dark:hover:bg-white/5'
                   )}
-                </div>
-
-                {/* editor */}
-                <div className="max-w-2xl mx-auto pb-32">
-                  {noteType === 'richtext' ? (
-                    <RichTextEditor
-                      content={content}
-                      onChange={(v) => { setContent(v); setIsDirty(true) }}
-                      className="min-h-[200px] text-lg font-light leading-relaxed"
-                      onImageUpload={uploadImageFile}
-                    />
-                  ) : noteType === 'markdown' && showMarkdownPreview ? (
-                    <div
-                      className="min-h-[200px] cursor-text prose prose-sm dark:prose-invert max-w-none text-base leading-relaxed"
-                      onClick={() => setShowMarkdownPreview(false)}
-                    >
-                      <MarkdownContent content={content} />
-                      <p className="text-[11px] text-muted-foreground/40 mt-4 select-none">Cliquez pour éditer</p>
-                    </div>
-                  ) : (
-                    <div className="relative">
-                      <textarea
-                        ref={textareaRef}
-                        dir="auto"
-                        placeholder={t('notes.takeNote') || "Tapez '/' pour les commandes..."}
-                        value={content}
-                        onFocus={() => setShowMarkdownPreview(false)}
-                        onChange={(e) => { setContent(e.target.value); setIsDirty(true) }}
-                        disabled={readOnly}
-                        className="w-full min-h-[400px] border-0 outline-none px-0 bg-transparent text-lg leading-relaxed font-light resize-none placeholder:text-muted-foreground/30"
-                      />
-                      {noteType === 'markdown' && content && !readOnly && (
-                        <button type="button" onClick={() => setShowMarkdownPreview(true)}
-                          className="mt-2 text-[11px] text-muted-foreground/50 hover:text-foreground flex items-center gap-1 transition-colors">
-                          <Eye className="h-3 w-3" /> Prévisualiser le Markdown
-                        </button>
-                      )}
-                      {!readOnly && (
-                        <MarkdownSlashCommands
-                          textareaRef={textareaRef as React.RefObject<HTMLTextAreaElement>}
-                          value={content}
-                          onChange={(v) => { setContent(v); setIsDirty(true) }}
-                        />
-                      )}
-                    </div>
-                  )}
-                </div>
+                >
+                  <Info size={16} />
+                  <span>Document Info</span>
+                </button>
               </div>
             </div>
 
-            {/* side panels */}
-            {aiOpen && (
+            {/* BODY — max-w-4xl, px-12, py-16 */}
+            <div className="max-w-4xl mx-auto w-full px-12 py-16 space-y-12">
+
+              {/* Breadcrumb + Title block */}
+              <div className="space-y-4">
+                {/* Breadcrumb: Notebook › Date */}
+                <div className="flex items-center gap-3 text-[12px] text-foreground/50 uppercase tracking-[.25em] font-bold">
+                  {notebookName && <span>{notebookName}</span>}
+                  {notebookName && <ChevronRight size={10} />}
+                  <span suppressHydrationWarning>
+                    {format(new Date(note.contentUpdatedAt), 'MMM d, yyyy')}
+                  </span>
+                </div>
+
+                {/* Title — editable input styled as h1 */}
+                <div className="group relative">
+                  <input
+                    dir="auto"
+                    type="text"
+                    placeholder={t('notes.titlePlaceholder') || 'Untitled…'}
+                    value={title}
+                    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',
+                      'placeholder:text-foreground/20',
+                      !readOnly && 'pr-14'
+                    )}
+                  />
+                  {/* AI title generation — shown when title is empty */}
+                  {!title && !readOnly && (
+                    <button
+                      type="button"
+                      onClick={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) }
+                      }}
+                      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"
+                    >
+                      {isProcessingAI ? <Loader2 className="h-5 w-5 animate-spin" /> : <Sparkles className="h-5 w-5" />}
+                    </button>
+                  )}
+                </div>
+
+                {/* Auto title suggestions */}
+                {!title && !dismissedTitleSuggestions && autoTitleSuggestions.length > 0 && (
+                  <TitleSuggestions
+                    suggestions={autoTitleSuggestions}
+                    onSelect={(s) => { setTitle(s); setDismissedTitleSuggestions(true); setIsDirty(true) }}
+                    onDismiss={() => setDismissedTitleSuggestions(true)}
+                  />
+                )}
+              </div>
+
+              {/* Hero image — show first note image if present */}
+              {allImages.length > 0 && (
+                <div className="aspect-[16/9] w-full bg-slate-100 dark:bg-zinc-900 rounded-xl overflow-hidden shadow-xl">
+                  <img
+                    src={allImages[0]}
+                    alt={title}
+                    className="w-full h-full object-cover grayscale contrast-110 hover:grayscale-0 transition-all duration-500"
+                  />
+                </div>
+              )}
+
+              {/* Content area — max-w-2xl, like prototype */}
+              <div className="max-w-2xl mx-auto space-y-8 pb-32">
+                {noteType === 'richtext' ? (
+                  <RichTextEditor
+                    content={content}
+                    onChange={(v) => { setContent(v); setIsDirty(true) }}
+                    className="min-h-[300px] text-lg font-light leading-relaxed text-foreground/80"
+                    onImageUpload={uploadImageFile}
+                  />
+                ) : noteType === 'markdown' && showMarkdownPreview ? (
+                  <div
+                    className="min-h-[300px] cursor-text prose prose-lg dark:prose-invert max-w-none leading-relaxed"
+                    onClick={() => !readOnly && setShowMarkdownPreview(false)}
+                  >
+                    <MarkdownContent content={content} />
+                    {!readOnly && (
+                      <p className="text-[11px] text-foreground/30 mt-6 select-none not-prose">
+                        Click to edit
+                      </p>
+                    )}
+                  </div>
+                ) : noteType === 'text' || noteType === 'markdown' ? (
+                  <div className="relative">
+                    <textarea
+                      ref={textareaRef}
+                      dir="auto"
+                      placeholder={t('notes.takeNote') || "Type '/' for commands…"}
+                      value={content}
+                      onFocus={() => setShowMarkdownPreview(false)}
+                      onChange={(e) => { setContent(e.target.value); setIsDirty(true) }}
+                      disabled={readOnly}
+                      className="w-full min-h-[400px] border-0 outline-none px-0 bg-transparent text-lg leading-relaxed font-light resize-none placeholder:text-foreground/20 text-foreground/80"
+                    />
+                    {noteType === 'markdown' && content && !readOnly && (
+                      <button
+                        type="button"
+                        onClick={() => setShowMarkdownPreview(true)}
+                        className="mt-2 text-[11px] text-foreground/40 hover:text-foreground flex items-center gap-1.5 transition-colors"
+                      >
+                        <Eye className="h-3 w-3" /> Preview Markdown
+                      </button>
+                    )}
+                    {!readOnly && (
+                      <MarkdownSlashCommands
+                        textareaRef={textareaRef as React.RefObject<HTMLTextAreaElement>}
+                        value={content}
+                        onChange={(v) => { setContent(v); setIsDirty(true) }}
+                      />
+                    )}
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          {/* ── Side panel: AI Chat (prototype style: w-[400px], border-l, bg-white) ── */}
+          {aiOpen && (
+            <div className="w-[400px] border-l border-black/10 dark:border-white/10 bg-white dark:bg-zinc-950 shadow-2xl flex flex-col z-50 shrink-0">
               <ContextualAIChat
                 onClose={() => setAiOpen(false)}
-                noteTitle={title} noteContent={content} noteImages={allImages} noteId={note.id}
-                onApplyToNote={(nc) => { setPreviousContentForCopilot(content); setContent(nc); setIsDirty(true); if (noteType === 'markdown') setShowMarkdownPreview(true) }}
+                noteTitle={title}
+                noteContent={content}
+                noteImages={allImages}
+                noteId={note.id}
+                onApplyToNote={(nc) => {
+                  setPreviousContentForCopilot(content)
+                  setContent(nc)
+                  setIsDirty(true)
+                  if (noteType === 'markdown') setShowMarkdownPreview(true)
+                }}
                 onUndoLastAction={previousContentForCopilot !== null ? () => { setContent(previousContentForCopilot!); setPreviousContentForCopilot(null) } : undefined}
                 lastActionApplied={previousContentForCopilot !== null}
                 notebooks={notebooks.map(nb => ({ id: nb.id, name: nb.name }))}
                 diagramInsertFormat={noteType === 'richtext' ? 'html' : 'markdown'}
               />
-            )}
-            {infoOpen && (
+            </div>
+          )}
+
+          {/* ── Side panel: Document Info ── */}
+          {infoOpen && (
+            <div className="w-[400px] border-l border-black/10 dark:border-white/10 bg-white dark:bg-zinc-950 shadow-2xl flex flex-col z-50 shrink-0">
               <NoteDocumentInfoPanel
-                note={note} content={content}
+                note={note}
+                content={content}
                 onClose={() => setInfoOpen(false)}
                 onNoteRestored={(r) => { setContent(r.content || ''); setTitle(r.title || ''); setIsDirty(false) }}
               />
-            )}
-          </div>
-          <input ref={fileInputRef} type="file" accept="image/*" multiple className="hidden" onChange={handleImageUpload} />
+            </div>
+          )}
         </div>
-        <ReminderDialog open={showReminderDialog} onOpenChange={setShowReminderDialog} currentReminder={currentReminder} onSave={handleReminderSave} onRemove={handleRemoveReminder} />
+
+        <input ref={fileInputRef} type="file" accept="image/*" multiple className="hidden" onChange={handleImageUpload} />
+        <ReminderDialog
+          open={showReminderDialog}
+          onOpenChange={setShowReminderDialog}
+          currentReminder={currentReminder}
+          onSave={handleReminderSave}
+          onRemove={handleRemoveReminder}
+        />
       </>
     )
   }