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

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

Browse Source
This commit is contained in:
sepehr
2026-05-03 01:23:08 +02:00
parent 88ba0a561a
commit af6e7a2cdf
3 changed files with 93 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
memento-note/components/contextual-ai-chat.tsx
View File

@@ -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 }))

70
memento-note/components/notes-tabs-view.tsx
View File

@@ -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 ── */}

37
memento-note/scripts/add-expand-btn.js Normal file
View File

@@ -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);