fix(chat): scroll to preview on inject + sidebar restore + collapsible note list (Option A)
This commit is contained in:
@@ -157,7 +157,7 @@ export function ContextualAIChat({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
|
||||||
}, [messages])
|
}, [messages, resourcePreview])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.dispatchEvent(new CustomEvent('contextual-ai-visibility', { detail: true }))
|
window.dispatchEvent(new CustomEvent('contextual-ai-visibility', { detail: true }))
|
||||||
|
|||||||
@@ -50,6 +50,8 @@ import {
|
|||||||
History,
|
History,
|
||||||
PanelRightClose,
|
PanelRightClose,
|
||||||
PanelRightOpen,
|
PanelRightOpen,
|
||||||
|
PanelLeftClose,
|
||||||
|
PanelLeftOpen,
|
||||||
Bell,
|
Bell,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
@@ -640,16 +642,24 @@ export function NotesTabsView({
|
|||||||
const [noteToDelete, setNoteToDelete] = useState<Note | null>(null)
|
const [noteToDelete, setNoteToDelete] = useState<Note | null>(null)
|
||||||
const [sortOrder, setSortOrder] = useState<SortOrder>('date-desc')
|
const [sortOrder, setSortOrder] = useState<SortOrder>('date-desc')
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
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(() => {
|
useEffect(() => {
|
||||||
const handler = (e: Event) => {
|
const handler = (e: Event) => {
|
||||||
const visible = (e as CustomEvent<boolean>).detail
|
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)
|
window.addEventListener('contextual-ai-visibility', handler)
|
||||||
return () => window.removeEventListener('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)
|
const prevNotesRef = useRef<Note[]>(notes)
|
||||||
|
|
||||||
@@ -827,11 +837,12 @@ export function NotesTabsView({
|
|||||||
data-testid="notes-grid-tabs"
|
data-testid="notes-grid-tabs"
|
||||||
>
|
>
|
||||||
{/* ── Left panel: note list ── */}
|
{/* ── 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 */}
|
{/* Header — always visible */}
|
||||||
<div className="flex items-center justify-between border-b border-border/60 bg-background/95 px-4 py-3.5">
|
<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')}>
|
||||||
<div className="flex items-center gap-2">
|
{listOpen && (
|
||||||
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
<span className="text-sm font-semibold tracking-tight text-foreground">
|
<span className="text-sm font-semibold tracking-tight text-foreground">
|
||||||
{t('notes.title')}
|
{t('notes.title')}
|
||||||
</span>
|
</span>
|
||||||
@@ -839,7 +850,8 @@ export function NotesTabsView({
|
|||||||
{items.length}
|
{items.length}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1">
|
)}
|
||||||
|
<div className={cn('flex items-center', listOpen ? 'gap-1' : 'flex-col gap-1')}>
|
||||||
{/* Sort / filter button */}
|
{/* Sort / filter button */}
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
@@ -903,10 +915,23 @@ export function NotesTabsView({
|
|||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Scrollable note list */}
|
{/* Scrollable note list */}
|
||||||
|
{listOpen && (
|
||||||
<div
|
<div
|
||||||
className="flex-1 overflow-y-auto overscroll-contain bg-background"
|
className="flex-1 overflow-y-auto overscroll-contain bg-background"
|
||||||
role="listbox"
|
role="listbox"
|
||||||
@@ -950,6 +975,21 @@ export function NotesTabsView({
|
|||||||
</DndContext>
|
</DndContext>
|
||||||
)}
|
)}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* ── Right content panel ── */}
|
{/* ── Right content panel ── */}
|
||||||
|
|||||||
37
memento-note/scripts/add-expand-btn.js
Normal file
37
memento-note/scripts/add-expand-btn.js
Normal 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);
|
||||||
Reference in New Issue
Block a user