diff --git a/components/text-selection-toolbar.tsx b/components/text-selection-toolbar.tsx index 839980e8..9f3f7dbb 100644 --- a/components/text-selection-toolbar.tsx +++ b/components/text-selection-toolbar.tsx @@ -583,6 +583,7 @@ function MorePopover({ onBookmark, onSaveToCollection, onMention, + isMobile, }: { open: boolean; position: Position; @@ -590,18 +591,18 @@ function MorePopover({ onBookmark: () => void; onSaveToCollection: () => void; onMention: () => void; + isMobile: boolean; }) { const ref = useRef(null); const { copied, copy } = useCopyFeedback(); useEffect(() => { - if (!open) return; + if (!open || isMobile) return; function handleClick(e: MouseEvent) { if (ref.current && !ref.current.contains(e.target as Node)) { onClose(); } } - // Delay to avoid the same click that opened it from immediately closing const timer = setTimeout(() => { document.addEventListener("mousedown", handleClick); }, 10); @@ -609,7 +610,7 @@ function MorePopover({ clearTimeout(timer); document.removeEventListener("mousedown", handleClick); }; - }, [open, onClose]); + }, [open, onClose, isMobile]); if (!open) return null; @@ -617,54 +618,99 @@ function MorePopover({ { key: "bookmark", label: "Add Bookmark", - icon: , + description: "Save your place", + icon: , onClick: onBookmark, }, { key: "collection", label: "Save to Collection", - icon: , + description: "Organize into a collection", + icon: , onClick: onSaveToCollection, }, { key: "copy-link", label: copied ? "Link Copied!" : "Copy Link", + description: "Copy a link to this page", icon: copied ? ( - + ) : ( - + ), onClick: () => copy(window.location.href), }, { key: "mention", label: "Mention", - icon: , + description: "Tag someone with this quote", + icon: , onClick: onMention, }, ]; - // Position the popover — clamp to all 4 viewport edges - const popoverW = 192; // w-48 = 12rem = 192px - const popoverH = actions.length * 36 + 8; // approximate height + // Mobile: bottom drawer + if (isMobile) { + return ( + !o && onClose()}> + + + More Options + +
+ {actions.map((action) => ( + + ))} +
+
+ + + +
+
+
+ ); + } + + // Desktop: floating popover + const popoverW = 220; + const popoverH = actions.length * 44 + 8; const pad = 8; let popLeft = position.x; let popTop = position.y + 8; - // Right edge if (popLeft + popoverW > window.innerWidth - pad) { popLeft = window.innerWidth - popoverW - pad; } - // Left edge if (popLeft < pad) { popLeft = pad; } - // Bottom edge — if it overflows, place above the trigger instead if (popTop + popoverH > window.innerHeight - pad) { popTop = position.y - popoverH - 8; } - // Top edge if (popTop < pad) { popTop = pad; } @@ -680,7 +726,7 @@ function MorePopover({
{actions.map((action) => (