fix(chat): scroll to preview on inject + sidebar restore + collapsible note list (Option A)

memento-note/components/contextual-ai-chat.tsx

@@ -157,7 +157,7 @@ export function ContextualAIChat({
 
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }, [messages])
+  }, [messages, resourcePreview])
 
   useEffect(() => {
     window.dispatchEvent(new CustomEvent('contextual-ai-visibility', { detail: true }))

memento-note/components/notes-tabs-view.tsx

@@ -50,6 +50,8 @@ import {
   History,
   PanelRightClose,
   PanelRightOpen,
+  PanelLeftClose,
+  PanelLeftOpen,
   Bell,
 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
@@ -640,16 +642,24 @@ export function NotesTabsView({
   const [noteToDelete, setNoteToDelete] = useState<Note | null>(null)
   const [sortOrder, setSortOrder] = useState<SortOrder>('date-desc')
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [listOpen, setListOpen] = useState(true)
 
-  // Auto-hide the meta sidebar when the AI panel opens (to gain space)
+  // Auto-hide meta sidebar when AI opens; restore previous state when AI closes
+  const prevSidebarOpen = useRef(true)
   useEffect(() => {
     const handler = (e: Event) => {
       const visible = (e as CustomEvent<boolean>).detail
-      if (visible) setSidebarOpen(false)
+      if (visible) {
+        prevSidebarOpen.current = sidebarOpen
+        setSidebarOpen(false)
+      } else {
+        setSidebarOpen(prevSidebarOpen.current)
+      }
     }
     window.addEventListener('contextual-ai-visibility', handler)
     return () => window.removeEventListener('contextual-ai-visibility', handler)
-  }, [])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sidebarOpen])
 
   const prevNotesRef = useRef<Note[]>(notes)
 
@@ -827,19 +837,21 @@ export function NotesTabsView({
       data-testid="notes-grid-tabs"
     >
       {/* ── Left panel: note list ── */}
-      <div className="flex w-64 shrink-0 flex-col border-r border-border/60 bg-background">
+      <div className={cn('flex shrink-0 flex-col border-r border-border/60 bg-background transition-all duration-200', listOpen ? 'w-64' : 'w-9')}>
 
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-border/60 bg-background/95 px-4 py-3.5">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold tracking-tight text-foreground">
-              {t('notes.title')}
-            </span>
-            <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
-              {items.length}
-            </span>
-          </div>
-          <div className="flex items-center gap-1">
+        {/* Header — always visible */}
+        <div className={cn('flex items-center border-b border-border/60 bg-background/95 py-3.5 transition-all', listOpen ? 'justify-between px-4' : 'justify-center px-1')}>
+          {listOpen && (
+            <div className="flex items-center gap-2 min-w-0">
+              <span className="text-sm font-semibold tracking-tight text-foreground">
+                {t('notes.title')}
+              </span>
+              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary">
+                {items.length}
+              </span>
+            </div>
+          )}
+          <div className={cn('flex items-center', listOpen ? 'gap-1' : 'flex-col gap-1')}>
             {/* Sort / filter button */}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -903,10 +915,23 @@ export function NotesTabsView({
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+            {/* Collapse list panel */}
+            {listOpen && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0 text-muted-foreground/70 hover:bg-primary/8 hover:text-primary"
+                onClick={() => setListOpen(false)}
+                title="R\u00e9duire la liste"
+              >
+                <PanelLeftClose className="h-3.5 w-3.5" />
+              </Button>
+            )}
           </div>
         </div>
 
         {/* Scrollable note list */}
+        {listOpen && (
         <div
           className="flex-1 overflow-y-auto overscroll-contain bg-background"
           role="listbox"
@@ -950,6 +975,21 @@ export function NotesTabsView({
             </DndContext>
           )}
         </div>
+        )}
+        {/* Expand button shown in collapsed state */}
+        {!listOpen && (
+          <div className="flex flex-col items-center pt-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 w-7 p-0 text-muted-foreground/70 hover:bg-primary/8 hover:text-primary"
+              onClick={() => setListOpen(true)}
+              title="Afficher la liste"
+            >
+              <PanelLeftOpen className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        )}
       </div>
 
       {/* ── Right content panel ── */}