62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
import { html, useState, useEffect, useCallback } from '../lib/preact.js';
|
|
import { SessionCard } from './SessionCard.js';
|
|
|
|
export function Modal({ session, conversations, onClose, onRespond, onFetchConversation, onDismiss }) {
|
|
const [closing, setClosing] = useState(false);
|
|
|
|
// Reset closing state when session changes
|
|
useEffect(() => {
|
|
setClosing(false);
|
|
}, [session?.session_id]);
|
|
|
|
// Animated close handler
|
|
const handleClose = useCallback(() => {
|
|
setClosing(true);
|
|
setTimeout(() => {
|
|
setClosing(false);
|
|
onClose();
|
|
}, 200);
|
|
}, [onClose]);
|
|
|
|
// Lock body scroll when modal is open
|
|
useEffect(() => {
|
|
if (!session) return;
|
|
document.body.style.overflow = 'hidden';
|
|
return () => {
|
|
document.body.style.overflow = '';
|
|
};
|
|
}, [session?.session_id]);
|
|
|
|
// Handle escape key
|
|
useEffect(() => {
|
|
if (!session) return;
|
|
const handleKeyDown = (e) => {
|
|
if (e.key === 'Escape') handleClose();
|
|
};
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [session?.session_id, handleClose]);
|
|
|
|
if (!session) return null;
|
|
|
|
const conversation = conversations[session.session_id] || [];
|
|
|
|
return html`
|
|
<div
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}"
|
|
onClick=${(e) => e.target === e.currentTarget && handleClose()}
|
|
>
|
|
<div class=${closing ? 'modal-panel-out' : 'modal-panel-in'} onClick=${(e) => e.stopPropagation()}>
|
|
<${SessionCard}
|
|
session=${session}
|
|
conversation=${conversation}
|
|
onFetchConversation=${onFetchConversation}
|
|
onRespond=${onRespond}
|
|
onDismiss=${onDismiss}
|
|
enlarged=${true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|