From 5d4622e046d589251c20a83ef4540929bd32d2d4 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Fri, 10 Jul 2026 00:22:14 +0200
Subject: [PATCH] feat: tooltip with concrete date on relative timestamps in
 SPA

---
 spa/src/components/movie-card.tsx   |  2 +-
 spa/src/components/profile-view.tsx |  4 ++--
 spa/src/components/review-card.tsx  |  4 ++--
 spa/src/components/time-ago.tsx     | 20 ++++++++++++++++++++
 4 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 spa/src/components/time-ago.tsx

diff --git a/spa/src/components/movie-card.tsx b/spa/src/components/movie-card.tsx
index ac1fa4c..605dfcb 100644
--- a/spa/src/components/movie-card.tsx
+++ b/spa/src/components/movie-card.tsx
@@ -8,7 +8,7 @@ type MovieCardProps = {
   movie: MovieDto
   rating?: number
   comment?: string
-  subtitle?: string
+  subtitle?: React.ReactNode
   variant?: "compact" | "full"
   action?: React.ReactNode
 }
diff --git a/spa/src/components/profile-view.tsx b/spa/src/components/profile-view.tsx
index d42b07f..5f2be06 100644
--- a/spa/src/components/profile-view.tsx
+++ b/spa/src/components/profile-view.tsx
@@ -13,7 +13,7 @@ import { EmptyState } from "@/components/empty-state"
 import { SwipeTabs } from "@/components/swipe-tabs"
 import { VirtualList } from "@/components/virtual-list"
 import { useInfiniteDiary } from "@/hooks/use-diary"
-import { timeAgo } from "@/lib/date"
+import { TimeAgo } from "@/components/time-ago"
 import type { UserProfileResponse } from "@/lib/api/users"
 
 type ProfileViewProps = {
@@ -168,7 +168,7 @@ function DiaryTab({ sortBy, userId, search }: { sortBy: string; userId?: string;
           movie={e.movie}
           rating={e.review.rating}
           comment={e.review.comment}
-          subtitle={t("profile.watchedAgo", { when: timeAgo(e.review.watched_at) })}
+          subtitle={<><TimeAgo date={e.review.watched_at} /></>}
           variant="compact"
         />
       )}
diff --git a/spa/src/components/review-card.tsx b/spa/src/components/review-card.tsx
index a0ecdd0..d795fbd 100644
--- a/spa/src/components/review-card.tsx
+++ b/spa/src/components/review-card.tsx
@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router"
 import { Globe, Pencil } from "lucide-react"
-import { timeAgo } from "@/lib/date"
+import { TimeAgo } from "@/components/time-ago"
 import { StarDisplay } from "@/components/star-display"
 import { WatchMediumBadge } from "@/components/watch-medium-badge"
 import { EditableContextMenu } from "@/components/editable-context-menu"
@@ -42,7 +42,7 @@ export function ReviewCard({ movie, review, userName, userId, isFederated, actor
               )}
               {isFederated && <Globe className="size-3 text-muted-foreground/60" />}
               <span>·</span>
-              <span>{timeAgo(review.watched_at)}</span>
+              <TimeAgo date={review.watched_at} />
             </div>
           )}
           <div className="flex items-center justify-between">
diff --git a/spa/src/components/time-ago.tsx b/spa/src/components/time-ago.tsx
new file mode 100644
index 0000000..c4b76ec
--- /dev/null
+++ b/spa/src/components/time-ago.tsx
@@ -0,0 +1,20 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { timeAgo, shortDate } from "@/lib/date"
+
+type TimeAgoProps = {
+  date: string
+  className?: string
+}
+
+export function TimeAgo({ date, className }: TimeAgoProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <time dateTime={date} className={className}>{timeAgo(date)}</time>
+        </TooltipTrigger>
+        <TooltipContent>{shortDate(date)}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}