From 0a2faf80e09df27843c20e0562d63fdd1b72b5e2 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 27 Sep 2024 22:05:46 +0100
Subject: [PATCH] add time set hover to scores

---
 src/app/layout.tsx                       |  2 +-
 src/components/score/score-info.tsx      | 18 ++++--------------
 src/components/score/score-rank-info.tsx | 15 ++++++++++++++-
 src/components/tooltip.tsx               |  6 +-----
 4 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 573b7f7..aa097db 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -66,7 +66,7 @@ export default function RootLayout({
           <Toaster />
           <BackgroundImage />
           <PreloadResources />
-          <TooltipProvider>
+          <TooltipProvider delayDuration={100}>
             <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
               <QueryProvider>
                 <AnimatePresence>
diff --git a/src/components/score/score-info.tsx b/src/components/score/score-info.tsx
index d461ccd..d5a01ce 100644
--- a/src/components/score/score-info.tsx
+++ b/src/components/score/score-info.tsx
@@ -1,5 +1,5 @@
-import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
 import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
 import { songDifficultyToColor } from "@/common/song-utils";
 import FallbackLink from "@/components/fallback-link";
@@ -14,13 +14,9 @@ type Props = {
 };
 
 export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
-  const diff = getDifficultyFromScoreSaberDifficulty(
-    leaderboard.difficulty.difficulty,
-  );
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
   const mappersProfile =
-    beatSaverMap != undefined
-      ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}`
-      : undefined;
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
 
   return (
     <div className="flex gap-3 items-center">
@@ -72,13 +68,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
           </p>
           <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
           <FallbackLink href={mappersProfile}>
-            <p
-              className={clsx(
-                "text-sm",
-                mappersProfile &&
-                  "hover:brightness-75 transform-gpu transition-all",
-              )}
-            >
+            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
               {leaderboard.levelAuthorName}
             </p>
           </FallbackLink>
diff --git a/src/components/score/score-rank-info.tsx b/src/components/score/score-rank-info.tsx
index 8a309a1..b0bd6cb 100644
--- a/src/components/score/score-rank-info.tsx
+++ b/src/components/score/score-rank-info.tsx
@@ -1,7 +1,9 @@
 import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
 import { formatNumberWithCommas } from "@/common/number-utils";
 import { timeAgo } from "@/common/time-utils";
+import { format } from "@formkit/tempo";
 import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Tooltip from "../tooltip";
 
 type Props = {
   score: ScoreSaberScoreToken;
@@ -14,7 +16,18 @@ export default function ScoreRankInfo({ score }: Props) {
         <GlobeAmericasIcon className="w-5 h-5" />
         <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
       </div>
-      <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
+      <Tooltip
+        display={
+          <p>
+            {format({
+              date: new Date(score.timeSet),
+              format: "DD MMMM YYYY HH:mm a",
+            })}
+          </p>
+        }
+      >
+        <p className="text-sm cursor-default">{timeAgo(new Date(score.timeSet))}</p>
+      </Tooltip>
     </div>
   );
 }
diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx
index a14a4dd..00913a5 100644
--- a/src/components/tooltip.tsx
+++ b/src/components/tooltip.tsx
@@ -1,8 +1,4 @@
-import {
-  Tooltip as ShadCnTooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "./ui/tooltip";
+import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type Props = {
   /**