import { motion, type Variants } from 'framer-motion'; import { useCallback, useEffect, useRef, useState } from 'react'; import { toast } from 'react-toastify'; import { IconButton } from '~/components/ui/IconButton'; import { ThemeSwitch } from '~/components/ui/ThemeSwitch'; import { db, getAll, type ChatHistory } from '~/lib/persistence'; import { cubicEasingFn } from '~/utils/easings'; import { HistoryItem } from './HistoryItem'; import { binDates } from './date-binning'; const menuVariants = { closed: { opacity: 0, visibility: 'hidden', left: '-150px', transition: { duration: 0.2, ease: cubicEasingFn, }, }, open: { opacity: 1, visibility: 'initial', left: 0, transition: { duration: 0.2, ease: cubicEasingFn, }, }, } satisfies Variants; export function Menu() { const menuRef = useRef(null); const [list, setList] = useState([]); const [open, setOpen] = useState(false); const loadEntries = useCallback(() => { if (db) { getAll(db) .then((list) => list.filter((item) => item.urlId && item.description)) .then(setList) .catch((error) => toast.error(error.message)); } }, []); useEffect(() => { if (open) { loadEntries(); } }, [open]); useEffect(() => { const enterThreshold = 80; const exitThreshold = 40; function onMouseMove(event: MouseEvent) { if (event.pageX < enterThreshold) { setOpen(true); } if (menuRef.current && event.clientX > menuRef.current.getBoundingClientRect().right + exitThreshold) { setOpen(false); } } window.addEventListener('mousemove', onMouseMove); return () => { window.removeEventListener('mousemove', onMouseMove); }; }, []); return (
{/* Placeholder */}
Start new chat
Your Chats
{list.length === 0 &&
No previous conversations
} {binDates(list).map(({ category, items }) => (
{category}
{items.map((item) => ( ))}
))}
<> Logout
); }