From 4f711a54be2788a42aa3f52635eb217e712028e3 Mon Sep 17 00:00:00 2001
From: pious2847 <abdulhafis2847@gmail.com>
Date: Wed, 30 Apr 2025 02:02:28 +0000
Subject: [PATCH] Refactor tooltip component and integrate context menu
 triggers for enhanced mobile interactions; update Reader and HoverCards
 components for improved responsiveness and styling.

---
 app/creator/reader/page.tsx     |  35 +++----
 components/cards/HoverCards.tsx | 175 ++++++++++++++++++++++++--------
 components/ui/tooltip.tsx       |  61 +++++++++++
 hooks/useContextMenuTriggers.ts |  45 ++++++--
 package.json                    |   3 +-
 pnpm-lock.yaml                  |  58 +++++++++++
 6 files changed, 309 insertions(+), 68 deletions(-)
 create mode 100644 components/ui/tooltip.tsx

diff --git a/app/creator/reader/page.tsx b/app/creator/reader/page.tsx
index 2109a6b..81fb41a 100644
--- a/app/creator/reader/page.tsx
+++ b/app/creator/reader/page.tsx
@@ -9,9 +9,9 @@ import { Button } from '@/components/ui/button';
 
 
 interface Page {
-    id: number;
-    content: React.ReactNode;
-    videoSrc: string;
+  id: number;
+  content: React.ReactNode;
+  videoSrc: string;
 }
 
 export default function Reader() {
@@ -216,21 +216,19 @@ export default function Reader() {
       <div className="w-full h-[80px] fixed top-0 z-30 flex items-center justify-between px-6 bg-transparent">
         {/* Logo */}
 
+          <Link href="/creator" >
         <div className="flex items-center text-white">
-          <Link href="/creator" className="mr-4 ">
-            <Button size="icon" className="bg-white">
-              <ArrowLeft2 size="24" color="#555555" />
-            </Button>
-          </Link>
-          <Image
-            src="/images/logo2.png"
-            alt="Wodey"
-            width={60}
-            height={60}
-            className="mr-2"
-          />
-          <span className="text-xl font-semibold">Wodey</span>
+            
+            <Image
+              src="/images/logo2.png"
+              alt="Wodey"
+              width={60}
+              height={60}
+              className="mr-2"
+              />
+            <span className="text-xl font-semibold">Wodey</span>
         </div>
+              </Link>
 
         {/* Brutal Logo - Center */}
         <div className="absolute left-1/2 transform -translate-x-1/2">
@@ -255,9 +253,8 @@ export default function Reader() {
         {pages.map((page, index) => (
           <section
             key={page.id}
-            className={`absolute w-full h-full transition-opacity duration-1000 ${
-              currentPageIndex === index ? "opacity-100 z-10" : "opacity-0 z-0"
-            }`}
+            className={`absolute w-full h-full transition-opacity duration-1000 ${currentPageIndex === index ? "opacity-100 z-10" : "opacity-0 z-0"
+              }`}
           >
             {/* Background Video */}
             <video
diff --git a/components/cards/HoverCards.tsx b/components/cards/HoverCards.tsx
index fef6cb0..4764eb9 100644
--- a/components/cards/HoverCards.tsx
+++ b/components/cards/HoverCards.tsx
@@ -1,13 +1,16 @@
 'use client'
 
-import React from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
+
 import {
-    HoverCard,
-    HoverCardContent,
-    HoverCardTrigger,
-} from "@/components/ui/hover-card"
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { useContextMenuTriggers } from "@/hooks/useContextMenuTriggers"
 
 export interface HoverCardsProps {
     triggerText: string
@@ -26,43 +29,133 @@ export default function HoverCards({
     linkText = 'Purchase & Read More',
     isImage
 }: HoverCardsProps) {
+    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    const [isMobile, setIsMobile] = useState(false);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    // Check if device is mobile
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+
+        // Set initial value
+        checkMobile();
+
+        // Add event listener for window resize
+        window.addEventListener('resize', checkMobile);
+
+        // Cleanup
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+
+    // Add click outside listener when tooltip is open
+    useEffect(() => {
+        if (isTooltipOpen && isMobile) {
+            const handleOutsideClick = (e: MouseEvent) => {
+                if (tooltipRef.current && !tooltipRef.current.contains(e.target as Node)) {
+                    setIsTooltipOpen(false);
+                }
+            };
+
+            // Add a slight delay before adding the event listener to prevent immediate closing
+            const timeoutId = setTimeout(() => {
+                document.addEventListener('click', handleOutsideClick);
+            }, 100);
+
+            return () => {
+                clearTimeout(timeoutId);
+                document.removeEventListener('click', handleOutsideClick);
+            };
+        }
+    }, [isTooltipOpen, isMobile]);
+    
+    // Custom handlers for mobile interactions
+    const { handlers } = useContextMenuTriggers({
+        longPressDelay: 500,
+        doubleClickDelay: 300,
+        onLongPress: () => {
+            if (isMobile) {
+                console.log("Long press triggered tooltip");
+                setIsTooltipOpen(true);
+            }
+        },
+        onDoubleTap: () => {
+            if (isMobile) {
+                console.log("Double tap toggling tooltip");
+                setIsTooltipOpen(!isTooltipOpen);
+            }
+        }
+    });
+
+    // Close tooltip function
+    const handleCloseTooltip = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsTooltipOpen(false);
+    };
+
     return (
-        <HoverCard>
-            <HoverCardTrigger asChild>
-                <span className="text-blue-400 cursor-pointer underline inline">{triggerText}</span>
-            </HoverCardTrigger>
-            <HoverCardContent className="w-80">
-                <div className="max-w-xs bg-white rounded-lg overflow-hidden shadow-lg">
-                    <div className="relative h-48 w-full">  
-                        {isImage ?
-                        <Image src={videourl} alt={videourl} width={100} height={100} className="absolute top-0 left-0 w-full h-full object-cover"   />
-                        : 
-                        <video
-                        className="absolute top-0 left-0 w-full h-full object-cover"
-                        muted
-                        loop
-                        playsInline
-                        autoPlay
-                        src={videourl}
-                        ></video>
-                    }
-                       
-                      
-                    </div>
+        <TooltipProvider>
+            <Tooltip 
+                open={isMobile ? isTooltipOpen : undefined}
+                onOpenChange={!isMobile ? setIsTooltipOpen : undefined}
+            >
+                <TooltipTrigger asChild>
+                    <span
+                        className={`text-blue-400 cursor-pointer underline inline relative ${
+                            isMobile ? 'after:content-[""] after:absolute after:bottom-[-3px] after:left-0 after:w-full after:h-[2px] after:bg-blue-400 after:opacity-70' : ''
+                        }`}
+                        {...(isMobile ? handlers : {})}
+                        title={isMobile ? "Double tap or long press to view details" : "Hover to view details"}
+                    >
+                        {triggerText}
+                    </span>
+                </TooltipTrigger>
+                <TooltipContent className="w-80 tooltip-content p-0" ref={tooltipRef}>
+                    <div className="max-w-xs bg-white rounded-lg overflow-hidden shadow-lg relative">
+                        {isMobile && (
+                            <button
+                                className="absolute top-2 right-2 z-10 bg-gray-800 text-white rounded-full w-6 h-6 flex items-center justify-center"
+                                onClick={handleCloseTooltip}
+                                aria-label="Close"
+                            >
+                                ✕
+                            </button>
+                        )}
+                        <div className="relative h-48 w-full">
+                            {isImage ? (
+                                <Image 
+                                    src={videourl} 
+                                    alt="Content preview" 
+                                    layout="fill" 
+                                    objectFit="cover"
+                                />
+                            ) : (
+                                <video
+                                    className="absolute top-0 left-0 w-full h-full object-cover"
+                                    muted
+                                    loop
+                                    playsInline
+                                    autoPlay
+                                    src={videourl}
+                                />
+                            )}
+                        </div>
 
-                    <div className="p-4">
-                        <p className="text-gray-700 text-sm mb-4">
-                            {description}
-                        </p>
+                        <div className="p-4">
+                            <p className="text-gray-700 text-sm mb-4">
+                                {description}
+                            </p>
 
-                        <Link href={link}>
-                            <span className="text-purple-700 font-medium text-sm hover:text-purple-900 transition-colors">
-                                {linkText}
-                            </span>
-                        </Link>
+                            <Link href={link}>
+                                <span className="text-purple-700 font-medium text-sm hover:text-purple-900 transition-colors">
+                                    {linkText}
+                                </span>
+                            </Link>
+                        </div>
                     </div>
-                </div>
-            </HoverCardContent>
-        </HoverCard>
-    )
-}
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}
\ No newline at end of file
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..4ee26b3
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/hooks/useContextMenuTriggers.ts b/hooks/useContextMenuTriggers.ts
index 322a270..25ef214 100644
--- a/hooks/useContextMenuTriggers.ts
+++ b/hooks/useContextMenuTriggers.ts
@@ -5,19 +5,26 @@ import { useRef, useCallback, useState } from 'react';
 interface UseContextMenuTriggersProps {
   longPressDelay?: number;
   doubleClickDelay?: number;
+  onLongPress?: () => void;
+  onDoubleTap?: () => void;
 }
 
 export const useContextMenuTriggers = ({
   longPressDelay = 500, // Default long press delay in ms
   doubleClickDelay = 300, // Default double click delay in ms
+  onLongPress,
+  onDoubleTap
 }: UseContextMenuTriggersProps = {}) => {
   const [isLongPressing, setIsLongPressing] = useState(false);
   const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
   const lastClickTimeRef = useRef<number>(0);
   const targetRef = useRef<HTMLElement | null>(null);
+  const preventClickRef = useRef<boolean>(false);
 
   // Function to simulate a right-click event
   const simulateRightClick = useCallback((element: HTMLElement) => {
+    console.log("Simulating right click");
+    
     // Create and dispatch a custom contextmenu event
     const contextMenuEvent = new MouseEvent('contextmenu', {
       bubbles: true,
@@ -31,6 +38,7 @@ export const useContextMenuTriggers = ({
 
   // Handle touch start (for long press)
   const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    console.log("Touch start detected");
     if (e.touches.length === 1) {
       const element = e.currentTarget as HTMLElement;
       targetRef.current = element;
@@ -41,18 +49,27 @@ export const useContextMenuTriggers = ({
       }
       
       setIsLongPressing(true);
+      preventClickRef.current = false;
       
       // Start a timer for long press
       longPressTimerRef.current = setTimeout(() => {
-        if (isLongPressing && targetRef.current) {
-          simulateRightClick(targetRef.current);
+        if (targetRef.current) {
+          console.log("Long press detected");
+          preventClickRef.current = true;
+          
+          if (onLongPress) {
+            onLongPress();
+          } else {
+            simulateRightClick(targetRef.current);
+          }
         }
       }, longPressDelay);
     }
-  }, [longPressDelay, isLongPressing, simulateRightClick]);
+  }, [longPressDelay, simulateRightClick, onLongPress]);
 
   // Handle touch end (cancel long press)
   const handleTouchEnd = useCallback(() => {
+    console.log("Touch end detected");
     if (longPressTimerRef.current) {
       clearTimeout(longPressTimerRef.current);
     }
@@ -61,27 +78,41 @@ export const useContextMenuTriggers = ({
 
   // Handle touch move (cancel long press if moving)
   const handleTouchMove = useCallback(() => {
+    console.log("Touch move detected");
     if (longPressTimerRef.current) {
       clearTimeout(longPressTimerRef.current);
     }
     setIsLongPressing(false);
   }, []);
 
-  // Handle double click
+  // Handle click and double click/tap
   const handleClick = useCallback((e: React.MouseEvent) => {
+    if (preventClickRef.current) {
+      preventClickRef.current = false;
+      return;
+    }
+    
     const currentTime = new Date().getTime();
     const element = e.currentTarget as HTMLElement;
     
     // Check if this is a double click
     if (currentTime - lastClickTimeRef.current < doubleClickDelay) {
+      console.log("Double tap detected");
+      
       // Double click detected
-      simulateRightClick(element);
+      if (onDoubleTap) {
+        onDoubleTap();
+      } else {
+        simulateRightClick(element);
+      }
+      
       lastClickTimeRef.current = 0; // Reset to prevent triple-click issues
     } else {
       // First click
+      console.log("Single tap detected");
       lastClickTimeRef.current = currentTime;
     }
-  }, [doubleClickDelay, simulateRightClick]);
+  }, [doubleClickDelay, simulateRightClick, onDoubleTap]);
 
   return {
     handlers: {
@@ -92,4 +123,4 @@ export const useContextMenuTriggers = ({
     },
     simulateRightClick,
   };
-};
+};
\ No newline at end of file
diff --git a/package.json b/package.json
index b06ecc8..480f77f 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,12 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.2.3",
     "@radix-ui/react-context-menu": "^2.2.12",
     "@radix-ui/react-hover-card": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.2.3",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "iconsax-react": "^0.0.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8fae87f..2da3413 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.9
         version: 1.1.9(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -608,6 +611,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tooltip@1.2.4':
+    resolution: {integrity: sha512-DyW8VVeeMSSLFvAmnVnCwvI3H+1tpJFHT50r+tdOoMse9XqYDBCcyux8u3G2y+LOpt7fPQ6KKH0mhs+ce1+Z5w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -689,6 +705,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.0':
+    resolution: {integrity: sha512-rQj0aAWOpCdCMRbI6pLQm8r7S2BM3YhTa0SzOYD55k+hJA8oo9J+H+9wLM9oMlZWOX/wJWPTzfDfmZkf7LvCfg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
@@ -2671,6 +2700,26 @@ snapshots:
       '@types/react': 19.1.2
       '@types/react-dom': 19.1.2(@types/react@19.1.2)
 
+  '@radix-ui/react-tooltip@1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.6(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.0(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.2)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -2732,6 +2781,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.2
 
+  '@radix-ui/react-visually-hidden@1.2.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.2
+      '@types/react-dom': 19.1.2(@types/react@19.1.2)
+
   '@radix-ui/rect@1.1.1': {}
 
   '@rtsao/scc@1.1.0': {}