refactor: enhance citation components with mobile support and improved styling for better user experience

This commit is contained in:
Anish Sarkar 2026-05-15 03:56:01 +05:30
parent 01d7379914
commit 4dd5871318
4 changed files with 92 additions and 53 deletions

View file

@ -2,6 +2,7 @@
import type { ComponentProps, HTMLAttributes, ReactElement, ReactNode } from "react";
import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
import { useMediaQuery } from "@/hooks/use-media-query";
import { Popover, PopoverContent, PopoverTrigger } from "./_adapter";
type PopoverContentProps = ComponentProps<typeof PopoverContent>;
@ -113,6 +114,7 @@ export function CitationHoverPopover({
sideOffset = 6,
onContentClick,
}: CitationHoverPopoverProps) {
const isTouchLike = useMediaQuery("(hover: none), (pointer: coarse)");
const { open, scheduleOpen, scheduleClose, handleOpenChange } = useCitationHoverState(id);
const hoverProps = {
onPointerEnter: scheduleOpen,
@ -121,6 +123,10 @@ export function CitationHoverPopover({
onBlur: scheduleClose,
} satisfies CitationHoverTriggerProps;
if (isTouchLike) {
return trigger({});
}
return (
<Popover open={open} onOpenChange={handleOpenChange}>
<PopoverTrigger asChild>{trigger(hoverProps)}</PopoverTrigger>