jared
b24ab838f8
Features: - Remind Me Later: message context menu item opens a preset time picker (20 min / 1 hr / 3 hr / tomorrow 9am); reminders persist to Matrix account data (io.lotus.reminders); ReminderMonitor fires a Lotus Toast when due, checks every 30s and on tab focus - Mobile Bookmarks: BookmarksPanel now renders on all screen sizes; passes isMobile prop for full-screen absolute overlay on mobile Bug fixes: - usePan.ts: memory leak from stale closure in document listener cleanup - EventReaders.tsx: replace hardcoded hex colors with TDS CSS variables - CallControls.tsx: replace hardcoded hex colors with TDS CSS variables - CustomHtml.css.ts: replace hardcoded yellow/black highlight with theme tokens Docs: - LOTUS_TODO.md: restore deleted content (Confirmed facts table, Pending Audits, P5-30 completed status, full feature descriptions), keep new additions (P4-7/8/9, P5-41–57, Implementation Reference), eliminate duplicate sections - LOTUS_BUGS.md: merge RESILIENCE_AUDIT.md findings into Architectural & Resilience Audit table; delete RESILIENCE_AUDIT.md - Remove stale LOTUS_DENOISE_ENGINEERING_REVIEW.md and LOTUS_TODO_REFERENCE.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import { MouseEventHandler, useEffect, useRef, useState } from 'react';
|
|
|
|
export type Pan = {
|
|
translateX: number;
|
|
translateY: number;
|
|
};
|
|
|
|
const INITIAL_PAN = {
|
|
translateX: 0,
|
|
translateY: 0,
|
|
};
|
|
|
|
export const usePan = (active: boolean) => {
|
|
const [pan, setPan] = useState<Pan>(INITIAL_PAN);
|
|
const [cursor, setCursor] = useState<'grab' | 'grabbing' | 'initial'>(
|
|
active ? 'grab' : 'initial',
|
|
);
|
|
|
|
// Track the exact handler references that were passed to addEventListener so
|
|
// we can remove them even if the component re-renders or unmounts mid-drag.
|
|
const attachedRef = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
|
|
null,
|
|
);
|
|
|
|
useEffect(() => {
|
|
setCursor(active ? 'grab' : 'initial');
|
|
}, [active]);
|
|
|
|
const handleMouseDown: MouseEventHandler<HTMLElement> = (evt) => {
|
|
if (!active) return;
|
|
evt.preventDefault();
|
|
setCursor('grabbing');
|
|
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setPan((p) => ({
|
|
translateX: p.translateX + e.movementX,
|
|
translateY: p.translateY + e.movementY,
|
|
}));
|
|
};
|
|
|
|
const handleMouseUp = (e: MouseEvent) => {
|
|
e.preventDefault();
|
|
setCursor('grab');
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
attachedRef.current = null;
|
|
};
|
|
|
|
attachedRef.current = { move: handleMouseMove, up: handleMouseUp };
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!active) setPan(INITIAL_PAN);
|
|
}, [active]);
|
|
|
|
// Remove listeners if the component unmounts while a drag is in progress.
|
|
useEffect(
|
|
() => () => {
|
|
if (attachedRef.current) {
|
|
document.removeEventListener('mousemove', attachedRef.current.move);
|
|
document.removeEventListener('mouseup', attachedRef.current.up);
|
|
attachedRef.current = null;
|
|
}
|
|
},
|
|
[],
|
|
);
|
|
|
|
return {
|
|
pan,
|
|
cursor,
|
|
onMouseDown: handleMouseDown,
|
|
};
|
|
};
|