From af6e7a2cdf382723f82b68f045c6a6c56602bd46 Mon Sep 17 00:00:00 2001
From: sepehr <sepehr1151@gmail.com>
Date: Sun, 3 May 2026 01:23:08 +0200
Subject: [PATCH] fix(chat): scroll to preview on inject + sidebar restore +
 collapsible note list (Option A)

---
 .../components/contextual-ai-chat.tsx         |  2 +-
 memento-note/components/notes-tabs-view.tsx   | 70 +++++++++++++++----
 memento-note/scripts/add-expand-btn.js        | 37 ++++++++++
 3 files changed, 93 insertions(+), 16 deletions(-)
 create mode 100644 memento-note/scripts/add-expand-btn.js

diff --git a/memento-note/components/contextual-ai-chat.tsx b/memento-note/components/contextual-ai-chat.tsx
index 3e539a7..bc6d5b0 100644
--- a/memento-note/components/contextual-ai-chat.tsx
+++ b/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 }))
diff --git a/memento-note/components/notes-tabs-view.tsx b/memento-note/components/notes-tabs-view.tsx
index e627189..df67302 100644
--- a/memento-note/components/notes-tabs-view.tsx
+++ b/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 ── */}
diff --git a/memento-note/scripts/add-expand-btn.js b/memento-note/scripts/add-expand-btn.js
new file mode 100644
index 0000000..0a0887f
--- /dev/null
+++ b/memento-note/scripts/add-expand-btn.js
@@ -0,0 +1,37 @@
+const fs = require('fs');
+const path = require('path');
+const filePath = path.join(__dirname, '..', 'components', 'notes-tabs-view.tsx');
+let lines = fs.readFileSync(filePath, 'utf8').split('\r\n');
+
+// Line 977 (index 976) closes the scrollable div
+// Line 978 (index 977) closes the left panel div
+// We need to:
+// 1. After the scrollable </div> (index 976), add )} to close {listOpen && (...
+// 2. Add expand button JSX
+// 3. Then close left panel div
+
+const expandButton = [
+  '        )}',
+  '        {/* 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>',
+  '        )}',
+];
+
+// Insert after index 976 (which is '        </div>' - the scrollable div close)
+// and remove the original '      </div>' at index 977 (left panel close)
+// then re-add left panel close
+lines.splice(977, 1, ...expandButton, '      </div>');
+
+fs.writeFileSync(filePath, lines.join('\r\n'));
+console.log('Done, total lines:', lines.length);