From 632469794ace43e1f219e434132f6cbb3b716215 Mon Sep 17 00:00:00 2001
From: highperfocused <highperfocused@pm.me>
Date: Tue, 1 Apr 2025 19:07:36 +0200
Subject: [PATCH] refactor verification status indicators in KIND20Card and
 QuickViewKind20NoteCard for improved tooltip display

---
 components/KIND20Card.tsx              |  7 +++-
 components/QuickViewKind20NoteCard.tsx | 54 +++++++++++---------------
 2 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/components/KIND20Card.tsx b/components/KIND20Card.tsx
index 8e77811..08cef61 100644
--- a/components/KIND20Card.tsx
+++ b/components/KIND20Card.tsx
@@ -138,11 +138,14 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <div className="bg-black/50 rounded-full p-1">
-                              {verificationStatus ? (
+                              {/* {verificationStatus ? (
                                 <CheckCircle className="h-5 w-5 text-green-500" />
                               ) : (
                                 <XCircle className="h-5 w-5 text-red-500" />
-                              )}
+                              )} */}
+                              {!verificationStatus ? (
+                                <XCircle className="h-5 w-5 text-red-500" />
+                              ) : (null)}
                             </div>
                           </TooltipTrigger>
                           <TooltipContent className="max-w-xs text-xs">
diff --git a/components/QuickViewKind20NoteCard.tsx b/components/QuickViewKind20NoteCard.tsx
index 646ab26..23f535d 100644
--- a/components/QuickViewKind20NoteCard.tsx
+++ b/components/QuickViewKind20NoteCard.tsx
@@ -7,7 +7,6 @@ import { Card, SmallCardContent } from "@/components/ui/card"
 import Link from "next/link"
 import Image from "next/image"
 import { extractDimensions, getChecksumSha256 } from "@/utils/utils"
-import { CheckCircle, XCircle } from "lucide-react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 interface QuickViewKind20NoteCardProps {
@@ -102,38 +101,28 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({
               onError={() => setImageError(true)}
             />
 
-            {/* Verification status indicator with tooltip */}
-            {verificationStatus !== null && (
-              <div className="absolute top-2 right-2 z-10">
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div className="bg-black/50 rounded-full p-1">
-                        {verificationStatus ? (
-                          <CheckCircle className="h-5 w-5 text-green-500" />
-                        ) : (
-                          <XCircle className="h-5 w-5 text-red-500" />
-                        )}
+            {/* Red line under image when verification fails */}
+            {verificationStatus === false && (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <div className="absolute bottom-0 left-0 right-0 h-1 bg-red-500 z-10"></div>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-xs text-xs">
+                    <div className="space-y-1">
+                      <p className="font-semibold">Image verification failed ✗</p>
+                      <div>
+                        <p className="font-medium">Event hash:</p>
+                        <p className="break-all">{eventImageHash}</p>
                       </div>
-                    </TooltipTrigger>
-                    <TooltipContent className="max-w-xs text-xs">
-                      <div className="space-y-1">
-                        <p className="font-semibold">
-                          {verificationStatus ? "Image verified ✓" : "Image verification failed ✗"}
-                        </p>
-                        <div>
-                          <p className="font-medium">Event hash:</p>
-                          <p className="break-all">{eventImageHash}</p>
-                        </div>
-                        <div>
-                          <p className="font-medium">Calculated hash:</p>
-                          <p className="break-all">{calculatedHash}</p>
-                        </div>
+                      <div>
+                        <p className="font-medium">Calculated hash:</p>
+                        <p className="break-all">{calculatedHash}</p>
                       </div>
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              </div>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             )}
           </div>
         </div>
@@ -154,4 +143,5 @@ const QuickViewKind20NoteCard: React.FC<QuickViewKind20NoteCardProps> = ({
   )
 }
 
-export default QuickViewKind20NoteCard
\ No newline at end of file
+export default QuickViewKind20NoteCard
+