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

fix(chat): inject preview inline in chat tab + resizable note list panel

Browse Source
This commit is contained in:
sepehr
2026-05-03 01:05:23 +02:00
parent afa8043fd5
commit 82db722735
3 changed files with 142 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -507,6 +507,56 @@ export function ContextualAIChat({
</div>
</div>
)}
{/* Enrich-in-progress indicator */}
{resourceEnriching && !isLoading && (
<div className="flex gap-2">
<div className="w-6 h-6 rounded-full bg-emerald-500/10 text-emerald-600 flex items-center justify-center flex-shrink-0 border border-emerald-500/20">
<Wand2 className="h-3 w-3" />
</div>
<div className="bg-muted/40 border border-border/40 p-3 rounded-2xl rounded-tl-sm flex items-center gap-2">
<Loader2 className="h-3.5 w-3.5 animate-spin text-emerald-600" />
<span className="text-xs text-muted-foreground">{t('ai.resource.enriching') || 'Traitement IA...'}</span>
</div>
</div>
)}
{/* Inline preview from inject buttons */}
{resourcePreview && !resourceEnriching && (
<div className="rounded-xl border border-primary/30 bg-primary/5 overflow-hidden">
<div className="flex items-center justify-between px-3 py-2 border-b border-primary/20">
<span className="text-[10px] font-semibold uppercase tracking-wider text-primary">
{resourcePreview.source === 'chat' ? (t('ai.resource.fromChat') || 'Remplacement')
: resourcePreview.source === 'replace' ? (t('ai.resource.replacement') || 'Remplacement')
: resourcePreview.source === 'complete' ? (t('ai.resource.completedByAI') || 'Complété par IA')
: (t('ai.resource.mergedByAI') || 'Fusionné par IA')}
</span>
<button onClick={() => setResourcePreview(null)} className="text-muted-foreground hover:text-foreground">
<X className="h-3 w-3" />
</button>
</div>
<div className="px-3 py-2 max-h-48 overflow-y-auto">
<MarkdownContent content={resourcePreview.text} />
</div>
<div className="flex gap-2 px-3 py-2 border-t border-primary/20">
<button
onClick={() => setResourcePreview(null)}
className="flex-1 text-[11px] py-1.5 rounded-lg border border-border/60 text-muted-foreground hover:bg-muted transition-colors"
>
{t('common.cancel') || 'Annuler'}
</button>
<button
onClick={() => { if (onApplyToNote && resourcePreview) { onApplyToNote(resourcePreview.text); setResourcePreview(null); setResourceText(''); toast.success(t('ai.appliedToNote')) } }}
disabled={!onApplyToNote}
className="flex-1 text-[11px] py-1.5 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 flex items-center justify-center gap-1"
>
<Check className="h-3 w-3" />
{t('ai.resource.applyToNote') || 'Appliquer'}
</button>
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>

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

@@ -756,6 +756,27 @@ export function NotesTabsView({
const selected = items.find((n) => n.id === selectedId) ?? null
const colorKey = selected ? getColorKey(selected) : 'default'
// Resizable left panel (180px min, 420px max, default 256px)
const [listPanelWidth, setListPanelWidth] = useState(256)
const isDraggingRef = useRef(false)
const handleResizeStart = (e: React.MouseEvent) => {
e.preventDefault()
isDraggingRef.current = true
const startX = e.clientX
const startW = listPanelWidth
const onMove = (ev: MouseEvent) => {
if (!isDraggingRef.current) return
setListPanelWidth(Math.min(420, Math.max(180, startW + (ev.clientX - startX))))
}
const onUp = () => {
isDraggingRef.current = false
window.removeEventListener('mousemove', onMove)
window.removeEventListener('mouseup', onUp)
}
window.addEventListener('mousemove', onMove)
window.addEventListener('mouseup', onUp)
}
const handleCreateNote = (noteType: NoteType = 'richtext') => {
startCreating(async () => {
try {
@@ -815,8 +836,8 @@ export function NotesTabsView({
style={{ height: 'max(360px, min(85vh, calc(100vh - 9rem)))' }}
data-testid="notes-grid-tabs"
>
{/* ── Left panel: note list ── */}
<div className="flex w-80 shrink-0 flex-col border-r border-border/60 bg-background">
{/* ── Left panel: note list — resizable ── */}
<div className="flex shrink-0 flex-col border-r border-border/60 bg-background" style={{ width: listPanelWidth }}>
{/* Header */}
<div className="flex items-center justify-between border-b border-border/60 bg-background/95 px-4 py-3.5">
@@ -941,6 +962,15 @@ export function NotesTabsView({
</div>
</div>
{/* Resize handle */}
<div
onMouseDown={handleResizeStart}
className="w-1 shrink-0 cursor-col-resize bg-border/40 hover:bg-primary/40 transition-colors active:bg-primary/60 relative group"
title="Redimensionner"
>
<div className="absolute inset-y-0 -left-1 -right-1 group-hover:bg-primary/10 transition-colors" />
</div>
{/* ── Right content panel ── */}
{selected ? (
<div className="flex min-w-0 flex-1 overflow-hidden">