fix: hover states optimizations

Author: cristianrdu

packages/docs/app/(home)/_components/anara.tsx

@@ -128,6 +128,7 @@ const PDFContent = ({
         <CanvasLayer />
         <TextLayer />
         <AnnotationHighlightLayer 
+          highlightClassName="dark:opacity-40 mix-blend-multiply transition-all duration-200 cursor-pointer"
           focusedAnnotationId={focusedAnnotationId}
           tooltipClassName="bg-white shadow-lg rounded-lg p-3 min-w-[200px]"
           onAnnotationClick={onAnnotationClick}

packages/lector/src/components/annotation-tooltip.tsx

@@ -14,6 +14,7 @@ interface AnnotationTooltipProps {
   isOpen?: boolean;
   className?: string;
   hoverClassName?: string;
+  hoverIsOpen?: boolean;
   renderHoverTooltipContent?: (props: {
     annotation: Annotation;
     onClose: () => void;
@@ -28,8 +29,9 @@ export const AnnotationTooltip = ({
   onOpenChange,
   className,
   hoverClassName,
-  isOpen: controlledIsOpen,
-}: AnnotationTooltipProps) => {
+  isOpen: controlledIsOpen, 
+  hoverIsOpen: controlledHoverIsOpen,
+}: AnnotationTooltipProps) => { 
   const viewportRef = usePdf((state) => state.viewportRef);
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isMouseInTooltipRef = useRef(false);
@@ -47,17 +49,20 @@ export const AnnotationTooltip = ({
   });
 
   const {
-    isOpen: hoverIsOpen,
+    isOpen: uncontrolledHoverIsOpen,
     setIsOpen: setHoverIsOpen,
     refs: hoverRefs,
+    
     floatingStyles: hoverFloatingStyles,
     getFloatingProps: getHoverFloatingProps,
     getReferenceProps: getHoverReferenceProps,
   } = useAnnotationTooltip({
+    position: "bottom",
     annotation,
   });
 
   const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
+  const hoverIsOpen = controlledHoverIsOpen || uncontrolledHoverIsOpen;
 
   const handleClick = useCallback(() => {
     if (controlledIsOpen === undefined) {

packages/lector/src/components/layers/annotation-highlight-layer.tsx

@@ -15,9 +15,11 @@ interface AnnotationHighlightLayerProps {
     onClose: () => void;
   }) => React.ReactNode;
   focusedAnnotationId?: string;
+  focusedHoverAnnotationId?: string;
   onAnnotationClick?: (annotation: Annotation) => void;
   tooltipClassName?: string;
   hoverTooltipClassName?: string;
+  highlightClassName?: string;
 }
 
 export const AnnotationHighlightLayer = ({
@@ -26,7 +28,9 @@ export const AnnotationHighlightLayer = ({
   renderTooltipContent,
   renderHoverTooltipContent,
   tooltipClassName,
+  highlightClassName,
   focusedAnnotationId,
+  focusedHoverAnnotationId,
   onAnnotationClick,
   hoverTooltipClassName
 }: AnnotationHighlightLayerProps) => {
@@ -46,6 +50,7 @@ export const AnnotationHighlightLayer = ({
           className={tooltipClassName}
           hoverClassName={hoverTooltipClassName}
           isOpen={focusedAnnotationId === annotation.id}
+          hoverIsOpen={focusedHoverAnnotationId === annotation.id}
           onOpenChange={(open) => {
             if (open && onAnnotationClick) {
               onAnnotationClick(annotation);
@@ -73,16 +78,14 @@ export const AnnotationHighlightLayer = ({
             {annotation.highlights.map((highlight, index) => (
               <div
                 key={index}
+                className={highlightClassName}
                 style={{
                   position: "absolute",
                   top: highlight.top,
                   left: highlight.left,
                   width: highlight.width,
                   height: highlight.height,
-                  backgroundColor: annotation.color || "rgba(255, 255, 0, 0.3)",
-                  mixBlendMode: "multiply",
-                  transition: "all 0.2s ease",
-                  cursor: "pointer",
+                  backgroundColor: annotation.color,
                 }}
                 data-highlight-id={annotation.id}
               />

packages/lector/src/hooks/useAnnotationTooltip.ts

@@ -16,6 +16,7 @@ import type { Annotation } from "./useAnnotations";
 interface UseAnnotationTooltipProps {
   annotation: Annotation;
   onOpenChange?: (open: boolean) => void;
+  position?: "top" | "bottom" | "left" | "right";
 }
 
 interface UseAnnotationTooltipReturn {
@@ -41,6 +42,7 @@ const defaultRect = {
 export const useAnnotationTooltip = ({
   annotation,
   onOpenChange,
+  position = "top",
 }: UseAnnotationTooltipProps): UseAnnotationTooltipReturn => {
   // Show tooltip immediately if it's a new annotation
   const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1000;
@@ -53,7 +55,7 @@ export const useAnnotationTooltip = ({
     floatingStyles,
     context,
   } = useFloating({
-    placement: "top",
+    placement: position,
     open: isOpen,
     onOpenChange: (open) => {
       setIsOpen(open);